@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">Sistema de gestión</div>
        <i class="right chevron icon divider"></i>
        <div class="active section">Control de registros de ingreso de muestras</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')
    <style>
        .estatus-control-registro {
            min-width: 260px;
            max-width: 330px;
            vertical-align: top !important;
        }

        .estatus-control-contenedor {
            align-items: center;
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin: 0 auto;
            width: 100%;
        }

        .estatus-control-contenedor > .collapse {
            width: 100%;
        }

        .estatus-control-principal,
        .estatus-control-toggle,
        .estatus-control-estado {
            border-radius: 3px;
            color: #fff;
            line-height: 1.2;
            white-space: nowrap;
        }

        .estatus-control-principal {
            display: inline-block;
            padding: 6px 10px;
            font-size: 12px;
            font-weight: 600;
        }

        .estatus-control-toggle {
            border: 0;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            font-size: 12px;
            font-weight: 600;
        }

        .estatus-control-toggle-lista {
            background: transparent;
            color: inherit;
            justify-content: center;
            max-width: 100%;
            padding: 0;
            white-space: normal;
        }

        .estatus-control-toggle-lista .icon {
            color: #555;
        }

        .estatus-control-visibles {
            align-items: center;
            display: grid;
            gap: 4px;
            justify-items: center;
            max-width: 100%;
        }

        .estatus-control-visibles .estatus-control-principal {
            max-width: 100%;
            text-align: center;
            white-space: normal;
        }

        .estatus-control-toggle .icon {
            margin: 0;
            transition: transform .2s ease;
        }

        .estatus-control-toggle[aria-expanded="true"] .icon {
            transform: rotate(180deg);
        }

        .estatus-control-resumen {
            color: #666;
            font-size: 11px;
            line-height: 1.2;
            margin-top: 4px;
        }

        .estatus-control-panel {
            background: #fbfbfb;
            border: 1px solid #e5e5e5;
            border-left: 3px solid #2185d0;
            border-radius: 4px;
            margin: 0 auto;
            padding: 8px;
            width: 100%;
        }

        .estatus-control-lista {
            display: grid;
            gap: 6px;
            margin: 0 auto;
            width: 100%;
        }

        .estatus-control-renglon {
            align-items: center;
            display: grid;
            gap: 8px;
            grid-template-columns: minmax(112px, 1fr) auto;
        }

        .estatus-control-fase {
            color: #333;
            font-size: 12px;
            font-weight: 700;
            line-height: 1.2;
            text-align: left;
        }

        .estatus-control-estado {
            display: inline-block;
            font-size: 11px;
            font-weight: 600;
            justify-self: end;
            padding: 4px 7px;
        }

        .estatus-control-success { background-color: #28a745; }
        .estatus-control-warning { background-color: #f0ad4e; }
        .estatus-control-danger { background-color: #dc3545; }
        .estatus-control-primary { background-color: #2185d0; }
        .estatus-control-info { background-color: #17a2b8; }

        .estatus-control-leyenda {
            align-items: center;
            display: flex;
            flex-wrap: wrap;
            gap: 8px 12px;
            justify-content: flex-end;
            margin: 0 0 12px;
            font-size: 12px;
        }

        .estatus-control-leyenda-titulo {
            color: #333;
            font-weight: 700;
        }

        .estatus-control-leyenda-item {
            align-items: center;
            color: #555;
            display: inline-flex;
            gap: 5px;
        }

        .estatus-control-leyenda-badge {
            border-radius: 3px;
            color: #fff;
            font-size: 10px;
            font-weight: 700;
            line-height: 1;
            padding: 4px 6px;
        }

        @media (max-width: 768px) {
            .estatus-control-renglon {
                grid-template-columns: 1fr;
            }

            .estatus-control-estado {
                justify-self: start;
            }

            .estatus-control-leyenda {
                justify-content: flex-start;
            }
        }
    </style>
    {{--
    <div class="ui segment">
        <form class="ui form" action="usuarioSearch" method="get">
            <div class="inline fields sx-remove-margin">
                <div class="twelve wide field">
                    <input type="search" name="search" id="search" placeholder="Nombre del usuario…">
                </div>
                <div class="four wide field">
                    <input class="ui button" type="submit" name="" value="Buscar usuario">
                </div>
            </div>
        </form>
    </div>
    --}}
	
    <div class="sx-autorender">
        <div class="sx-scroll-x">
            
            <div class="row align-items-center mb-3">
                
                <!-- Filtro paginación -->
                <div id="filter-container" class="col-sm-6 col-md-1 col-lg-1 form-select form-select-lg align-items-center">
                    <div id="limit-filter-container"></div>
                </div>    

                <!-- Filtro años -->
                <div id="filter-container" class="col-sm-6 col-md-1 col-lg-1 form-select form-select-lg align-items-center">
                    <div id="year-filter-container"></div>
                </div>    

                <!-- Buscador -->
                <div class="col-sm-12 col-md-4 col-lg-4">
                    <div id="search-filter-container"></div>
                    <div class="input-group">
                        <!-- El valor inicial se toma del parámetro 'search' en la URL -->
                        <input type="search" name="search" id="search-input" class="form-control" placeholder="Buscador general..." value="{{ request('search') }}">
                        <div class="input-group-append ">
                            <button type="button" class="btn btn-primary" id="search-button">
                                <i class="search icon"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Información de los registros -->
                <div class="col-sm-12 col-md-6 col-lg-6 text-right">
                    <p class="text-right mt-2">
                        Mostrando registros del <b>{{ $datos_muestras->firstItem() }}</b> al <b>{{ $datos_muestras->lastItem() }}</b> de un total de <b>{{ $datos_muestras->total() }}</b>
                    </p>
                    <div class="estatus-control-leyenda" aria-label="Simbología de estatus">
                        <span class="estatus-control-leyenda-titulo">Simbología:</span>
                        <span class="estatus-control-leyenda-item">
                            <span class="estatus-control-leyenda-badge estatus-control-success">Verde</span>
                            Aprobado/completo
                        </span>
                        <span class="estatus-control-leyenda-item">
                            <span class="estatus-control-leyenda-badge estatus-control-warning">Amarillo</span>
                            Pendiente/en proceso
                        </span>
                        <span class="estatus-control-leyenda-item">
                            <span class="estatus-control-leyenda-badge estatus-control-danger">Rojo</span>
                            No iniciado o faltante
                        </span>
                        <span class="estatus-control-leyenda-item">
                            <span class="estatus-control-leyenda-badge estatus-control-info">Azul</span>
                            N/A o informativo
                        </span>
                    </div>

                </div> 

            </div>

            
        
            <table id="lang-dt-con" class="ui celled table unstackable">
                <thead>
                    <tr>
                        <th>Número informe</th>
                        <th>Cliente factura</th>
                        <th>Cliente informe</th>
                        <th>Modelo</th>
                        <th class="text-center">Fecha</th>
                        <th class="text-center">Estatus</th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @if($datos_muestras->count())
                    @foreach ($datos_muestras as $muestra)
                        @php
                            $estatus_control = $muestra->estatus_control_registro;
                            $estatus_principales = $estatus_control['principales'] ?? [
                                [
                                    'texto' => $estatus_control['principal'],
                                    'clase' => $estatus_control['clase']
                                ]
                            ];
                            $collapse_id = 'estatus-paralelo-'.$muestra->id_muestra;
                        @endphp
                        
                        <tr>
                            <td>{{$muestra->numero_informe}}</td>
                            <td>{{$muestra->nombre_cliente_factura}}</td>
                            <td>{{$muestra->nombre_cliente_informe}}</td>
                            <td>{{$muestra->modelo_muestra}}</td>
                            <td class="text-center" style="width:10%">{{ date('d/m/Y', strtotime($muestra->fecha)) }}</td>
                            <td class="text-center estatus-control-registro">
                                <div class="estatus-control-contenedor">
                                    @if (count($estatus_control['detalles']) > 0)
                                        <button
                                            class="estatus-control-toggle estatus-control-toggle-lista"
                                            type="button"
                                            data-toggle="collapse"
                                            data-target="#{{ $collapse_id }}"
                                            aria-expanded="false"
                                            aria-controls="{{ $collapse_id }}">
                                            <span class="estatus-control-visibles">
                                                @foreach ($estatus_principales as $estatus_visible)
                                                    <span class="estatus-control-principal estatus-control-{{ $estatus_visible['clase'] }}">
                                                        {{ $estatus_visible['texto'] }}
                                                    </span>
                                                @endforeach
                                            </span>
                                            <i class="chevron down icon"></i>
                                        </button>
                                        <div class="collapse" id="{{ $collapse_id }}">
                                            <div class="estatus-control-panel">
                                                <div class="estatus-control-lista">
                                                    @foreach ($estatus_control['detalles'] as $detalle_estatus)
                                                        <div class="estatus-control-renglon" title="{{ $detalle_estatus['descripcion'] }}">
                                                            <div class="estatus-control-fase">{{ $detalle_estatus['fase'] }}</div>
                                                            <span class="estatus-control-estado estatus-control-{{ $detalle_estatus['clase'] }}">
                                                                {{ $detalle_estatus['estatus'] }}
                                                            </span>
                                                        </div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    @else
                                        <span class="estatus-control-visibles">
                                            @foreach ($estatus_principales as $estatus_visible)
                                                <span class="estatus-control-principal estatus-control-{{ $estatus_visible['clase'] }}">
                                                    {{ $estatus_visible['texto'] }}
                                                </span>
                                            @endforeach
                                        </span>
                                    @endif
                                </div>
                            </td>
                            <td class="text-center" style="width:10%">
                                <div class="ui tiny icon buttons">
                                    @if ($permisos->verqr == 1) 
                                        <!-- Editar -->                                    
                                        <a href="{{url('detalles_control_registros/'.$muestra->id_muestra)}}" class="ui button orange">
                                            <i class="right arrow icon"></i>
                                        </a>
                                        <!-- Descargar Zip -->                                    
                                        <a href="{{url('control_registros_zip/'.$muestra->id_muestra)}}" class="ui button blue">
                                            <i class="zip file icon"></i>.Zip
                                        </a>
                                    @endif 
                                </div>
                            </td>
                        </tr>
                    @endforeach
                    @else
                    <tr>
                        <td colspan="7">No se encontraron registros</td>
                    </tr>
                    @endif
                </tbody>
            </table>
            
            <!-- 
            SE IMPLEMENTA LA SOLUCIÓN DE PAGINACIÓN CON LARAVEL.
            Esto genera los botones para ver los demás registros (Página 1, 2, 3, etc.)
            -->
            <div class="align-items-center mt-4">
                {{ $datos_muestras->appends(request()->input())->links('pagination::bootstrap-4') }} 
            </div>
            
            
        </div>
    </div>

    <script>       
        
        $(document).ready(function() {
            // --- 1. CONFIGURACIÓN INICIAL ---
            const urlParams = new URLSearchParams(window.location.search);
            const defaultYear = new Date().getFullYear();
            
            // Obtener parámetros de la URL
            const selectedYear = urlParams.get('year') || defaultYear; 
            const selectedLimit = urlParams.get('limit') || 10; // 10 como valor por defecto (Registros que se van a cargar en la BD)


            // --- 2. FILTRO DE AÑO (Select) ---
            var selectYear = $('<select class="form-control input-sm"></select>');
            var currentYear = new Date().getFullYear();
            var startYear = 2020;
            
            for (var year = currentYear; year >= startYear; year--) {
                var isSelected = (year == selectedYear) ? 'selected' : ''; 
                selectYear.append('<option value="' + year + '" ' + isSelected + '>' + year + '</option>');
            }

            // Crear el label "Año" y añadir al contenedor
            var labelYear = $('<label>Año:</label>');
            labelYear.css({"display": "inline-block", "margin-left": "1px"});
            $('#year-filter-container').append(labelYear);
            $('#year-filter-container').append(selectYear);

            // --- 3. FILTRO DE LÍMITE (Select) ---
            const limitOptions = [10, 20, 50, 100];
            var selectLimit = $('<select class="form-control input-sm"></select>');
            
            limitOptions.forEach(limit => {
                var isSelected = (limit == selectedLimit) ? 'selected' : ''; 
                selectLimit.append('<option value="' + limit + '" ' + isSelected + '>' + limit + '</option>');
            });

            // Crear el label "Mostrar" y añadir al contenedor
            var labelLimit = $('<label>Mostrar:</label>');
            labelLimit.css({"display": "inline-block", "margin-left": "1px"});
            $('#limit-filter-container').append(labelLimit);
            $('#limit-filter-container').append(selectLimit);

            // Crear el label "Buscar" y añadir al contenedor
            var labelSearch = $('<label>Buscar:</label>');
            labelSearch.css({"display": "inline-block", "margin-left": "1px"});
            $('#search-filter-container').append(labelSearch);

            
            // --- 4. MANEJO DE EVENTOS ---
            
            // Función para recargar la página con todos los parámetros
            const updateUrlAndReload = () => {
                const newYear = selectYear.val();
                const newLimit = selectLimit.val();
                // Obtener el valor del campo de búsqueda
                const newSearch = $('#search-input').val().trim(); 
                
                // 1. Iniciar con los parámetros de la URL actual para asegurar que se mantengan
                const params = new URLSearchParams(window.location.search);

                // 2. Sobreescribir los parámetros de filtro principales
                params.set('year', newYear);
                params.set('limit', newLimit); 
                params.set('page', 1); // Resetear a la página 1 al modificar los filtros

                // 3. Manejar el parámetro 'search' 
                if (newSearch) {
                    // Si hay texto, lo establecemos
                    params.set('search', newSearch);
                } else {
                    // Si el buscador está vacío, eliminamos el parámetro 'search' de la URL
                    params.delete('search');
                }
                
                // 4. Redireccionar a la nueva URL
                window.location.href = window.location.pathname + '?' + params.toString();
                showLoader();
            };

            // Evento para los filtros de Año y Límite (cambio de select)
            selectYear.on('change', updateUrlAndReload);
            selectLimit.on('change', updateUrlAndReload);
            
            // Evento para el botón de Búsqueda
            $('#search-button').on('click', updateUrlAndReload);

            // Evento para la tecla Enter en el campo de búsqueda
            $('#search-input').on('keyup', function(e) {
                if (e.key === 'Enter' || e.keyCode === 13) {
                    updateUrlAndReload();
                }
            });

            // Recarga automáticamente la página si el campo de búsqueda está vacía
            $('#search-input').on('input', function() {
                const searchInput = $(this).val().trim();
                const urlParams = new URLSearchParams(window.location.search);

                // Si el campo está vacío Y la URL tiene un parámetro 'search' activo, recargar para limpiar el filtro.
                if (searchInput === '' && urlParams.has('search')) {
                    updateUrlAndReload();
                }
            });
        });

    </script>
@endsection