@extends('layout.template')
@section('title', 'SICCAP ICATEP')
@section('content')
    <div class="content-body">
        <!-- row -->
        <div class="container-fluid">
            <div class="row page-titles mx-0">
                <div class="col-sm-6 p-md-0">
                    <div class="welcome-text">
                        <h4 class="card-title">Oficio Pago <strong class="text-primary">
                            </strong></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('consultaOficioPago') }}" 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">
                    <div class="card">
                        <div class="card-body">
                            <div class="basic-form">
                                @csrf
                                <div class="row text-center " id="formulario_aula">
                                    <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 Oficio</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">
                                                    @foreach ($oficio as $ofi)
                                                        <div class="col-lg-2 mb-3 col-md-6">
                                                            <label class="form-label">Monto Total </label>
                                                            <input type="text" name=""
                                                                class="form-control text-center"
                                                                value="$ {{ number_format($total_importe, 2, '.', ',') }}"
                                                                placeholder="" id="" readonly>
                                                        </div>
                                                        <div class="col-lg-2 mb-3 col-md-6">
                                                            <label class="form-label">Subtotal </label>
                                                            <input type="text" name=""
                                                                class="form-control text-center"
                                                                value="$ {{ number_format($ofi->subtotal, 2, '.', ',') }}"
                                                                placeholder="" id="" readonly>
                                                        </div>
                                                        <div class="col-lg-2 mb-3 col-md-6">
                                                            <label class="form-label">IVA </label>
                                                            <input type="text" name=""
                                                                class="form-control text-center"
                                                                value="$ {{ number_format($ofi->iva, 2, '.', ',') }}"
                                                                placeholder="" id="" readonly>
                                                        </div>
                                                    @endforeach
                                                    <div class="table-responsive">
                                                        <table id="responsiveTable"
                                                            class="table table-striped responsive w-100 dataTable no-footer dtr-inline collapsed facturas-oficio">
                                                            <thead>
                                                                <tr>
                                                                    <th></th>
                                                                    <th>Clave Registro</th>
                                                                    <th>Folio</th>
                                                                    <th>PSC</th>
                                                                    <th>Curso</th>
                                                                    <th>Horas</th>
                                                                    <th>Total</th>
                                                                    <th>Subtotal</th>
                                                                    <th>IVA</th>
                                                                </tr>
                                                            </thead>
                                                            <tbody>
                                                            </tbody>
                                                        </table>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="accordion-item mt-2" id="acordeonSat">
                                        <h2 class="accordion-header accordion-header-primary" id="headingOne7">
                                            <button class="accordion-button btn light btn-primary" type="button"
                                                data-bs-toggle="collapse" data-bs-target="#factura">
                                                <span class="accordion-header-text">Oficio de Pago </span>
                                            </button>
                                        </h2>
                                        <div id="factura" class="accordion-collapse collapse show"
                                            aria-labelledby="headingOne7" data-bs-parent="#accordion-six">
                                            <div class="accordion-body mb-0">
                                                <!-- Vista previa PDF -->
                                                <iframe
                                                    src="{{ asset('storage/oficios pagos/' . strtolower($unidad_nombre) . '/' . $nombre_oficio . '.pdf') }}"
                                                    style="width:100%; height:100vh; border:none;">
                                                </iframe>
                                            </div>
                                        </div>
                                    </div>
                                    @puede('Oficios de pago consulta', 'autorizar_ofico')
                                        <div class="row text-center mt-4">
                                            <div class="col-lg-6 mb-3 col-md-6 justify-content-center " id="divRechazarAula">
                                                <button type="button" class="btn btn-danger w-100 mt-3" data-bs-toggle="modal"
                                                    data-bs-target="#rechazar">Rechazar</button>
                                            </div>
                                            <div class="col-lg-6 mb-3 col-md-6 justify-content-center " id="autorizarAula">
                                                <button type="button" class="btn btn-success w-100 mt-3" data-bs-toggle="modal"
                                                    data-bs-target="#autorizar">Autorizar </button>
                                            </div>
                                        </div>
                                    @endpuede
                                    <input type="hidden" id="id_oficio" value="{{ $id_oficio }}">

                                </div>
                                {{-- Errores generales --}}
                                <!--<div id="alert-error" class="alert alert-warning">-</div>-->
                                <div class="alert alert-warning alert-dismissible fade show text-primary d-none"
                                    id="alert-error">
                                    <svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24"
                                        stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round"
                                        stroke-linejoin="round">
                                        <path
                                            d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z">
                                        </path>
                                        <line x1="12" y1="9" x2="12" y2="13">
                                        </line>
                                        <line x1="12" y1="17" x2="12.01" y2="17">
                                        </line>
                                    </svg>
                                    <strong>Advertencia!</strong> Se encontraron diferencias en el CFDI.
                                    <button type="button" class="btn-close" data-bs-dismiss="alert"
                                        aria-label="btn-close">
                                    </button>
                                </div>
                                <!---------------------------------- MODAL AUTORIZAR AULA ---------------------------->
                                <div class="modal fade" id="autorizar" aria-modal="true" role="dialog">
                                    <div class="modal-dialog modal-dialog-centered" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header alert-success">
                                                <h5 class="modal-title">Autorizar Oficio</h5>
                                                <h5 class="modal-title text-success">
                                                    &nbsp;</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal">
                                                </button>
                                            </div>
                                            <div class="modal-body text-center align-items-center">
                                                <span>Unidad: <strong> {{ strtoupper($unidad_nombre) }}</strong></span>
                                                MES:</span>
                                                <strong> {{ strtoupper($mes) }}</strong>
                                            </div>
                                            <form action="{{ route('autorizarOficio') }}" method="post">
                                                @csrf
                                                <div class="modal-footer d-flex">
                                                    <button type="button" class="btn btn-danger light"
                                                        data-bs-dismiss="modal">Cerrar</button>
                                                    <button type="submit" class="btn btn-primary">Confirmar</button>
                                                    <input type="hidden" name="id_oficio" value="{{ $id_oficio }}">
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                                <!---------------------------------- MODAL RECHAZAR OFICIO ---------------------------->
                                <div class="modal fade" id="rechazar" aria-modal="true" role="dialog">
                                    <div class="modal-dialog modal-dialog-centered" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header alert-danger">
                                                <h5 class="modal-title text-danger">Rechazar Oficio</h5>
                                                <h5 class="modal-title text-danger">
                                                    &nbsp;</h5>
                                                <button type="button" class="btn-close" data-bs-dismiss="modal">
                                                </button>
                                            </div>
                                            <form action="{{ route('rechazarOficio') }}" method="post">
                                                @csrf
                                                <div class="modal-body text-center">
                                                    <span>Unidad: <strong> {{ strtoupper($unidad_nombre) }}</strong></span>
                                                    MES:</span>
                                                    <strong> {{ strtoupper($mes) }}</strong>
                                                    <textarea class="form-control mt-3" rows="2" name="observacion" id="comment"
                                                        onkeyup="this.value = this.value.toUpperCase()" placeholder="Escriba sus observaciones*" required></textarea>
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-primary light"
                                                        data-bs-dismiss="modal">Cerrar</button>
                                                    <button type="submit" class="btn btn-danger">Confirmar</button>
                                                    <input type="hidden" name="id_oficio" value="{{ $id_oficio }}">
                                                </div>
                                            </form>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div><!-- end car body-->
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
    <div class="row">
        @if (session('success'))
            <div class="alert alert-primary alert-dismissible fade show" id="alert-container">
                <svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor"
                    stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="9 11 12 14 22 4"></polyline>
                    <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"></path>
                </svg>
                <strong id="alert-confirmacion"> {{ session('success') }}</strong>
            </div>
        @endif
        @if (session('error'))
            <div class="alert alert-danger alert-dismissible fade show" id="alert-container-error">
                <svg class="alert-icon" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor"
                    stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2">
                    </polygon>
                    <line x1="15" y1="9" x2="9" y2="15"></line>
                    <line x1="9" y1="9" x2="15" y2="15"></line>
                </svg>
                <strong id="alert-confirmacion-error"> {{ session('error') }}</strong>
            </div>
        @endif


    </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;
        }

        .no-wrap {
            white-space: nowrap;
            text-align: justify;
        }
    </style>

@endsection

@push('scripts')
    <script>
        function formatoMoneda(valor) {
            return '$ ' + new Intl.NumberFormat('es-MX', {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
            }).format(valor);
        }

        $(document).ready(function() {

            // Ocultar mensajes después de 4 segundos
            setTimeout(function() {
                $(".msg-error").fadeOut("slow");
            }, 4000);

            // ===============================
            // 🔹 ACORDEONES CON LOCALSTORAGE
            // ===============================
            $(".accordion-collapse").each(function() {
                let $accordion = $(this);
                let id = $accordion.attr("id");
                if (!id) return;

                if (localStorage.getItem("accordion_" + id) === "abierto") {
                    $accordion.addClass("show");
                    $accordion.prev(".accordion-header")
                        .find(".accordion-button")
                        .removeClass("collapsed");
                }

                $accordion.on("shown.bs.collapse", function() {
                    localStorage.setItem("accordion_" + id, "abierto");
                });

                $accordion.on("hidden.bs.collapse", function() {
                    localStorage.setItem("accordion_" + id, "cerrado");
                });
            });

            // ===============================
            //  DATATABLE
            // ===============================
            if ($.fn.DataTable.isDataTable('#responsiveTable')) {
                $('#responsiveTable').DataTable().destroy();
            }

            let id_oficio = $('#id_oficio').val();


            $('.facturas-oficio').DataTable({
                responsive: true,
                paging: true,
                ordering: true,
                searching: true,
                autoWidth: false,
                language: {
                    url: '//cdn.datatables.net/plug-ins/1.13.7/i18n/es-ES.json'
                },
                ajax: {
                    url: "{{ route('showFacturasOficio') }}",
                    data: function(d) {
                        d.id_oficio = id_oficio;
                    }
                },
                columns: [{
                        data: null,
                        render: function(data, type, row, meta) {
                            return meta.row + meta.settings._iDisplayStart + 1;
                        }
                    },
                    {
                        data: "aul_clave_registro",
                        className: "no-wrap"
                    },
                    {
                        data: "fac_folio",
                        className: "no-wrap text-dark"
                    },
                    {
                        data: "aul_instructor_nombre",
                        className: "no-wrap"
                    },
                    {
                        data: "aul_curso_nombre",
                          className: "no-wrap text-justify"
                    },
                    {
                        data: "fac_total_horas"
                    },
                    {
                        data: "fac_importe_total",
                        className: "text-center",
                        render: function(data, type, row) {
                            // data viene como número desde PHP
                            return formatoMoneda(data);
                        }
                    },
                    {
                        data: "fac_subtotal",
                        className: "text-center",
                        render: function(data, type, row) {
                            // data viene como número desde PHP
                            return formatoMoneda(data);
                        }
                    },
                    {
                        data: "fac_iva",
                        className: "text-center",
                        render: function(data, type, row) {
                            // data viene como número desde PHP
                            return formatoMoneda(data);
                        }
                    },

                ],
                columnDefs: [{
                    targets: [0, 1], // clave y folio
                    width: "1%",
                    className: "no-wrap"
                }],

                initComplete: function() {
                    this.api().columns.adjust();
                }
            });


            // ===============================
            // 🔹 VISTA PREVIA PDF
            // ===============================
            function mostrarVistaPreviaPDF(input, iframeSelector) {
                const file = input.files[0];
                if (!file) return;

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

            $('#pdfSat').on('change', function() {
                mostrarVistaPreviaPDF(this, '#previewSat');
                $('#acordeonSat').removeClass('d-none');
            });

            $('#pdfFactura').on('change', function() {
                mostrarVistaPreviaPDF(this, '#previewFactura');
                $('#acordeonFactura').removeClass('d-none');
            });

        });
    </script>
@endpush