@extends('layouts.app')
@section('title')
    Inicio
@endsection

@section('styles')
    <!-- CSS for Print -->
    <style>
        .document-header {
            border-bottom: 2px solid #007bff;
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

        .document-section {
            margin-bottom: 20px;
        }

        .document-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 10px;
        }

        .document-table th,
        .document-table td {
            border: 1px solid #dee2e6;
            padding: 8px;
            vertical-align: top;
        }

        .document-table th {
            background: #007bff;
            color: white;
            font-weight: bold;
            font-size: 14px;
            text-align: left;
        }

        .document-table td.label {
            width: 30%;
            font-weight: 600;
            background: #f8f9fa;
            font-size: 12px;
        }

        .document-table td.value {
            width: 70%;
            font-size: 12px;
        }

        .instruido-content {
            min-height: 100px;
            word-wrap: break-word;
        }

        .document-footer {
            font-size: 10px;
            margin-top: 20px;
            padding-top: 10px;
            border-top: 1px solid #dee2e6;
        }

        @media print {
            body * {
                visibility: hidden;
            }

            #printableContent,
            #printableContent * {
                visibility: visible;
            }

            #printableContent {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            .no-print {
                display: none !important;
            }

            .fas {
                display: none !important;
            }

            @page {
                size: A4;
                margin: 10mm;
            }

            body {
                font-family: Arial, sans-serif;
                margin: 10mm;
                padding: 0;
                color: #343a40;
                font-size: 10px;
            }

            .modal-dialog,
            .modal-content {
                width: 100%;
                max-width: none;
                margin: 0;
                border: none;
                box-shadow: none;
            }

            .modal-body {
                padding: 10mm;
            }

            .document-header {
                border-bottom: 2px solid #007bff;
                padding-bottom: 5mm;
                margin-bottom: 5mm;
            }

            .document-header h4 {
                font-size: 16px;
            }

            .document-header p {
                font-size: 10px;
            }

            .document-section {
                margin-bottom: 5mm;
            }

            .document-table th {
                font-size: 10px;
            }

            .document-table td.label {
                width: 30%;
                font-size: 10px;
            }

            .document-table td.value {
                font-size: 10px;
            }

            .instruido-content {
                min-height: 10mm;
                max-height: 80mm;
                font-size: 10px;
            }

            .document-footer {
                font-size: 8px;
                margin-top: 5mm;
                padding-top: 2mm;
            }
        }
    </style>
@endsection

@section('modals')
    <!-- Modal para vista del documento -->
    <div class="modal fade" id="viewDocumentModal" tabindex="-1" role="dialog" aria-labelledby="viewDocumentModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-scrollable" role="document">
            <div class="modal-content">
                <div class="modal-header bg-navy">
                    <h5 class="modal-title" id="viewDocumentModalLabel"><i class="fas fa-file-alt mr-2"></i>Detalles del
                        Documento</h5>
                    <button type="button" class="close no-print" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body" id="printableContent">
                    <!-- <div class="document-header">
                        <h4 class="text-center mb-0">Reporte de Documento</h4>
                    </div> -->

                    <!-- Información del Documento -->
                    <div class="document-section">
                        <table class="document-table table table-bordered">
                            <thead>
                                <tr>
                                    <th colspan="2">Información del Documento</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="label">Fecha de Emisión:</td>
                                    <td class="value" id="view_fecha_emitido"></td>
                                </tr>
                                <tr>
                                    <td class="label">Fecha de Recibido:</td>
                                    <td class="value" id="view_fecha_recibido"></td>
                                </tr>
                                <tr>
                                    <td class="label">Tipo de Documento:</td>
                                    <td class="value" id="view_documento"></td>
                                </tr>
                                <tr>
                                    <td class="label">Nº de Oficio:</td>
                                    <td class="value" id="view_n_oficio"></td>
                                </tr>
                                <tr>
                                    <td class="label">Fecha Nota de Entrega:</td>
                                    <td class="value" id="view_fecha_nota_entrega"></td>
                                </tr>
                                <tr>
                                    <td class="label">Recibido en:</td>
                                    <td class="value" id="view_recibido_en"></td>
                                </tr>
                                <tr>
                                    <td class="label">Archivo:</td>
                                    <td class="value" id="view_archivo_ubicacion"></td>
                                </tr>
                                <tr>
                                    <td class="label">Transcrito por:</td>
                                    <td class="value" id="view_transcrito"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- Detalles del Remitente/Destinatario -->
                    <div class="document-section">
                        <table class="document-table table table-bordered">
                            <thead>
                                <tr>
                                    <th colspan="2">Detalles del Remitente/Destinatario</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="label">Dirigido a:</td>
                                    <td class="value" id="view_dirigido"></td>
                                </tr>
                                <tr>
                                    <td class="label">Institución de Origen:</td>
                                    <td class="value" id="view_institucion"></td>
                                </tr>
                                <tr>
                                    <td class="label">Organismo / Particular:</td>
                                    <td class="value" id="view_nombre"></td>
                                </tr>
                                <tr>
                                    <td class="label">Autoridad / Cédula:</td>
                                    <td class="value" id="view_identificacion"></td>
                                </tr>
                                <tr>
                                    <td class="label">Teléfono de Contacto:</td>
                                    <td class="value" id="view_telefono"></td>
                                </tr>
                                <tr>
                                    <td class="label">Municipio:</td>
                                    <td class="value" id="view_municipio"></td>
                                </tr>
                                <tr>
                                    <td class="label">Es Militante:</td>
                                    <td class="value" id="view_militante"></td>
                                </tr>
                                <tr>
                                    <td class="label">UBCH:</td>
                                    <td class="value" id="view_ubch"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- Detalles del Caso -->
                    <div class="document-section">
                        <table class="document-table table table-bordered">
                            <thead>
                                <tr>
                                    <th colspan="2">Detalles del Caso</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="label">Asunto:</td>
                                    <td class="value" id="view_asunto"></td>
                                </tr>
                                <tr>
                                    <td class="label">Categoría:</td>
                                    <td class="value" id="view_categoria"></td>
                                </tr>
                                <tr>
                                    <td class="label">Estatus del Caso:</td>
                                    <td class="value" id="view_estatus"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- Instrucciones -->
                    <div class="document-section">
                        <table class="document-table table table-bordered">
                            <thead>
                                <tr>
                                    <th colspan="2">Instrucciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="label">Direccionamiento/Instrucción:</td>
                                    <td class="value">
                                        <div class="instruido-content" id="view_direccionamiento"></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="label">Instrucción del Gobernador:</td>
                                    <td class="value">
                                        <div class="instruido-content" id="view_instruccion_gobernador"></div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- Observaciones -->
                    <div class="document-section">
                        <table class="document-table table table-bordered">
                            <thead>
                                <tr>
                                    <th colspan="2">Observaciones</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="label">Observaciones:</td>
                                    <td class="value" id="view_observaciones"></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer justify-content-between no-print">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        <i class="fas fa-times mr-1"></i>Cerrar
                    </button>
                    <button type="button" class="btn bg-gradient-navy shadow" id="btn-print">
                        <i class="fas fa-print mr-1"></i>Imprimir
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- modal nuevo caso -->
    <div class="modal fade" id="new-caso">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="modal-title"></h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form id="form-add" class="container-fluid">
                    @csrf
                    <div class="modal-body">
                        <!-- Document Information -->
                        <h5 class="mb-3">Información del Documento</h5>
                        <div class="row mb-4">
                            <div class="col-12 col-md-3">
                                <div class="form-group">
                                    <label for="fecha_recibido">Fecha de Recibido</label>
                                    <input type="date" id="fecha_recibido" name="fecha_recibido" class="form-control"
                                        value="{{ \Carbon\Carbon::now()->format('Y-m-d') }}" required>
                                </div>
                            </div>
                            <div class="col-12 col-md-3">
                                <div class="form-group">
                                    <label for="fecha_emitido">Fecha Emitido</label>
                                    <input type="date" id="fecha_emitido" name="fecha_emitido" class="form-control"
                                        value="{{ \Carbon\Carbon::now()->format('Y-m-d') }}" required>
                                </div>
                            </div>
                            <div class="col-12 col-md-3">
                                <div class="form-group">
                                    <label for="recibido_en">Recibido en</label>
                                    <select class="form-control" name="recibido_en" id="recibido_en" required>
                                        <option value="CALLE">Calle</option>
                                        <option value="DESPACHO">Despacho</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-md-3">
                                <div class="form-group">
                                    <label for="archivo_ubicacion">Archivo</label>
                                    <input type="text" id="archivo_ubicacion" name="archivo_ubicacion" class="form-control">
                                </div>
                            </div>
                        </div>

                        <!-- Sender/Recipient Details -->
                        <h5 class="mb-3">Detalles del Remitente/Destinatario</h5>
                        <div class="row mb-4">
                            <div class="col-12 col-md-3">
                                <div class="form-group">
                                    <label for="institucion">Institución de Origen</label>
                                    <select class="form-control" name="institucion" id="institucion" required>
                                        <option value="GOBERNACIÓN">Gobernación</option>
                                        <option value="NACIONAL">Nacional</option>
                                        <option value="REGIONAL">Regional</option>
                                        <option value="ALCALDIAS">Alcaldías</option>
                                        <option value="PARTICULARES">Particulares</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-md-3">
                                <div class="form-group">
                                    <label for="nombre">Organismo / Particular</label>
                                    <input type="text" id="nombre" name="nombre" class="form-control" required>
                                </div>
                            </div>
                            <div class="col-12 col-md-3">
                                <div class="form-group">
                                    <label for="identificacion">Autoridad / Cédula</label>
                                    <input type="text" id="identificacion" name="identificacion" class="form-control"
                                        required>
                                </div>
                            </div>
                            <div class="col-12 col-md-3">
                                <div class="form-group">
                                    <label for="telefono">Teléfono de Contacto</label>
                                    <input type="tel" id="telefono" name="telefono" class="form-control">
                                </div>
                            </div>
                            <div class="col-12 col-md-3">
                                <div class="form-group">
                                    <label for="dirigido">Dirigido a</label>
                                    <select class="form-control" name="dirigido" id="dirigido" required>
                                        <option value="GOBERNADOR">Gobernador</option>
                                        <option value="SDG">SDG</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-md-3">
                                <div class="form-group">
                                    <label for="transcrito">Transcrito por</label>
                                    <input type="text" id="transcrito" name="transcrito" class="form-control bg-transparent"
                                        value="{{ Auth::user()->name }}" readonly>
                                </div>
                            </div>
                            <div class="col-12 col-md-3">
                                <div class="form-group">
                                    <label for="municipio">Municipio</label>
                                    <select class="form-control" name="municipio" id="municipio" required>
                                        <option value="">-- Seleccione un Municipio --</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-md-3">
                                <div class="form-group">
                                    <label for="militante">Es Militante</label>
                                    <select class="form-control" name="militante" id="militante">
                                        <option value="">-- Seleccione --</option>
                                        <option value="Si">Sí</option>
                                        <option value="No">No</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-md-3">
                                <div class="form-group">
                                    <label for="ubch">UBCH</label>
                                    <input type="text" id="ubch" name="ubch" class="form-control">
                                </div>
                            </div>
                        </div>

                        <!-- Case Details -->
                        <h5 class="mb-3">Detalles del Caso</h5>
                        <div class="row mb-4">
                            <div class="col-12 col-md-6">
                                <div class="form-group">
                                    <label for="asunto">Asunto</label>
                                    <input type="text" id="asunto" name="asunto" class="form-control" required>
                                </div>
                            </div>
                            <div class="col-12 col-md-3">
                                <div class="form-group">
                                    <label for="categoria">Categoría</label>
                                    <select class="form-control" name="categoria" id="categoria" required>
                                        <option value="">-- Seleccione una Categoría --</option>
                                        <option value="SALUD">Salud</option>
                                        <option value="ALIMENTACIÓN">Alimentación</option>
                                        <option value="VIVIENDA">Vivienda</option>
                                        <option value="MAT">Materiales de Construcción</option>
                                        <option value="CONSTRUCCIÓN">Construcción</option>
                                        <option value="EDUCACIÓN">Educación</option>
                                        <option value="EMPLEO">Empleo</option>
                                        <option value="VIALIDAD">Vialidad</option>
                                        <option value="AGROECOLÓGICO">Agroecológico</option>
                                        <option value="AGUA">Agua</option>
                                        <option value="ELECTRICIDAD">Electricidad</option>
                                        <option value="TELECOMUNICACIONES">Telecomunicaciones</option>
                                        <option value="TRANSPORTE">Transporte</option>
                                        <option value="GAS">Gas</option>
                                        <option value="LINEA BLANCA">Línea Blanca</option>
                                        <option value="AUDIENCIA">Audiencia</option>
                                        <option value="ASISTENCIAS">Asistencias</option>
                                        <option value="POLITICAS">Políticas</option>
                                        <option value="DENUNCIAS PERSONALES">Denuncias Personales</option>
                                        <option value="DENUNCIAS INSTITUCIONALES">Denuncias Institucionales</option>
                                        <option value="OTROS">Otros</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-md-3">
                                <div class="form-group">
                                    <label for="estatus">Estatus del Caso</label>
                                    <select class="form-control" name="estatus" id="estatus" required>
                                        <option value="">-- Seleccione Estatus --</option>
                                        <option value="Nuevo">Nuevo</option>
                                        <option value="Atendido">Atendido</option>
                                        <option value="Archivar">Archivar</option>
                                        <option value="En Cuenta">En Cuenta</option>
                                        <option value="Pendiente">Pendiente</option>
                                        <option value="Remitir">Remitir</option>
                                        <option value="Otro">Otro</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <!-- Instructions -->
                        <h5 class="mb-3">Instrucciones</h5>
                        <div class="row mb-4">
                            <div class="col-12 col-md-6">
                                <div class="form-group">
                                    <label for="direccionamiento">Direccionamiento/Instrucción</label>
                                    <textarea name="direccionamiento" id="direccionamiento" rows="5"
                                        class="form-control"></textarea>
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="form-group">
                                    <label for="instruccion_gobernador">Instrucción del Gobernador</label>
                                    <textarea name="instruccion_gobernador" id="instruccion_gobernador" rows="5"
                                        class="form-control"></textarea>
                                </div>
                            </div>
                            <div class="col-12 col-md-4">
                                <div class="form-group">
                                    <label for="documento">Documento</label>
                                    <select class="form-control" name="documento" id="documento">
                                        <option value="">-- Seleccione Tipo Documento --</option>
                                        <option value="Oficio">Oficio</option>
                                        <option value="Nota de Entrega">Nota de Entrega</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-md-4">
                                <div class="form-group">
                                    <label for="n_oficio">Nº de Oficio</label>
                                    <input type="text" id="n_oficio" name="n_oficio" class="form-control bg-transparent"
                                        readonly>
                                </div>
                            </div>
                            <div class="col-12 col-md-4">
                                <div class="form-group">
                                    <label for="fecha_nota_entrega">Fecha Nota de Entrega</label>
                                    <input type="date" id="fecha_nota_entrega" name="fecha_nota_entrega"
                                        class="form-control bg-transparent" readonly>
                                </div>
                            </div>
                        </div>

                        <!-- Observations -->
                        <h5 class="mb-3">Observaciones</h5>
                        <div class="row mb-4">
                            <div class="col-12">
                                <div class="form-group">
                                    <label for="observaciones">Observaciones</label>
                                    <textarea name="observaciones" id="observaciones" rows="3"
                                        class="form-control"></textarea>
                                </div>
                            </div>
                        </div>

                        <div class="row" id="row_justifi"></div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal"><b>Cerrar</b></button>
                        <button type="submit" class="btn bg-gradient-navy shadow" id="btn-submit">
                            <i class="fas fa-check"></i> Finalizar
                        </button>
                    </div>
                </form>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal nuevo caso end -->

    <!-- modal nuevo caso -->
    <div class="modal fade" id="modal-justificacion">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title font-weight-bold" id="modal-title"><i class="fas fa-info-circle"></i>
                        Justificación</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container-fluid d-flex justify-content-center align-items-center">
                        <p id="justificacion-caso" class="h4 font-weight-normal"></p>
                    </div>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <!-- /.modal nuevo caso end -->

@endsection

@section('content')
    <div class="row justify-content-center">
        <div class="col-md-10">
            <div class="card card-outline card-danger">
                <div class="card-header">
                    <div class="row">
                        <div class="col-md-6">
                            <h4><i class="fa fa-th"></i> Lista de Casos</h4>
                        </div>
                        <div class="col-md-6 text-right">
                            <a href="#" class="btn bg-gradient-navy btn-sm shadow" id="btn-add" data-toggle="modal"
                                data-target="#new-caso"><i class="fa fa-plus"></i> Nuevo Caso</a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="casos-table table table-bordered table-striped table-sm">
                            <thead class="text-center">
                                <tr>
                                    <th>N°</th>
                                    <th>Fecha</th>
                                    <th>Dirigido a</th>
                                    <th>Remitente</th>
                                    <th>Estatus</th>
                                    <th class="actions">Acciones</th>
                                </tr>
                            </thead>
                            <tbody id="casos-tbody">
                            </tbody>
                        </table>
                    </div>
                    <!-- Contenedor para la leyenda -->
                    <div id="legend" class="text-center mt-3"></div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function () {
            var id = "";
            var btn = "";
            var method = "";
            var lastCorrelativo = 0; // Declarar lastCorrelativo en un ámbito superior
            var textCorrelativo = ""; // Declarar lastCorrelativo en un ámbito superior
            var table; // Variable para almacenar la instancia de DataTable
            var user_rol = "{{ Auth::user()->rol }}";
            municipios();
            listCasos();

            function listCasos() {
                fetch('api/atenciones/list/all', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Error en la consulta...');
                        }
                        return response.json();
                    })
                    .then(data => {
                        var num = 1,
                            template = "",
                            status = "",
                            buttons = "",
                            statusCount = {
                                "Nuevo": 0,
                                "Atendido": 0,
                                "EnCuenta": 0,
                                "Archivar": 0,
                                "Remitir": 0,
                                "Pendiente": 0,
                                "Otro": 0,
                                "SinEfecto": 0
                            };


                        // Obtener el último correlativo
                        lastCorrelativo = 0;
                        if (data.data.length > 0) {
                            lastCorrelativo = parseInt(data.data[data.data.length - 1].correlativo, 10);
                        }

                        data.data.forEach(e => {

                            if (e.estatus == "Sin Efecto") {
                                buttons = `<button type="button" class="justificacion btn btn-sm bg-gradient-navy" data-id="${e.id}" data-justificacion="${e.justificacion}" data-toggle="modal" data-target="#modal-justificacion">
                                                <i class="fas fa-info-circle"></i>
                                               </button>`;
                                statusCount.SinEfecto++;
                            } else {
                                buttons = `<button type="button" class="detalle btn btn-sm bg-gradient-navy" data-id="${e.id}" data-btn="${(e.estatus == "Sin Efecto" ? "detalle_anu" : "detalle")}">
                                                <i class="fas fa-info-circle"></i>
                                                </button>
                                                <button type="button" class="edit btn btn-sm bg-gradient-navy ${(e.estatus == "Sin Efecto" ? "invisible" : "")}" data-id="${e.id}" data-toggle="modal" data-target="#new-caso">
                                                <i class="fas fa-edit"></i>
                                                </button>
                                                <button type="button" class="anul btn btn-sm bg-gradient-navy ${(e.estatus == "Sin Efecto" ? "invisible" : "")}" data-id="${e.id}" data-correlativo="${e.correlativo}">
                                                <i class="fas fa-ban"></i>
                                                </button>`;

                                if (e.estatus == "Atendido") {
                                    statusCount.Atendido++;
                                }

                                if (e.estatus == "En Cuenta") {
                                    statusCount.EnCuenta++;
                                }

                                if (e.estatus == "Archivar") {
                                    statusCount.Archivar++;
                                }

                                if (e.estatus == "Pendiente") {
                                    statusCount.Pendiente++;
                                }

                                if (e.estatus == "Remitir") {
                                    statusCount.Remitir++;
                                }

                                if (e.estatus == "Otro") {
                                    statusCount.Otro++;
                                }

                                if (e.estatus == "Nuevo") {
                                    statusCount.Nuevo++;
                                }
                            }

                            // var status = e.estatus; // Aquí defines el estado según tu lógica
                            //     statusCount[status]++;
                            template += `
                                        <tr>
                                            <td class="text-center"> ${e.id}</td>
                                            <td  class="text-center"> ${e.fecha_recibido ? moment(e.fecha_recibido).utc().format('DD-MM-YYYY') : "S/R"}</td>
                                            <td class="text-center"> ${e.dirigido}</td>
                                            <td class="text-center"> ${(e.nombre) ? e.nombre : "S/R"}</td>
                                            <td class="text-center"> ${e.estatus}</td>
                                            <td class="text-center"> 
                                                ${buttons}
                                            </td>
                                        </tr>
                                    `;
                        });

                        window.totalCasos = `
                                    NUEVO: ${statusCount.Nuevo} | ATENDIDO: ${statusCount.Atendido} | EN CUENTA: ${statusCount.EnCuenta} | ARCHIVAR: ${statusCount.Archivar} | REMITIR: ${statusCount.Remitir} | PENDIENTE: ${statusCount.Pendiente} | OTRO: ${statusCount.Otro} | SIN EFECTO: ${statusCount.SinEfecto}
                                `;

                        const totalCasosHTML = `
                                    <div>
                                        <strong>TOTAL DE CASOS:</strong> 
                                        <span>NUEVO: ${statusCount.Nuevo} | ATENDIDO: ${statusCount.Atendido} | EN CUENTA: ${statusCount.EnCuenta} | ARCHIVAR: ${statusCount.Archivar} | REMITIR: ${statusCount.Remitir} | PENDIENTE: ${statusCount.Pendiente} | OTRO: ${statusCount.Otro} | SIN EFECTO: ${statusCount.SinEfecto}</span>
                                    </div>
                                `;

                        $('#legend').html(totalCasosHTML);


                        // Actualizar el correlativo para el próximo caso
                        textCorrelativo = (lastCorrelativo + 1).toString().padStart(5, '0');
                        //console.log("Próximo correlativo:", textCorrelativo);

                        //Destruir y recrear la tabla
                        $('.casos-table').DataTable().destroy();
                        $('#casos-tbody').html(template);
                        $('.casos-table').DataTable(t);


                    })
                    .catch(error => console.error('Error:', error));
            }

            $(document).on('click', '.justificacion', function () {
                let justificacion = $(this).data('justificacion');
                $('#justificacion-caso').html(justificacion);
            })

            function updateLegend(table) {
                var statusCount = {
                    "Nuevo": 0,
                    "Atendido": 0,
                    "En Cuenta": 0,
                    "Archivar": 0,
                    "Remitir": 0,
                    "Pendiente": 0,
                    "Otro": 0,
                    "Sin Efecto": 0
                };

                // Recorrer las filas visibles
                table.rows({ search: 'applied' }).every(function () {
                    var row = this.node();
                    var status = $(row).find('td:eq(4)').text().trim(); // Obtener el texto de la columna "Estatus" 
                    if (statusCount.hasOwnProperty(status)) {
                        statusCount[status]++;
                    }
                });

                // Actualizar la leyenda en el HTML 
                var legend = `Total de Casos: Nuevo: ${statusCount["Nuevo"]} | Atendido: ${statusCount["Atendido"]} | En Cuenta: ${statusCount["En Cuenta"]} | Archivar: ${statusCount["Archivar"]} | Remitir: ${statusCount["Remitir"]} | Pendiente: ${statusCount["Pendiente"]} | Otro: ${statusCount["Otro"]} | Sin Efecto: ${statusCount["Sin Efecto"]}`;
                $('#legend').html(legend);
            }


            $(document).on('change', '#documento', function () {
                var documento = $("#documento").val();
                tipo_doc(documento);
            })

            function tipo_doc(tipo_doc) {
                if (tipo_doc == "Nota de Entrega") {
                    $(".label_n_ofocio").html('N° de Nota de Entrega');
                    $(".label_f_ofocio").html('Fecha de Nota de Entrega');
                    $('#n_oficio').prop('readonly', false);
                    $('#fecha_nota_entrega').prop('readonly', false);

                } else if (tipo_doc == "Oficio") {
                    $(".label_n_ofocio").html('N° de Oficio');
                    $(".label_f_ofocio").html('Fecha de Oficio');
                    $('#n_oficio').prop('readonly', false);
                    $('#fecha_nota_entrega').prop('readonly', false);
                } else {
                    $(".label_n_ofocio").html('--');
                    $(".label_f_ofocio").html('--');
                    $('#n_oficio').val('').prop('readonly', true);
                    $('#fecha_nota_entrega').val('').prop('readonly', true);
                }
            }

            // Reiniciar formulario de registro
            $('#btn-add').click(function () {
                $('#form-edit').trigger('reset');
                $('#form-add').trigger('reset');
                $('#form-edit').attr('id', 'form-add');
                $('#form-add input, #form-add select, #form-add textarea').prop('disabled', false);
                $('#form-edit input, #form-edit select, #form-edit textarea').prop('disabled', false);
                $("#btn-submit").show();
                $('#btn-submit').attr('class', 'btn bg-gradient-navy shadow').html('<i class="fas fa-check"></i> Finalizar');
                $('#modal-title').html('<i class="fa fa-plus"></i> <b>Nuevo Caso - N° ' + textCorrelativo + '</b>');
                $(".label_n_ofocio").html('--');
                $(".label_f_ofocio").html('--');
                $("#content_status").hide();
                $("#estatus").prop('required', false);
                $('#n_oficio').val('').prop('readonly', true);
                $('#fecha_nota_entrega').val('').prop('readonly', true);
                $("#row_data").show();
                $("#row_justifi").hide();
                validateRol();
            });


            // Enviar formulario de registro de atencion
            $(document).on('submit', '#form-add', function (e) {
                e.preventDefault();
                let form = new FormData(this);
                form.delete('_method');

                // Obtener el próximo correlativo
                var nextCorrelativo = (lastCorrelativo + 1).toString().padStart(5, '0');
                form.append('correlativo', nextCorrelativo);

                fetch('api/atenciones/store', {
                    method: 'POST',
                    body: form,
                    headers: {
                        // 'Authorization': 'Bearer ' + token, 
                    }
                })
                    .then(res => res.json())
                    .then(function (data) {
                        //console.log(data);

                        if (data.status) {

                            Swal.fire({
                                title: '¡Perfecto!',
                                icon: 'success',
                                text: data.message,
                                timer: 3000, // 3 segundos
                                //timerProgressBar: true,
                                willClose: () => {
                                    // agregar acciones
                                }
                            });


                            listCasos();
                            $('#form-add').trigger('reset');
                            $('#new-caso').modal('hide');
                        }
                        if (!data.status) {

                            template = `
                                        <div>
                                            <ol>     
                                    `;
                            if (data.mjs) {
                                template += "<li class='text-left text-danger'>" + data.mjs + "</li>";
                            } else {

                                $.each(data.errors, function (key, value) {
                                    template += "<li class='text-left text-danger'>" + value + "</li>";
                                });

                            }
                            template += `
                                        </ol>
                                    </div>  
                                    `;

                            Swal.fire({
                                icon: 'error',
                                title: '¡Ups!',
                                html: template
                            })

                        }
                    })

            })

            // Funcion para municipios
            function municipios() {
                fetch('municipios', {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Error en la consulta...');
                        }
                        return response.json();
                    })
                    .then(data => {
                        //console.log(data);
                        data.data.forEach(e => {
                            $('#municipio').append('<option value="' + e.id + '">' + e.descripcion + '</option>');
                        });

                    })
            }

            // Metodo para boton editar atencion
            $(document).on("click", ".edit", function () {
                $('#form-edit').trigger('reset');
                $('#form-add').trigger('reset');
                $('#form-add').attr('id', 'form-edit');
                $('#form-edit input, #form-edit select, #form-edit textarea').prop('disabled', false);
                $("#btn-submit").attr('class', 'btn bg-gradient-navy shadow').html(`<i class="far fa-save"></i> Guardar Cambios`);
                $("#btn-submit").show();
                $("#content_status").show()
                $("#estatus").prop('required', true);
                id = $(this).attr('data-id');
                btn = "edit";
                validateRol();
                showCasos(id, btn);
            })

            //Metodo para ver detalles de la atencion
            $(document).on('click', '.detalle', function () {
                // Assuming the button has a data-id attribute with the document ID
                const documentId = $(this).data('id');

                fetch('api/atenciones/show/' + documentId, {
                    method: 'GET',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    }
                })
                    .then(response => {
                        if (!response.ok) {
                            throw new Error('Error fetching document data');
                        }
                        return response.json();
                    })
                    .then(data => {
                        // console.log(data)
                        // Populate modal fields with API data
                        $('#view_fecha_recibido').text(moment(data.data.fecha_recibido).utc().format('DD-MM-YYYY'));
                        $('#view_fecha_emitido').text(moment(data.data.fecha_emitido).utc().format('DD-MM-YYYY'));
                        $('#view_documento').text(data.data.documento || 'S/R');
                        $('#view_n_oficio').text(data.data.n_oficio || 'S/R');
                        $('#view_fecha_nota_entrega').text(data.data.fecha_nota_entrega ? moment(data.data.fecha_nota_entrega).utc().format('DD-MM-YYYY') : 'S/R');
                        $('#view_recibido_en').text(data.data.recibido_en || 'S/R');
                        $('#view_archivo_ubicacion').text(data.data.archivo_ubicacion || 'S/R');
                        $('#view_transcrito').text(data.data.transcrito || 'S/R');
                        $('#view_dirigido').text(data.data.dirigido || 'S/R');
                        $('#view_institucion').text(data.data.institucion || 'S/R');
                        $('#view_nombre').text(data.data.nombre || 'S/R');
                        $('#view_identificacion').text(data.data.identificacion || 'S/R');
                        $('#view_telefono').text(data.data.telefono || 'S/R');
                        $('#view_municipio').text(data.data.gl_municipio.descripcion || 'S/R');
                        $('#view_militante').text(data.data.militante || 'S/R');
                        $('#view_ubch').text(data.data.ubch || 'S/R');
                        $('#view_asunto').text(data.data.asunto || 'S/R');
                        $('#view_categoria').text(data.data.categoria || 'S/R');
                        $('#view_document_type').text(data.data.documento || 'S/R');
                        $('#view_estatus').text(data.data.estatus);

                        $('#view_direccionamiento').text(data.data.direccionamiento || 'S/R');
                        $('#view_instruccion_gobernador').text(data.data.instruccion_gobernador || 'S/R');
                        $('#view_observaciones').text(data.data.observaciones || 'S/R');

                        // Show the modal
                        $('#viewDocumentModal').modal('show');
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        alert('No se pudo cargar la información del documento. Por favor, intenta de nuevo.');
                    });
            });

            $('#btn-print').on('click', function () {
                const printWindow = window.open('', '', 'width=800,height=600');
                if (!printWindow) {
                    alert('Por favor, habilita las ventanas emergentes para imprimir.');
                    return;
                }

                const $content = $('#printableContent').clone();
                $content.find('.no-print').remove();
                $content.find('.fas').remove();

                const today = new Date().toLocaleDateString('es-MD', {
                    year: 'numeric',
                    month: 'long',
                    day: 'numeric'
                });
                const correlativo = $('#n_oficio').text() || 'N/A'; // Obtener correlativo si está disponible
                const documentType = $('#view_document_type').text() || 'Documento';

                const styles = `
                        <style>
                            body {
                                font-family: Arial, sans-serif;
                                margin: 10mm;
                                padding: 0;
                                color: #333;
                                font-size: 10px;
                                font-weight: bold;
                            }
                            .print-container {
                                max-width: 190mm;
                                margin: 0 auto;
                            }
                            .report-header {
                                text-align: center;
                                border-bottom: 2px solid #000;
                                padding-bottom: 10px;
                                margin-bottom: 20px;
                            }
                            .report-header h2 {
                                font-size: 16px;
                                margin: 0;
                                color: #000;
                                font-weight: bold;
                            }
                            .report-header p {
                                font-size: 10px;
                                color: #666;
                                margin: 5px 0;
                                font-weight: bold;
                            }
                            .document-table {
                                background: #fff;
                                border-collapse: collapse;
                                width: 100%;
                                margin-bottom: 10mm;
                                page-break-inside: auto;
                            }
                            .document-table th {
                                background: #333;
                                color: white;
                                font-size: 10px;
                                font-weight: bold;
                                padding: 5px;
                                text-align: left;
                                border: 1px solid #000;
                            }
                            .document-table td {
                                border: 1px solid #000;
                                padding: 5px;
                                vertical-align: top;
                                font-size: 10px;
                                font-weight: bold;
                            }
                            .document-table td.label {
                                width: 30%;
                                background: #f0f0f0;
                            }
                            .document-table td.value {
                                width: 70%;
                            }
                            .instruido-content {
                                min-height: 10mm;
                                max-height: 80mm;
                                word-break: break-word;
                                overflow: hidden;
                                font-weight: bold;
                            }
                            .report-footer {
                                border-top: 1px solid #000;
                                padding-top: 5mm;
                                margin-top: 10mm;
                                font-size: 8px;
                                color: #666;
                                text-align: center;
                                font-weight: bold;
                            }
                            @page {
                                size: A4;
                                margin: 10mm;
                            }
                            @media print {
                                body {
                                    margin: 0;
                                    padding: 10mm;
                                }
                                .print-container {
                                    page-break-after: avoid;
                                }
                                .document-table {
                                    page-break-inside: auto;
                                }
                                .document-table tr {
                                    page-break-inside: avoid;
                                    page-break-after: auto;
                                }
                                .document-table th, .document-table td {
                                    border: 1px solid #000;
                                }
                                .document-table th {
                                    background: #333;
                                }
                                .document-table td.label {
                                    background: #f0f0f0;
                                }
                            }
                        </style>
                    `;
                const now = new Date().toLocaleString('es-MD', { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: true }).replace(/[/,]/g, '-').replace(/ /g, '_');
                const title = `REPORTE_${now}`;
                printWindow.document.write(`
                        <html>
                            <head>
                                <title>${title}</title>
                                ${styles}
                            </head>
                            <body>
                                <div class="print-container">
                                    <div class="report-header">
                                        <h2>Gobernación del Estado Trujillo</h2>
                                    </div>
                                    ${$content.html()}
                                    <div class="report-footer">
                                        <p>Documento Oficial - Generado el ${today}</p>
                                    </div>
                                </div>
                            </body>
                        </html>
                    `);
                printWindow.document.close();
                printWindow.focus();
                printWindow.print();
                printWindow.close();
            });
            // Metodo para aunlar atencion
            $(document).on("click", ".anul", function (e) {
                e.preventDefault();
                id = $(this).attr('data-id');
                let correlativo = $(this).attr('data-correlativo');
                Swal.fire({
                    title: '¿Estás seguro(a) que desea dejar sin efecto el caso N° ' + correlativo + ' ?',
                    text: '',
                    icon: 'warning',
                    html: `Ten en cuenta que al dejarlo sin efecto la información ya no estará disponible. <br>
                                    <input id="motivo-anulacion" class="form-control mt-2 col-12" placeholder="¿Por qué quiere dejar sin efecto este caso?" required>`,
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    cancelButtonText: 'Cancelar',
                    confirmButtonText: 'Si, dejar sin efecto',
                    preConfirm: () => {
                        const motivo = document.getElementById('motivo-anulacion').value;
                        if (!motivo) {
                            Swal.showValidationMessage('<b>Campo obligatorio<b>');
                            return false;
                        }
                        return motivo;
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        const motivo = result.value; // Obtener el valor del input 

                        $.ajax({
                            type: "GET",
                            url: 'api/atenciones/destroy/' + id,
                            data: {
                                _method: 'DELETE', // Usar método DELETE para la anulación
                                motivo: motivo // Enviar el motivo de la anulación
                            },
                            dataType: 'json',
                            success: function (res) {
                                //console.log(res);
                                Swal.fire(
                                    '¡Perfecto!',
                                    res.message,
                                    'success'
                                )
                                listCasos();

                            }, error: function (res) {
                                // console.log(res)
                                Swal.fire(
                                    '¡Error!',
                                    res.statusText,
                                    'error'
                                )
                            },
                        })
                    }
                });

            })

            // Funcion para mostrar atencion
            function showCasos(id, btn) {
                fetch(
                    'api/atenciones/show/' + id, {
                    method: 'GET'
                }
                ).then(res => res.json())
                    .then(function (data) {


                        if (data.status) {
                            console.log(data);
                            $('#modal-title').html(btn == "edit" ? '<i class="far fa-edit"></i> <b>Editar Caso - N° ' + data.correlativo + '</b>' : '<i class="fas fa-info-circle"></i> <b>Caso - N° ' + data.correlativo + '</b>');

                            if (data.estatus == "Sin Efecto" && btn == "detalle_anu") {
                                $("#row_data").hide();
                                $("#row_justifi").show();
                                $("#row_justifi").html(`
                                                <div class="col-md-12">
                                                    <blockquote class="blockquote">
                                                        <p class="mb-0">${data.justificacion}</p>
                                                    </blockquote>
                                                </div>
                                            `);
                            } else {

                                $("#row_data").show();
                                $("#row_justifi").hide();
                                $("#row_body").show();
                                $("#fecha_recibido").val(moment(data.data.fecha_recibido).utc().format('yyyy-MM-DD'));
                                $("#fecha_emitido").val(moment(data.data.fecha_emitido).utc().format('yyyy-MM-DD'));
                                $("#recibido_en").val(data.data.recibido_en);
                                $("#email").val(data.data.email);
                                $("#dirigido").val(data.data.dirigido);
                                $("#archivo_ubicacion").val(data.data.archivo_ubicacion);
                                $("#transcrito").val(data.data.transcrito);
                                $("#institucion").val(data.data.institucion);
                                $("#fecha_emitido").val(moment(data.data.fecha_emitido).utc().format('yyyy-MM-DD'));
                                $("#nombre").val(data.data.nombre);
                                $("#identificacion").val(data.data.identificacion);
                                $("#telefono").val(data.data.telefono);
                                $("#militante").val(data.data.militante);
                                $("#ubch").val(data.data.ubch);
                                $("#municipio").val(data.data.municipio);
                                $("#asunto").val(data.data.asunto);
                                $("#categoria").val(data.data.categoria);
                                $("#estatus").val(data.data.estatus);
                                $("#direccionamiento").val(data.data.direccionamiento);
                                $("#instruccion_gobernador").val(data.data.instruccion_gobernador);
                                $("#documento").val(data.data.documento);
                                $("#n_oficio").val(data.data.n_oficio);
                                $("#fecha_nota_entrega").val(moment(data.data.fecha_nota_entrega).utc().format('yyyy-MM-DD'));
                                $("#observaciones").val(data.data.observaciones);
                            }


                        } else {
                            console.log("Error Servidor");

                        }
                    }).catch(function (err) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Oops...',
                            text: err
                        })
                    })
            }

            //Metodo para enviar fomuladrio de edicion
            $(document).on('submit', '#form-edit', function (e) {
                e.preventDefault();
                let form = new FormData(this);
                form.append('_method', 'PUT');

                fetch('api/atenciones/update/' + id, {
                    method: 'POST',
                    body: form,
                    headers: {
                        // 'Authorization': 'Bearer ' + token, 
                    }
                })
                    .then(res => res.json())
                    .then(data => {
                        if (data.status) {

                            Swal.fire({
                                title: 'Actualización correcta',
                                icon: 'success',
                                timer: 3000, // 3 segundos
                                //timerProgressBar: true,
                                willClose: () => {
                                    listCasos();
                                }
                            });
                            //actualizamos la lista
                            //listCasos();
                            $('#form-add').trigger('reset');
                            $('#new-caso').modal('hide');
                        }
                        if (!data.status) {

                            template = `
                                            <div>
                                                <ol>     
                                        `;
                            if (data.mjs) {
                                template += "<li class='text-left text-danger'>" + data.mjs + "</li>";
                            } else {

                                $.each(data.errors, function (key, value) {
                                    template += "<li class='text-left text-danger'>" + value + "</li>";
                                });

                            }
                            template += `
                                            </ol>
                                        </div>  
                                        `;

                            Swal.fire({
                                icon: 'error',
                                title: '¡Ups!',
                                html: template
                            })

                        }
                    })

            })

            function validateRol() {
                if (user_rol == "Recepcionista") {
                    $('#archivo_ubicacion').prop('disabled', true);
                    $('#militante').prop('disabled', true);
                    $('#ubch').prop('disabled', true);
                    $('#direccionamiento').prop('disabled', true);
                }

                if (user_rol == "Analista") {
                    $('#militante').prop('disabled', true);
                    $('#ubch').prop('disabled', true);
                }

            }


        })
    </script>
@endsection