@extends('layouts.app', ['activePage' => 'gastos', 'menuParent' => 'operaciones', 'titlePage' => __('Contabilidad')])
@section('content')
@include('includes.tailwind')
@include('contabilidad.includes.creacionPolizas',['cuentasContables' => $cuentasContables, 'tipoComprobante' => $tipoComprobante])
@include('contabilidad.includes.creacionPago',['formasPago' => $formasPago, 'tipoComprobante' => $tipoComprobante, 'bancos' => $bancos])
@include('contabilidad.includes.asignacionCuenta',['cuentasContables' => $cuentasContables, 'tipoComprobante' => $tipoComprobante])
@include('contabilidad.includes.creacionPolizasMultiples', ['tipoComprobante' => $tipoComprobante])

<div class="content">
    <div class="container-fluid mt-4">
        <div class="row mb-4">
            <div class="col-6">
                <h6 class="text-xl font-semibold text-gray-800">CFDI - Recibidos</h6>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="bg-white rounded-lg shadow-md">
                    <div class="p-6">
                        <div class="grid grid-cols-12 gap-4 mb-4">
                            <div class="col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Proveedor:</label>
                                <select id="proveedorFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500  listado-cuentas-mayor" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true">
                                    <option value="" selected>-Todos-</option>
                                    @foreach($proveedores as $proveedor)
                                    <option value="{{ $proveedor->id }}">{{ $proveedor->razon_social }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Tipo de factura: </label>
                                <select id="tipoFacturaFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500  listado-cuentas-mayor" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true">
                                    <option value="" disabled selected>-Todas-</option>
                                    <option value="I">Ingreso</option>
                                    <option value="E">Egreso</option>
                                    <option value="P">Pago</option>
                                </select>
                            </div>
                            <div class="col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Metodo de pago:</label>
                                <select id="metodoPagoFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500  listado-cuentas-mayor" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true">
                                    <option value="" selected>-Todas-</option>
                                    <option value="PUE">PUE</option>
                                    <option value="PPD">PPD</option>
                                </select>
                            </div>
                            <div class="col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Estatus: </label>
                                <select id="estatusFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500  listado-cuentas-mayor" data-size="7" data-width="100%" data-style="select-with-transition" data-live-search="true">
                                    <option value="" disabled selected>-Todas-</option>
                                    <option value="1">Pendiente</option>
                                    <option value="2">Pagada</option>
                                    <option value="3">Cancelada</option>
                                    <option value="4">Con Póliza</option>
                                    <option value="5">Sin Póliza</option>
                                </select>
                            </div>
                            <div class="col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Año: <span class="text-red-500">*</span></label>
                                <select id="anioFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition">
                                    <option value="" disabled selected>-Seleccione-</option>
                                    @for($i = date( 'Y'); $i >= 2020; $i--)
                                    <option value="{{ $i }}">{{ $i }}</option>
                                    @endfor
                                </select>
                            </div>
                            <div class="col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Mes: <span class="text-red-500">*</span></label>
                                <select id="mesFilter" class="select2 w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" data-size="7" data-width="100%" data-style="select-with-transition">
                                    <option value="" disabled selected>-Seleccione-</option>
                                    <option value="1">Enero</option>
                                    <option value="2">Febrero</option>
                                    <option value="3">Marzo</option>
                                    <option value="4">Abril</option>
                                    <option value="5">Mayo</option>
                                    <option value="6">Junio</option>
                                    <option value="7">Julio</option>
                                    <option value="8">Agosto</option>
                                    <option value="9">Septiembre</option>
                                    <option value="10">Octubre</option>
                                    <option value="11">Noviembre</option>
                                    <option value="12">Diciembre</option>
                                </select>
                            </div>

                        </div>
                        <div class="grid grid-cols-12 gap-4 mb-4">
                            <div class="col-span-6 flex justify-start">
                                <button class="bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-1.5 text-sm rounded-md mr-2 font-medium transition-colors duration-200" onclick="generarPagoFactura()">
                                    <i class="material-icons align-middle text-sm">payments</i> Generar pago
                                </button>
                                <button class="bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-1.5 text-sm rounded-md mr-2 font-medium transition-colors duration-200" onclick="generarPolizasProvision()">
                                    <i class="material-icons align-middle text-sm">balance</i> Generar pólizas de provisión
                                </button>
                            </div>
                            <div class="col-span-6 flex justify-end">
                                <button class="bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-1.5 text-sm rounded-md mr-2 font-medium transition-colors duration-200" onclick="getVentas()">
                                    <i class="material-icons align-middle text-sm">search</i> Buscar
                                </button>
                            </div>

                        </div>

                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200" id="list-ventas">
                                <thead class="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><input type="checkbox" id="checkAll" title="Seleccionar todos"></th>
                                        <th class="px-2 py-2">Estatus</th>
                                        <th class="px-2 py-2">Pago</th>
                                        <th class="px-2 py-2" width="10%">Proveedor</th>
                                        <th class="px-2 py-2" width="10%">RFC</th>
                                        <th class="px-2 py-2">Fecha de creación</th>
                                        <th class="px-2 py-2">Serie</th>
                                        <th class="px-2 py-2">Folio</th>
                                        <th class="px-2 py-2">Tipo</th>
                                        <th class="px-2 py-2">Subtotal</th>
                                        <th class="px-2 py-2">Descuento</th>
                                        <th class="px-2 py-2">IVA</th>
                                        <th class="px-2 py-2">IVA Ret.</th>
                                        <th class="px-2 py-2">ISR</th>
                                        <th class="px-2 py-2">Monto</th>
                                        <th class="px-2 py-2">Saldo</th>
                                        <th class="px-2 py-2">M. Pago</th>
                                        <th class="px-2 py-2">F. Pago</th>
                                        <th class="px-2 py-2">Moneda</th>
                                        <th class="px-2 py-2">T.C</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>
                                        <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;
    }

    .estatus-row {
        margin-right: 6px;
        width: 110%;
        max-width: 100px;
        display: inline-block;
    }
</style>
@endsection

@push('js')
<script>
    $(document).ready(function() {

        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        $('.select2').select2({
            width: '100%',
        });

        // Obtener mes y año actual
        var fecha = new Date();
        var mesActual = fecha.getMonth() + 1; // getMonth() devuelve 0-11
        var anioActual = fecha.getFullYear();

        // Establecer valores en los selectores
        $('#mesFilter').val(mesActual).trigger('change');
        $('#anioFilter').val(anioActual).trigger('change');

        // Llamar a la función getVentas
        getVentas();
    });

    var id_factura = '';

    function getVentas() {
        if (!$('#mesFilter').val() || !$('#anioFilter').val()) {
            Swal.fire({
                icon: 'warning',
                title: 'Atención',
                text: 'Debe seleccionar mes y año para continuar',
                confirmButtonColor: '#0A415F'
            });
            return false;
        }


        $('#list-ventas').dataTable().fnDestroy();

        var table = $('#list-ventas').DataTable({
            lengthMenu: [10, 15, 20, 50, 100, 200, 500],
            dom: 'Bfrtip',
            language: {
                url: "{{asset('material/datatable_sp.json')}}"
            },
            ajax: {
                url: "{{route('gastos.get-gastos')}}",
                type: "POST",
                data: {
                    proveedor: $('#proveedorFilter option:selected').val(),
                    tipo_factura: $('#tipoFacturaFilter option:selected').val(),
                    estatus: $('#estatusFilter option:selected').val(),
                    mes: $('#mesFilter').val(),
                    anio: $('#anioFilter').val(),
                    metodo_pago: $('#metodo_pago option:selected').val(),

                }
            },
            createdRow: function(row, data, rowIndex) {
                // Per-cell function to do whatever needed with cells
                $.each($('td', row), function(colIndex) {
                    // For example, adding data-* attributes to the cell
                    $(this).attr('title', 'Ver detalles de la factura');
                });
            },
            footerCallback: function(row, data, start, end, display) {
                var api = this.api();
                // Remove the formatting to get integer data for summation
                var intVal = function(i) {
                    return typeof i === 'string' ?
                        i.replace(/[\$,]/g, '') * 1 :
                        typeof i === 'number' ?
                        i : 0;
                };

                var array = [10, 11, 12, 13, 14, 15, 16];
                array.forEach(element => {

                    // Total over all pages
                    total = api
                        .column(element)
                        .data()
                        .reduce(function(a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    // Total over this page
                    pageTotal = api
                        .column(element, {
                            page: 'current'
                        })
                        .data()
                        .reduce(function(a, b) {
                            return intVal(a) + intVal(b);
                        }, 0);

                    // Update footer
                    $(api.column(element).footer()).html(
                        '<span class="font-weight-bold">' + formatter.format(parseFloat(total)) + '<span>'
                    );
                });
            },
            columns: [{
                    data: "id",
                    visible: false
                }, {
                    data: "select",
                    orderable: false,
                    searchable: false
                },
                {
                    data: "estatus",
                    orderable: false,
                    searchable: false
                },
                {
                    data: "pago",
                    orderable: false,
                    searchable: false
                },
                {
                    data: "razon_social_emisor",
                },
                {
                    data: "rfc_emisor",
                },
                {
                    data: "fecha_emision",
                },
                {
                    data: "serie",
                },
                {
                    data: "folio",
                },
                {
                    data: "tipo",
                },

                {
                    data: "subtotal",
                },
                {
                    data: "descuento",
                },
                {
                    data: "iva",
                },
                {
                    data: "iva_ret",
                },
                {
                    data: "isr",
                },
                {
                    data: "monto",
                },
                {
                    data: "saldo",
                },
                {
                    data: "metodo_pago",
                },
                {
                    data: "forma_pago",
                },
                {
                    data: "moneda",
                },
                {
                    data: "tipo_cambio",
                },

            ],

            buttons: [{
                    extend: 'excel',
                    text: 'Exportar a Excel',
                    className: 'bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md text-xs font-medium transition-colors duration-200',
                    exportOptions: {
                        columns: ':not(:first-child)' // Excluye la primera columna
                    }
                },
                {
                    extend: 'pdf',
                    className: 'bg-[#0A415F] hover:bg-[#083549] text-white px-4 py-2 rounded-md text-xs font-medium transition-colors duration-200',
                    text: 'Exportar a PDF',
                    title: 'Listado de ventas',
                    orientation: 'landscape',
                    exportOptions: {
                        columns: ':not(:first-child)',
                        footer: true
                    },
                    customize: function(doc) {
                        doc.defaultStyle.fontSize = 8;
                        doc.styles.tableHeader.fontSize = 8;
                    }
                }
            ],
            order: [
                [2, "asc"]
            ],
        });

        table.on('click', 'tr', function(e) {
            // Verificar si el click fue en las columnas de acciones, estatus o subject
            var target = $(e.target);
            var cell = table.cell(target);

            // Verificar si el click fue en una celda válida
            if (!cell || !cell.index()) {
                return;
            }

            var columnIndex = cell.index().column;
            var columnTitle = table.column(columnIndex).header().textContent.trim();

            if (columnTitle === 'Ver' || columnTitle === 'Estatus' || columnTitle === 'Pago') {
                return;
            }

            var row = table.row(this).data();
            if (!row) {
                return;
            }
            $('.checkPro').map(function() {
                if ($(this).val() == row.id) {
                    $(this).prop('checked', true);
                }
            });

            window.open("{{ route('gastos.detalles-factura', ['id' => ':id']) }}".replace(':id', row.id), '_blank');

        });
    }
</script>

@endpush