@extends('layouts.app', ['activePage' => 'diot', 'menuParent' => 'reportes', 'titlePage' => __('Contabilidad')])

@section('content')
@include('includes.tailwind')

<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">DIOT</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-3">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Desde: <span class="text-red-500">*</span></label>
                                <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="desde">
                            </div>
                            <div class="col-span-3">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Hasta: <span class="text-red-500">*</span></label>
                                <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" id="hasta">
                            </div>
                            <div class="col-span-3 mt-6 ">
                                <button class="px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-[#0A415F] hover:bg-[#083549] text-white transition-colors duration-200" onclick="getDiot()">
                                    <i class="material-icons align-middle text-sm">search</i> Consultar
                                </button>
                                <button class="px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-[#0A415F] hover:bg-[#083549] text-white transition-colors duration-200" onclick="generarTxtDiot()">
                                    <i class="material-icons align-middle text-sm">download</i> Descargar TXT
                                </button>
                            </div>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="min-w-full divide-y divide-gray-200"  id="tableDiot">
                                <thead class="bg-gray-50 px-6 py-3 text-left text-[9px]  font-medium text-gray-500 uppercase tracking-wider">
                                    <tr>
                                        <th>Proveedor</th>
                                        <th>Total</th>
                                        <th>Tercero</th>
                                        <th>Operación</th>
                                        <th>RFC</th>
                                        <th>ID Fiscal</th>
                                        <th>Extranjero</th>
                                        <th>País</th>
                                        <th>Deducible</th>
                                        <th>Actos Norte</th>
                                        <th>Actos Sur</th>
                                        <th>Base 16%</th>
                                        <th>IVA 16%</th>
                                        <th>Base 8% Norte</th>
                                        <th>IVA 8% Norte</th>
                                        <th>Base 8% Sur</th>
                                        <th>IVA 8% Sur</th>
                                        <th>Base Exento</th>
                                        <th>IVA Exento</th>
                                        <th>Base 0%</th>
                                        <th>IVA 0%</th>
                                        <th>IVA Retenido</th>
                                        <th>IVA Pagado</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<style>
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_processing,
    .dataTables_wrapper .dataTables_paginate {
        font-size: 9px;
    }

    .dataTables_wrapper .dataTables_length select,
    .dataTables_wrapper .dataTables_filter input {
        font-size: 9px !important;
    }

    table.dataTable thead th,
    table.dataTable thead td {
        font-size: 9px !important;
    }

    table.dataTable tfoot th,
    table.dataTable tfoot td {
        font-size: 9px !important;
    }

    table.dataTable tbody td {
        font-size: 9px !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;
    }

</style>

@endsection

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

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

        $('#tableDiot').DataTable({
            "pagingType": "full_numbers",
            lengthMenu: [10, 25, 50, 100],
            language: {
                url: "{{asset('material/datatable_sp.json')}}"
            },
        });

        $('.select2').select2({
            placeholder: "-Selecciona-",
            width: '100%',
        });
    });

    function getDiot() {

        var desde = $('#desde').val();
        var hasta = $('#hasta').val();

        if (desde == '' || hasta == '') {
            showNotification('error', 'top', 'center', 'danger', '¡ERROR!', 'Debes ingresar las fechas para consultar la DIOT.');
            return false;
        }

        $('#tableDiot').dataTable().fnDestroy();
        $('#tableDiot').DataTable({
            lengthMenu: [10, 25, 50, 100],
            language: {
                url: "{{asset('material/datatable_sp.json')}}"
            },
            ajax: {
                url: "{{route('diot.get-diot')}}",
                type: "POST",
                data: {
                    desde: desde,
                    hasta: hasta,
                },

            },
            columnDefs: [{
                orderable: false,
                targets: 0
            }],
            columns: [{
                    data: "proveedor"
                },
                {
                    data: "total"
                },
                {
                    data: "tercero"
                },
                {
                    data: "operacion"
                },
                {
                    data: "rfc"
                },
                {
                    data: "id_fiscal"
                },
                {
                    data: "extranjero"
                },
                {
                    data: "pais"
                },
                {
                    data: "deducible"
                },
                {
                    data: "actos_norte"
                },
                {
                    data: "actos_sur"
                },
                {
                    data: "base_16"
                },
                {
                    data: "iva_16"
                },
                {
                    data: "base_8_norte"
                },
                {
                    data: "iva_8_norte"
                },
                {
                    data: "base_8_sur"
                },
                {
                    data: "iva_8_sur"
                },
                {
                    data: "base_exento"
                },
                {
                    data: "iva_exento"
                },
                {
                    data: "base_0"
                },
                {
                    data: "iva_0"
                },
                {
                    data: "iva_retenido"
                },
                {
                    data: "iva_pagado"
                }
            ],
            order: [
                [1, "desc"]
            ],

        });

    }


    function generarTxtDiot() {
        // Función para generar y descargar el archivo TXT de la DIOT
        $.ajax({
            url: "{{ route('diot.generar-txt') }}",
            type: "POST",
            data: {
                desde: $('#desde').val(),
                hasta: $('#hasta').val(),
                descargar: true // Puedes usar este parámetro en el backend para diferenciar la descarga
            },
            beforeSend: function() {
                // Mostrar un loader o deshabilitar el botón mientras se genera el archivo
                Swal.fire({
                    title: 'Generando archivo...',
                    text: 'Por favor espera mientras se genera el archivo TXT.',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading()
                    }
                });
            },
            success: function(response) {
                var link = document.createElement('a');
                link.href = response.url
                link.download = response.filename;
                link.click();

                Swal.fire({
                    icon: 'success',
                    title: 'Archivo generado',
                    text: 'El archivo TXT se ha descargado correctamente.',
                    timer: 2000,
                    showConfirmButton: false
                });
            },
            error: function(xhr) {
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: 'Ocurrió un error al generar el archivo TXT. Intenta de nuevo.',
                });
            },
            complete: function() {
                // Ocultar el loader o habilitar el botón nuevamente
                Swal.close();
            }
        });
    }
</script>
@endpush