@extends('fragments.fullTemplate')
@php
    $id_usuario = session('id_usuario');
    if (! session('id_usuario')) {
            header('location: /');
            die();
    }
@endphp
@section('estilos')
    <style>
        .tabla-requisiciones-responsive {
            overflow-x: auto;
        }

        .requisiciones-table-datatables-like {
            min-width: 1820px;
            margin-top: 6px !important;
            margin-bottom: 6px !important;
            border-collapse: separate !important;
            border-spacing: 0;
            table-layout: fixed;
            font-size: 12px;
        }

        .requisiciones-table-datatables-like.table > thead > tr > th {
            position: relative;
            min-width: 96px;
            padding: 7px 26px 7px 8px;
            vertical-align: middle;
            color: #212529;
            background-color: #f9fafb;
            border-bottom: 1px solid rgba(34, 36, 38, 0.12);
            font-size: 12px;
            font-weight: 600;
            line-height: 1.2;
            white-space: normal;
        }

        .requisiciones-table-datatables-like.table > thead > tr > th:nth-child(1),
        .requisiciones-table-datatables-like.table > tbody > tr > td:nth-child(1) {
            width: 5.6%;
            min-width: 96px;
        }

        .requisiciones-table-datatables-like.table > thead > tr > th:nth-child(2),
        .requisiciones-table-datatables-like.table > tbody > tr > td:nth-child(2) {
            width: 6.1%;
            min-width: 108px;
        }

        .requisiciones-table-datatables-like.table > thead > tr > th:nth-child(3),
        .requisiciones-table-datatables-like.table > tbody > tr > td:nth-child(3) {
            width: 5.8%;
            min-width: 104px;
        }

        .requisiciones-table-datatables-like.table > thead > tr > th:nth-child(4),
        .requisiciones-table-datatables-like.table > tbody > tr > td:nth-child(4) {
            width: 6.6%;
            min-width: 118px;
        }

        .requisiciones-table-datatables-like.table > thead > tr > th:nth-child(5),
        .requisiciones-table-datatables-like.table > tbody > tr > td:nth-child(5) {
            width: 4.5%;
            min-width: 88px;
        }

        .requisiciones-table-datatables-like.table > thead > tr > th:nth-child(6),
        .requisiciones-table-datatables-like.table > tbody > tr > td:nth-child(6) {
            width: 9.4%;
            min-width: 168px;
        }

        .requisiciones-table-datatables-like.table > thead > tr > th:nth-child(7),
        .requisiciones-table-datatables-like.table > tbody > tr > td:nth-child(7) {
            width: 9.3%;
            min-width: 166px;
        }

        .requisiciones-table-datatables-like.table > thead > tr > th:nth-child(8),
        .requisiciones-table-datatables-like.table > tbody > tr > td:nth-child(8) {
            width: 5.3%;
            min-width: 96px;
        }

        .requisiciones-table-datatables-like.table > thead > tr > th:nth-child(9),
        .requisiciones-table-datatables-like.table > tbody > tr > td:nth-child(9) {
            width: 7%;
            min-width: 126px;
        }

        .requisiciones-table-datatables-like.table > thead > tr > th:nth-child(10),
        .requisiciones-table-datatables-like.table > tbody > tr > td:nth-child(10) {
            width: 7.2%;
            min-width: 130px;
        }

        .requisiciones-table-datatables-like.table > thead > tr > th:nth-child(11),
        .requisiciones-table-datatables-like.table > tbody > tr > td:nth-child(11) {
            width: 7.1%;
            min-width: 128px;
        }

        .requisiciones-table-datatables-like.table > thead > tr > th:nth-child(12),
        .requisiciones-table-datatables-like.table > tbody > tr > td:nth-child(12) {
            width: 7%;
            min-width: 126px;
        }

        .requisiciones-table-datatables-like.table > thead > tr > th:nth-child(13),
        .requisiciones-table-datatables-like.table > tbody > tr > td:nth-child(13) {
            width: 7.1%;
            min-width: 128px;
        }

        .requisiciones-table-datatables-like.table > thead > tr > th:nth-child(14),
        .requisiciones-table-datatables-like.table > tbody > tr > td:nth-child(14) {
            width: 7.1%;
            min-width: 128px;
        }

        .requisiciones-table-datatables-like.table > thead > tr > th:nth-child(15),
        .requisiciones-table-datatables-like.table > tbody > tr > td:nth-child(15) {
            width: 5.9%;
            min-width: 108px;
        }

        .requisiciones-table-datatables-like.table > tbody > tr > td {
            padding: 7px 8px;
            vertical-align: middle;
            font-size: 12px;
            line-height: 1.35;
        }

        .requisiciones-table-datatables-like.table > tbody > tr > td:nth-child(9) .btn-sm,
        .requisiciones-table-datatables-like.table > tbody > tr > td:nth-child(12) .btn-sm,
        .requisiciones-table-datatables-like.table > tbody > tr > td:nth-child(13) .btn-sm,
        .requisiciones-table-datatables-like.table > tbody > tr > td:nth-child(14) .btn-sm {
            min-width: 74px;
            max-width: 116px;
            padding: 4px 7px;
            border: 0;
            border-radius: 4px;
            font-size: 11px;
            font-weight: 700;
            line-height: 1.18;
            white-space: normal;
        }

        .requisiciones-table-datatables-like.table > tbody > tr > td:nth-child(12) small,
        .requisiciones-table-datatables-like.table > tbody > tr > td:nth-child(13) small {
            display: block;
            margin-top: 4px;
            font-size: 10px;
            line-height: 1.2;
        }

        .requisiciones-table-datatables-like .requisiciones-sort-link {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 24px;
            color: inherit;
            text-decoration: none;
        }

        .requisiciones-table-datatables-like .sorting,
        .requisiciones-table-datatables-like .sorting_asc,
        .requisiciones-table-datatables-like .sorting_desc {
            cursor: pointer;
        }

        .requisiciones-table-datatables-like .sorting::before,
        .requisiciones-table-datatables-like .sorting::after,
        .requisiciones-table-datatables-like .sorting_asc::before,
        .requisiciones-table-datatables-like .sorting_asc::after,
        .requisiciones-table-datatables-like .sorting_desc::before,
        .requisiciones-table-datatables-like .sorting_desc::after {
            position: absolute;
            top: 50%;
            display: block;
            font-size: 11px;
            line-height: 1;
            color: #555;
            opacity: 0.3;
            transform: translateY(-50%);
        }

        .requisiciones-table-datatables-like .sorting::before,
        .requisiciones-table-datatables-like .sorting_asc::before,
        .requisiciones-table-datatables-like .sorting_desc::before {
            right: 15px;
            content: "\2191";
        }

        .requisiciones-table-datatables-like .sorting::after,
        .requisiciones-table-datatables-like .sorting_asc::after,
        .requisiciones-table-datatables-like .sorting_desc::after {
            right: 7px;
            content: "\2193";
        }

        .requisiciones-table-datatables-like .sorting_asc::before,
        .requisiciones-table-datatables-like .sorting_desc::after {
            opacity: 1;
        }

        .requisiciones-table-datatables-like ul {
            margin-bottom: 0;
            padding-left: 14px;
        }

        .requisiciones-table-datatables-like .ui.tiny.icon.buttons {
            display: inline-flex;
            white-space: nowrap;
        }

        .requisiciones-table-datatables-like .requisicion-admin-tags {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 3px;
            margin-top: 4px;
        }

        .requisiciones-table-datatables-like .requisicion-admin-tag {
            display: inline-block;
            padding: 2px 5px;
            border-radius: 3px;
            color: #fff;
            font-size: 10px;
            font-weight: 600;
            line-height: 1.1;
            white-space: nowrap;
        }

        .requisiciones-table-datatables-like .requisicion-admin-tag-info {
            background-color: #17a2b8;
        }

        .requisiciones-table-datatables-like .requisicion-admin-tag-primary {
            background-color: #2185d0;
        }

        .requisiciones-table-datatables-like .requisicion-admin-tag-success {
            background-color: #28a745;
        }
    </style>
@endsection
@section('contenido')

@if($tipo_cliente == 0)
    @include('Requisicion_compra.Tabs.indexPendientes')

@elseif($tipo_cliente == 1)
    @include('Requisicion_compra.Tabs.indexFinalizados')
@endif

    {{-- Modales de Requisición --}} 
    @include('Requisicion_compra.create_requisicion_modal')
    @include('Requisicion_compra.update_requisicion_modal')
    @include('Requisicion_compra.delete_requisicion_modal')

    <script>
        // --- Lógica para Nueva Requisición ---
        $(document).on('click','.create_requisicion',function(){
            $('#create_requisicion_modal').modal('show'); 
        });

        // --- Lógica para cargar datos en el modal de edición ---
        var resultData = {};

        $(document).ready(function(){
            $('.update_requisicion').on('click', function(){
                if(typeof showLoader === 'function') {
                    showLoader();
                }

                var id_requisicion_reporte = $(this).attr('id');

                $('#id_requisicion_reporte_update').val(id_requisicion_reporte);

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

                        $('#update_requisicion_modal').modal('show');

                        if(typeof hideLoader === 'function') {
                            hideLoader();
                        }
                    },
                    error:function(){
                        if(typeof hideLoader === 'function') {
                            hideLoader();
                        }

                        alert("Error al cargar los datos de la requisición.");
                    }
                });
            });
        });

        // --- Rellenar campos del modal al abrirse ---
        $('#update_requisicion_modal').on('show.bs.modal', function () {
            $("#update_requisicion_modal :input").each(function(){
                var inputId = $(this).attr('id');

                if(resultData['datos_reporte'] && inputId in resultData['datos_reporte']){
                    $(this).val(resultData['datos_reporte'][inputId]);

                    // Si usas bootstrap-select, refrescamos el componente.
                    if($(this).hasClass('selectpicker')){
                        $(this).selectpicker('refresh');
                        $(this).selectpicker('val', resultData['datos_reporte'][inputId]);
                    }
                }
            }); 
        });

        // --- Lógica para eliminar requisición ---
        $(document).on('click','.eliminarReporte',function(){
            var id_requisicion_reporte = $(this).attr('data-id_requisicion_reporte');
            var nombre_completo = $(this).attr('data-nombre_completo');

            $('#id_requisicion_reporte_delete').val(id_requisicion_reporte);
            $('#nombre_completo_delete').html(nombre_completo);

            $('#delete_requisicion_reporte_modal').modal('show'); 
        });

        /**
         * NOTA DE OPTIMIZACIÓN:
         * Se mantiene paginación y búsqueda por servidor.
         * No se inicializa DataTable para evitar cargar todos los registros en navegador.
         */
    </script>
@endsection