@php
$includeRelacionFacturaModal = $includeRelacionFacturaModal ?? false;
@endphp

<div class="modal fade modalEsc" id="modalCancelacionFactura">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-gray-50 border-b border-gray-200 px-6 py-4">
                <h4 class="modal-title text-lg font-semibold text-gray-900">Cancelar complemento de pago</h4>
                <button type="button" class="close text-gray-400 hover:text-gray-600 transition-colors" data-dismiss="modal" aria-hidden="true">
                    <i class="material-icons">close</i>
                </button>
            </div>
            <div class="modal-body px-6 py-4">
                <input type="hidden" id="idDocHv">
                <div class="mb-2">
                    <label for="motivo_cancelacion" class="block text-sm font-medium text-gray-700">Motivo de cancelación:<span class="text-danger">*</span></label>
                    <select class="select2 w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all" id="motivo_cancelacion" onchange="toggleRelacionSustitucion();">
                        <option value="01">(01) Comprobantes emitidos con errores con relación</option>
                        <option value="02" selected>(02) Comprobantes emitidos con errores sin relación</option>
                        <option value="03">(03) No se llevó a cabo la operación</option>
                        <option value="04">(04) Operación nominativa relacionada en una factura global</option>
                    </select>
                </div>
                <div class="row mt-2" id="uuidRelaCancelRow" style="display: none;">
                    <div class="col-6">
                        <label class="block text-sm text-gray-700">Serie:<span class="text-danger">*</span></label>
                        <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all" id="serieRelaCancel">
                    </div>
                    <div class="col-6">
                        <label class="block text-sm text-gray-700">Folio:<span class="text-danger">*</span></label>
                        <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all" id="folioRelaCancel">
                    </div>
                </div>
            </div>
            <div class="modal-footer bg-gray-50 border-t border-gray-200 px-6 pt-4 pb-4 flex justify-end gap-2">
                <button type="button" class="px-4 py-2 bg-red-500 ml-1 text-white rounded-lg font-medium hover:bg-red-600 transition-colors text-sm" onclick="cancelarComplementoSeleccionado();">
                    <i class="material-icons text-sm">check_circle</i>
                    Cancelar complemento
                </button>
            </div>
        </div>
    </div>
</div>

@if ($includeRelacionFacturaModal)
<div class="modal fade" id="modalFacturasRelacion">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-gray-50 border-b border-gray-200 px-6 py-4">
                <h4 class="modal-title text-lg font-semibold text-gray-900">Facturas</h4>
                <button type="button" class="close text-gray-400 hover:text-gray-600 transition-colors" data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body px-4 py-2">
                <div class="row" style="height: 50vh;overflow: auto;">
                    <div class="col-12">
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Serie</th>
                                        <th>Folio</th>
                                        <th>Fecha</th>
                                        <th>Importe</th>
                                        <th>Saldo</th>
                                        <th></th>
                                    </tr>
                                </thead>
                                <tbody id="bodyFacturas"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer bg-white border-t border-blue-200 px-6 pt-2 pb-4 flex justify-end gap-2">
                <button type="button" class="flex items-center gap-2 bg-transparent text-gray-600 hover:text-red-600 border border-gray-300 hover:border-red-500 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm" data-dismiss="modal">Cerrar</button>
                <button type="button" class="flex items-center gap-2 bg-blue-500 hover:bg-blue-600 text-white border border-blue-600 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm" onclick="agregarFact();" id="btnAgregaFact">Agregar</button>
                <button type="button" class="flex items-center gap-2 bg-blue-500 hover:bg-blue-600 text-white border border-blue-600 px-4 py-2 rounded-md text-sm font-medium transition-colors duration-200 shadow-sm" onclick="agregarFact2();" id="btnAgregaFactCancelacion">Agregar</button>
            </div>
        </div>
    </div>
</div>
@endif

@push('js')
@include('operaciones.partials.cancelacionComplementoFlow')
<script>
    (function(window) {
        if (!window.CancelacionComplementoShared) {
            var cancelacionOnSuccess = null;
            var cancelacionFlow = window.CancelacionComplementoFlow.create({
                verifyUrl: "{{ url('facturacion/operaciones/lista-complementos/cancel_verifica') }}",
                cancelUrl: "{{ url('facturacion/operaciones/lista-complementos/cancelar') }}",
                onSuccess: function(resp, id) {
                    if (typeof cancelacionOnSuccess === 'function') {
                        cancelacionOnSuccess(resp, id);
                        return;
                    }

                    if (typeof window.loadGridComplementos === 'function') {
                        window.loadGridComplementos();
                        return;
                    }

                    if (typeof window.loadGrid === 'function') {
                        window.loadGrid();
                    }
                    setTimeout(function() {
                        window.location.reload();
                    }, 2000);

                }
            });

            window.configureCancelacionComplemento = function(options) {
                var config = options || {};
                cancelacionOnSuccess = typeof config.onSuccess === 'function' ? config.onSuccess : null;
                return cancelacionFlow;
            };

            window.toggleRelacionSustitucion = function() {
                cancelacionFlow.toggleRelacionSustitucion();
            };

            window.cancelarComplementoSeleccionado = function() {
                cancelacionFlow.cancelarComplementoSeleccionado();
            };

            window.descargarAcuseComplemento = function(acuseUrl) {
                cancelacionFlow.descargarAcuseComplemento(acuseUrl);
            };

            window.CancelacionComplementoShared = {
                flow: cancelacionFlow,
                configure: window.configureCancelacionComplemento
            };
        }

        if (!window.CancelacionComplementoRelacion) {
            function formatMoneyValue(value) {
                if (typeof window.numberFormat === 'function') {
                    return window.numberFormat(value);
                }

                var numeric = parseFloat(value || 0);
                if (isNaN(numeric)) {
                    numeric = 0;
                }

                return numeric.toLocaleString('en-US', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                });
            }

            function createRelacionHelper(options) {
                var config = Object.assign({
                    fetchFacturasUrl: '',
                    clienteSelector: '#buscaCliente',
                    tipoSelector: '#tipoAccion',
                    bodySelector: '#bodyFacturas',
                    modalSelector: '#modalFacturasRelacion',
                    btnAgregarSelector: '#btnAgregaFact',
                    btnAgregarCancelacionSelector: '#btnAgregaFactCancelacion',
                    serieSelector: '#serieRelaCancel',
                    folioSelector: '#folioRelaCancel'
                }, options || {});

                function verFacturas(cancelacion) {
                    var cliente = $(config.clienteSelector).val();
                    var tipo = $(config.tipoSelector).val();

                    $.ajax({
                        url: config.fetchFacturasUrl,
                        type: 'POST',
                        dataType: 'json',
                        data: {
                            id_cliente: cliente,
                            tipo: tipo
                        }
                    }).done(function(resp) {
                        var html = '';
                        var tipoInput = 'checkbox';
                        var nameInput = '';
                        var isCancelacion = Number(cancelacion || 0) === 1;

                        if (isCancelacion) {
                            tipoInput = 'radio';
                            nameInput = ' name="ceccanecl"';
                            $(config.btnAgregarSelector).hide();
                            $(config.btnAgregarCancelacionSelector).show();
                        } else {
                            $(config.btnAgregarSelector).show();
                            $(config.btnAgregarCancelacionSelector).hide();
                        }

                        $(config.bodySelector).html('');

                        $.each(resp.facturas || [], function(index, val) {
                            html += '<tr>';
                            html += '<td>' + (val.serie || '') + '</td>';
                            html += '<td>' + (val.folio || '') + '</td>';
                            html += '<td>' + (val.fecha_emision || '') + '</td>';
                            html += '<td>' + formatMoneyValue(val.monto) + '</td>';
                            html += '<td>' + formatMoneyValue(val.saldo) + '</td>';
                            html += '<td><input class="form-check-input rrela" type="' + tipoInput + '" id="che_' + val.id + '" value="' + val.id + '" serie="' + (val.serie || '') + '" folio="' + (val.folio || '') + '" uuid="' + (val.uuid || '') + '"' + nameInput + '></td>';
                            html += '</tr>';
                        });

                        $(config.bodySelector).append(html);
                        $(config.modalSelector).modal('show');
                    }).fail(function() {
                        console.log('error');
                    });
                }

                function agregarFact2() {
                    $('.rrela').each(function() {
                        if ($(this).is(':checked')) {
                            $(config.serieSelector).val($(this).attr('serie'));
                            $(config.folioSelector).val($(this).attr('folio'));
                        }
                    });

                    $(config.modalSelector).modal('hide');
                }

                return {
                    verFacturas: verFacturas,
                    agregarFact2: agregarFact2
                };
            }

            window.CancelacionComplementoRelacion = {
                create: createRelacionHelper
            };
        }

        var shouldInitRelacionModal = @json((bool) $includeRelacionFacturaModal);
        if (shouldInitRelacionModal && !window.CancelacionComplementoRelacionModalReady) {
            var relacionHelper = window.CancelacionComplementoRelacion.create({
                fetchFacturasUrl: "{{ url('facturacion/operaciones/get_facturas_cliente') }}"
            });

            window.agregaFacturaCancelacion = function() {
                relacionHelper.verFacturas(1);
            };

            window.verFacturas = function(cancelacion) {
                relacionHelper.verFacturas(cancelacion || 0);
            };

            window.agregarFact2 = function() {
                relacionHelper.agregarFact2();
            };

            window.CancelacionComplementoRelacionModalReady = true;
        }
    })(window);
</script>
@endpush