@extends('layout.template')

@section('title', 'Impresión de ' . $tipo_descripcion . ' | SICCAP')

@push('styles')
    <link href="{{ asset('assets/libs/datatables.net-bs4/css/dataTables.bootstrap4.min.css') }}" rel="stylesheet"
        type="text/css" />
    <link href="{{ asset('assets/libs/datatables.net-buttons-bs4/css/buttons.bootstrap4.min.css') }}" rel="stylesheet"
        type="text/css" />
    <link href="{{ asset('assets/libs/datatables.net-responsive-bs4/css/responsive.bootstrap4.min.css') }}" rel="stylesheet"
        type="text/css" />
    <style>
        .accordion-header-primary {
            background: #2C3E50;
            display: flex;
            align-items: center;
            border-radius: 6px;
        }

        .accordion-header-text {
            font-weight: 600;
        }

        .table thead th {
            font-size: 11px;
            letter-spacing: 1px;
            text-transform: uppercase;
            font-weight: 700;
            color: #7E8299;
        }

        .table tbody td {
            vertical-align: middle;
            color: #3F4254;
            font-weight: 500;
        }

        .form-control:read-only {
            background-color: #f8f9fa;
            border-color: #dee2e6;
        }

        .form-control:not(:read-only) {
            border-color: #3B71CA;
            background-color: #fff;
        }

        input.form-control {
            text-align: center;
        }

        .card {
            border-radius: 12px;
            border: none;
            box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
        }

        .label-readonly {
            font-size: 0.75rem;
            font-weight: 700;
            color: #6c757d;
            text-transform: uppercase;
            margin-bottom: 4px;
            display: block;
        }

        .input-group-text {
            background-color: #f8f9fa;
            border-color: #dee2e6;
            color: #6c757d;
        }

        .flatpicker[readonly] {
            background-color: #fff !important;
        }
    </style>
@endpush

@section('content')
    <div class="content-body">
        <div class="container-fluid">

            <!-- Header Section -->
            <div class="row page-titles mx-0 mt-4 shadow-sm">
                <div class="col-sm-12 p-md-0 card-body">
                    <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
                        <div>
                            <h3 class="mb-2" style="font-weight: 700; color: #2C3E50;">
                                Impresión de {{ $tipo_descripcion }}
                                @if($cancelado == 1)
                                    <span class="badge bg-danger ms-2">Cancelado</span>
                                @endif
                            </h3>
                        </div>
                        <div class="d-flex gap-2">
                            <a href="{{ route('impresiones.index') }}"
                                class="btn btn-outline-secondary d-flex align-items-center gap-2 shadow-sm"
                                style="border-radius: 8px; font-weight: 600;">
                                <i class="la la-arrow-left"></i> Regresar
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Main Content -->
            <div class="row mt-4">
                <div class="col-12">
                    <div class="card shadow-sm border-0">
                        <div class="card-body">

                            <!-- Sección Datos del Capacitando y Curso -->
                            <div class="accordion-header accordion-header-primary mb-2"
                                style="background: #2C3E50; padding: 1rem 1.5rem; border-radius: 6px;">
                                <span class="la la-user-tag fs-3 text-white me-2"></span>
                                <span class="accordion-header-text text-white h5 mb-0">Información del Registro</span>
                            </div>

                            <div class="p-4 border-bottom">
                                <div class="row">
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label font-weight-bold">Capacitando</label>
                                        <input type="text" class="form-control font-weight-bold"
                                            value="{{ $nombreAlumno }}" readonly>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label font-weight-bold">CURP</label>
                                        <input type="text" class="form-control" value="{{ $curpAlumno }}"
                                            readonly>
                                    </div>
                                    <div class="col-md-4 mb-3">
                                        <label class="form-label font-weight-bold">No. Control</label>
                                        <input type="text" class="form-control" value="{{ $numeroControl }}"
                                            readonly>
                                    </div>
                                </div>

                                <div class="row">
                                    <div class="col-md-9 mb-3">
                                        <label class="form-label font-weight-bold">
                                            {{ $imp_tipo == 'E' ? 'Nombre de la Especialidad' : 'Nombre del Curso' }}
                                        </label>
                                        <input type="text" class="form-control font-weight-bold"
                                            value="{{ $nombreCurso }}" readonly>
                                    </div>
                                    <div class="col-md-3 mb-3 {{ $imp_tipo == 'E' ? 'd-none' : '' }}">
                                        <label class="form-label font-weight-bold">Tipo de Curso</label>
                                        <input type="text" class="form-control"
                                            value="{{ $tipo_curso_txt_label }}" readonly>
                                    </div>
                                    <div class="col-md-3 mb-3">
                                        <label class="form-label font-weight-bold">Unidad</label>
                                        <input type="text" class="form-control" value="{{ $nombreUnidad }}"
                                            readonly>
                                    </div>
                                    <div class="col-md-1 mb-3 {{ $imp_tipo == 'E' ? 'd-none' : '' }}">
                                        <label class="form-label font-weight-bold">Horas</label>
                                        <input type="text" class="form-control" value="{{ $horasCurso }}"
                                            readonly>
                                    </div>
                                    <div class="col-md-4 mb-3 {{ $imp_tipo == 'E' ? 'd-none' : '' }}">
                                        <label class="form-label font-weight-bold">Fecha de Inicio</label>
                                        <input type="text" class="form-control"
                                            value="{{ $fechaInicioCurso }}" readonly>
                                    </div>
                                    <div class="col-md-4 mb-3 {{ $imp_tipo == 'E' ? 'd-none' : '' }}">
                                        <label class="form-label font-weight-bold">Fecha de Término</label>
                                        <input type="text" class="form-control font-weight-bold"
                                            value="{{ $fechaTerminoCurso }}" readonly>
                                    </div>
                                </div>

                                @if($imp_empresa)
                                    <div class="row mt-3">
                                        <div class="col-md-12">
                                            <label class="label-readonly">Datos de Convenio</label>
                                            <div class="p-2 border rounded"
                                                style="background-color: #fff4e5; border-color: #ffcc80;">
                                                <span class="d-block small"><strong>Empresa:</strong> {{ $imp_empresa }} |
                                                    <strong>Representante:</strong> {{ $imp_representante_legal }}
                                                    ({{ $imp_cargo }})</span>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </div>

                            @if($imp_tipo == 'E')
                                <div class="accordion-header accordion-header-primary mt-4"
                                    style="background: #2C3E50; padding: 1rem 1.5rem; border-radius: 6px;">
                                    <span class="la la-list-ul fs-3 text-white me-2"></span>
                                    <span class="accordion-header-text text-white h5 mb-0">Cursos de la Especialidad</span>
                                </div>
                                
                                <div class="p-4 border-bottom">
                                    <div class="table-responsive">
                                        <table class="table table-sm table-bordered mb-0" style="font-size: 0.8rem;">
                                            <thead class="bg-light">
                                                <tr>
                                                    <th class="text-nowrap text-center" style="width: 5%;">#</th>
                                                    <th class="text-nowrap">NOMBRE DEL CURSO</th>
                                                    <th class="text-nowrap text-center">HORAS</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @forelse($cursosEspecialidad as $index => $c)
                                                    <tr>
                                                        <td class="text-center">{{ $index + 1 }}</td>
                                                        <td>{{ $c->nombre }}</td>
                                                        <td class="text-center font-weight-bold">{{ $c->horas }}</td>
                                                    </tr>
                                                @empty
                                                    <tr>
                                                        <td colspan="3" class="text-center py-2 text-muted small">No hay cursos asignados o información insuficiente.</td>
                                                    </tr>
                                                @endforelse
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            @endif
                            
                            @if ($numeroRecibo)
                                <div class="accordion-header accordion-header-primary mt-4"
                                    style="background: #2C3E50; padding: 1rem 1.5rem; border-radius: 6px;">
                                    <span class="la la-file-invoice-dollar fs-3 text-white me-2"></span>
                                    <span class="accordion-header-text text-white h5 mb-0">Detalle del Diploma Original</span>
                                </div>
                                
                                <div class="p-4 border-bottom">
                                    <div class="table-responsive">
                                <table class="table table-bordered text-center">
                                    <thead class="bg-light">
                                        <tr>
                                            <th>No. Recibo</th>
                                            <th>Becado</th>
                                            <th>Fecha Recibo</th>
                                            <th>Importe</th>
                                            <th class="font-weight-bold">Acreditado</th>
                                            <th class="font-weight-bold">Folio Orig.</th>
                                            <th class="font-weight-bold">Fecha Ent.</th>
                                            <th class="font-weight-bold">Pago</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>{{ $numeroRecibo }}</td>
                                            <td>{{ $becado }}</td>
                                            <td>{{ $fechaDeRecibo }}</td>
                                            <td><strong>${{ number_format((float) $importe, 2) }}</strong></td>
                                            <td><span
                                            class="{{ $acreditado == 'SI' ? 'color-success' : 'color-danger' }}">{{ $acreditado }}</span>
                                        </td>
                                        <td>{{ $folioDocumento ?: '-' }}</td>
                                            <td>{{ $fechaEntrega ?: '-' }}</td>
                                            <td>
                                                <div class="d-flex justify-content-center gap-2 bg-light border rounded align-items-center" style="height: 44px;">
                                                    @if($ligaComprobante)
                                                        <button type="button" class="btn btn-sm btn-link p-0 btnVerArchivo"
                                                            data-url="{{ $ligaComprobante }}" data-tipo="PDF">
                                                            <i class="la la-file-pdf fs-3 text-danger"></i>
                                                        </button>
                                                    @endif
                                                    @if($ligaXML)
                                                        <button type="button" class="btn btn-sm btn-link p-0 btnVerArchivo"
                                                            data-url="{{ $ligaXML }}" data-tipo="XML">
                                                            <i class="la la-file-code fs-3 text-primary"></i>
                                                        </button>
                                                    @endif
                                                    @if(!$ligaComprobante && !$ligaXML)
                                                        <span class="text-muted small">-</span>
                                                    @endif
                                                </div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                                    </div>
                                </div>
                            @endif

                            <div class="accordion-header accordion-header-primary my-4"
                                style="background: #2C3E50; padding: 1rem 1.5rem; border-radius: 6px;">
                                <span class="la la-certificate fs-3 text-white me-2"></span>
                                <span class="accordion-header-text text-white h5 mb-0">Emisión de Documento</span>
                            </div>

                            <div class="p-4">
                                <div class="table-responsive">
                                    <table class="table table-bordered text-center align-middle">
                                        <thead class="bg-light">
                                            <tr>
                                                @if($imp_tipo != 'E')
                                                    <th class="font-weight-bold">No. Recibo</th>
                                                    <th class="font-weight-bold">Importe</th>
                                                @endif
                                                <th class="font-weight-bold">Folio Documento</th>
                                                <th class="font-weight-bold">Fecha Impresión</th>
                                                <th class="font-weight-bold">Fecha Entrega</th>
                                                @if($imp_tipo != 'E')
                                                    <th class="font-weight-bold">Pago</th>
                                                @endif
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                @if($imp_tipo != 'E')
                                                    <td style="width: 15%;">
                                                        <div class="text-primary" style="height: 28px;">
                                                            {{ $nuevoRecibo }}
                                                        </div>
                                                    </td>
                                                    <td style="width: 12%;">
                                                        <div class="text-primary" style="height: 28px;">
                                                            ${{ number_format((float) $nuevoImporte, 2) }}
                                                        </div>
                                                    </td>
                                                @endif
                                                <td style="width: 18%;">
                                                    <input type="text" value="{{ $nuevoFolio }}"
                                                        class="form-control font-weight-bold text-center" id="folio" name="folio"
                                                        placeholder="FOLIO" style="text-transform: uppercase; height: 40px;"
                                                        autocomplete="off" {{ $nuevoFolio && $nuevaFechaDocumento ? 'disabled' : '' }} />
                                                    <div class="text-danger small mt-1" id="msg_folio"></div>
                                                </td>
                                                <td style="width: 20%;">
                                                    <div class="input-group">
                                                        <input type="text" value="{{ $nuevaFechaDocumento ? date('d/m/Y', strtotime($nuevaFechaDocumento)) : '' }}"
                                                            class="form-control flatpicker text-center" id="fechaDocumento"
                                                            name="fechaDocumento" style="height: 40px;" {{ $nuevoFolio && $nuevaFechaDocumento ? 'disabled' : '' }} />
                                                        <span class="input-group-text"><i class="las la-calendar fs-4"></i></span>
                                                    </div>
                                                    <div class="text-danger small mt-1" id="msg_fechaDocumento"></div>
                                                </td>
                                                <td style="width: 20%;">
                                                    <div class="input-group">
                                                        <input type="text" value="{{ $nuevaFechaEntrega ? date('d/m/Y', strtotime($nuevaFechaEntrega)) : '' }}"
                                                            class="form-control flatpicker text-center" id="fechaEntrega"
                                                            name="fechaEntrega" style="height: 40px;" />
                                                        <span class="input-group-text"><i class="las la-calendar fs-4"></i></span>
                                                    </div>
                                                    <div class="text-danger small mt-1" id="msg_fechaEntrega"></div>
                                                </td>
                                                @if($imp_tipo != 'E')
                                                    <td style="width: 10%;">
                                                        <div class="d-flex justify-content-center gap-2 align-items-center" style="height: 40px;">
                                                            @if($nuevoComprobante)
                                                                <button type="button" class="btn btn-sm btn-link p-0 btnVerArchivo"
                                                                    data-url="{{ $nuevoComprobante }}" data-tipo="PDF">
                                                                    <i class="la la-file-pdf fs-3 text-danger"></i>
                                                                </button>
                                                            @endif
                                                            @if($nuevoXML)
                                                                <button type="button" class="btn btn-sm btn-link p-0 btnVerArchivo"
                                                                    data-url="{{ $nuevoXML }}" data-tipo="XML">
                                                                    <i class="la la-file-code fs-3 text-primary"></i>
                                                                </button>
                                                            @endif
                                                            @if(!$nuevoComprobante && !$nuevoXML)
                                                                <span class="text-muted small">-</span>
                                                            @endif
                                                        </div>
                                                    </td>
                                                @endif
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>

                                <div class="row mt-4">
                                    <div class="col-12 d-flex justify-content-center align-items-center gap-3">
                                        @if($cancelado != 1)
                                            <button type="button" id="btnGuardarFolio"
                                                class="btn btn-success d-flex align-items-center gap-2 px-4 shadow-sm"
                                                style="{{ $nuevoFolio && $nuevaFechaDocumento ? 'display: none;' : '' }}; font-weight: 700; height: 44px;">
                                                <i class="la la-save fs-4"></i> Guardar Cambios
                                            </button>
                                            <button type="button" id="btnEditarFolio"
                                                class="btn btn-primary d-flex align-items-center gap-2 px-4 shadow-sm"
                                                style="{{ !$nuevoFolio || !$nuevaFechaDocumento ? 'display: none;' : '' }}; font-weight: 700; height: 44px;">
                                                <i class="la la-edit fs-4"></i> Editar Folio
                                            </button>
                                        @endif

                                        <div id="print_section">
                                            @include('application.Impresiones.partials.botones_impresion')
                                        </div>
                                    </div>
                                </div>
                                <div id="msg_guardado" class="text-center mt-3"></div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal de Confirmación -->
    <div class="modal fade" id="confirmModal" data-bs-backdrop="static" tabindex="-1">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow">
                <div class="modal-header text-white" style="background: #2C3E50;">
                    <h5 class="modal-title text-white">Confirmar Registro</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body text-center p-4">
                    <i class="la la-exclamation-circle text-warning mb-3" style="font-size: 4rem;"></i>
                    <h5>¿Confirma los datos del Documento?</h5>
                    <p class="text-muted">Se actualizará el folio y las fechas seleccionadas.</p>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" id="btnConfirmarAceptar" class="btn btn-dark"
                        style="background: #2C3E50; border: none;">Confirmar y Guardar</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalArchivo" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content shadow border-0">
                <div class="modal-header text-white" style="background:#2C3E50;">
                    <h5 class="modal-title text-white" id="tituloArchivo">Archivo</h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body p-0">
                    <div id="containerVisorPdf">
                        <iframe id="visorArchivo" src="" width="100%" height="800px" frameborder="0"></iframe>
                    </div>
                    <div id="containerVisorXml" style="display: none; background: #f8f9fa; padding: 20px; height: 800px; overflow-y: auto;">
                        <div class="mb-2 text-end">
                            <a href="#" id="visorXmlDownload" class="btn btn-outline-primary btn-sm" target="_blank">Descargar XML</a>
                        </div>
                        <pre id="visorXmlContentModal" class="border p-3" style="white-space: pre-wrap; word-break: break-word; background:#fff; font-family: monospace; font-size: 12px;"></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>

@endsection

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

            let folio = "{{ $nuevoFolio }}";
            let fechaDoc = "{{ $nuevaFechaDocumento }}";
            let fechaEnt = "{{ $nuevaFechaEntrega }}";

            evaluarEstadoInicial();

            function evaluarEstadoInicial() {

                if (!folio || !fechaDoc) {
                    estadoNuevo();
                }
                else if (folio && fechaDoc && !fechaEnt) {
                    estadoGuardadoParcial();
                }
                else if (folio && fechaDoc && fechaEnt) {
                    estadoCompleto();
                }
            }

            function estadoNuevo() {
                $('#head_fecha_entrega, #container_fecha_entrega, #print_section').addClass('d-none');

                $('#btnGuardarFolio').show();
                $('#btnEditarFolio').hide();

                $('#folio, #fechaDocumento').prop('disabled', false);
                $('#fechaEntrega').prop('disabled', false);
            }

            function estadoGuardadoParcial() {
                $('#head_fecha_entrega, #container_fecha_entrega, #print_section').removeClass('d-none');

                $('#btnGuardarFolio').show();
                $('#btnEditarFolio').show();

                $('#folio, #fechaDocumento').prop('disabled', true);
                $('#fechaEntrega').prop('disabled', false);
            }

            function estadoCompleto() {
                $('#head_fecha_entrega, #container_fecha_entrega, #print_section').removeClass('d-none');

                $('#btnGuardarFolio').hide();
                $('#btnEditarFolio').show();

                $('#folio, #fechaDocumento, #fechaEntrega').prop('disabled', true);
            }

            // EDITAR
            $('#btnEditarFolio').on('click', function () {

                $('#btnGuardarFolio').show();

                $('#folio, #fechaDocumento').prop('disabled', false);

                if ($('#fechaEntrega').val() !== '') {
                    $('#fechaEntrega').prop('disabled', false);
                }
            });

            // VALIDACIÓN
            $('#fechaEntrega, #fechaDocumento').on('change', function () {
                let fDoc = $('#fechaDocumento').val();
                let fEnt = $('#fechaEntrega').val();

                if (fEnt && fDoc) {
                    let dParts = fDoc.split('/');
                    let eParts = fEnt.split('/');
                    
                    if (dParts.length === 3 && eParts.length === 3) {
                        let dateDoc = new Date(dParts[2], dParts[1] - 1, dParts[0]);
                        let dateEnt = new Date(eParts[2], eParts[1] - 1, eParts[0]);

                        if (dateEnt < dateDoc) {
                            $('#msg_fechaEntrega').text('No puede ser menor a la fecha de impresión');
                            $('#btnGuardarFolio').prop('disabled', true);
                            return;
                        }
                    }
                }
                $('#msg_fechaEntrega').text('');
                $('#btnGuardarFolio').prop('disabled', false);
            });

            // Inicializar todos los pickers con la configuración básica
            flatpickr(".flatpicker", {
                dateFormat: "d/m/Y",
                locale: 'es',
                allowInput: true
            });

            // GUARDAR
            $('#btnGuardarFolio').on('click', function () {

                let folioVal = $('#folio').val().trim();
                let fechaDocVal = $('#fechaDocumento').val();
                let valid = true;

                if (!folioVal) {
                    $('#msg_folio').text('El folio es requerido');
                    valid = false;
                } else {
                    $('#msg_folio').text('');
                }

                if (!fechaDocVal) {
                    $('#msg_fechaDocumento').text('La fecha es requerida');
                    valid = false;
                } else {
                    $('#msg_fechaDocumento').text('');
                }

                if (valid) {
                    $('#confirmModal').modal('show');
                }
            });

            // CONFIRMAR
            $('#btnConfirmarAceptar').on('click', function () {

                $('#confirmModal').modal('hide');

                let btn = $('#btnGuardarFolio');
                let originalHtml = btn.html();

                btn.prop('disabled', true).html('<i class="la la-spinner la-spin"></i> Guardando...');

                $.ajax({
                    url: '{{ route("impresiones.guardar") }}',
                    type: 'POST',
                    data: {
                        _token: '{{ csrf_token() }}',
                        idImpresion: {{ $idImpresion }},
                        folio: $('#folio').val(),
                        fechaDocumento: $('#fechaDocumento').val(),
                        fechaEntrega: $('#fechaEntrega').val()
                    },
                    success: function (response) {

                        if (response.success) {

                            let f = $('#folio').val();
                            let d = $('#fechaDocumento').val();
                            let e = $('#fechaEntrega').val();

                            if (f && d && e) {
                                estadoCompleto();
                            } else {
                                estadoGuardadoParcial();
                            }

                            $('#msg_guardado').html('<div class="alert alert-success py-1 mt-2">¡Guardado con éxito!</div>');

                            setTimeout(() => {
                                $('#msg_guardado').fadeOut(function () {
                                    $(this).empty().show();
                                });
                            }, 3000);

                        } else {
                            alert('Error: ' + response.message);
                        }

                        btn.prop('disabled', false).html(originalHtml);
                    },
                    error: function () {
                        alert('Error al procesar la solicitud');
                        btn.prop('disabled', false).html(originalHtml);
                    }
                });
            });

            // VER ARCHIVO
            $(document).on('click', '.btnVerArchivo', function () {
                const url = $(this).data('url');
                const tipo = $(this).data('tipo');
                
                $('#tituloArchivo').text('Visor de Documento - ' + tipo);
                
                if (tipo === 'PDF') {
                    $('#containerVisorXml').hide();
                    $('#containerVisorPdf').show();
                    $('#visorArchivo').attr('src', url);
                } else if (tipo === 'XML') {
                    $('#containerVisorPdf').hide();
                    $('#containerVisorXml').show();
                    $('#visorXmlContentModal').text('Cargando contenido...');
                    $('#visorXmlDownload').attr('href', url);
                    
                    fetch(url)
                        .then(response => {
                            if (!response.ok) throw new Error('Error al cargar');
                            return response.text();
                        })
                        .then(xmlText => {
                            $('#visorXmlContentModal').text(xmlText);
                        })
                        .catch(err => {
                            $('#visorXmlContentModal').text('Error: No se pudo cargar el archivo XML.');
                            console.error(err);
                        });
                }
                
                $('#modalArchivo').modal('show');
            });

            // Limpiar al cerrar modal
            $('#modalArchivo').on('hidden.bs.modal', function () {
                $('#visorArchivo').attr('src', '');
                $('#visorXmlContentModal').empty();
            });

        });
    </script>
@endpush