@extends('layout.template')
@section('title', 'SICCAP ICATEP | Reporte Horas y Facturas')
@section('content')
    <div class="content-body">
        <div class="container-fluid">

            <div class="row page-titles mx-0">
                <div class="col-sm-6 p-md-0">
                    <div class="welcome-text">
                        <h4>Registro Comprobante de Pago</h4>
                    </div>
                </div>
                <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
                    <ol class="breadcrumb">
                        <a href="{{ route('indexPagosFacturas') }}" class="btn btn-rounded btn-dark back-fixed" aria-label="Regresar">
                            <span class="btn-icon-start text-dark"><i class="fa fa-arrow-left"></i></span>
                            Regresar
                        </a>
                    </ol>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <div class="card">
                        <div class="card-body">
                            <div class="accordion accordion-with-icon accordion-primary collapsed" id="accordion-six">
                                <div class="accordion-item">

                                    <h2 class="accordion-header accordion-header-primary" id="headingOne6">
                                        <button class="accordion-button {{ $estatusAula == 'A1' ? '' : 'collapsed' }}"
                                            type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne6">
                                            <span class="la la-book-open fs-3"></span>
                                            <span class="accordion-header-text">Datos Aula</span>
                                        </button>
                                    </h2>
                                    <div id="collapseOne6"
                                        class="accordion-collapse collapse {{ $estatusAula == 'A1' ? 'show' : '' }}"
                                        aria-labelledby="headingOne6" data-bs-parent="#accordion-six">
                                        <div class="accordion-body row">

                                            <div class="col-lg-2 mb-3 col-md-6">
                                                <label class="form-label">Numero de Aula</label>
                                                <input type="text" name="numero_aula" class="form-control"
                                                    value="{{ $aula->aul_clave_registro }}" placeholder="" id="numero_aula"
                                                    onkeyup="this.value = this.value.toUpperCase()" readonly>
                                                @error('numero_aula')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                                <div class="text-danger" id="message_cfp"></div>
                                            </div>
                                            <div class="col-lg-5 mb-3 col-md-6">
                                                <label class="form-label">Nombre del Curso</label>
                                                <input type="text" name="nombre_curso" class="form-control"
                                                    value="{{ $aula->aul_curso_nombre }}" placeholder="" id="nombre_curso"
                                                    onkeyup="this.value = this.value.toUpperCase()" readonly>
                                                @error('nombre_curso')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                                <div class="text-danger" id="message_cfp"></div>
                                            </div>
                                            <div class="col-lg-3 mb-3 col-md-6">
                                                <label class="form-label">Tipo de Curso</label>
                                                <input type="text" name="tipo_curso" class="form-control"
                                                    value="{{ $tipoCurso }}" placeholder="" id="tipo_de_curso"
                                                    onkeyup="this.value = this.value.toUpperCase()" readonly>
                                                @error('tipo_curso')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                                <div class="text-danger" id="message_cfp"></div>
                                                <input type="hidden" id="tipo_curso" value="{{ $aula->aul_curso_tipo }}">
                                            </div>
                                            <div class="col-lg-2 mb-3 col-md-6">
                                                <label class="form-label">Costo por Capacitando</label>
                                                <input type="text" name="costo_alumno" class="form-control"
                                                    value="{{ $aula->aul_costo_hora_capacitando }}" placeholder=""
                                                    id="costo_alumno" onkeyup="this.value = this.value.toUpperCase()"
                                                    readonly>
                                                @error('costo_alumno')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                                <div class="text-danger" id="message_cfp"></div>
                                            </div>
                                            <div class="col-lg-4 mb-3 col-md-6">
                                                <label class="form-label">Campo de Formaciòn
                                                    Profesional</label>
                                                <input type="text" name="cfp" class="form-control"
                                                    value="{{ $aula->aul_cfp_nombre }}" placeholder="" id="cfp"
                                                    onkeyup="this.value = this.value.toUpperCase()" readonly>
                                                @error('cfp')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                                <div class="text-danger" id="message_cfp"></div>
                                            </div>
                                            <div class="col-lg-4 mb-3 col-md-6">
                                                <label class="form-label">Especialidad</label>
                                                <input type="text" name="especialidad" class="form-control"
                                                    value="{{ $aula->aul_especialidad_nombre }}" placeholder=""
                                                    id="especialidad" onkeyup="this.value = this.value.toUpperCase()"
                                                    readonly>
                                                @error('especialidad')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                                <div class="text-danger" id="message_cfp"></div>
                                            </div>
                                            <div class="col-lg-3 mb-3 col-md-6">
                                                <label class="form-label">Instructor</label>
                                                <input type="text" name="instructor" class="form-control"
                                                    value="{{ $aula->aul_instructor_nombre }}" placeholder=""
                                                    id="nombre_instructor" onkeyup="this.value = this.value.toUpperCase()"
                                                    readonly>
                                                <input type="hidden" name="instructor_id" id="instructor_id">
                                                @error('instructor')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                                <div class="text-danger" id="message_cfp"></div>
                                            </div>
                                            <div class="col-lg-1 mb-3 col-md-6">
                                                <label class="form-label">Costo PSC</label>
                                                <input type="text" name="costo_psc" class="form-control"
                                                    value="{{ $aula->aul_costo_hora_psc }}" placeholder=""
                                                    id="costo_psc" onkeyup="this.value = this.value.toUpperCase()"
                                                    readonly>
                                                @error('nombre_curso')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                                <div class="text-danger" id="message_cfp"></div>
                                            </div>
                                            <div class="col-lg-2 mb-3 col-md-6 d-none" id="div_modelo_negocios">
                                                <label class="form-label">M&oacute;delo de
                                                    Negocios</label>
                                                <input type="text" class="form-control" id="modelo_negocios"
                                                    name="modelo_negocios" value="{{ $claveModeloNegocio }}" readonly>
                                            </div>
                                            <div class="col-lg-2 mb-3 col-md-6">
                                                <label class="form-label">N&uacute;mero de
                                                    Capacitandos</label>
                                                <input type="number" name="minimo_capacitandos" class="form-control"
                                                    value="{{ $aula->aul_capacitandos }}" placeholder=""
                                                    id="minimo_capacitandos" min="1" max="200" readonly>
                                            </div>
                                            <div class="col-lg-1 mb-3 col-md-6">
                                                <label class="form-label">Duraci&oacute;n </label>
                                                <input type="text" name="duracion" class="form-control"
                                                    value="{{ $aula->aul_horas_totales }}" placeholder="" id="duracion"
                                                    onkeyup="this.value = this.value.toUpperCase()" readonly>
                                                @error('duracion')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                                <div class="text-danger" id="message_cfp"></div>
                                            </div>
                                            <div class="col-lg-2 mb-3 col-md-6">
                                                <label class="form-label">Tipo de Formaci&oacute;n</label>
                                                <input type="text" name="" class="form-control"
                                                    value="{{ $tipoFormacion }}" placeholder="" id="tipo_formacion"
                                                    onkeyup="this.value = this.value.toUpperCase()" readonly>
                                                <input type="hidden" name="curso_id" id="curso_id">
                                                @error('clave_curso')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                                <div class="text-danger" id="message_cfp"></div>
                                            </div>
                                            <div class="col-lg-2 mb-3 col-md-6">
                                                <label class="form-label">Modalidad </label>
                                                <input type="text" class="form-control" name="modalidad"
                                                    value="{{ $aula->aul_modalidad }}" id="modalidad" readonly>
                                                @error('tipo_curso')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="col-lg-3 mb-3 col-md-6" id="div_ubicacion">
                                                <label class="form-label">Ubicaci&oacute;n </label>
                                                <input type="text" name="" class="form-control"
                                                    value="{{ $aula->aul_ubicacion }}" placeholder="" id=""
                                                    onkeyup="this.value = this.value.toLowerCase()" readonly>

                                                @error('tipo_curso')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                            </div>
                                            <div class="col-lg-2 mb-3 col-md-6 d-none" id="div_enlace">
                                                <label class="form-label">Enlace</label>
                                                <input type="text" name="enlace" class="form-control"
                                                    value="{{ $aula->aul_enlace }}" placeholder="" id="enlace"
                                                    onkeyup="this.value = this.value.toLowerCase()" readonly>
                                                @error('enlace')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                                <div class="text-danger" id="message_enlace"></div>
                                            </div>
                                            <div class="col-lg-8 mb-3 col-md-6 d-none" id="div_domicilio">
                                                <label class="form-label">Domicilio</label>
                                                <input type="text" name="enlace" class="form-control"
                                                    value="{{ $domicilio }}" placeholder="" id="enlace"
                                                    onkeyup="this.value = this.value.toLowerCase()" readonly>
                                                @error('enlace')
                                                    <div class="text-danger">{{ $message }}</div>
                                                @enderror
                                                <div class="text-danger" id="message_enlace"></div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="accordion accordion-with-icon accordion-primary" id="accordion-six">
                                <div class="accordion-item">

                                    <h2 class="accordion-header accordion-header-primary" id="headingOne6">
                                        <button class="accordion-button " type="button" data-bs-toggle="collapse"
                                            data-bs-target="#datos_factura">
                                            <span class="las la-file-invoice-dollar fs-3"></span>
                                            <span class="accordion-header-text">Datos Factura</span>
                                        </button>
                                    </h2>
                                    <div id="datos_factura" class="accordion-collapse collapse show"
                                        aria-labelledby="headingOne6" data-bs-parent="#accordion-six">
                                        <div class="accordion-body row">
                                            <div class="col-lg-4 mb-3 col-md-6">
                                                <label class="form-label">Folio </label>
                                                <input type="text" name="numero_aula" class="form-control texto-folio"
                                                    value="{{ $folio_factura }}" placeholder="" id="numero_aula"
                                                    readonly>
                                            </div>
                                            <div class="col-lg-2 mb-3 col-md-6">
                                                <label class="form-label">Subtotal</label>
                                                <input type="text" name="nombre_curso" class="form-control"
                                                    value="$ {{ number_format($subtotal, 2, '.', ',') }}" placeholder=""
                                                    id="nombre_curso" readonly>
                                            </div>
                                            <div class="col-lg-2 mb-3 col-md-6">
                                                <label class="form-label">IVA</label>
                                                <input type="text" name="tipo_curso" class="form-control"
                                                    value="{{ number_format($iva, 2, '.', ',') }}" placeholder=""
                                                    id="tipo_de_curso" readonly>
                                            </div>
                                            <div class="col-lg-2 mb-3 col-md-6">
                                                <label class="form-label">ISR</label>
                                                <input type="text" name="tipo_curso" class="form-control"
                                                    value="{{ number_format($isr, 2, '.', ',') }}" placeholder=""
                                                    id="tipo_de_curso"readonly>
                                            </div>
                                            <div class="col-lg-2 mb-3 col-md-6">
                                                <label class="form-label">TOTAL</label>
                                                <input type="text" name="tipo_curso" class="form-control"
                                                    value="$ {{ number_format($total, 2, '.', ',') }}" placeholder=""
                                                    id="tipo_de_curso"
                                                    style="font-weight: bold; font-variant-numeric: tabular-nums;'"
                                                    readonly>
                                            </div>
                                            <div class="col-lg-3 mb-3 col-md-6">
                                                <label class="form-label">Instructor</label>
                                                <input type="text" name="instructor"
                                                    class="form-control texto-factura"
                                                    value="{{ $aula->aul_instructor_nombre }}" placeholder=""
                                                    id="nombre_instructor" onkeyup="this.value = this.value.toUpperCase()"
                                                    readonly>
                                                <input type="hidden" name="instructor_id" id="instructor_id">
                                            </div>
                                            <div class="col-lg-2 mb-3 col-md-6">
                                                <label class="form-label">RFC </label>
                                                <input type="text" name="" class="form-control texto-factura"
                                                    value="{{ $rfc_psc }}" readonly>
                                            </div>
                                            <div class="col-lg-1 mb-3 col-md-6">
                                                <label class="form-label">Costo PSC</label>
                                                <input type="text" name="costo_psc" class="form-control texto-factura"
                                                    value="{{ $aula->aul_costo_hora_psc }}" placeholder=""
                                                    id="costo_psc" onkeyup="this.value = this.value.toUpperCase()"
                                                    readonly>
                                            </div>
                                            <div class="col-lg-2 mb-3 col-md-6 d-none" id="div_modelo_negocios">
                                                <label class="form-label">M&oacute;delo de
                                                    Negocios</label>
                                                <input type="text" class="form-control texto-factura"
                                                    id="modelo_negocios" name="modelo_negocios"
                                                    value="{{ $claveModeloNegocio }}" readonly>
                                            </div>
                                            <div class="col-lg-2 mb-3 col-md-6">
                                                <label class="form-label">N&uacute;mero de
                                                    Capacitandos</label>
                                                <input type="number" name="minimo_capacitandos"
                                                    class="form-control texto-factura"
                                                    value="{{ $aula->aul_capacitandos }}" placeholder=""
                                                    id="minimo_capacitandos" min="1" max="200" readonly>
                                            </div>
                                            <div class="col-lg-1 mb-3 col-md-6">
                                                <label class="form-label">Duraci&oacute;n </label>
                                                <input type="text" name="duracion" class="form-control texto-factura"
                                                    value="{{ $aula->aul_horas_totales }}" placeholder="" id="duracion"
                                                    onkeyup="this.value = this.value.toUpperCase()" readonly>
                                            </div>
                                            <div class="row justify-content-center">
                                                <div class="col-lg-2 mb-3 col-md-6 text-center">
                                                    <label class="form-label">Fecha de Pago </label>
                                                    <input type="text" name="duracion"
                                                        class="form-control texto-factura"
                                                        value="{{ $fecha_pago}}" placeholder=""
                                                        id="" onkeyup="this.value = this.value.toUpperCase()"
                                                        readonly>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            @if ($estatus_pago != 1)
                                <form action="{{ route('guardarComprobantePago') }}" class="mt-4 form-oficio"
                                    method="POST" id="form-oficio" enctype="multipart/form-data">
                                    @csrf
                                    <div class="row">
                                        <div class="col-lg-6 col-md-6 row align-items-end gap-3">
                                            <div>
                                                <label class="form-label">Seleccionar Archivo</label>
                                                <input class="form-control" type="file" name="pdf_pago"
                                                    id="pdfPago" accept=".pdf">
                                                <div class="text-danger" id="message_pdf_pago"></div>
                                            </div>
                                        </div>
                                        <div class="col-lg-4 col-md-6 align-items-end gap-3">
                                            <label class="form-label">Fecha de Pago</label>
                                            <input type="text" name="fecha_pago" value="" class="form-control"
                                                id="fecha_pago" placeholder="Seleccione fecha" required>
                                            <div class="text-danger" id="message_fecha_pago"></div>
                                        </div>
                                        <div class="col-lg-2 col-md-6 row align-items-end gap-3">
                                            <button class="btn btn-success" type="submit">
                                                Guardar
                                            </button>
                                            <input type="hidden" value="{{ $id_factura }}" name="id_factura">
                                            <input type="hidden" value="{{ $folio_factura }}" name="folio_factura">
                                            <input type="hidden" value="{{ $id }}" name="aul_id">
                                        </div>
                                    </div>
                                </form>
                            @endif
                            @if ($estatus_pago == 1)
                                <div class="alert alert-primary alert-dismissible alert-alt fade show">
                                    <strong>Advertencia!</strong> Esta factura ya cuenta con un comprobante de pago
                                    registrado.
                                </div>
                            @endif
                            <div class="accordion-item mt-2 d-none" id="acordeonPago">
                                <h2 class="accordion-header accordion-header-primary" id="headingOne7">
                                    <button class="accordion-button collapsed btn light btn-primary" type="button"
                                        data-bs-toggle="collapse" data-bs-target="#verificacion">
                                        <span class="accordion-header-text">Previsualizar
                                            Comprobante de Pago</span>
                                    </button>
                                </h2>
                                <div id="verificacion" class="accordion-collapse collapse show"
                                    aria-labelledby="headingOne7" data-bs-parent="#accordion-six">
                                    <div class="accordion-body mb-0">
                                        <!-- Vista previa PDF -->
                                        <iframe id="previewPago" class="mt-3"
                                            style="width:100%; height:800px; border:1px solid #ddd;"></iframe>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
    <style>
        .btn-ver-xml {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            color: #2563eb;
            font-weight: 600;
            padding: 6px 10px;
            border-radius: 8px;
            transition: all 0.2s ease;
        }

        .btn-ver-xml:hover {
            background: linear-gradient(90deg, #e0f2fe, #f0f9ff);
            box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
        }

        .btn-ver-xml:hover svg {
            transform: rotate(-5deg) scale(1.1);
        }



        #xml-tree ul {
            list-style: none;
            margin-left: 20px;
            padding-left: 15px;
            border-left: 1px dashed #ccc;
            font-family: monospace;
        }

        #xml-tree li {
            margin: 4px 0;
        }

        #xml-tree .nodo {
            cursor: pointer;
            font-weight: bold;
            color: #2563eb;
        }

        #xml-tree li.cerrado>ul {
            display: none;
        }

        .monto-destacado {
            font-size: 25px;
            font-weight: 700;
            color: #15803d;
            /* verde elegante */
            background-color: #f0fdf4;
            /* verde muy claro */
            border: 2px solid #22c55e;
            border-radius: 10px;
            font-variant-numeric: tabular-nums;
            letter-spacing: 1px;
            box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
            text-align: center;

        }

        .monto-secundario {
            color: #1d4ed8;
            background-color: #eff6ff;
            border: 2px solid #3b82f6;
            font-size: 22px;
            font-weight: 700;
            /*border-radius: 10px;*/
            font-variant-numeric: tabular-nums;
            letter-spacing: 1px;
            text-align: center;
        }

        .texto-factura {
            font-weight: bold;
            color: #1f2937;
            text-align: center;
        }

        .texto-folio {
            font-weight: bold;
            color: #1f2937;
            text-align: center;
            font-variant-numeric: tabular-nums;
            letter-spacing: 1px;
        }

        .card-body,
        .form-control {
            text-align: center;
            font-variant-numeric: tabular-nums;
            letter-spacing: 0.5px;
        }

        .card-body,
        .form-label {
            text-align: center;
        }
    </style>
@endsection
@push('scripts')
    <script>
        function mostrarVistaPreviaPDF(input, iframeSelector) {
            const file = input.files[0];
            if (!file) return;

            const fileURL = URL.createObjectURL(file);
            $(iframeSelector).attr('src', fileURL);
        }

        $('#pdfPago').on('change', function() {
            mostrarVistaPreviaPDF(this, '#previewPago');
            $('#acordeonPago').removeClass('d-none');
        });

        $(document).ready(function() {
            flatpickr("#fecha_pago", {
                dateFormat: "d/m/Y",
                locale: 'es',
                /*minDate: new Date().setDate(1), // primer día del mes
                maxDate: new Date(new Date().getFullYear(), new Date().getMonth() + 1,
                0), // último día del mes t*/
                onReady: function(selectedDates, dateStr, instance) {
                    instance.input.style.color = "black";
                    instance.input.style.backgroundColor = "white"; // opcional
                }
            });
        });


        $(document).ready(function() {
            $('.form-oficio').on('submit', function(e) {
                let valido = true;
                // Limpiar mensajes
                $('#message_fecha_pago').text('');
                $('#message_pdf_pago').text('');

                // =========================
                // 🔹 Validar Fecha
                // =========================
                let fecha = $('#fecha_pago').val().trim();

                if (fecha === '') {
                    $('#message_fecha_pago').text('La fecha de pago es obligatoria.');
                    valido = false;
                }
                /*else {
                                   let fechaObj = new Date(fecha);
                                   if (isNaN(fechaObj.getTime())) {
                                       $('#message_fecha_pago').text('La fecha no es válida.');
                                       valido = false;
                                   }
                               }*/

                // =========================
                // 🔹 Validar Archivo PDF
                // =========================
                let fileInput = $('#pdfPago')[0];

                if (fileInput.files.length === 0) {
                    $('#message_pdf_pago').text('Seleccione un archivo PDF.');
                    valido = false;
                } else {
                    let file = fileInput.files[0];
                    let extension = file.name.split('.').pop().toLowerCase();

                    if (extension !== 'pdf') {
                        $('#message_pdf_pago').text('El archivo debe ser formato PDF.');
                        valido = false;
                    }
                }
                // Si no es válido, detener envío
                if (!valido) {
                    e.preventDefault();
                }
            });
        });
    </script>
@endpush