@extends('adminlte::page')

@section('plugins.Datatables', true)
@section('plugins.Sweetalert2', true)
@section('plugins.Select1', true)

@section('title', 'Reporte Ubicación De Coordenadas En Terreno | Guiñez Ingeniería')

@section('content_header')
    <div class="container-fluid">

    </div>
@stop

@section('content')
<div class="row">
    <div class="col-md-3 col-sm-3 col-12">
        <div class="info-box">
            <span class="info-box-icon bg-info"><i class="fas fa-prescription-bottle"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Total de Puntos Medidos</span>
                <span class="info-box-number">{{ $totalDePuntosMedidos }}</span>
            </div>
        </div>
    </div>

    <div class="col-md-3 col-sm-3 col-12">
        <div class="info-box">
            <span class="info-box-icon bg-secondary"><i class="fas fa-clock"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Total de Puntos Pendientes</span>
                <span class="info-box-number">{{ $totalDePuntosPendientes }}</span>
            </div>

        </div>
    </div>

    <div class="col-md-3 col-sm-3 col-12">
        <div class="info-box">
            <span class="info-box-icon bg-success"><i class="fas fa-check-double"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Total de Puntos Aceptadas</span>
                <span class="info-box-number">{{ $totalDePuntosAprobados }}</span>
            </div>

        </div>
    </div>

    <div class="col-md-3 col-sm-3 col-12">
        <div class="info-box">
            <span class="info-box-icon bg-danger"><i class="fas fa-times-circle"></i></span>
            <div class="info-box-content">
                <span class="info-box-text">Total de Puntos Descartadas</span>
                <span class="info-box-number">{{ $totalDePuntosRechazados }}</span>
            </div>

        </div>
    </div>

</div>

    <div class="card card-aspen">
        <div class="card-header">
            <h3 class="card-title">Reporte Ubicación de Coordenadas en Terreno</h3>
        </div>
        <div class="card-body">
            <p style="color:red;">El filtrado por rango de fechas se aplica sobre la fecha de medición.</p>
            <div style="display: grid; grid-template-columns: 35% 35% 14% 14%; grid-column-gap: 10px;">
                <div class="form-group">
                    <label>Fecha Desde</label>
                    <input type="date" class="form-control" name="fecha_desde" id="fechaDesde">
                    <div class="invalid-feedback" id="valicacionCampoDesde">
        
                    </div>
                </div>

                <div class="form-group">
                    <label>Fecha Hasta</label>
                    <input type="date" class="form-control" name="fecha_hasta" id="fechaHasta">
                    <div class="invalid-feedback" id="valicacionCampofechaHasta">
        
                    </div>
                </div>

                <div class="d-flex align-items-center">
                    <button type="button" class="btn btn-primary btn-block" style="margin-bottom: -14px;" onclick="filtradoPorFechas()"><i class="fas fa-filter"></i> Filtrar </button>
                </div>
        
                <div class="d-flex align-items-center">
                    <button type="button" class="btn btn-info btn-block" style="margin-bottom: -14px;" onclick="limpiarFechas()"><i class="fas fa-redo"></i> Limpiar </button>
                </div>
            </div>

            <div id="scroll-header-table" style="display: none;">
                <div style="color:white; visibility:hidden; font-size: 1px;">s</div>
            </div>
            <div class="table-responsive" id="table-responsive">
                <table class="table table-bordered" id="datatable" style="width:100%">
                    <thead>
                        <tr>
                            <th>Acción</th>
                            <th>Cliente</th>
                            <th>Empresa</th>
                            <th>Contrato</th>
                            <th>Área/Sector</th>
                            <th>Orden de Trabajo</th>
                            <th>Punto Medición</th>
                            <th>Punto Sondaje</th>
                            <th>Sistema de Proyección</th>
                            <th>Conversión a</th>
                            <th>Este Original Terreno</th>
                            <th>Norte Original Terreno</th>
                            <th>Cota Original Terreno</th>
                            <th>Este Convertido</th>
                            <th>Norte Convertido</th>
                            <th>Cota Convertido</th>
                            <th>Responsable</th>
                            <th>Fecha Medición</th>
                            <th>Observación</th>
                            <th>Estado</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
        <!-- /.card-body -->
    </div>

    <div class="modal fade" id="modalVerObservacionItem" tabindex="-1" aria-labelledby="LabelObservacionItem" aria-hidden="true">
        <form id="formularioModalVerObservacionItem">
            @csrf
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: #B08C1C; color:white;">
                        <h5 class="modal-title" id="LabelModalVerObservacionItem"></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:white;">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>Observación</label>
                            <textarea class="form-control" id="verModalObservacionItem" rows="3" readonly="true"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="modal fade" id="modalVerMotivoDelRechazoItem" tabindex="-1" aria-labelledby="LabelObservacionItem" aria-hidden="true">
        <form id="formularioModalVerMotivoDelRechazoItem">
            @csrf
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header" style="background-color: #B08C1C; color:white;">
                        <h5 class="modal-title" id="LabelModalVerMotivoDelRechazoItem"></h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close" style="color:white;">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label>Motivo del Descarte</label>
                            <textarea class="form-control" id="verModalMotivoDelRechazoItem" rows="3" readonly="true"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cerrar</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
@stop

@section('css')
    <link rel="stylesheet" href="{{ asset('css/generico.css') }}">
@stop

@section('js')
    <script>
        var botonesDatatable = [{
            extend: "csv",
            text: '<i class="fas fa-file-csv"></i> &nbsp; CSV &nbsp;',
            title: null,
            titleAttr: "Exportar a CSV",
            className: "btn btn-csv-en-datatable",
            createEmptyCells: true,
            exportOptions: {
                columns: [ 6, 10, 11, 12, 13, 14, 15, 16, 17, 18]
            },
            customize: function (csv) {
                
    
                // 🔹 Parser robusto que respeta comillas, comas y saltos de línea
                const parseCSV = (text) => {
                    const rows = [];
                    let currentRow = [];
                    let currentValue = '';
                    let insideQuotes = false;
            
                    for (let i = 0; i < text.length; i++) {
                        const char = text[i];
                        const nextChar = text[i + 1];
            
                        if (char === '"' && insideQuotes && nextChar === '"') {
                            currentValue += '"';
                            i++;
                        } else if (char === '"') {
                            insideQuotes = !insideQuotes;
                        } else if (char === ',' && !insideQuotes) {
                            currentRow.push(currentValue);
                            currentValue = '';
                        } else if ((char === '\n' || char === '\r') && !insideQuotes) {
                            if (currentValue || currentRow.length) {
                                currentRow.push(currentValue);
                                rows.push(currentRow);
                                currentRow = [];
                                currentValue = '';
                            }
                        } else {
                            currentValue += char;
                        }
                    }
            
                    if (currentValue || currentRow.length) currentRow.push(currentValue);
                    if (currentRow.length) rows.push(currentRow);
                    return rows;
                };
            
                // 🔹 Función para reconstruir el CSV correctamente
                const buildCSV = (rows) =>
    rows
        .map(r =>
            r.map(v => `"${v.replace(/"/g, '""').replace(/;/g, ',')}"`).join(',')
        )
        .join('\n');
            
                // 🔸 Parsear CSV original
                let data = parseCSV(csv);
            
                if (data.length > 1) {
                    // 🔹 Encabezados renombrados
                    data[0] = [
                        "Punto Medición",
                        "Este Local",
                        "Norte Local",
                        "Cota Local",
                        "Este UTM",
                        "Norte UTM",
                        "Cota UTM",
                        "Responsable",
                        "Fecha Medición",
                        "Detalle"
                    ];
            
                    // 🔹 Definir columnas ficticias
                    const columnasExtra = [
                        { pos: 8, nombre: "Replanteo", valor: "Replanteo OK" },
                        { pos: 9, nombre: "Replanteado Con", valor: "Replanteado con Personal Drilling" },
                        { pos: 11, nombre: "Estado", valor: "" }
                    ];
            
                    // 🔸 Insertar columnas en orden inverso
                    columnasExtra.slice().reverse().forEach(col => {
                        data[0].splice(col.pos, 0, col.nombre);
                        for (let i = 1; i < data.length; i++) {
                            if (data[i].length > 1) {
                                data[i].splice(col.pos, 0, col.valor);
                            }
                        }
                    });
            
                    // 🔹 Reordenar columnas específicas
                    const header = data[0];
            
                    const order = [
                        "Replanteo",
                        "Replanteado Con",
                        "Fecha Medición",
                        "Columna Desconocida",
                        "Detalle"
                    ];
            
                    order.forEach((colName, idx) => {
                        const currentIndex = header.indexOf(colName);
                        const desiredIndex = header.indexOf("Responsable") + 1 + idx;
            
                        if (currentIndex !== -1 && desiredIndex !== -1 && currentIndex !== desiredIndex) {
                            // Mover encabezado
                            const [headerValue] = header.splice(currentIndex, 1);
                            header.splice(desiredIndex, 0, headerValue);
            
                            // Mover cada fila
                            for (let i = 1; i < data.length; i++) {
                                const [cellValue] = data[i].splice(currentIndex, 1);
                                data[i].splice(desiredIndex, 0, cellValue);
                            }
                        }
                    });
                }
            
                // 🔹 Reconstruir el CSV final
                return buildCSV(data);
            },
        }, {
            extend: "excel",
            text: '<i class="fas fa-file-excel"></i> &nbsp; Excel &nbsp;',
            title: null,
            titleAttr: "Exportar a Excel",
            className: "btn btn-excel-en-datatable",
            createEmptyCells: true,
            exportOptions: {
                columns: [ 6, 10, 11, 12, 13, 14, 15, 16, 17, 18]
            },
            customizeData: function (data) {
                data.header = [
                    "Punto Medición",
                    "Este Local",
                    "Norte Local",
                    "Cota Local",
                    "Este UTM",
                    "Norte UTM",
                    "Cota UTM",
                    "Responsable",
                    "Fecha Medición",
                    "Detalle",
                ];

                const posicion1 = 8;
                const nombreColumna1 = "Replanteo";
                const valorConstante1 = "Replanteo OK";
                const posicion2 = 9;
                const nombreColumna2 = "Replanteado Con";
                const valorConstante2 = "Replanteado con Personal Drilling";
                const posicion3 = 11;
                const nombreColumna3 = "Estado";
                const valorConstante3 = "";
        
                data.header.splice(posicion1, 0, nombreColumna1);
                data.header.splice(posicion2, 0, nombreColumna2);
                data.header.splice(posicion3, 0, nombreColumna3);
        
                data.body.forEach(function (row) {
                    row.splice(posicion1, 0, valorConstante1);
                    row.splice(posicion2, 0, valorConstante2);
                    row.splice(posicion3, 0, valorConstante3);
                });
            },
            pageStyle: {
                sheetPr: {
                    pageSetUpPr: {
                        fitToPage: 1 // Fit the printing to the page
                    }
                },
                printOptions: {
                    horizontalCentered: true,
                    verticalCentered: true,
                },
                pageSetup: {
                    orientation: "landscape", // Orientation
                    paperSize: "9", // Paper size (1 = Letter, 9 = A4)
                    fitToWidth: "1", // Fit to page width
                    fitToHeight: "0", // Fit to page height
                },
                pageMargins: {
                    left: "0.2",
                    right: "0.2",
                    top: "0.4",
                    bottom: "0.4",
                    header: "0",
                    footer: "0",
                },
                repeatHeading: true, // Repeat the heading row at the top of each page
                repeatCol: 'A:A', // Repeat column A (for pages wider than a single printed page)
            },
            excelStyles: [{
                    "template": "blue_medium"
                },
                {
                    cells: "1",
                    style: {
                        alignment: {
                            vertical: "center",
                            horizontal: "center",
                        }
                    }
                },
                {
                    cells: "s:",
                    style: {
                        alignment: {
                            horizontal: "center",
                            wrapText: true,
                        }
                    }
                }
            ]
        }, ];
    </script>

    @if (Gate::check('orden-trabajo.index') || Gate::check('orden-trabajo.index-cliente'))
        <script>
            let datatable = $("#datatable").DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('reporte.obtener-registros-ubicacion-coordenada-terreno') }}',
                    dataType: "json",
                    type: "POST",
                    data: function(d) {
                        d._token = "{{ csrf_token() }} ";
                        d.fecha_desde = $('#fechaDesde').val();
                        d.fecha_hasta = $('#fechaHasta').val();
                    },
                },
                columns: [{
                    "data": "accion",
                    "name": "accion",
                }, {
                    "data": "cliente",
                    "name": "cliente"
                }, {
                    "data": "empresa",
                    "name": "empresa"
                }, {
                    "data": "contrato",
                    "name": "contrato"
                }, {
                    "data": "area",
                    "name": "area"
                }, {
                    "data": "orden_trabajo",
                    "name": "orden_trabajo"
                },{
                    "data": "punto",
                    "name": "punto"
                }, {
                    "data": "punto_sondaje",
                    "name": "punto_sondaje"
                }, {
                    "data": "sistema_proyeccion",
                    "name": "sistema_proyeccion"
                },{
                    "data": "conversion_a",
                    "name": "conversion_a"
                },{
                    "data": "este_original",
                    "name": "este_original"
                }, {
                    "data": "norte_original",
                    "name": "norte_original"
                }, {
                    "data": "cota_original",
                    "name": "cota_original"
                }, {
                    "data": "este_convertido",
                    "name": "este_convertido"
                }, {
                    "data": "norte_convertido",
                    "name": "norte_convertido"
                }, {
                    "data": "cota_convertido",
                    "name": "cota_convertido"
                },{
                    "data": "responsable",
                    "name": "responsable"
                }, {
                    "data": "fecha_medicion",
                    "name": "fecha_medicion"
                }, {
                    "data": "observacion",
                    "name": "observacion"
                }, {
                    "data": "estado",
                    "name": "estado"
                }, ],
                order: [
                    [0, "desc"]
                ],
                orderCellsTop: true,
                ordering: true,
                lengthMenu: [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, "Todos"],
                ],
                language: {
                    processing: "Procesando...",
                    search: "Buscar",
                    lengthMenu: "Mostrar _MENU_ Registros",
                    info: "Mostrando _START_ al _END_ de _TOTAL_ registros",
                    infoEmpty: "Opcion no disponible",
                    infoFiltered: "",
                    infoPostFix: "",
                    loadingRecords: "Cargandos registros",
                    zeroRecords: "No hay datos disponibles en la tabla",
                    emptyTable: "No hay datos disponibles en la tabla",
                    paginate: {
                        first: "Primero",
                        previous: "Anterior",
                        next: "Siguiente",
                        last: "Ultimo",
                    },
                    aria: {
                        sortAscending: ": Activar orden de columna ascendente",
                        sortDescending: ": Activar orden de columna desendente"
                    }
                },
                dom: "<'row'<'col-sm-4'B><'col-sm-4 d-flex justify-content-center' l><'col-sm-4'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-6'i><'col-sm-6'p>>",
                buttons: botonesDatatable,
                drawCallback: function(settings) {
                    if(document.getElementById("table-responsive") && document.getElementById("scroll-header-table")){
                        var tablaResponsive=document.getElementById("table-responsive");
                        if(tablaResponsive.scrollWidth>tablaResponsive.clientWidth){
                            document.querySelector("#scroll-header-table").style.display="block";
                            document.querySelector("#scroll-header-table div").style.width=tablaResponsive.scrollWidth+"px";
                        }else{
                            document.querySelector("#scroll-header-table").style.display="none";
                            document.querySelector("#scroll-header-table div").style.width="0px";
                        }
                    }
                },
            });

            $("#datatable thead tr").clone(true).appendTo("#datatable thead");

            $("#datatable thead tr:eq(1) th").each(function(i) {
                var title = $(this).text(); //es el nombre de la columna
                if (title != "Acción" && title != "Selección") {
                    $(this).removeClass("sorting");
                    $(this).removeClass("sorting_asc");
                    $(this).html(
                        '<input class="form-control" type="text" placeholder="Buscar ' + title + '" />'
                    );
                    $(this).unbind();
                    $(this).parent().attr('id', 'searchColumns');

                    $("input", this).on("keyup change", function() {
                        if (datatable.column(i).search() !== this.value) {
                            datatable.column(i).search(this.value).draw();
                        }
                    });
                } else {
                    $(this).html("<div></div>");
                    $(this).removeClass("sorting");
                    $(this).removeClass("sorting_asc");
                }
            });
        </script>
    @elseif(Gate::check('orden-trabajo.index-creadas') || Gate::check('orden-trabajo.index-creadas-cliente'))
        <script>
            let datatable = $("#datatable").DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: '{{ route('reporte.obtener-registros-ubicacion-coordenada-terreno-creadas') }}',
                    dataType: "json",
                    type: "POST",
                    data: function(d) {
                        d._token = "{{ csrf_token() }} ";
                        d.fecha_desde = $('#fechaDesde').val();
                        d.fecha_hasta = $('#fechaHasta').val();
                    },
                },
                columns: [{
                    "data": "accion",
                    "name": "accion",
                }, {
                    "data": "cliente",
                    "name": "cliente"
                }, {
                    "data": "empresa",
                    "name": "empresa"
                }, {
                    "data": "contrato",
                    "name": "contrato"
                }, {
                    "data": "area",
                    "name": "area"
                },{
                    "data": "orden_trabajo",
                    "name": "orden_trabajo"
                }, {
                    "data": "punto",
                    "name": "punto"
                }, {
                    "data": "punto_sondaje",
                    "name": "punto_sondaje"
                }, {
                    "data": "sistema_proyeccion",
                    "name": "sistema_proyeccion"
                },{
                    "data": "conversion_a",
                    "name": "conversion_a"
                },{
                    "data": "este_original",
                    "name": "este_original"
                }, {
                    "data": "norte_original",
                    "name": "norte_original"
                }, {
                    "data": "cota_original",
                    "name": "cota_original"
                }, {
                    "data": "este_convertido",
                    "name": "este_convertido"
                }, {
                    "data": "norte_convertido",
                    "name": "norte_convertido"
                }, {
                    "data": "cota_convertido",
                    "name": "cota_convertido"
                },{
                    "data": "responsable",
                    "name": "responsable"
                }, {
                    "data": "fecha_medicion",
                    "name": "fecha_medicion"
                }, {
                    "data": "observacion",
                    "name": "observacion"
                }, {
                    "data": "estado",
                    "name": "estado"
                }, ],
                order: [
                    [0, "desc"]
                ],
                orderCellsTop: true,
                ordering: true,
                lengthMenu: [
                    [10, 25, 50, 100, -1],
                    [10, 25, 50, 100, "Todos"],
                ],
                language: {
                    processing: "Procesando...",
                    search: "Buscar",
                    lengthMenu: "Mostrar _MENU_ Registros",
                    info: "Mostrando _START_ al _END_ de _TOTAL_ registros",
                    infoEmpty: "Opcion no disponible",
                    infoFiltered: "",
                    infoPostFix: "",
                    loadingRecords: "Cargandos registros",
                    zeroRecords: "No hay datos disponibles en la tabla",
                    emptyTable: "No hay datos disponibles en la tabla",
                    paginate: {
                        first: "Primero",
                        previous: "Anterior",
                        next: "Siguiente",
                        last: "Ultimo",
                    },
                    aria: {
                        sortAscending: ": Activar orden de columna ascendente",
                        sortDescending: ": Activar orden de columna desendente"
                    }
                },
                dom: "<'row'<'col-sm-4'B><'col-sm-4 d-flex justify-content-center' l><'col-sm-4'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-6'i><'col-sm-6'p>>",
                buttons: botonesDatatable,
                drawCallback: function(settings) {
                    if(document.getElementById("table-responsive") && document.getElementById("scroll-header-table")){
                        var tablaResponsive=document.getElementById("table-responsive");
                        if(tablaResponsive.scrollWidth>tablaResponsive.clientWidth){
                            document.querySelector("#scroll-header-table").style.display="block";
                            document.querySelector("#scroll-header-table div").style.width=tablaResponsive.scrollWidth+"px";
                        }else{
                            document.querySelector("#scroll-header-table").style.display="none";
                            document.querySelector("#scroll-header-table div").style.width="0px";
                        }
                    }
                },
            });
    
            $("#datatable thead tr").clone(true).appendTo("#datatable thead");
    
            $("#datatable thead tr:eq(1) th").each(function(i) {
                var title = $(this).text(); //es el nombre de la columna
                if (title != "Acción" && title != "Selección") {
                    $(this).removeClass("sorting");
                    $(this).removeClass("sorting_asc");
                    $(this).html(
                        '<input class="form-control" type="text" placeholder="Buscar ' + title + '" />'
                    );
                    $(this).unbind();
                    $(this).parent().attr('id', 'searchColumns');
    
                    $("input", this).on("keyup change", function() {
                        if (datatable.column(i).search() !== this.value) {
                            datatable.column(i).search(this.value).draw();
                        }
                    });
                } else {
                    $(this).html("<div></div>");
                    $(this).removeClass("sorting");
                    $(this).removeClass("sorting_asc");
                }
            });
        </script>
    @endif

    <script>
        function verObservacionDelPunto(punto, observacion){
            document.getElementById("LabelModalVerObservacionItem").innerHTML="Observación Del Punto "+punto;
            document.getElementById("verModalObservacionItem").value= observacion;
            $("#modalVerObservacionItem").modal("show");
        }

        function verMotivoDelRechazoDelPunto(punto, observacion){
            document.getElementById("LabelModalVerMotivoDelRechazoItem").innerHTML="Motivo del Descarte Del Punto "+punto;
            document.getElementById("verModalMotivoDelRechazoItem").value= observacion;
            $("#modalVerMotivoDelRechazoItem").modal("show");
        }
    </script>

    <script>
        function filtradoPorFechas() {
            datatable.draw();
        }

        function limpiarFechas(){
            document.getElementById("fechaDesde").value="";
            document.getElementById("fechaHasta").value="";
            datatable.draw();
        }
    </script>

    <script>
        function sincronizacionDeScrollerDeLaTabla(event){
            const scrollInferior = document.getElementById("table-responsive");
            const scrollSuperior = document.getElementById("scroll-header-table");
        
            const otherContainer = event.target === scrollInferior ? scrollSuperior : scrollInferior;
            otherContainer.scrollTop = event.target.scrollTop;
            otherContainer.scrollLeft = event.target.scrollLeft;
        }

        if(document.getElementById("table-responsive") && document.getElementById("scroll-header-table")){
            document.getElementById("table-responsive").addEventListener('scroll', sincronizacionDeScrollerDeLaTabla);
            document.getElementById("scroll-header-table").addEventListener('scroll', sincronizacionDeScrollerDeLaTabla);
            
            window.addEventListener('resize', ()=>{
                var tablaResponsive=document.getElementById("table-responsive");
                if(tablaResponsive.scrollWidth>tablaResponsive.clientWidth){
                    document.querySelector("#scroll-header-table").style.display="block";
                    document.querySelector("#scroll-header-table div").style.width=tablaResponsive.scrollWidth+"px";
                }else{
                    document.querySelector("#scroll-header-table").style.display="none";
                    document.querySelector("#scroll-header-table div").style.width="0px";
                }
            });
        }
    </script>
@stop