@extends('layouts.app', ['activePage' => 'auditorias', 'menuParent' => 'reportes', 'titlePage' => __('Auditorias')])
@section('content')
@include('includes.tailwind')

<div class="content">
    <div class="container-fluid mt-4">
        <div class="row mb-2">
            <div class="col-6">
                <h6 class="text-xl font-semibold text-gray-800">Complementos posteriores a facturas saldadas</h6>
            </div>
            <div class="col-6 text-right">
                <a  href="{{ url()->previous() }}" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200">
                    <svg class="h-5 w-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                    </svg>
                    Volver
                </a>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="bg-white rounded-lg shadow-md">
                    <div class="p-6">
                        @include('contabilidad.includes.complementosPosterioresCardComponent')
                        <div class="table-scroll px-2">
                            <table class="min-w-full" id="list-complementos-posteriores">
                                <thead class=" sticky-top bg-gray-50 px-6 py-3  text-[10px] font-semibold text-left font-medium text-gray-500 uppercase tracking-wider">
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th class="px-2 py-2">Serie</th>
                                        <th class="px-2 py-2">Folio</th>
                                        <th class="px-2 py-2" width="22%">UUID</th>
                                        <th class="px-2 py-2">Emisión</th>
                                        <th class="px-2 py-2">Creada</th>
                                        <th class="px-2 py-2">CP creada</th>
                                        <th class="px-2 py-2">CP UUIDs</th>
                                        <th class="px-2 py-2">Monto</th>
                                        <th class="px-2 py-2">Saldo</th>
                                        <th class="px-2 py-2">Moneda</th>
                                        <th class="px-2 py-2">T.C</th>
                                        <th class="px-2 py-2">Método</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                        <th></th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .select2-container { width: 100% !important; }
    .select2-container .select2-selection--single { height: 40px !important; }
    .select2-container .select2-selection--single .select2-selection__rendered { line-height: 40px !important; }
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_processing,
    .dataTables_wrapper .dataTables_paginate { font-size: 10px; }
    .dataTables_wrapper .dataTables_length select, .dataTables_wrapper .dataTables_filter input { font-size: 10px !important; }
    table.dataTable thead th, table.dataTable thead td { font-size: 10px !important; }
    table.dataTable tfoot th, table.dataTable tfoot td { font-size: 11px !important; }
    table.dataTable tbody td { font-size: 11px !important; }
    table.dataTable tbody tr:hover { background-color: #f8f9fa; cursor: pointer; }
    .dataTables_wrapper .dataTables_filter input { padding: 0.25rem 0.5rem !important; border-radius: 0.375rem !important; border: 1px solid #e2e8f0 !important; }
    .dataTables_wrapper .dataTables_filter input:focus { outline: none !important; border-color: #0A415F !important; box-shadow: 0 0 0 2px rgba(10, 65, 95, 0.1) !important; }
    .table-scroll { max-height: 550px; overflow-y: auto; }
    .estatus-row { margin-right: 6px; width: 110%; max-width: 100px; display: inline-block; }
    .bg-red { background: #f8d7da; }
    .bg-green { background: #d4edda; }
</style>
@endsection

@push('js')
<script>
    $(document).ready(function() {
        $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } });
        $('.select2').select2({ placeholder: "-Selecciona-", width: '100%', });

        var fecha = new Date();
        var mesActual = fecha.getMonth() + 1;
        var anioActual = fecha.getFullYear();
        $('#mesFilter').val(mesActual).trigger('change');
        $('#anioFilter').val(anioActual).trigger('change');

        $('#content-filters-complementos-posteriores').show();
    });
</script>
@endpush