@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">
        <div class="row row-cards">
            <div class="col-12">
                <div class="card">
                    <div id="t_principal">
                        <table id="t_directivas" class="table card-table table-vcenter text-nowrap datatable" width="100%">
                            <thead>
                                <tr>   
                                    <th>AÑO</th>
                                    <th>NÚMERO</th>
                                    <th>APROBACION</th>
                                    <th>NOMBRE</th>
                                    <th>ESTADO</th>     
                                    <th>OPCIONES</th>     
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td colspan="9">Cargando...</td>
                                </tr>
                            </tbody>
                        </table>   
                    </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