@extends('layout.template')
@section('title', 'SICCAP ICATEP | Cambiar Número Requisición')
@section('content')

    <div class="content-body">
        <div class="container-fluid">

            <div class="row page-titles mx-0 mt-4 shadow-sm" style="border-radius: 12px; border: none; background: white;">
                <div class="col-12 card-body">
                    <h3 class="mb-1">Asignación de Convenios a Aulas</h3>
                    <p class="text-muted mb-3">Introduzca la clave de aula para asignar un convenio.</p>

                    <div class="d-flex gap-2 align-items-end" style="max-width: 500px;">
                        <div class="flex-grow-1">
                            <label for="inputClave" class="form-label fw-semibold">Clave de Aula</label>
                            <div class="position-relative">
                                <input id="inputClave" type="text" class="form-control pe-4"
                                       placeholder="Ej. 0001PUE26REG"
                                       autocomplete="off">
                                <button id="btnLimpiar" type="button"
                                        style="display:none; position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none; padding:0; line-height:1; color:#aaa; font-size:1rem; cursor:pointer;"
                                        aria-label="Limpiar búsqueda">&times;</button>
                            </div>
                        </div>
                        <button id="btnBuscar" class="btn btn-primary" style="height: 38px;">
                            <i class="fa fa-search me-1"></i> Buscar
                        </button>
                    </div>
                    <div id="mensajeBusqueda" class="mt-2 small"></div>
                </div>
            </div>

            {{-- Tabla de resultados --}}
            <div class="row mt-4" id="seccionResultados" style="display:none !important;">
                <div class="col-12">
                    <div class="card shadow-sm" style="border-radius: 12px; border: none;">
                        <div class="card-header d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">Resultados de búsqueda</h5>
                            <span id="conteoResultados" class="badge bg-secondary"></span>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover table-sm align-middle mb-0" style="font-size: .85rem;">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Clave Registro</th>
                                            <th>Clave Curso</th>
                                            <th>Nombre del Curso</th>
                                            <th>Tipo</th>
                                            <th>Unidad</th>
                                            <th>Instructor</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tablaResultados"></tbody>
                                </table>
                            </div>

                            <div class="d-" id="div_convenio">

                                <div class="accordion accordion-primary" id="accordionExample">
                                    {{-- // INICIA NUEVO ACORDEON PARA CONVENIO --}}
                                    <div class="accordion-item">

                                        <h2 class="accordion-header accordion-header-primary">
                                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#panelConvenio" aria-expanded="false" aria-controls="panelConvenio">
                                                <i class="la la-user-friends text-white fs-3 float-start mx-1 p-0"></i>Convenio
                                            </button>
                                        </h2>

                                        <div id="panelConvenio" class="accordion-collapse collapse show">

                                            <div class="accordion-body">
                                                <div class="row">
                                                    <div class="col-lg-3 mb-3 col-md-6">
                                                        <label class="form-label">Numero de convenio</label>
                                                        <input type="text" name="numero_convenio" class="form-control"
                                                            value="{{ old('numero_convenio') }}" placeholder=""
                                                            id="numero_convenio"
                                                            onkeyup="this.value = this.value.toUpperCase()">
                                                        @error('numero_convenio')
                                                            <div class="text-danger">{{ $message }}</div>
                                                        @enderror
                                                        <div class="text-danger" id="message_numero_convenio"></div>
                                                    </div>
                                                    <div class="col-lg-3 mb-3 col-md-6">
                                                        <label class="form-label">Nombre de la Empresa</label>
                                                        <input type="text" name="nombre_empresa" class="form-control"
                                                            value="{{ old('nombre_empresa') }}" placeholder=""
                                                            id="nombre_empresa" onkeyup="this.value = this.value.toUpperCase()">
                                                        @error('nombre_empresa')
                                                            <div class="text-danger">{{ $message }}</div>
                                                        @enderror
                                                        <div class="text-danger" id="message_nombre_empresa"></div>
                                                    </div>
                                                    <div class="col-lg-3 mb-3 col-md-6">
                                                        <label class="form-label">Nombre del Representante</label>
                                                        <input type="text" name="nombre_representante" class="form-control"
                                                            value="{{ old('nombre_representante') }}" placeholder=""
                                                            id="nombre_representante"
                                                            onkeyup="this.value = this.value.toUpperCase()">
                                                        @error('nombre_representante')
                                                            <div class="text-danger">{{ $message }}</div>
                                                        @enderror
                                                        <div class="text-danger" id="message_nombre_representante"></div>
                                                    </div>
                                                    <div class="col-lg-3 mb-3 col-md-6">
                                                        <label class="form-label">Puesto del Representante</label>
                                                        <input type="text" name="puesto_representante" class="form-control"
                                                            value="{{ old('puesto_representante') }}" placeholder=""
                                                            id="puesto_representante"
                                                            onkeyup="this.value = this.value.toUpperCase()">
                                                        @error('puesto_representante')
                                                            <div class="text-danger">{{ $message }}</div>
                                                        @enderror
                                                        <div class="text-danger" id="message_puesto_representante"></div>
                                                    </div>
                                                </div>
                                                <!-- Boton de guardar convenio -->
                                                <div class="row">
                                                    <div class="col-12 d-flex justify-content-end">
                                                        <button class="btn btn-xs btn-outline-primary btn-editar">
                                                            <i class="la la-edit"></i> Guardar Convenio
                                                        </button>

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

                                        </div>

                                    </div>
                                    {{-- // FIN NUEVO ACORDEON PARA CONVENIO --}}

                                </div>

                                <!-- AQUI IVA EL CÓDIGO DEL CONVENIO ORIGINAL -->

                            </div>

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

        </div>
    </div>

    {{-- Modal edición --}}
    <div class="modal fade" id="modalEditar" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content" style="border-radius: 12px;">
                <div class="modal-header border-0">
                    <h5 class="modal-title fw-bold">Información del Convenio</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="modalAulaId">
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Aula</label>
                        <input type="text" class="form-control" id="modalAulaClave" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Número de Convenio</label>
                        <input type="text" class="form-control" id="modalNumeroConvenio" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Nombre de la Empresa</label>
                        <input type="text" class="form-control" id="modalNombreEmpresa" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Nombre del Representante</label>
                        <input type="text" class="form-control" id="modalNombreRepresentante" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Puesto del Representante</label>
                        <input type="text" class="form-control" id="modalPuestoRepresentante" readonly>
                    </div>
                </div>
                <div class="modal-footer border-0">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" id="btnGuardar">
                        <i class="fa fa-save me-1"></i> Guardar
                    </button>
                </div>
            </div>
        </div>
    </div>

    {{-- Modal confirmación --}}
    <div class="modal fade" id="modalConfirmar" tabindex="-1" aria-labelledby="modalConfirmaActualizarLabel" aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title"><i class="fa fa-exclamation-triangle text-warning me-2"></i>Confirmar Asignación de Convenio</h6>
                </div>
                <div class="modal-body pt-2">
                    <p class="mb-1">Se asignará el Convenio al aula:</p>
                    <p class="mb-1"><strong id="confirmarAula"></strong></p>
                </div>
                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="button" class="btn btn-primary" id="btnConfirmarSi">
                        <i class="fa fa-check me-1"></i> Sí, guardar
                    </button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modalMensajeActualizar" tabindex="-1" aria-labelledby="modalMensajeActualizarLabel" style="display: none;" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalMensajeActualizarTitle">Confirma Actualizar</h5>
                    <button type="button" class="btn-close" data-coreui-dismiss="modal" aria-label="Cerrar"></button>
                </div>
                <div class="modal-body text-center" id="modalMensajeActualizarBody">
                    <!-- Mensaje del sistema -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-coreui-dismiss="modal">Aceptar</button>
                </div>
            </div>
        </div>
    </div>
    

@endsection

@push('scripts')
<script>
    const urlBuscar  = "{{ route('asignacionConvenios.buscar') }}";
    const urlGuardar = "{{ route('asignacionConvenios.guardar') }}";
    const csrf       = "{{ csrf_token() }}";

    // ── Buscar ──────────────────────────────────────────────────────────────
    function buscar() {
        const clave = $('#inputClave').val().trim();
        if (!clave) {
            $('#mensajeBusqueda').html('<span class="text-danger">Ingrese una clave de aula.</span>');
            return;
        }

        $('#btnBuscar').prop('disabled', true).html('<i class="fa fa-spinner fa-spin me-1"></i> Buscando...');
        $('#mensajeBusqueda').html('');

        $.get(urlBuscar, { clave }, function (res) {
            if (!res.success) {
                $('#seccionResultados').hide();
                $('#mensajeBusqueda').html('<span class="text-danger"><i class="fa fa-exclamation-circle me-1"></i>' + res.message + '</span>');
                return;
            }

            const aulas = res.aulas;
            $('#conteoResultados').text(aulas.length + (aulas.length === 1 ? ' aula' : ' aulas'));

            let filas = '';
            aulas.forEach(a => {
                const req = a.aul_requisicion ? `<span class="badge bg-primary">${a.aul_requisicion}</span>`
                                              : `<span class="badge bg-secondary">Sin asignar</span>`;
                filas += `<tr>
                    <td><strong>${a.aul_clave_registro ?? '—'}</strong>
                        <input type="hidden" id="hiddenId" name="hiddenId" value="${a.aul_id}">
                        <input type="hidden" id="claveAula" name="claveAula" value="${a.aul_clave_registro ?? ''}">
                    </td>
                    <td>${a.aul_clave_curso ?? '—'}</td>
                    <td title="${a.aul_curso_nombre}">${a.aul_curso_nombre ?? '—'}</td>
                    <td>${a.tip_nombre ?? '—'}</td>
                    <td>${a.uni_nombre ?? '—'}</td>
                    <td>${a.aul_instructor_nombre ?? '—'}</td>
                </tr>`;

                $('#numero_convenio').val(a.aul_convenio_clave ?? '');
                $('#nombre_empresa').val(a.aul_convenio_empresa ?? '');
                $('#nombre_representante').val(a.aul_convenio_representante ?? '');
                $('#puesto_representante').val(a.aul_convenio_puesto ?? '');
            });

            // 

            $('#tablaResultados').html(filas);
            $('#seccionResultados').css('display', 'block');
        }).fail(function () {
            $('#mensajeBusqueda').html('<span class="text-danger">Error al conectar con el servidor.</span>');
        }).always(function () {
            $('#btnBuscar').prop('disabled', false).html('<i class="fa fa-search me-1"></i> Buscar');
        });
    }

    $('#btnBuscar').on('click', buscar);
    $('#inputClave').on('keypress', function (e) {
        if (e.which === 13) buscar();
    });

    // ── Mostrar/ocultar botón X ──────────────────────────────────────────────
    $('#inputClave').on('input', function () {
        $('#btnLimpiar').toggle($(this).val().length > 0);
    });

    $('#btnLimpiar').on('click', function () {
        $('#inputClave').val('').trigger('input').focus();
        $('#seccionResultados').hide();
        $('#tablaResultados').html('');
        $('#mensajeBusqueda').html('');
    });

    // ── Abrir modal editar ───────────────────────────────────────────────────
    $(document).on('click', '.btn-editar', function () {
        //
        $('#modalAulaId').val($('#hiddenId').val());
        $('#modalAulaClave').val($('#claveAula').val());
        $('#modalNumeroConvenio').val($('#numero_convenio').val());
        $('#modalNombreEmpresa').val($('#nombre_empresa').val());
        $('#modalNombreRepresentante').val($('#nombre_representante').val());
        $('#modalPuestoRepresentante').val($('#puesto_representante').val());


        $('#modalError').hide();
        $('#modalEditar').modal('show');
    });

    // ── Guardar ──────────────────────────────────────────────────────────────
    let _reqPendiente = null;
    let _reqOriginal  = null;

    $('#btnGuardar').on('click', function () {
        const req = $('#modalNumeroConvenio').val().trim();
        $('#confirmarAula').text($('#modalAulaClave').val());
        $('#confirmarReq').text(req);
        $('#modalConfirmar').modal('show');
    });

    $('#btnConfirmarSi').on('click', function () {
        $('#modalConfirmar').modal('hide');
        $('#btnGuardar').prop('disabled', true).html('<i class="fa fa-spinner fa-spin me-1"></i> Guardando...');
        guardarRequisicion(_reqPendiente);
    });

    function guardarRequisicion(req) {
        $.ajax({
            url: urlGuardar,
            type: 'POST',
            data: {
                _token:      csrf,
                aul_id:      $('#modalAulaId').val(),
                numero_convenio: $('#modalNumeroConvenio').val().trim(),
                nombre_empresa: $('#modalNombreEmpresa').val().trim(),
                nombre_representante: $('#modalNombreRepresentante').val().trim(),
                puesto_representante: $('#modalPuestoRepresentante').val().trim()
            },
            success: function (res) {
                if (res.success) {
                    $('#btnGuardar').prop('disabled', false).html('<i class="fa fa-save me-1"></i> Guardar');
                    $('#modalEditar').one('hidden.bs.modal', function () {
                        buscar(); // refresca tabla
                        if (typeof Swal !== 'undefined') {
                            Swal.fire({ icon: 'success', title: '¡Listo!', text: res.message, timer: 2000, showConfirmButton: false });
                        } else {
                            mostrarModal(res.message, 'Mensaje');
                        }
                    });
                    $('#modalEditar').modal('hide');
                } else {
                    $('#modalError').text(res.message).show();
                }
            },
            error: function () {
                $('#modalError').text('Error al guardar. Intente nuevamente.').show();
            },
            complete: function () {
                $('#btnGuardar').prop('disabled', false).html('<i class="fa fa-save me-1"></i> Guardar');
            }
        });
    }

    function mostrarModal(mensaje, titulo = 'Aviso') {
        document.getElementById('modalMensajeActualizarTitle').textContent = titulo;
        document.getElementById('modalMensajeActualizarBody').innerHTML = mensaje;
        //document.getElementById('modalMensajeActualizarBody').innerHTML = mensaje;
        // CoreUI
        let modal = new coreui.Modal(document.getElementById('modalMensajeActualizar'));
        modal.show();
    }
</script>
@endpush