@extends('../padre.padre')

@section('contenido') 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<div class="d-flex justify-content-center my-3">
  <h1 class="fw-bold text-primary"><i class="fas fa-clipboard-check me-2"></i>Acta de Recepción</h1>
</div>

<form action="{{ url('/actarecepcion') }}" method="GET">
    <div class="row align-items-end g-3 col-md-12" style="margin-bottom: 20px;">
      
      <div class="col-md-2">
        <label for="numeroF" class="form-label fw-bold">Factura De Compra</label>
        <input type="text" name="numeroF" id="numeroF" value="{{ $numeroF ?? '' }}" class="form-control" placeholder="Número factura">
      </div>
      
      <div class="col-md-2">
        <label for="numeroN" class="form-label fw-bold">Nit Proveedor</label>
        <input type="text" name="numeroN" id="numeroN" value="{{ $numeroN ?? '' }}" class="form-control" placeholder="NIT o Cédula">
      </div>

      <div class="col-md-2">
        <label for="fi" class="form-label fw-bold">Desde</label>
        <input type="date" name="fi" id="fi" value="{{ $fi ?? '' }}" class="form-control">
      </div>

      <div class="col-md-2">
        <label for="ff" class="form-label fw-bold">Hasta</label>
        <input type="date" name="ff" id="ff" value="{{ $ff ?? '' }}" class="form-control">
      </div>

      <div class="col-md-2">
        <label for="producto" class="form-label fw-bold">Cód. Producto / Nombre</label>
        <input type="text" name="producto" id="producto" value="{{ $producto ?? '' }}" class="form-control" placeholder="Código o nombre">
      </div>

      <div class="col-md-2">
        <label class="form-label fw-bold">Bodega</label>
        @include('../menu.bodegas')
      </div>
    </div>

    <div class="row col-md-12 mb-3">
        <div class="col-md-12 d-flex gap-2 align-items-center flex-wrap">
          <button type="submit" class="btn btn-warning"><i class="fas fa-search me-1"></i> Consultar</button>
          <button type="submit" name="exportar" class="btn btn-success" value="1"><i class="fas fa-file-excel me-1"></i> Exportar Excel</button>
          <button type="submit" name="pdf" class="btn btn-danger" value="1" formtarget="_blank"><i class="fas fa-file-pdf me-1"></i> Generar PDF</button>
          @include('menu.botonRegresar')

          <span class="badge bg-light text-dark border p-2 ms-auto">
            <i class="fas fa-keyboard text-primary me-1"></i> <strong>Edición rápida en tabla:</strong> Clic en la celda y presiona <kbd>Enter</kbd> para guardar
          </span>
        </div>
    </div>
</form>

  @include('../menu/exportar.exportarActaRe')

<!-- Modal de Edición Técnica de Recepción -->
<div class="modal fade" id="modalEditarInspeccion" tabindex="-1" aria-labelledby="modalEditarInspeccionLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content shadow border-0">
            <form id="formEditarInspeccion">
                @csrf
                <input type="hidden" name="id" id="edit_id">
                
                <div class="modal-header bg-primary text-white">
                    <h5 class="modal-title" id="modalEditarInspeccionLabel">
                        <i class="fas fa-microscope me-2"></i> Inspección Técnica y Recepción del Producto
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Cerrar"></button>
                </div>
                
                <div class="modal-body p-4">
                    <!-- Resumen del Producto (Solo lectura) -->
                    <div class="card mb-3 bg-light border-0">
                        <div class="card-body py-2">
                            <div class="row align-items-center">
                                <div class="col-md-7">
                                    <strong class="text-primary" id="lbl_nomproduct">-</strong><br>
                                    <small class="text-muted">Cód: <span id="lbl_cproducto">-</span> | Factura: <span id="lbl_numfactur">-</span></small>
                                </div>
                                <div class="col-md-5 text-md-end">
                                    <span class="badge bg-secondary" id="lbl_provedor">-</span><br>
                                    <small class="text-muted">Cantidad recibida: <span id="lbl_cantcaja">-</span> cajas <span id="lbl_cantfrcc"></span></small>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="alert alert-info py-2 px-3 small d-flex align-items-center mb-3">
                        <i class="fas fa-shield-alt fa-2x me-3 text-info"></i>
                        <div>
                            <strong>Seguridad de Datos:</strong> Los valores financieros (costos, impuestos, precios de venta) y el inventario están estrictamente protegidos. Solo se actualizan los parámetros técnicos de recepción e inspección sanitaria.
                        </div>
                    </div>

                    <!-- Campos Técnicos de Inspección Editables -->
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label for="edit_lote" class="form-label fw-bold">Lote del Producto</label>
                            <input type="text" name="lote" id="edit_lote" class="form-control" placeholder="Ej: L123456" maxlength="100">
                        </div>

                        <div class="col-md-6">
                            <label for="edit_fvencimi" class="form-label fw-bold">Fecha de Vencimiento</label>
                            <input type="date" name="fvencimi" id="edit_fvencimi" class="form-control">
                        </div>

                        <div class="col-md-6">
                            <label for="edit_rinvima" class="form-label fw-bold">Registro Sanitario INVIMA</label>
                            <input type="text" name="rinvima" id="edit_rinvima" class="form-control" placeholder="Ej: INVIMA 2021M-0001234" maxlength="100">
                        </div>

                        <div class="col-md-6">
                            <label for="edit_estinvima" class="form-label fw-bold">Estado / Vigencia Registro Sanitario</label>
                            <input type="text" name="estinvima" id="edit_estinvima" list="opciones_estinvima" class="form-control" placeholder="VIGENTE, EN TRÁMITE, etc." maxlength="100">
                            <datalist id="opciones_estinvima">
                                <option value="VIGENTE">
                                <option value="EN TRÁMITE DE RENOVACIÓN">
                                <option value="VENCIDO">
                                <option value="NO REQUIERE">
                            </datalist>
                        </div>

                        <div class="col-md-6">
                            <label for="edit_fecharecepc" class="form-label fw-bold">Fecha de Recepción</label>
                            <input type="date" name="FechaRecepc" id="edit_fecharecepc" class="form-control">
                        </div>

                        <div class="col-md-12">
                            <label for="edit_observaciones" class="form-label fw-bold">Defectos / Observaciones Técnicas</label>
                            <textarea name="Observaciones" id="edit_observaciones" rows="2" class="form-control" placeholder="Describa no conformidades, estado del empaque, defectos o concepto técnico..." maxlength="250"></textarea>
                        </div>
                    </div>
                </div>
                
                <div class="modal-footer bg-light">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        <i class="fas fa-times me-1"></i> Cancelar
                    </button>
                    <button type="submit" class="btn btn-success" id="btnGuardarInspeccion">
                        <i class="fas fa-save me-1"></i> Guardar Cambios
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    const modalEl = document.getElementById('modalEditarInspeccion');
    const modalInstance = modalEl ? bootstrap.Modal.getOrCreateInstance(modalEl) : null;
    const formEl = document.getElementById('formEditarInspeccion');
    const btnGuardar = document.getElementById('btnGuardarInspeccion');

    // Apertura y llenado de datos al hacer click en "Editar"
    document.addEventListener('click', function (e) {
        const btn = e.target.closest('.btn-editar-inspeccion');
        if (!btn) return;

        document.getElementById('edit_id').value = btn.getAttribute('data-id') || '';
        document.getElementById('lbl_nomproduct').textContent = btn.getAttribute('data-nomproduct') || '-';
        document.getElementById('lbl_cproducto').textContent = btn.getAttribute('data-cproducto') || '-';
        document.getElementById('lbl_numfactur').textContent = btn.getAttribute('data-numfactur') || '-';
        document.getElementById('lbl_provedor').textContent = btn.getAttribute('data-provedor') || '-';
        document.getElementById('lbl_cantcaja').textContent = btn.getAttribute('data-cantcaja') || '0';
        
        const frcc = btn.getAttribute('data-cantfrcc');
        document.getElementById('lbl_cantfrcc').textContent = (frcc && frcc > 0) ? `| F: ${frcc}` : '';

        document.getElementById('edit_lote').value = btn.getAttribute('data-lote') || '';
        document.getElementById('edit_fvencimi').value = btn.getAttribute('data-fvencimi') || '';
        document.getElementById('edit_rinvima').value = btn.getAttribute('data-rinvima') || '';
        document.getElementById('edit_estinvima').value = btn.getAttribute('data-estinvima') || '';
        document.getElementById('edit_observaciones').value = btn.getAttribute('data-observaciones') || '';
        document.getElementById('edit_fecharecepc').value = btn.getAttribute('data-fecharecepc') || '';

        if (modalInstance) {
            modalInstance.show();
        }
    });

    // Guardado vía AJAX
    if (formEl) {
        formEl.addEventListener('submit', function (e) {
            e.preventDefault();

            btnGuardar.disabled = true;
            btnGuardar.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i> Guardando...';

            const formData = new FormData(formEl);

            fetch("{{ url('/actualizarActaRecepcion') }}", {
                method: "POST",
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]') ? document.querySelector('meta[name="csrf-token"]').getAttribute('content') : ''
                },
                body: formData
            })
            .then(res => res.json())
            .then(res => {
                btnGuardar.disabled = false;
                btnGuardar.innerHTML = '<i class="fas fa-save me-1"></i> Guardar Cambios';

                if (res.status === 'success') {
                    const d = res.data;
                    
                    // Actualizar las celdas en la tabla sin recargar la página
                    const elLote = document.getElementById(`lote-${d.id}`);
                    if (elLote) elLote.textContent = d.lote || '';

                    const elVencD = document.getElementById(`venc-d-${d.id}`);
                    if (elVencD) elVencD.textContent = d.d || '';

                    const elVencM = document.getElementById(`venc-m-${d.id}`);
                    if (elVencM) elVencM.textContent = d.m || '';

                    const elVencY = document.getElementById(`venc-y-${d.id}`);
                    if (elVencY) elVencY.textContent = d.y || '';

                    const elInvima = document.getElementById(`invima-${d.id}`);
                    if (elInvima) elInvima.textContent = d.rinvima || '';

                    const elEstInvima = document.getElementById(`estinvima-${d.id}`);
                    if (elEstInvima) elEstInvima.textContent = d.estinvima || '';

                    const elObs = document.getElementById(`obs-${d.id}`);
                    if (elObs) elObs.textContent = d.Observaciones || '';

                    // Actualizar también los atributos data-* del botón para futuras ediciones
                    const btn = document.querySelector(`.btn-editar-inspeccion[data-id="${d.id}"]`);
                    if (btn) {
                        btn.setAttribute('data-lote', d.lote || '');
                        btn.setAttribute('data-fvencimi', d.fvencimi || '');
                        btn.setAttribute('data-rinvima', d.rinvima || '');
                        btn.setAttribute('data-estinvima', d.estinvima || '');
                        btn.setAttribute('data-observaciones', d.Observaciones || '');
                        btn.setAttribute('data-fecharecepc', d.FechaRecepc ? d.FechaRecepc.substring(0, 10) : '');
                    }

                    if (modalInstance) {
                        modalInstance.hide();
                    }

                    Swal.fire({
                        icon: 'success',
                        title: '¡Actualizado!',
                        text: res.message,
                        timer: 2000,
                        showConfirmButton: false
                    });
                } else {
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: res.message || 'No fue posible guardar los cambios.'
                    });
                }
            })
            .catch(err => {
                btnGuardar.disabled = false;
                btnGuardar.innerHTML = '<i class="fas fa-save me-1"></i> Guardar Cambios';
                console.error(err);
                Swal.fire({
                    icon: 'error',
                    title: 'Error de Red',
                    text: 'Ocurrió un problema de comunicación con el servidor.'
                });
            });
        });
    }

    // ==============================================================
    // EDICIÓN EN LÍNEA DIRECTA EN LA TABLA CON ENTER
    // ==============================================================

    // Recordar el valor original al enfocar la celda
    document.addEventListener('focusin', function (e) {
        if (e.target && e.target.classList && e.target.classList.contains('cell-editable')) {
            e.target.setAttribute('data-original', e.target.textContent.trim());
        }
    });

    // Al presionar Enter, confirmar edición quitando el foco (blur)
    // Al presionar Escape, cancelar y restaurar original
    document.addEventListener('keydown', function (e) {
        if (e.target && e.target.classList && e.target.classList.contains('cell-editable')) {
            if (e.key === 'Enter') {
                e.preventDefault(); // Evitar salto de línea en la celda
                e.target.blur(); // Disparar focusout para guardar
            } else if (e.key === 'Escape') {
                e.preventDefault();
                e.target.textContent = e.target.getAttribute('data-original') || '';
                e.target.blur();
            }
        }
    });

    // Guardar automáticamente al perder el foco (blur/focusout)
    document.addEventListener('focusout', function (e) {
        const cell = e.target;
        if (!cell || !cell.classList || !cell.classList.contains('cell-editable')) return;

        const row = cell.closest('tr');
        if (!row) return;

        const rowId = row.getAttribute('data-id');
        if (!rowId) return;

        const field = cell.getAttribute('data-field');
        const originalVal = cell.getAttribute('data-original') ?? '';
        const currentVal = cell.textContent.trim();

        // Si no hubo cambios, no realizar petición
        if (originalVal === currentVal) {
            return;
        }

        // Construir datos a enviar (únicamente campo técnico modificado)
        const csrfToken = document.querySelector('meta[name="csrf-token"]') 
            ? document.querySelector('meta[name="csrf-token"]').getAttribute('content') 
            : '';

        const formData = new FormData();
        formData.append('id', rowId);
        formData.append('_token', csrfToken);

        if (field === 'venc_d' || field === 'venc_m' || field === 'venc_y') {
            // Reconstruir fecha Y-m-d a partir de las 3 celdas D, M, A de la fila
            let d = row.querySelector('.cell-venc-d') ? row.querySelector('.cell-venc-d').textContent.trim() : '';
            let m = row.querySelector('.cell-venc-m') ? row.querySelector('.cell-venc-m').textContent.trim() : '';
            let y = row.querySelector('.cell-venc-y') ? row.querySelector('.cell-venc-y').textContent.trim() : '';

            if (d && m && y) {
                d = d.padStart(2, '0');
                m = m.padStart(2, '0');
                if (y.length === 2) y = '20' + y;

                const dayNum = parseInt(d, 10);
                const monthNum = parseInt(m, 10);
                const yearNum = parseInt(y, 10);

                if (isNaN(dayNum) || dayNum < 1 || dayNum > 31 || isNaN(monthNum) || monthNum < 1 || monthNum > 12 || isNaN(yearNum) || yearNum < 1900 || yearNum > 2100) {
                    Swal.fire({
                        icon: 'warning',
                        title: 'Fecha Inválida',
                        text: 'Verifique que el día (1-31), mes (1-12) y año (ej: 2027) sean válidos.',
                        timer: 2500,
                        showConfirmButton: false
                    });
                    cell.textContent = originalVal;
                    return;
                }

                formData.append('fvencimi', `${y}-${m}-${d}`);
            } else if (!d && !m && !y) {
                formData.append('fvencimi', '');
            } else {
                // Fecha incompleta: notificar pero no romper
                const Toast = Swal.mixin({ toast: true, position: 'top-end', showConfirmButton: false, timer: 2000 });
                Toast.fire({ icon: 'info', title: 'Complete Día, Mes y Año para guardar el vencimiento' });
                return;
            }
        } else {
            formData.append(field, currentVal);
        }

        // Estado visual de guardando
        cell.classList.add('cell-saving');

        fetch("{{ url('/actualizarActaRecepcion') }}", {
            method: "POST",
            headers: {
                'X-CSRF-TOKEN': csrfToken
            },
            body: formData
        })
        .then(res => res.json())
        .then(res => {
            cell.classList.remove('cell-saving');
            if (res.status === 'success') {
                cell.classList.add('cell-saved');
                setTimeout(() => cell.classList.remove('cell-saved'), 1000);

                const d = res.data;

                // Si fue fecha de vencimiento, formatear las 3 celdas con ceros a la izquierda
                if (d.d !== undefined && row.querySelector('.cell-venc-d')) row.querySelector('.cell-venc-d').textContent = d.d;
                if (d.m !== undefined && row.querySelector('.cell-venc-m')) row.querySelector('.cell-venc-m').textContent = d.m;
                if (d.y !== undefined && row.querySelector('.cell-venc-y')) row.querySelector('.cell-venc-y').textContent = d.y;

                // Mantener sincronizado el botón del modal de la fila
                const btn = row.querySelector('.btn-editar-inspeccion');
                if (btn) {
                    if (d.lote !== undefined) btn.setAttribute('data-lote', d.lote || '');
                    if (d.fvencimi !== undefined) btn.setAttribute('data-fvencimi', d.fvencimi || '');
                    if (d.rinvima !== undefined) btn.setAttribute('data-rinvima', d.rinvima || '');
                    if (d.estinvima !== undefined) btn.setAttribute('data-estinvima', d.estinvima || '');
                    if (d.Observaciones !== undefined) btn.setAttribute('data-observaciones', d.Observaciones || '');
                }

                cell.setAttribute('data-original', cell.textContent.trim());

                // Notificación Toast discreta sin interrumpir el flujo de escritura
                const Toast = Swal.mixin({
                    toast: true,
                    position: 'top-end',
                    showConfirmButton: false,
                    timer: 1500,
                    timerProgressBar: false
                });
                Toast.fire({
                    icon: 'success',
                    title: '¡Guardado!'
                });
            } else {
                cell.classList.add('cell-error');
                setTimeout(() => cell.classList.remove('cell-error'), 1200);
                cell.textContent = originalVal;
                Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: res.message || 'No se pudo guardar la modificación.'
                });
            }
        })
        .catch(err => {
            cell.classList.remove('cell-saving');
            cell.classList.add('cell-error');
            setTimeout(() => cell.classList.remove('cell-error'), 1200);
            cell.textContent = originalVal;
            console.error(err);
            Swal.fire({
                icon: 'error',
                title: 'Error de Red',
                text: 'No se pudo conectar con el servidor.'
            });
        });
    });
});
</script>
@endsection