@extends('layouts.administracion')

@section('css')

@endsection


@section('js')
    <script src="{{ asset('libs/datatables/datatables.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('libs/litepicker/dist/litepicker.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/admin/registro.js') }}" type="text/javascript"></script>
    <script>
        agenda='{!!$agenda!!}';
    </script>
@endsection
@section('botones')
    <button onclick="nuevo();" class="btn btn-primary d-none d-sm-inline-block" >
        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
        Agregar
    </button>
@endsection

@section('Titulo_contenido')
Administracion
@endsection

@section('subtitulo_contenido')
REGISTROS DE AGENDA
@endsection

@section('content')
    <div class="page-body">
        <div class="container-xl">
            <div class="row row-cards">
                <div class="col-12">
                    <div class="card">
                        <div class="card-header pb-2">
                            <div class="w-100">
                                <div class="row">
                                    <div class="col-md-4" style="padding-bottom: .5rem;">
                                    <label for="">Agenda de alcaldia</label>
                                    </div>                                
                                </div>
                            </div>
                        </div>
                        <div id="t_principal">
                            <table id="t_agenda" class="table card-table table-vcenter text-nowrap datatable" width="100%">
                                <thead>
                                    <tr>
                                        <th>FECHA</th>
                                        <th>LUGAR / TITULO</th>
                                        <th>REGISTRA</th>
                                        <th>ESTADO</th>
                                        <th>ACCIONES</th>     
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td colspan="6">Cargando...</td>
                                    </tr>
                                </tbody>
                            </table>   
                        </div>                   
                    </div>
                </div>
            </div>
        </div>
    </div> 
@endsection

@section('modal')
    <!-- MODAL MODIFICAR -->
<div id="editar" class="modal modal-blur fade" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 id="titulo_editar" class="modal-title">Nuevo</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div id="form_editar" class="modal-body pb-1">  
                <div class="form-group mb-3">
                    <label class="form-label">Titulo <span class="form-required">*</span></label>
                    <input id="titulo" type="text" class="form-control mayuscula" placeholder="Titulo">
                </div>
                <div class="form-group mb-3">
                    <label class="form-label">Descripción <span class="form-required">*</span></label>
                    <textarea id="descripcion" class="form-control mayuscula" rows="3" placeholder="Descripcion"></textarea>
                </div>           
                <div class="form-group mb-3">
                    <label class="form-label">Lugar <span class="form-required">*</span></label>
                    <input id="lugar" type="text" class="form-control mayuscula">
                </div>
                <div class="row">
                    <div class="col-md-6 form-group mb-3">
                        <label class="form-label">Fecha <span class="form-required">*</span></label>
                        <input id="fecha" type="text" class="form-control " placeholder="DD/MM/YYYY" autocomplete="off">
                    </div>                    
                    <div class="col-md-3 form-group mb-3">
                        <label class="form-label">Inicio <span class="form-required">*</span></label>
                        <input id="inicio" type="text" class="form-control validar_hora" placeholder="HH:MM" maxlength="5">
                    </div>
                    <div class="col-md-3 form-group mb-3">
                        <label class="form-label">Fin <span class="form-required">*</span></label>
                        <input id="fin" type="text" class="form-control validar_hora" placeholder="HH:MM" maxlength="5">
                    </div>
                </div>
                <div>
                    <small class="text-muted">Las horas de inicio y fin deben estar en formato 24 horas. </small>
                </div>                                         
            </div>   
            <div class="modal-footer">
                <button type="button" class="btn btn-link link-secondary ms-auto" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-primary" onclick="guardar()">Guardar</button>
            </div>       
        </div>
    </div>
</div>
@endsection