@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">Cambio por error en requisición</h3>
                    <p class="text-muted mb-3">Introduzca la clave de aula para encontrar la requisición asociada y poder corregirla.</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>ID</th>
                                            <th>Clave Registro</th>
                                            <th>Clave Curso</th>
                                            <th>Nombre del Curso</th>
                                            <th>Tipo</th>
                                            <th>Unidad</th>
                                            <th>Instructor</th>
                                            <th class="text-center">Requisición Actual</th>
                                            <th class="text-center">Acción</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tablaResultados"></tbody>
                                </table>
                            </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">Editar Requisición</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">Curso</label>
                        <input type="text" class="form-control" id="modalAulaNombre" readonly>
                    </div>
                    <div class="mb-3">
                        <label class="form-label fw-semibold">Nueva Requisición <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="modalRequisicion"
                               placeholder="Solo letras y números, sin espacios" maxlength="100">
                        <div id="modalError" class="text-danger small mt-1" style="display:none;"></div>
                    </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 cambio</h6>
                </div>
                <div class="modal-body pt-2">
                    <p class="mb-1 small">Se actualizará la requisición del aula:</p>
                    <p class="mb-1"><strong id="confirmarAula"></strong></p>
                    <p class="mb-0 small">Nuevo valor: <strong id="confirmarReq" class="text-primary"></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('cambiarRequisicion.buscar') }}";
    const urlGuardar = "{{ route('cambiarRequisicion.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>${a.aul_id}</td>
                    <td><strong>${a.aul_clave_registro ?? '—'}</strong></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>
                    <td class="text-center">${req}</td>
                    <td class="text-center">
                        <button class="btn btn-xs btn-outline-primary btn-editar"
                                data-id="${a.aul_id}"
                                data-clave="${a.aul_clave_registro ?? ''}"
                                data-nombre="${a.aul_curso_nombre ?? ''}"
                                data-req="${a.aul_requisicion ?? ''}">
                            <i class="la la-edit"></i> Editar
                        </button>
                    </td>
                </tr>`;
            });

            $('#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 () {
        _reqOriginal = String($(this).data('req') ?? '').trim();
        $('#modalAulaId').val($(this).data('id'));
        $('#modalAulaClave').val($(this).data('clave'));
        $('#modalAulaNombre').val($(this).data('nombre'));
        $('#modalRequisicion').val($(this).data('req'));
        $('#modalError').hide();
        $('#modalEditar').modal('show');
    });

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

    $('#btnGuardar').on('click', function () {
        const req = $('#modalRequisicion').val().trim();
        if (!req) {
            $('#modalError').text('El número de requisición es obligatorio.').show();
            return;
        }
        if (!/^[a-zA-Z0-9]+$/.test(req)) {
            $('#modalError').text('El número de requisición solo puede contener letras y números, sin espacios ni caracteres especiales.').show();
            return;
        }
        if (req === _reqOriginal) {
            $('#modalError').text('El valor ingresado es el mismo que ya está guardado. No se realizó ningún cambio.').show();
            return;
        }

        _reqPendiente = req;
        $('#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(),
                requisicion: req
            },
            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