@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">Reportes</div>
        <i class="right chevron icon divider"></i>
        <div class="active section">Línea de pruebas</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 divider"></div>

    <div class="sx-autorender">
        <div class="sx-scroll-x">

            <form id="linea-pruebas-filter-form" method="GET" action="{{ url()->current() }}">
                <input type="hidden" name="page" value="1">
                @if(request()->has('sort_by'))
                    <input type="hidden" name="sort_by" value="{{ request('sort_by') }}">
                @endif
                @if(request()->has('sort_dir') && request('sort_by') !== 'estatus')
                    <input type="hidden" name="sort_dir" value="{{ request('sort_dir') }}">
                @endif
                @if(request('sort_by') === 'estatus' && request()->has('estatus_orden'))
                    <input type="hidden" name="estatus_orden" value="{{ request('estatus_orden') }}">
                @endif

                <div class="row align-items-center mb-3">
                    <div class="col-sm-6 col-md-2 col-lg-2 form-select form-select-lg align-items-center">
                        <div id="limit-filter-container"></div>
                    </div>

                    <div class="col-sm-6 col-md-2 col-lg-2 form-select form-select-lg align-items-center">
                        <div id="year-filter-container"></div>
                    </div>

                    <div class="col-sm-12 col-md-4 col-lg-4">
                        <div id="search-filter-container"></div>
                        <div class="input-group">
                            <input
                                type="search"
                                name="search"
                                id="search-input"
                                class="form-control"
                                placeholder="Buscar por informe, cliente, muestra, marca o modelo..."
                                value="{{ request('search') }}"
                            >
                            <div class="input-group-append">
                                <button type="submit" class="btn btn-primary" id="search-button">
                                    <i class="search icon"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="col-sm-12 col-md-4 col-lg-4">
                        <p class="text-center mt-4">
                            Mostrando
                            @if($datos_linea_pruebas->total() > 0)
                                <b>{{ $datos_linea_pruebas->firstItem() }}</b>
                                a
                                <b>{{ $datos_linea_pruebas->lastItem() }}</b>
                                de
                                <b>{{ $datos_linea_pruebas->total() }}</b>
                                registros
                                <span class="text-muted">
                                    (pagina {{ $datos_linea_pruebas->currentPage() }} de {{ $datos_linea_pruebas->lastPage() }})
                                </span>
                            @else
                                <b>0</b>
                                registros
                            @endif
                        </p>
                    </div>
                </div>
            </form>

            <br>

            @php
                $sortBy = isset($sortBy) ? $sortBy : request('sort_by', 'fecha_pruebas');
                $sortDir = isset($sortDir) ? $sortDir : request('sort_dir', 'asc');
                $sortDir = strtolower($sortDir) === 'desc' ? 'desc' : 'asc';
                $estatusOrdenes = array(
                    'en_proceso' => 'En proceso',
                    'no_iniciado' => 'No iniciado',
                    'terminado' => 'Terminado'
                );

                $estatusOrdenActual = isset($estatusOrden) ? $estatusOrden : request('estatus_orden', '');

                if (!array_key_exists($estatusOrdenActual, $estatusOrdenes)) {
                    $estatusOrdenActual = $sortBy === 'estatus' ? 'en_proceso' : '';
                }

                $estatusOrdenActivo = $sortBy === 'estatus' ? $estatusOrdenActual : '';
                $estatusOrdenEtiqueta = $estatusOrdenActivo !== '' ? $estatusOrdenes[$estatusOrdenActivo] : '';

                $sortUrl = function ($column) use ($sortBy, $sortDir) {
                    $query = request()->query();
                    $query['sort_by'] = $column;
                    $query['sort_dir'] = ($sortBy === $column && $sortDir === 'asc') ? 'desc' : 'asc';
                    unset($query['estatus_orden']);
                    $query['page'] = 1;

                    return url()->current() . '?' . http_build_query($query);
                };

                $estatusSiguiente = function () use ($estatusOrdenActivo) {
                    if ($estatusOrdenActivo === 'en_proceso') {
                        return 'no_iniciado';
                    }

                    if ($estatusOrdenActivo === 'no_iniciado') {
                        return 'terminado';
                    }

                    return 'en_proceso';
                };

                $estatusSortUrl = function () use ($estatusSiguiente) {
                    $query = request()->query();
                    $query['sort_by'] = 'estatus';
                    $query['estatus_orden'] = $estatusSiguiente();
                    unset($query['sort_dir']);
                    $query['page'] = 1;

                    return url()->current() . '?' . http_build_query($query);
                };

                $sortClass = function ($column) use ($sortBy, $sortDir) {
                    if ($sortBy === $column) {
                        if ($column === 'estatus') {
                            return 'sorting_asc';
                        }

                        return $sortDir === 'asc' ? 'sorting_asc' : 'sorting_desc';
                    }

                    return 'sorting';
                };
            @endphp

            <table id="tabla-linea-pruebas" class="ui celled table unstackable structured tabla-linea-de-pruebas-compacta">
                <thead>
                    <tr class="text-center">
                        <th class="sortable-column {{ $sortClass('numero_informe') }}">
                            <a href="{{ $sortUrl('numero_informe') }}">
                                <span>No. Informe</span>
                            </a>
                        </th>
                        <th class="sortable-column {{ $sortClass('razon_social') }}">
                            <a href="{{ $sortUrl('razon_social') }}">
                                <span>Cliente</span>
                            </a>
                        </th>
                        <th class="sortable-column {{ $sortClass('fecha_pruebas') }}">
                            <a href="{{ $sortUrl('fecha_pruebas') }}">
                                <span>Fecha entrada pruebas</span>
                            </a>
                        </th>
                        <th class="sortable-column {{ $sortClass('nombre_muestra') }}">
                            <a href="{{ $sortUrl('nombre_muestra') }}">
                                <span>Muestra</span>
                            </a>
                        </th>
                        <th class="sortable-column {{ $sortClass('marca') }}">
                            <a href="{{ $sortUrl('marca') }}">
                                <span>Marca</span>
                            </a>
                        </th>
                        <th class="sortable-column {{ $sortClass('modelo') }}">
                            <a href="{{ $sortUrl('modelo') }}">
                                <span>Modelo</span>
                            </a>
                        </th>
                        <th class="sortable-column {{ $sortClass('fecha_termino_pruebas') }}">
                            <a href="{{ $sortUrl('fecha_termino_pruebas') }}">
                                <span>Fecha de entrega</span>
                            </a>
                        </th>
                        <th class="sortable-column {{ $sortClass('estatus') }}">
                            <a href="{{ $estatusSortUrl() }}" title="{{ $estatusOrdenActivo !== '' ? 'Prioridad actual: ' . $estatusOrdenEtiqueta : 'Priorizar En proceso' }}">
                                <span>Estatus</span>
                                @if($estatusOrdenActivo !== '')
                                    <small class="estatus-prioridad">Prioridad: {{ $estatusOrdenEtiqueta }}</small>
                                @endif
                            </a>
                        </th>
                        <th>Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    @if($datos_linea_pruebas->count())
                        @foreach($datos_linea_pruebas as $dato_informe)
                            <tr class="{{ (string) $dato_informe->ingreso_desde === '3' ? 'table-warning' : '' }}">
                                <td>{{ $dato_informe->numero_informe }}</td>
                                <td>{{ $dato_informe->razon_social }}</td>

                                <td class="text-center">
                                    {{ $dato_informe->fecha_entrada_pruebas ? date('d/m/Y', strtotime($dato_informe->fecha_entrada_pruebas)) : '' }} 
                                </td>

                                <td>{{ $dato_informe->nombre_muestra }}</td>
                                <td>{{ $dato_informe->marca_muestra }}</td>
                                <td>{{ $dato_informe->modelo_muestra }}</td>

                                <td class="text-center">
                                    {{ $dato_informe->fecha_termino_pruebas ? date('d/m/Y', strtotime($dato_informe->fecha_termino_pruebas)) : '' }} 
                                </td>

                                <td class="text-center" style="width: 12%;">
                                    <span class="btn btn-{{ $dato_informe->estatus_clase }}">
                                        {{ $dato_informe->estatus_texto }}
                                    </span>
                                </td>

                                <td class="text-center" style="width: 10%;">
                                    <div class="ui tiny icon buttons">
                                        @if (($permisos->verqr ?? 0) == 1 || ($permisos->gerente ?? 0) == 1)
                                            <a href="{{ url('linea_de_pruebas/'.$dato_informe->id_programacion_muestra.'/') }}"
                                               class="ui button orange"
                                               title="Abrir reporte">
                                                <i class="arrow circle right icon"></i>
                                            </a>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    @else
                        <tr>
                            <td colspan="9" class="text-center">No se encontraron registros</td>
                        </tr>
                    @endif
                </tbody>
            </table>

            
            <div class="align-items-center mt-4">
                @if ($datos_linea_pruebas->lastPage() > 1)
                    @php
                        $currentPage = $datos_linea_pruebas->currentPage();
                        $lastPage = $datos_linea_pruebas->lastPage();
                        $startPage = max(1, $currentPage - 2);
                        $endPage = min($lastPage, $startPage + 4);

                        if ($endPage - $startPage < 4) {
                            $startPage = max(1, $endPage - 4);
                        }
                    @endphp

                    <ul class="pagination pagination-numeric">
                        @if ($currentPage > 1)
                            <li>
                                <a href="{{ $datos_linea_pruebas->url($currentPage - 1) }}">Anterior</a>
                            </li>
                        @else
                            <li class="disabled">
                                <span>Anterior</span>
                            </li>
                        @endif

                        @if ($startPage > 1)
                            <li>
                                <a href="{{ $datos_linea_pruebas->url(1) }}">1</a>
                            </li>

                            @if ($startPage > 2)
                                <li class="disabled">
                                    <span>...</span>
                                </li>
                            @endif
                        @endif

                        @for ($page = $startPage; $page <= $endPage; $page++)
                            @if ($page == $currentPage)
                                <li class="active">
                                    <span>{{ $page }}</span>
                                </li>
                            @else
                                <li>
                                    <a href="{{ $datos_linea_pruebas->url($page) }}">{{ $page }}</a>
                                </li>
                            @endif
                        @endfor

                        @if ($endPage < $lastPage)
                            @if ($endPage < $lastPage - 1)
                                <li class="disabled">
                                    <span>...</span>
                                </li>
                            @endif

                            <li>
                                <a href="{{ $datos_linea_pruebas->url($lastPage) }}">{{ $lastPage }}</a>
                            </li>
                        @endif

                        @if ($currentPage < $lastPage)
                            <li>
                                <a href="{{ $datos_linea_pruebas->url($currentPage + 1) }}">Siguiente</a>
                            </li>
                        @else
                            <li class="disabled">
                                <span>Siguiente</span>
                            </li>
                        @endif
                    </ul>
                @endif
            </div>

        </div>
    </div>

    <script>
        $(document).ready(function () {
            var urlParams = new URLSearchParams(window.location.search);
            var defaultYear = new Date().getFullYear();

            var selectedYear = urlParams.get('year') || defaultYear;
            var selectedLimit = urlParams.get('limit') || 10;

            var filterForm = $('#linea-pruebas-filter-form');

            var selectYear = $('<select class="form-control input-sm" name="year" id="year-filter"></select>');
            var currentYear = new Date().getFullYear();
            var startYear = 2020;

            for (var year = currentYear; year >= startYear; year--) {
                var isSelectedYear = (String(year) === String(selectedYear)) ? 'selected' : '';
                selectYear.append('<option value="' + year + '" ' + isSelectedYear + '>' + year + '</option>');
            }

            var labelYear = $('<label>Año:</label>');
            labelYear.css({ display: 'inline-block', 'margin-left': '1px' });

            $('#year-filter-container').append(labelYear);
            $('#year-filter-container').append(selectYear);

            var limitOptions = [10, 20, 50, 100];
            var selectLimit = $('<select class="form-control input-sm" name="limit" id="limit-filter"></select>');

            $.each(limitOptions, function (index, limit) {
                var isSelectedLimit = (String(limit) === String(selectedLimit)) ? 'selected' : '';
                selectLimit.append('<option value="' + limit + '" ' + isSelectedLimit + '>' + limit + '</option>');
            });

            var labelLimit = $('<label>Mostrar:</label>');
            labelLimit.css({ display: 'inline-block', 'margin-left': '1px' });

            $('#limit-filter-container').append(labelLimit);
            $('#limit-filter-container').append(selectLimit);

            var labelSearch = $('<label>Buscar:</label>');
            labelSearch.css({ display: 'inline-block', 'margin-left': '1px' });
            $('#search-filter-container').append(labelSearch);

            function updateUrlAndReload(e) {
                if (e) {
                    e.preventDefault();
                }

                var newYear = selectYear.val();
                var newLimit = selectLimit.val();
                var newSearch = $('#search-input').val().trim();

                var params = new URLSearchParams(window.location.search);

                params.set('year', newYear);
                params.set('limit', newLimit);
                params.set('page', 1);

                if (newSearch) {
                    params.set('search', newSearch);
                } else {
                    params.delete('search');
                }

                if (typeof showLoader === 'function') {
                    showLoader();
                }

                window.location.href = window.location.pathname + '?' + params.toString();
            }

            selectYear.on('change', updateUrlAndReload);
            selectLimit.on('change', updateUrlAndReload);
            filterForm.on('submit', updateUrlAndReload);

            $('#search-input').on('keyup', function (e) {
                if (e.key === 'Enter' || e.keyCode === 13) {
                    updateUrlAndReload();
                }
            });

            $('#search-input').on('input', function () {
                var searchInput = $(this).val().trim();
                var params = new URLSearchParams(window.location.search);

                if (searchInput === '' && params.has('search')) {
                    updateUrlAndReload();
                }
            });
        });
    </script>

    <script>
        $(document).on('click', '.notificacion_analista', function () {
            var id_notificacion = $(this).data('id_notificacion');

            $.ajax({
                url: "{{ url('change_notificacion_analista') }}",
                method: "POST",
                data: {
                    'id_notificacion': id_notificacion,
                    _token: '{{ csrf_token() }}'
                },
                success: function (response) {
                    var result = JSON.parse(response);
                    var resultData = result.data;

                    if (resultData['estatus'] == "0") {
                        $('#' + id_notificacion).removeClass("green").addClass("red").text('Sin revisar');
                        $('#' + id_notificacion + '_div_notificacion').removeClass("alert-success").addClass("alert-danger");
                    }

                    if (resultData['estatus'] == "1") {
                        $('#' + id_notificacion).removeClass("red").addClass("green").text('Revisado');
                        $('#' + id_notificacion + '_div_notificacion').removeClass("alert-danger").addClass("alert-success");
                    }
                }
            });
        });
    </script>

    <script>
        $(document).on('click', '.notificacion_jefe', function () {
            var id_notificacion = $(this).data('id_notificacion');

            $.ajax({
                url: "{{ url('change_notificacion_jefe') }}",
                method: "POST",
                data: {
                    'id_notificacion': id_notificacion,
                    _token: '{{ csrf_token() }}'
                },
                success: function (response) {
                    var result = JSON.parse(response);
                    var resultData = result.data;

                    if (resultData['mostrar'] == "0") {
                        $('#' + id_notificacion).text('¡Listo!');
                    }

                    if (resultData['mostrar'] == "1") {
                        $('#' + id_notificacion).text('No volver a mostrar');
                    }
                }
            });
        });
    </script>

    <!-- CSS PAGINACIÓN COMO BOTONES -->
    <style>
    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta {
        background-color: #fff;
        border: 1px solid #ddd;
        border-collapse: separate;
        border-spacing: 0;
        font-size: 12px;
        line-height: 1.25;
        margin-top: 6px;
        width: 100%;
    }

    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta thead th {
        background-color: #f9f9f9;
        border-bottom: 1px solid #d4d4d5;
        color: #212529;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
        padding: 7px 22px 7px 8px;
        position: relative;
        text-align: center;
        vertical-align: middle;
        white-space: nowrap;
    }

    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta tbody td {
        border-top: 1px solid #e5e5e5;
        padding: 7px 8px;
        vertical-align: middle;
    }

    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta tbody tr:hover {
        background-color: #f5f5f5;
    }

    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta th:nth-child(1) {
        min-width: 120px;
    }

    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta th:nth-child(2) {
        min-width: 220px;
    }

    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta th:nth-child(3),
    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta th:nth-child(7) {
        min-width: 135px;
    }

    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta th:nth-child(4),
    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta th:nth-child(5),
    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta th:nth-child(6) {
        min-width: 115px;
    }

    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta th:nth-child(8) {
        min-width: 130px;
    }

    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta th:nth-child(9) {
        min-width: 90px;
    }

    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta .sortable-column {
        cursor: pointer;
    }

    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta .sortable-column a {
        color: inherit;
        display: block;
        line-height: 1.2;
        text-decoration: none;
        width: 100%;
    }

    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta .sortable-column a:hover {
        color: inherit;
        text-decoration: none;
    }

    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta .estatus-prioridad {
        color: #555;
        display: block;
        font-size: 10px;
        font-weight: 500;
        margin-top: 2px;
        white-space: normal;
    }

    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta .sortable-column.sorting:before,
    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta .sortable-column.sorting:after,
    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta .sortable-column.sorting_asc:before,
    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta .sortable-column.sorting_asc:after,
    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta .sortable-column.sorting_desc:before,
    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta .sortable-column.sorting_desc:after {
        display: block;
        font-size: 10px;
        line-height: 10px;
        opacity: 0.28;
        position: absolute;
        right: 8px;
    }

    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta .sortable-column.sorting:before,
    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta .sortable-column.sorting_asc:before,
    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta .sortable-column.sorting_desc:before {
        content: "\2191";
        top: calc(50% - 10px);
    }

    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta .sortable-column.sorting:after,
    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta .sortable-column.sorting_asc:after,
    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta .sortable-column.sorting_desc:after {
        content: "\2193";
        top: calc(50% + 1px);
    }

    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta .sortable-column.sorting_asc:before,
    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta .sortable-column.sorting_desc:after {
        color: #212529;
        opacity: 0.95;
    }

    #tabla-linea-pruebas.tabla-linea-de-pruebas-compacta .btn {
        font-size: 11px;
        line-height: 1.2;
        padding: 4px 8px;
    }

    .pagination {
        display: inline-flex;
        justify-content: center;
    }

    .pagination > li > a,
    .pagination > li > span {
        color: #fff;
        background-color: #337ab7;
        border: 1px solid #2e6da4;
        margin: 0 3px;
        border-radius: 4px;
        padding: 6px 12px;
    }

    .pagination > li > a:hover {
        background-color: #286090;
        border-color: #204d74;
    }

    .pagination > .active > span {
        background-color: #5cb85c;
        border-color: #4cae4c;
        color: #fff;
    }

    .pagination > .disabled > span {
        background-color: #ddd;
        color: #999;
    }

    .pagination.pagination-numeric {
        border-radius: 3px;
        margin: 8px 0;
    }

    .pagination.pagination-numeric > li > a,
    .pagination.pagination-numeric > li > span {
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 0;
        color: #337ab7;
        font-size: 13px;
        line-height: 1.42857143;
        margin: 0 0 0 -1px;
        min-width: 30px;
        padding: 6px 10px;
    }

    .pagination.pagination-numeric > li:first-child > a,
    .pagination.pagination-numeric > li:first-child > span {
        border-bottom-left-radius: 3px;
        border-top-left-radius: 3px;
        margin-left: 0;
    }

    .pagination.pagination-numeric > li:last-child > a,
    .pagination.pagination-numeric > li:last-child > span {
        border-bottom-right-radius: 3px;
        border-top-right-radius: 3px;
    }

    .pagination.pagination-numeric > li > a:hover {
        background-color: #eeeeee;
        border-color: #ddd;
        color: #23527c;
    }

    .pagination.pagination-numeric > .active > span {
        background-color: #337ab7;
        border-color: #337ab7;
        color: #fff;
        cursor: default;
    }

    .pagination.pagination-numeric > .disabled > span {
        background-color: #fff;
        border-color: #ddd;
        color: #777;
        cursor: not-allowed;
    }

    .align-items-center {
        text-align: center;
    }
    </style>

@endsection