@extends('fragments.fullTemplate')
@php
    $id_usuario = session('id_usuario');
    if (! session('id_usuario')) {
            header('location: /');
            die();
    }
@endphp
@section('contenido')
    <div class="ui big breadcrumb">
        <div class="section">Muestras</div>
        <i class="right chevron icon divider"></i>
        <div class="active section">Distribución muestras ingresadas</div>
    </div>

    <div class="ui divider"></div>
    <div data-module-notifications-anchor></div>
    <div class="content">
        <div class="col-lg-12 col-md-12 col-sm-12">
            @if(session()->has('success'))
                <div class="alert alert-success text-center alert-dismissible" role="alert">
                    <strong>{{ session()->get('success') }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
            @endif
            @if(session()->has('warning'))
                <div class="alert alert-warning text-center alert-dismissible" role="alert">
                    <strong>{{ session()->get('warning') }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
            @endif
            @if(session()->has('error'))
                <div class="alert alert-danger text-center alert-dismissible" role="alert">
                    <strong>{{ session()->get('error') }}</strong>
                    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
            @endif
            @if (count($errors) > 0)
            <div class="alert alert-danger alert-dismissible" role="alert">
                <strong>¡Error!</strong> Revise los campos obligatorios.<br><br>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <ul>
                @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
                @endforeach
                </ul>
            </div>
            @endif
        </div>
    </div>
    @include('Requisicion_compra.Notificacion.notificacion_requisicion_modal')
    @include('Control_documentos.Notificacion.notificacion_documento_version')
    @include('Modificaciones.notificacion_modificacion')
    @include('Modificaciones.Notificacion.notificacion_modificacion_firma_modal')
    {{--
    <div class="ui segment">
        <form class="ui form" action="almacen_de_muestras_search" method="get">
            <div class="inline fields sx-remove-margin">
                <div class="twelve wide field">
                    <input type="search" name="search" id="search" placeholder="Número de informe ó modelo de la muestra...">
                </div>
                <div class="four wide field">
                    <input class="ui button" type="submit" name="" value="Buscar">
                </div>
            </div>
        </form>
    </div>
    <div class="ui divider"></div>
    --}}
    <button class="ui button fluid green create_reporte_devolucion_almacen_modal" id="reporte_devolucion_almacen_wizzard">
        <i class="pencil alternate icon"></i> Devolución de muestras general 
    </button> 
    <div class="ui divider"></div>
    <!---BITACORA ALMACEN-->
    <button class="ui button fluid green bitacora_almacen" id="reporte_bitacora_almacen">
        <i class="file alternate icon"></i> Bitácora almacén
    </button> 
    <div class="ui divider"></div>
    
    <div class="sx-autorender">
        <div class="sx-scroll-x">
            {{--<p class="text-center" >{{ count($datos) }}</strong> resultados en esta p&aacute;gina</p>--}}
            <div class="dt-responsive table-responsive">
                <div class="row mb-4">
                    <label for="apaterno" class="col-sm-1 col-form-label">Año</label>
                    <div id="sort-by-year" class="col-sm-2"></div>
                </div>
            <table id="lang-dt" class="ui celled table unstackable">
                <thead>
                    <tr>
                        <!--<th>Folio</th>-->
                        <th>Año</th>
                        <th>Número informe</th>
                        <th>Empresa Cliente</th>
                        <th>Empresa Informe</th>
                        <!--<th>Empresa Antigua</th>-->
                        
                        <th>Fecha</th>
                        <th>Muestra(s)</th>
                        <th>Modelo</th>
                        <th>Estatus</th>
                        
                        <th class="collapsing">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    
                </tbody>
            </table>
            </div>
            {{-- $recibo_muestras_para_almacen->links("pagination::bootstrap-4") --}}
        </div>
    </div>
    <!--Reporte de excel por técnico-->
    @include('Muestras_almacen.create_reporte_devolucion_muestras_almacen_modal')
    @section('aaSorting')
    [ 7 , 'desc' ] , [ 4 , 'desc' ]
    @endsection
    @section('columnDefs')
    {
        "targets": [ 0 ],
        "visible": false
        
    }
    @endsection
    @section('initComplete')
    init();
    this.api().columns(0).every( function () {
        var column = this;
        
        var select = $('<select class="form-control input-sm" id="ano"><option value=""></option></select>')
            .appendTo( $('#sort-by-year') )
            .on( 'change', function () {
                var val = $.fn.dataTable.util.escapeRegex(
                    $(this).val()
                );

                column
                    .search( val ? '^'+val+'$' : '', true, false )
                    .draw();
            } );
            //console.log(column);
        //column.data().unique().sort().each( function ( d, j ) {
            var currentTime = new Date();
            var year = currentTime.getFullYear()
            for(i = 2020; i <= year; i++){
                select.append( '<option value="'+i+'">'+i+'</option>' );
            }
            
        //} );
    } );
    @endsection
    @section('drawCallback')
    init();
    @endsection
    @section('configOpt')
    processing: true,
    serverSide: true,
    ajax: "{{ Route('getAlmacen') }}",
    columns: [
        {data: 'ano', name: 'ano'},
        {data: 'num_informe', name: 'num_informe'},
        { data: 'cliente_factura', name: 'cliente_factura' },
        { data: 'cliente_informe', name: 'cliente_informe' },
        {data: 'fecha', name: 'fecha'},
        {data: 'nombre_muestra', name: 'nombre_muestra'},
        
        {data: 'modelo', name: 'modelo'},
        {data: 'estatus', name: 'estatus'},
        {data: 'buttons', name: 'buttons'}
    ]
    @endsection

    @section('scriptBeforeAjax')
    init();
    @endsection
    <!---WIZARD--------------------->
    <style type="text/css">
        .stepwizard-step p {
            margin-top: 10px;
        }

        .stepwizard-row {
            display: table-row;
        }

        .stepwizard {
            display: table;
            width: 100%;
            position: relative;
        }

        .stepwizard-row:before {
            top: 14px;
            bottom: 0;
            position: absolute;
            content: " ";
            width: 100%;
            height: 1px;
            background-color: #ccc;
            z-order: 0;

        }

        .stepwizard-step {
            display: table-cell;
            text-align: center;
            position: relative;
        }

        .btn-circle {
        width: 30px;
        height: 30px;
        text-align: center;
        padding: 6px 0;
        font-size: 12px;
        line-height: 1.428571429;
        border-radius: 15px;
        }
    </style>
    <script>
        init = function() {}
        $(function() {

            $('.customdaterangepicker').daterangepicker({

                opens: 'left',
                autoUpdateInput: true,

                locale: {
                    format: 'DD/MM/YYYY',
                    applyLabel: "Aplicar",
                    cancelLabel: "Cancelar",
                    fromLabel: "Desde",
                    toLabel: "Hasta",
                    customRangeLabel: "Rango personalizado",
                    daysOfWeek: ["Do","Lu","Ma","Mi","Ju","Vi","Sa"],
                    monthNames: [
                        "Enero","Febrero","Marzo","Abril","Mayo","Junio",
                        "Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"
                    ],
                    firstDay: 1
                }
                
            }, function(start, end, label) {
                console.log(
                    "Fecha seleccionada: " +
                    start.format('YYYY-MM-DD') + 
                    " a " + 
                    end.format('YYYY-MM-DD')
                );
            });

        });
    </script>
    <script>
        $("#select_cliente_factura").change(function () {
            var id_cliente_factura = $("#select_cliente_factura").val();

            $.ajax({
                url: "show_select_clientes_facturaA",
                method: "POST",
                data: {
                    id_cliente_factura: id_cliente_factura,
                    _token: $('input[name="_token"]').val()
                },
                success: function (response) {
                    console.log(response);

                    let html_option = "";

                    if (response.clientes_informe.length > 0) {
                        $.each(response.clientes_informe, function (key, value_cliente) {
                            html_option += "<option value='" + value_cliente.id_cliente_informe + "'>" +
                                value_cliente.nombre_cliente_informe + " - " +
                                value_cliente.fecha_creacion_cliente_informe +
                                "</option>";
                        });
                    } else {
                        html_option += "<option selected disabled>--Seleccione--</option>";
                    }

                    $('#select_cliente_informe').html(html_option);
                    $('#select_cliente_informe').selectpicker("refresh");
                }
            });
        });
    </script> 
    <script>
        var id_cliente = 0;
        $(document).ready(function(){
            $('#reporte_devolucion_almacen_wizzard').click(function(){
                readButtons();
                $('#create_reporte_devolucion_muestras_almacen_modal').modal('show');  
            });
        });  

        readButtons = function(type_accion = "devolucion_muestras_wizzard"){
            let navListItems = $('div#'+type_accion+' div.setup-panel div a'),
            allWells = $('div#'+type_accion+' .setup-content'),
            allNextBtn = $('div#'+type_accion+' .nextBtn');
            allBackBtn = $('div#'+type_accion+' .backBtn');

            navListItems.click(function (e) {
                e.preventDefault();
                var $target = $($(this).attr('href')),
                        $item = $(this);

                if (!$item.hasClass('disabled')) {
                    navListItems.removeClass('btn-primary').addClass('btn-default');
                    $item.addClass('btn-primary').removeClass('disabled');
                    allWells.hide();
                    $target.show();
                    //$target.find('input:eq(0)').focus();
                }
            });

            allNextBtn.click(function(){
                var curStep = $(this).closest("div#"+type_accion+" .setup-content"),
                    curStepBtn = curStep.attr("id"),
                    nextStepWizard = $('div#'+type_accion+' div.setup-panel div a[href="#' + curStepBtn + '"]').parent().next().children("a"),
                    curInputs = curStep.find("input[type='text'],input[type='url']"),
                    isValid = true;

                $(".form-group").removeClass("has-error");
                    navListItems.addClass('disabled');
                    nextStepWizard.removeAttr('disabled').removeClass('disabled').trigger('click');
            });

            allBackBtn.click(function(){
                var curStep = $(this).closest("div#"+type_accion+" .setup-content"),
                    curStepBtn = curStep.attr("id"),
                    nextStepWizard = $('div#'+type_accion+' div.setup-panel div a[href="#' + curStepBtn + '"]').parent().prev().children("a"),
                    curInputs = curStep.find("input[type='text'],input[type='url']"),
                    isValid = true;

                $(".form-group").removeClass("has-error");
                    navListItems.addClass('disabled');
                    nextStepWizard.removeAttr('disabled').removeClass('disabled').trigger('click');
            });

            $('div.setup-panel div a.btn-primary').trigger('click'); 
        } 
    </script>
    <script>
        // VARIABLE GLOBAL PARA GUARDAR LOS CHECKBOX SELECCIONADOS
        let arr_checkbox = [];

        $("#next_button_step_1").on("click", function () {

            let data = {
                id_cliente_factura: $("#select_cliente_factura").val(),
                id_cliente_informe: $("#select_cliente_informe").val(),
                id_cliente_contacto: $("#select_contacto_factura").val(),
                rango_fecha_entrada: $("#fecha_informe").val(),
                _token: $('input[name="_token"]').val()
            };

            $.post("show_devolucion_informe_almacen", data, function (response) {

                let resultData = response.data || [];
                let html = `
                    <table class="table table-sm">
                        <thead>
                            <tr>
                                <th>Número informe</th>
                                <th>Muestra</th>
                                <th>Modelo</th>
                                <th class="text-center">Seleccionar</th>
                            </tr>
                        </thead>
                        <tbody>
                `;

                if(resultData.length){
                    $.each(resultData, function (key, value) {

                        // 1. SI estatus = "Devolucion a cliente" y estatus_general = "Devuelta" → DESHABILITAR
                        // 2. SI estatus = "Devolucion a cliente" y estatus_general = "No devuelta" → HABILITAR
                        // 3. Si cualquier otro estatus → HABILITAR
                        let disabled = "";

                        if (value['estatus'] === "Devolucion a cliente" && value['estatus_devolucion_general'] === "Devuelta") {
                            disabled = "disabled";
                        }

                        html += "<tr>" +
                            "<th scope='row' class='text-left'>" + value['folio_programacion'] + "</th>" +
                            "<td class='text-left'>" + value['nombre_muestra'] + " " + value['marca_muestra'] + " " + value['modelo_muestra'] + "</td>" +
                            "<td class='text-left'>" + value['modelo_muestra'] + "</td>" +
                            "<td class='text-center'>" +
                                "<div class='custom-control custom-checkbox'>" +

                                    // Checkbox habilitado/deshabilitado según reglas
                                    "<input type='checkbox' class='custom-control-input checkbox_almacen' " +
                                        "id='" + value['id_almacen_muestra'] + "' " +
                                        "name='checkbox_informe_" + value['id_almacen_muestra'] + "' " +
                                        disabled +
                                    ">" +

                                    "<label class='custom-control-label' for='" + value['id_almacen_muestra'] + "'></label>" +

                                    // Etiqueta de estado general
                                    "<span class='badge ml-2 " +
                                        (value['estatus_devolucion_general'] === 'Devuelta' ? "badge-success" : "badge-warning") +
                                    "'>" +
                                        (value['estatus_devolucion_general'] ?? 'No devuelta') +
                                    "</span>" +

                                "</div>" +
                            "</td>" +
                        "</tr>";

                    });
                } else {
                    html += `<tr><td colspan="4" class="text-center">No se encontraron registros</td></tr>`;
                }

                html += "</tbody></table>";
                $("#tabla_devolucion_muestras_almacen").html(html);
            });
        });

        // PASO 2
         $("#next_button_step_2").on("click", function () {

            arr_checkbox = [];
            $(".checkbox_almacen:checked").each(function () {
                arr_checkbox.push($(this).attr("id"));
            });

            if (!arr_checkbox.length) {
                alert("Selecciona al menos una muestra");
                return;
            }

           $.post("show_devolucion_informe_almacen_datos_reporte", {
                arr_checkbox,
                _token: $('input[name="_token"]').val()
            }, function (response) {

                // ✅ response YA es objeto
                let data = response.data || [];

                $("#mensaje_resumen_final").html(
                    "<p><strong>Se generará el reporte de devolución de las siguientes muestras</strong></p>"
                );

                let html = "<table class='table table-sm'><tbody>";
                data.forEach(v => {
                    html += `<tr>
                                <td>${v.folio_programacion}</td>
                                <td>${v.nombre_muestra}</td>
                                <td>${v.modelo_muestra}</td>
                            </tr>`;
                });
                html += "</tbody></table>";

                $("#tabla_devolucion_muestras_almacen_final").html(html);
            });
        });

        /* ===============================
        SELECT ALL
        =============================== */
        $("#selectAll").on("click", function () {
            $(".checkbox_almacen:not(:disabled)").prop("checked", this.checked);
        });

        /* ===============================
        SUBMIT REAL (PDF)
        =============================== */
        $("#create_reporte_devolucion_muestras_almacen_modal form").on("submit", function () {

            arr_checkbox = [];
            $(".checkbox_almacen:checked").each(function () {
                arr_checkbox.push($(this).attr("id"));
            });

            if (!arr_checkbox.length) {
                alert("Selecciona al menos una muestra");
                return false;
            }

            $("<input>", {
                type: "hidden",
                name: "nameHidden",
                value: arr_checkbox.join(",")
            }).appendTo(this);

            return true; 
        });

        // Asegúrate que jQuery esté cargado antes de este script
        // Si usas noConflict, cambia $ por jQuery en todo el bloque.

        // Delegación de eventos porque el botón está dentro del modal (dinámico)
        $(document).on("click", "#btnEnviar", function (e) {
            e.preventDefault();

            // 1) Recalcular la selección actual siempre
            const arr_checkbox = $(".checkbox_almacen:checked").map(function () {
                return this.id;
            }).get();

            if (!arr_checkbox.length) {
                alert("Selecciona al menos una muestra");
                return;
            }

            // 2) Tomar la vía seleccionada
            const via = $("#via_devolucion").val();
            if (!via) {
                alert("Selecciona una vía de devolución");
                return;
            }

            // 3) Actualizar estatus + vía en backend
            $.ajax({
                url: "actualizar-estatus-devolucion",
                method: "POST",
                data: {
                    arr_checkbox: arr_checkbox,
                    via_devolucion: via,
                    _token: $('input[name="_token"]').val()
                },
                success: function (res) {
                    if (res && res.success) {
                        console.log("Estatus y vía actualizados");

                        // 4) Preparar el submit real al controlador que genera el PDF
                        const $form = $("#create_reporte_devolucion_muestras_almacen_modal form");

                        // Agregar/actualizar los IDs seleccionados
                        const nameHidden = "ids_muestras_devolucion";
                        if ($form.find(`input[name='${nameHidden}']`).length === 0) {
                            $("<input>", {
                                type: "hidden",
                                name: nameHidden,
                                value: arr_checkbox.join(",")
                            }).appendTo($form);
                        } else {
                            $form.find(`input[name='${nameHidden}']`).val(arr_checkbox.join(","));
                        }

                        // 5) Submit para generar el PDF (el select name="via_devolucion" ya viaja con el form)
                        $form.trigger("submit");
                    } else {
                        alert((res && res.message) || "Hubo un problema actualizando el estatus.");
                    }
                },
                error: function () {
                    alert("No se pudo actualizar el estatus. Intenta de nuevo.");
                }
            });
        });

        /* ===============================
        RESET COMPLETO DESPUUÉS DE GENERAR PDF
        =============================== */
        $("#create_reporte_devolucion_muestras_almacen_modal form").on("submit", function () {

            setTimeout(function () {

                // 1️⃣ Reset formulario
                $("#create_reporte_devolucion_muestras_almacen_modal form")[0].reset();

                // 2️⃣ Vaciar arreglos
                arr_checkbox = [];

                // 3️⃣ Limpiar tablas dinámicas
                $("#tabla_devolucion_muestras_almacen").html('');
                $("#tabla_devolucion_muestras_almacen_final").html('');
                $("#mensaje_resumen_final").html('');

                // 4️⃣ Desmarcar checkboxes
                $(".checkbox_almacen").prop("checked", false);

                // 5️⃣ Regresar al paso 1 del wizard
                $('div#devolucion_muestras_wizzard div.setup-panel div a')
                    .addClass('disabled')
                    .removeClass('btn-primary')
                    .addClass('btn-default');

                $('div#devolucion_muestras_wizzard div.setup-panel div a:first')
                    .removeClass('disabled')
                    .removeClass('btn-default')
                    .addClass('btn-primary')
                    .trigger('click');

                // 6️⃣ Cerrar modal (opcional pero recomendado)
                $('#create_reporte_devolucion_muestras_almacen_modal').modal('hide');

            }, 700); // tiempo suficiente para que el PDF se abra

        });

    </script>
    @include('Muestras_almacen.bitacora_almacen_modal')
    <script>
        $(document).ready(function(){
            $('#reporte_bitacora_almacen').click(function(){
                $('#create_bitacora_almacen_modal').modal('show');  
            });
        });  
    </script>
    
@endsection