@extends('layouts.administracion')

@section('css')

@endsection

@section('js')
    <script src="{{ asset('/libs/datatables/DataTables-1.11.5/js/jquery.dataTables.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/libs/datatables/DataTables-1.11.5/js/dataTables.bootstrap4.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('/js/admin/directivas.js') }}"></script>
@endsection
@section('botones')
    <a href="javascript:void(0)"  data-bs-toggle="modal" data-bs-target="#nuevo" class="btn btn-primary d-none d-sm-inline-block">
        <!-- Download SVG icon from http://tabler-icons.io/i/plus -->
        <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"/><path d="M12 5l0 14" /><path d="M5 12l14 0" /></svg>
        Nuevo
    </a>
@endsection

@section('Titulo_contenido')
Administracion
@endsection

@section('subtitulo_contenido')
Comunicados
@endsection

@section('content')
<div class="page-body">
    <div class="container-xl">
        <!-- Page title -->
        <div class="page-header">
            <div class="row align-items-center">
                <div class="col">
                    <div class="page-pretitle">
                        AGENDA INSTITUCIONAL
                    </div>
                    <h2 class="page-title">
                        REGISTROS DE AGENDA
                    </h2>
                </div>

                <div class="col-auto ms-auto">
                    <div class="btn-list">
                        <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>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <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;">
                                        <select id="dependencia_select" class="form-select" title="DEPENDENCIA">
                                            @if($d_actual != null)                                        
                                                @foreach($dependencias as $dependencia)
                                                <option value="{{$dependencia->dependencia_id}}">{{ strlen($dependencia->dependencia->nombre) > 50 ? mb_substr($dependencia->dependencia->nombre,0, 50, 'UTF-8')."..." : $dependencia->dependencia->nombre }}</option>
                                                @endforeach                                            
                                            @else
                                            <option value="0" disabled>NO TIENES ASIGNADO UNA DEPENDENCIA</option>
                                            @endif   
                                        </select>
                                    </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>DEPENDENCIA</th>
                                        <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>
</div>
@endsection

@section('modal')
    <!-- MODAL NUEVO -->
    <div id="nuevo" 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 class="modal-title">Nuevo Directiva</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">Año</label>
                        <select class="form-control" id="year">
                            <option value="2024">2024</option>
                            <option value="2023">2023</option>
                            <option value="2022">2022</option>
                            <option value="2021">2021</option>
                            <option value="2020">2020</option>
                            <option value="2019">2019</option>
                            <option value="2018">2018</option>
                            <option value="2017">2017</option>
                        </select>
                    </div>
                    <div class="form-group mb-3">
                        <label class="form-label">numero</label>
                        <input type="text" class="form-control" id="numero">
                    </div>
                    <div class="form-group mb-3">
                        <label class="form-label">Aprobacion</label>
                        <input type="text" class="form-control" id="aprobacion">
                    </div>
                    <div class="form-group mb-3">
                        <label class="form-label">Nombre</label>
                        <input type="text" class="form-control" id="nombre">
                    </div>
                    
                    <div class="form-group mb-3">
                        <label class="form-label">Imagen principal(1200X500)</label>
                        <input type="file" id="inputImage" accept="image/*">  
                    </div>                     
                </div>     
                <div class="modal-footer">                
                    <button type="button" class="btn btn-link link-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" onclick="guardar()">Guardar</button>
                </div>       
            </div>
        </div>
    </div>
    
@endsection