@extends('home')
@section('css')
    <!-- Plugins css -->

    <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/dataTables.bootstrap5.min.css">
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <link rel="stylesheet" href="{{ asset('css/select2-bootstrap-5-theme.min.css') }}" />
@endsection

@section('content')
    <div class="container-fluid">
        <!-- end page title -->
        <div class="row mt-3">
            <div class="col-12">
                <div class="card-box mb-1 py-2 ">
                    <div class="row">
                        <div class="col">
                            <div class="button-list">
                                <button type="button" class="btn btn-success waves-effect waves-light" data-toggle="modal"
                                    id="agregar" data-target="#modal_oficio"><i class="fas fa-file mr-1"></i> Generar oficio</button>
                            </div>
                        </div> <!-- end col -->
                    </div> <!-- end row -->
                </div> <!-- end card-box-->
            </div> <!-- end col -->
        </div>
        @php
            function formatearFecha($fechaOriginal)
            {
                $partesFecha = explode('-', $fechaOriginal);
                $anio = $partesFecha[0];
                $mes = $partesFecha[1];
                $dia = $partesFecha[2];

                // Definir un arreglo con los nombres de los meses
                $meses = ['ENERO', 'FEBRERO', 'MARZO', 'ABRIL', 'MAYO', 'JUNIO', 'JULIO', 'AGOSTO', 'SEPTIEMBRE', 'OCTUBRE', 'NOVIEMBRE', 'DICIEMBRE'];

                $mesFormateado = $meses[intval($mes) - 1]; // Restamos 1 para obtener el nombre del mes correcto

                return "$dia DE $mesFormateado DE $anio";
            }
        @endphp
        <div class="row">
            <div class="col-12">
                <div class="card">

                    <div class="card-body">
                        <div class="alert alert-danger alert-dismissible fade show" role="alert">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                            <i class="mdi mdi-alert-outline mr-2"></i> <b>Importante!</b> Actualizar su Firma <b>SI</b> tiene una nueva institución asignada
                        </div>
                        <div class="alert alert-info mb-2 text-center" role="alert">
                            <b>PLAZO PARA ENVIAR HASTA: {{formatearFecha(Auth::user()->fecha_limite)  }} </b>
                        </div>

                        <div id="datatable-buttons_wrapper" class="dataTables_wrapper dt-bootstrap4 no-footer">

                            <div class="row">
                                <div class="col-md-12">
                                    <div class="table-responsive">
                                        <table class="table w-100" id="tabla_reportes">
                                            <thead>
                                                <tr>
                                                    <th scope="col">#</th>
                                                    <th scope="col">Mes</th>
                                                    <th scope="col">Año</th>
                                                    <th scope="col">Anexo 03</th>
                                                    <th scope="col">Anexo 04</th>
                                                    <th scope="col">Oficio</th>
                                                    <th scope="col">Doc. Adicional</th>
                                                    <th scope="col">Enviar</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                        
                                        
                                            </tbody>
                                            <tfoot>
                                                <tr>
                                                    <th scope="col">#</th>
                                                    <th scope="col">Mes</th>
                                                    <th scope="col">Año</th>
                                                    <th scope="col">Anexo 03</th>
                                                    <th scope="col">Anexo 04</th>
                                                    <th scope="col">Oficio</th>
                                                    <th scope="col">Doc. Adicional</th>
                                                    <th scope="col">Enviar</th>
                                                </tr>
                                            </tfoot>
                                        </table>
                                    </div>
                                </div>
                            </div>

                        </div>

                    </div> <!-- end card body-->
                </div> <!-- end card -->
            </div><!-- end col-->
        </div>
        <!-- end row-->
    </div>

    <!-- Modal agregar-->
    <div id="modal_ver" class="modal fade" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="lbl_reporte">Agregar area</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body p-4">
                    <div class="row">
                        <div class="col-md-12">
                            <iframe id="reportes" width="100%" height="500" src=""></iframe>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div><!-- /.modal -->
    <!-- Modal agregar-->
    <div id="modal_oficio" class="modal fade" data-backdrop="static" aria-hidden="true" data-keyboard="false">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Crear Documento Oficio</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12 mb-3">
                            <label for="calendario" class="control-label">Selecionar mes<span
                                    class="text-danger">*</span></label>
                            <select class="form-select" id="calendario">
                            </select>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="of_titulo" class="control-label">Titulo del documento<span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="of_titulo"
                                    placeholder="Ejemplo: OFICIO N°103-2023-GRP-DREP-UGELY/AD">
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="of_asunto" class="control-label">Asunto del documento<span
                                        class="text-danger">*</span></label>
                                <textarea id="of_asunto" rows="2" class="form-control" style="resize:none;"
                                    placeholder="Escriba el asunto de su documento"></textarea>
                            </div>
                        </div>
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="of_contenido" class="control-label">Contenido del documento<span
                                        class="text-danger">*</span></label>
                                <textarea id="of_contenido" rows="5" class="form-control" style="resize:none;"
                                    placeholder="Escriba el contenido de su documento"></textarea>
                            </div>
                        </div>
                        
                        <div class="col-md-12">
                            <label for="adicional" class="control-label">Cargar documento adicional (PDF)<span
                                class="text-info"> (Opcional)</span> <span class=" text-secondary" style="font-size: 11px"><i>Constancias, Certificados, Resoluciones, etc.</i> </span> </label>
                                <input type="file" id="adicional"  class="form form-control">

                        </div>
                    </div>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Cerrar</button>
                    <button type="button" id="generar_oficio" class="btn btn-success waves-effect waves-light">Crear
                        documento</button>
                </div>
            </div>
        </div>
    </div><!-- /.modal -->
@endsection

@section('js')
    <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>

    <script src="{{ asset('js/reportes.js') }}"></script>
    <script>
        $('#calendario').select2({
            dropdownParent: '#modal_oficio',
            theme: "bootstrap-5",
            width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
            placeholder: $(this).data('placeholder'),
            placeholder: 'Seleccionar',
            language: {
                noResults: function() {
                    return 'No se encontraron resultados';
                }
            }
        });
        $('#cargo').select2({
            dropdownParent: '#modal_registrar',
            theme: "bootstrap-5",
            width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
            placeholder: $(this).data('placeholder'),
            placeholder: 'Seleccionar',
            language: {
                noResults: function() {
                    return 'No se encontraron resultados';
                }
            }
        });
        $('#condicion').select2({
            dropdownParent: '#modal_registrar',
            theme: "bootstrap-5",
            width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
            placeholder: $(this).data('placeholder'),
            placeholder: 'Seleccionar',
        });
        $('#estado_edit').select2({
            dropdownParent: '#modal_editar',
            theme: "bootstrap-5",
            width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
        });
        $('#cargo_edit').select2({
            dropdownParent: '#modal_editar',
            theme: "bootstrap-5",
            width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
        });
        $('#condicion_edit').select2({
            dropdownParent: '#modal_editar',
            theme: "bootstrap-5",
            width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
        });
    </script>
@endsection