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

@section('modals')
    <!-- 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">DESPACHO GOBERNACIÓN (ATENCIONES)</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="container">
                    <div class="alert alert-secondary alert-dismissible fade show" role="alert">
                        <strong>Campos obligatorios (*)</strong>
                        <!-- <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button> -->
                    </div>
                </div>
                <form id="form-add">
                    @csrf
                    <div class="modal-body">
                        <div class="row">
                            <div class="col-12 col-md-3">
                                <div class="form-group">
                                    <label>Fecha de Recibido (*)</label>
                                    <input type="date" id="fecha_recibido" name="fecha_recibido" class="form-control mb-3"
                                        required>
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="form-group">
                                    <label>Nombre y Apellido (*)</label>
                                    <input type="text" id="nombre" name="nombre" class="form-control bg-transparent mb-3"
                                        required>
                                </div>
                            </div>
                            <div class="col-12 col-md-3">
                                <div class="form-group">
                                    <label>Cédula (*)</label>
                                    <input type="text" id="cedula" name="cedula" class="form-control mb-3" required>
                                </div>
                            </div>
                            <div class="col-12 col-md-3">
                                <div class="form-group">
                                    <label>Teléfono (*)</label>
                                    <input type="text" id="telefono" name="telefono"
                                        class="form-control bg-transparent mb-3" required>
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="form-group">
                                    <label>Dirección (*)</label>
                                    <input type="text" id="direccion" name="direccion"
                                        class="form-control bg-transparent mb-3" required>
                                </div>
                            </div>
                            <div class="col-12 col-md-3">
                                <!-- <div class="form-group">
                                    <label>Edad (*)</label>
                                    <input type="text" id="edad" name="edad" class="form-control bg-transparent mb-3"
                                        required>
                                </div> -->
                            </div>
                            <div class="col-12 col-md-3">
                                <div class="form-group">
                                    <label>Municipio (*)</label>
                                    <select class="form-control" name="municipio" id="municipio" required>
                                        <option value="">---SELECCIONE UN MUNICIPIO---</option>
                                        @foreach (DB::table('gl_municipios')->where('estado_id', 19)->get() as $municipio)
                                            <option value="{{$municipio->id}}">{{$municipio->descripcion}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-md-3">
                                <div class="form-group">
                                    <label>Parroquia (*)</label>
                                    <select class="form-control" name="parroquia" id="parroquia" required>
                                        <option>---SELECCIONE UNA PARROQUIA---</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="form-group">
                                    <label>UBCH / CLAP / CC </label>
                                    <input type="text" id="ubch_clap_cc" name="ubch_clap_cc"
                                        class="form-control bg-transparent mb-3">
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="form-group">
                                    <label>Responsabilidad Politica (*)</label>
                                    <input type="text" id="resp_politica" name="resp_politica" class="form-control mb-3"
                                        required>
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="form-group">
                                    <label>Sector Solicitud (*)</label>
                                    <input type="text" id="sector_solicitud" name="sector_solicitud"
                                        class="form-control mb-3" required>
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="form-group">
                                    <label>Descripción (*)</label>
                                    <textarea name="descripcion_solicitud" id="descripcion_solicitud" rows="5"
                                        class="form-control" required></textarea>
                                </div>
                            </div>
                            <div class="col-12 col-md-6">
                                <div class="form-group">
                                    <label>Observación</label>
                                    <textarea name="observacion" id="observacion" rows="5" class="form-control"></textarea>
                                </div>
                            </div>
                            <div class="col-12 col-md-5">
                                <div class="form-group">
                                    <label>Atendido Por (*)</label>
                                    <input type="text" id="atendido_procesado" name="atendido_procesado"
                                        class="form-control mb-3" required>
                                </div>
                            </div>
                            <div class="col-12 col-md-3 ml-auto">
                                <div class="form-group">
                                    <label>Fecha de Atención (*)</label>
                                    <input type="date" id="fecha_atencion" name="fecha_atencion" class="form-control mb-3"
                                        required>
                                </div>
                            </div>
                            <div class="col-12 col-md-3">
                                <div class="form-group">
                                    <label>Estado Actual (*)</label>
                                    <select class="form-control" name="estatus" id="estatus" required>
                                        <option value="">---SELECCIONE---</option>
                                        <option value="ATENDIDO">RECIBIDO</option>
                                        <option value="ATENDIDO">ATENDIDO</option>
                                        <option value="ATENDIDO">PROCESADO</option>
                                        <option value="CULMINADO">CULMINADO</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="btn btn-default" data-dismiss="modal"><b>Cerrar</b></button>
                        <div>
                            <button type="button" class="btn bg-gradient-danger shadow mr-2" id="btn-pdf-detalle" title="Generar PDF">
                                <i class="fas fa-file-pdf"></i>
                            </button>
                            <button type="submit" class="btn bg-gradient-navy shadow" id="btn-submit">
                                <i class="fas fa-check"></i> Guardar
                            </button>
                        </div>
                    </div>
                </form>
            </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-danger btn-sm shadow mr-2" id="btn-pdf" title="Generar PDF">
                                <i class="fas fa-file-pdf"></i>
                            </a>
                            <a href="#" class="btn bg-gradient-navy btn-sm shadow" id="btn-add" data-toggle="modal"
                                data-target="#new-caso" title="Nuevo Caso"><i class="fa fa-plus"></i> Nuevo Caso</a>
                        </div>
                    </div>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-striped table-sm" id="tabla-casos">
                            <thead class="text-center">
                                <th>N°</th>
                                <th>Fecha Recibido</th>
                                <th>Cédula</th>
                                <th>Nombre</th>
                                <th>Sector</th>
                                <th>Estatus</th>
                                <th>Acciones</th>
                            </thead>
                            <tbody id="tbody-casos"></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
    <script>
        $(document).ready(function () {

            consultarCasos();

            // Reiniciar formulario de registro
            $('#btn-add').click(function () {
                $('#form-edit').trigger('reset');
                $('#form-add').trigger('reset');
                $('#form-edit').attr('id', 'form-add');
            });

            // Metodo para boton editar atencion
            $(document).on("click", ".edit", function () {
                $('#form-edit').trigger('reset');
                $('#form-add').trigger('reset');
                $('#form-add').attr('id', 'form-edit');
                var datos = JSON.parse($(this).attr('data'));
                id = datos.id;

                // Guardar referencia a la fila actual
                $('#new-caso').data('fila-actual', $(this).closest('tr'));

                $("#fecha_recibido").val(moment(datos.fecha_recibido).utc().format('yyyy-MM-DD'));
                $("#nombre").val(datos.nombre);
                $("#cedula").val(datos.cedula);
                // $("#edad").val(datos.edad);
                $("#telefono").val(datos.telefono);
                $("#direccion").val(datos.direccion);
                $("#municipio").val(datos.municipio);
                $("#municipio").trigger("change");
                setTimeout(function () {
                    $("#parroquia").val(datos.parroquia); // Llenar el campo
                }, 1000);
                $("#ubch_clap_cc").val(datos.ubch_clap_cc);
                $("#resp_politica").val(datos.resp_politica);
                $("#sector_solicitud").val(datos.sector_solicitud);
                $("#descripcion_solicitud").val(datos.descripcion_solicitud);
                $("#observacion").val(datos.observacion);
                $("#atendido_procesado").val(datos.atendido_procesado);
                $("#fecha_atencion").val(moment(datos.fecha_atencion).utc().format('yyyy-MM-DD'));
                $("#estatus").val(datos.estatus);

            })

            function consultarCasos() {

                fetch('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;
                        var template = "";
                        data.data.forEach(e => {

                            var datos = JSON.stringify(e);
                            template += `
                                                            <tr>
                                                                <td class="text-center"> ${num}</td>
                                                                <td class="text-center"> ${moment(e.fecha_recibido).utc().format('DD-MM-yyyy')}</td>
                                                                <td class="text-center"> ${e.cedula}</td>
                                                                <td class="text-center"> ${e.nombre}</td>
                                                                <td class="text-center"> ${e.sector_solicitud}</td>
                                                                <td class="text-center"> ${e.estatus}</td>
                                                                <td class="text-center"> 
                                                                    <button type="button" class="edit btn btn-sm bg-gradient-navy" data='${datos}' data-toggle="modal" data-target="#new-caso" title="Editar Caso">
                                                                        <i class="fas fa-edit"></i>
                                                                    </button>
                                                                    <button type="button" class="anular btn btn-sm bg-gradient-navy" data='${datos}' title="Anular Caso">
                                                                        <i class="fas fa-ban"></i>
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                        `;
                            num++;
                        });
                        //agregamos los datos a la tabla
                        $('#tabla-casos').DataTable().destroy();

                        $('#tbody-casos').html(template);

                        $("table").DataTable({
                            language: translate,
                            responsive: true
                        });

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

            //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('atenciones/update/' + id, {
                    method: 'POST',
                    body: form,
                    headers: {
                        // 'Authorization': 'Bearer ' + token, 
                    }
                })
                    .then(res => res.json())
                    .then(data => {
                        if (data.status) {
                            consultarCasos();
                            Swal.fire({
                                title: 'Actualización correcta',
                                icon: 'success',
                                timer: 3000,
                                // willClose: () => {

                                // }
                            });
                            $('#new-caso').modal('hide');
                        }
                        if (!data.status) {
                            Swal.fire(
                                '¡Error!',
                                'Error procesando los datos...',
                                'error'
                            )

                        }
                    })

            })

            $("#municipio").change(function () {
                var municipio_id = this.value;
                consultarParroquias(municipio_id);

            });

            function consultarParroquias(municipio_id) {
                fetch(
                    'municipios/show/' + municipio_id, {
                    method: 'GET'
                }
                ).then(res => res.json()).then(function (data) {

                    var parroquias = `<option value="">---SELECCIONE PARROQUIA---</option>`;
                    $("#select_parroquia").html("");
                    if (data.status) {
                        data.data.gl_parroquias.forEach(parroquia => {
                            parroquias += `<option value="${parroquia.id}">${parroquia.descripcion}</option>`;
                        });

                        $("#parroquia").html(parroquias);
                    } else {
                        console.log("Error");
                    }

                })
                    .catch(function (err) {
                        console.log(err);
                    })

            }

            $('input[type="text"], textarea').on('input', function () {
                $(this).val($(this).val().toUpperCase()); // Convierte el texto en tiempo real
            });


            $(document).on('submit', '#form-add', function (e) {
                e.preventDefault();
                let form = new FormData(this);
                form.delete('_method');
                // for (let [key, value] of form.entries()) {
                //     console.log(`Clave: ${key}, Valor: ${value}`);
                // }
                fetch(
                    'atenciones/store',
                    {
                        method: 'POST',
                        body: form
                    }
                ).then(res => res.json()
                ).then(function (data) {
                    if (data.status) {
                        consultarCasos();
                        Swal.fire(
                            '¡Perfecto!',
                            'Registro Creado Correctamente',
                            'success'
                        )
                        $('#new-caso').modal('hide');
                    }
                })

            })

            // Metodo para aunlar atencion
            $(document).on("click", ".anular", function (e) {
                var datos = JSON.parse($(this).attr('data'));
                id = datos.id;

                let correlativo = $(this).attr('data-correlativo');
                Swal.fire({
                    title: '¿Estás seguro(a) de anular el caso N° ' + datos.correlativo + ' ?',
                    text: '',
                    icon: 'warning',
                    html: `Tenga en cuenta que si anula un caso la información no estará disponible. <br>
                                                                <input id="motivo-anulacion" class="form-control mt-2 col-12" placeholder="Motivo de la anulación" required>`,
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    cancelButtonText: 'Cancelar',
                    confirmButtonText: 'Si, anular',
                    preConfirm: () => {
                        const motivo = document.getElementById('motivo-anulacion').value;
                        if (!motivo) {
                            Swal.showValidationMessage('<b>El motivo de la anulación es obligatorio<b>');
                            return false;
                        }
                        return motivo;
                    }
                }).then((result) => {
                    if (result.isConfirmed) {
                        const motivo = result.value; // Obtener el valor del input 

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

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

            })

            // Generar PDF
            $('#btn-pdf').click(function(e) {
                e.preventDefault();
                // Obtener los datos actuales de la tabla
                let tabla = $('#tabla-casos').DataTable();
                let datos = tabla.rows().data();
                
                // Crear una nueva ventana para previsualizar
                let win = window.open('', '_blank');
                
                // Crear el contenido HTML del reporte
                let html = `
                    <html>
                    <head>
                        <title>Reporte de Casos - Despacho Gobernación</title>
                        <style>
                            @page {
                                margin: 20px;
                                margin-bottom: 0;
                            }
                            body { font-family: Arial, sans-serif; }
                            table { width: 100%; border-collapse: collapse; margin-top: 20px; }
                            th, td { 
                                border: 1px solid #ddd; 
                                padding: 8px; 
                                text-align: center; 
                            }
                            th { 
                                background-color: #f2f2f2; 
                                text-align: center;
                            }
                            .header { text-align: center; margin-bottom: 20px; position: relative; }
                            .header img { height: 60px; }
                            .fecha-impresion {
                                position: fixed;
                                bottom: 20px;
                                left: 20px;
                                text-align: left;
                                font-size: 12px;
                            }
                        </style>
                    </head>
                    <body>
                        <div class="header">
                            <img src="{{asset('dist/img/icono_sp.png')}}" alt="Logo">
                            <h2>Reporte de Casos - Despacho Gobernación</h2>
                        </div>
                        <div class="fecha-impresion">
                            <p>Fecha de Impresión: ${new Date().toLocaleDateString()}</p>
                        </div>
                        <table>
                            <thead>
                                <tr>
                                    <th>N°</th>
                                    <th>Fecha Recibido</th>
                                    <th>Cédula</th>
                                    <th>Nombre</th>
                                    <th>Sector</th>
                                    <th>Estatus</th>
                                </tr>
                            </thead>
                            <tbody>`;
                
                // Agregar los datos filtrados de la tabla
                tabla.rows({search:'applied'}).every(function() {
                    let data = this.data();
                    html += `
                        <tr>
                            <td>${data[0]}</td>
                            <td>${data[1]}</td>
                            <td>${data[2]}</td>
                            <td>${data[3]}</td>
                            <td>${data[4]}</td>
                            <td>${data[5]}</td>
                        </tr>`;
                });
                
                html += `
                            </tbody>
                        </table>
                    </body>
                    </html>`;
                
                // Escribir el contenido en la nueva ventana
                win.document.write(html);
                win.document.close();
                
                // Esperar a que cargue el contenido y mostrar el diálogo de impresión
                win.setTimeout(function() {
                    win.print();
                }, 250);
            });
            
            // Generar PDF del detalle del caso
            $(document).on('click', '#btn-pdf-detalle', function(e) {
                e.preventDefault();
                
                // Obtener los datos del formulario
                let form = document.getElementById('form-edit');
                let formData = new FormData(form);
                let datos = {};
                formData.forEach((value, key) => datos[key] = value);
                
                // Obtener el número de caso de la fila que se está editando
                let filaActual = $('#new-caso').data('fila-actual');
                if (filaActual) {
                    datos.correlativo = $(filaActual).find('td:first').text().trim();
                }
                
                // Crear una nueva ventana para previsualizar
                let win = window.open('', '_blank');
                
                // Crear el contenido HTML del reporte
                let html = `
                    <html>
                    <head>
                        <title>Detalle de Caso - Despacho Gobernación</title>
                        <style>
                            @page {
                                margin: 20px;
                                margin-bottom: 0;
                            }
                            body { 
                                font-family: Arial, sans-serif;
                                margin: 20px;
                            }
                            .header {
                                text-align: center;
                                margin-bottom: 30px;
                                position: relative;
                            }
                            .header img {
                                max-width: 150px;
                            }
                            .fecha-impresion {
                                position: fixed;
                                bottom: 20px;
                                left: 20px;
                                text-align: left;
                                font-size: 12px;
                            }
                            table {
                                width: 100%;
                                border-collapse: collapse;
                                margin-bottom: 20px;
                            }
                            th, td {
                                border: 1px solid #ddd;
                                padding: 8px;
                            }
                            th {
                                background-color: #f4f4f4;
                            }
                        </style>
                    </head>
                    <body>
                        <div class="header">
                            <img src="{{asset('dist/img/icono_sp.png')}}" alt="Logo">
                            <h2>Detalle de Caso - Despacho Gobernación</h2>
                        </div>
                        <div class="content-wrapper">
                            <div class="section">
                                <h3>Información Personal</h3>
                                <table>
                                    <tr>
                                        <th>Nombre</th>
                                        <td>${datos.nombre || ''}</td>
                                        <th>Cédula</th>
                                        <td>${datos.cedula || ''}</td>
                                    </tr>
                                    <tr>
                                        <th>Resp. Política</th>
                                        <td>${datos.resp_politica || ''}</td>
                                        <th>Teléfono</th>
                                        <td>${datos.telefono || ''}</td>
                                    </tr>
                                </table>
                            </div>

                            <div class="section">
                                <h3>Ubicación</h3>
                                <table>
                                    <tr>
                                        <th>Dirección</th>
                                        <td>${datos.direccion || ''}</td>
                                    </tr>
                                    <tr>
                                        <th>Municipio</th>
                                        <td>${$('#municipio option:selected').text() || ''}</td>
                                    </tr>
                                </table>
                            </div>

                            <div class="section">
                                <h3>Detalles del Caso</h3>
                                <table>
                                    <tr>
                                        <th>Fecha de Recibido</th>
                                        <td>${formatearFecha(datos.fecha_recibido) || ''}</td>
                                        <th>Número de Caso</th>
                                        <td>${datos.correlativo || ''}</td>
                                    </tr>
                                    <tr>
                                        <th>UBCH/CLAP/CC</th>
                                        <td>${datos.ubch_clap_cc || ''}</td>
                                        <th>Sector Solicitud</th>
                                        <td>${datos.sector_solicitud || ''}</td>
                                    </tr>
                                    <tr>
                                        <th>Descripción</th>
                                        <td colspan="3">${datos.descripcion_solicitud || ''}</td>
                                    </tr>
                                    <tr>
                                        <th>Observaciones</th>
                                        <td colspan="3">${datos.observacion || ''}</td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="fecha-impresion">
                            <p>Fecha de Impresión: ${new Date().toLocaleDateString()}</p>
                        </div>
                    </body>
                    </html>`;
                
                // Escribir el contenido en la nueva ventana
                win.document.write(html);
                win.document.close();
                
                // Esperar a que cargue el contenido y mostrar el diálogo de impresión
                win.setTimeout(function() {
                    win.print();
                }, 250);
            });
            
            // Función para formatear fechas
            function formatearFecha(fecha) {
                return moment(fecha).format('DD-MM-YYYY');
            }

            function consultarCasos() {

                fetch('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;
                        var template = "";
                        data.data.forEach(e => {

                            var datos = JSON.stringify(e);
                            template += `
                                                            <tr>
                                                                <td class="text-center"> ${num}</td>
                                                                <td class="text-center"> ${moment(e.fecha_recibido).utc().format('DD-MM-yyyy')}</td>
                                                                <td class="text-center"> ${e.cedula}</td>
                                                                <td class="text-center"> ${e.nombre}</td>
                                                                <td class="text-center"> ${e.sector_solicitud}</td>
                                                                <td class="text-center"> ${e.estatus}</td>
                                                                <td class="text-center"> 
                                                                    <button type="button" class="edit btn btn-sm bg-gradient-navy" data='${datos}' data-toggle="modal" data-target="#new-caso" title="Editar Caso">
                                                                        <i class="fas fa-edit"></i>
                                                                    </button>
                                                                    <button type="button" class="anular btn btn-sm bg-gradient-navy" data='${datos}' title="Anular Caso">
                                                                        <i class="fas fa-ban"></i>
                                                                    </button>
                                                                </td>
                                                            </tr>
                                                        `;
                            num++;
                        });
                        //agregamos los datos a la tabla
                        $('#tabla-casos').DataTable().destroy();

                        $('#tbody-casos').html(template);

                        $("table").DataTable({
                            language: translate,
                            responsive: true
                        });

                    })
                    .catch(error => console.error('Error:', error));
            }
        })
    </script>
@endsection