@extends('adminlte::page')

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

@section('title', 'Reporte de Servicios Solicitados por Clientes | Guiñez Ingeniería')

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

    </div>
@stop

@section('content')

    <div class="card card-aspen">
        <div class="card-header">
            <h3 class="card-title">Reporte de Servicios Solicitados por Clientes</h3>
        </div>
        <div class="card-body">
            <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>Orden de Compra</th>
                            <th>Servicio</th>
                            <th>Área/Sector</th>
                            <th>Descripción</th>
                            <th>Fecha</th>
                        </tr>
                    </thead>
                    <tbody>

                    </tbody>
                </table>
            </div>
        </div>
        <!-- /.card-body -->
    </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",
        }, {
            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: [1, 2, 3, 4, 5, 6]
            },
            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-servicios-clientes') }}',
                    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": "orden_compra",
                    "name": "orden_compra"
                }, {
                    "data": "servicio",
                    "name": "servicio"
                }, {
                    "data": "area",
                    "name": "area"
                }, {
                    "data": "descripcion",
                    "name": "descripcion"
                }, {
                    "data": "fecha_creacion",
                    "name": "fecha_creacion"
                }, ],
                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-servicios-clientes-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": "orden_compra",
                    "name": "orden_compra"
                }, {
                    "data": "servicio",
                    "name": "servicio"
                }, {
                    "data": "area",
                    "name": "area"
                }, {
                    "data": "descripcion",
                    "name": "descripcion"
                }, {
                    "data": "fecha_creacion",
                    "name": "fecha_creacion"
                },],
                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 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