@extends('layouts.app')
@section('title', 'Nuevo Despacho a Producción')
@section('page-title', 'Nuevo Despacho de Materiales a Producción')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('costos.dashboard') }}">Costos</a></li>
    <li class="breadcrumb-item"><a href="{{ route('costos.despachos.index') }}">Despachos</a></li>
    <li class="breadcrumb-item active">Nuevo</li>
@endsection
@section('content')

<form method="POST" action="{{ route('costos.despachos.store') }}" id="formDespacho">
@csrf

<div class="card mb-3">
    <div class="card-header py-2"><h6 class="mb-0"><i class="fas fa-info-circle mr-2 text-secondary"></i>Datos del Despacho</h6></div>
    <div class="card-body pb-1">
        <div class="row">
            <div class="col-md-3">
                <div class="form-group">
                    <label class="font-weight-bold small">Fecha <span class="text-danger">*</span></label>
                    <input type="date" name="fecha" class="form-control form-control-sm"
                           value="{{ old('fecha', date('Y-m-d')) }}" required>
                </div>
            </div>
            <div class="col-md-5">
                <div class="form-group">
                    <label class="font-weight-bold small">Orden de Producción</label>
                    <select name="orden_produccion_id" class="form-control form-control-sm" id="opSelector">
                        <option value="">— Sin OP vinculada —</option>
                        @foreach($ordenes as $op)
                        <option value="{{ $op->id }}"
                            {{ (old('orden_produccion_id') == $op->id || $selected?->id == $op->id) ? 'selected' : '' }}>
                            {{ $op->numero }} — {{ $op->tipo_produccion }}
                            {{ $op->pedido ? '(Pedido '.$op->pedido->numero.')' : '' }}
                        </option>
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <label class="font-weight-bold small">Observación</label>
                    <input type="text" name="observacion" class="form-control form-control-sm"
                           maxlength="500" value="{{ old('observacion') }}"
                           placeholder="Turno, referencia, etc.">
                </div>
            </div>
        </div>
    </div>
</div>

{{-- TABLA DE MATERIALES --}}
<div class="card mb-3">
    <div class="card-header py-2 d-flex justify-content-between align-items-center">
        <h6 class="mb-0"><i class="fas fa-boxes mr-2 text-success"></i>Materiales a Despachar</h6>
        <button type="button" class="btn btn-success btn-sm" id="btnAddRow">
            <i class="fas fa-plus mr-1"></i>Agregar ítem
        </button>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-sm mb-0" id="tablaItems">
                <thead class="thead-light">
                    <tr>
                        <th style="width:30px" class="text-center">#</th>
                        <th>Material / Producto</th>
                        <th style="width:100px" class="text-center">Cantidad <span class="text-danger">*</span></th>
                        <th style="width:55px" class="text-center">U.M.</th>
                        <th style="width:110px" class="text-right">Costo Unit.</th>
                        <th style="width:110px" class="text-right">Subtotal</th>
                        <th style="width:30px"></th>
                    </tr>
                </thead>
                <tbody id="itemsBody"></tbody>
                <tfoot>
                    <tr class="table-light">
                        <td colspan="5" class="text-right font-weight-bold">Total estimado:</td>
                        <td class="text-right font-weight-bold text-success" id="totalDisplay">S/ 0.00</td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>

{{-- Resumen de envases de la OP (si viene pre-cargado) --}}
@if($selected && $selected->pedido)
<div class="alert alert-info">
    <i class="fas fa-info-circle mr-1"></i>
    <strong>Requerimiento de envases de la OP {{ $selected->numero }}:</strong>
    @php $resumen = $selected->resumen_envases @endphp
    @if($resumen)
        @foreach($resumen as $mat => $qty)
        <span class="badge badge-light mr-1">{{ $mat }}: {{ number_format($qty,0) }}</span>
        @endforeach
    @endif
    <button type="button" class="btn btn-link btn-sm p-0 ml-2" id="btnCargarEnvases">
        Cargar automáticamente
    </button>
</div>
@endif

<div class="d-flex justify-content-between">
    <div>
        <button type="submit" class="btn btn-primary">
            <i class="fas fa-save mr-1"></i>Crear Despacho
        </button>
        <a href="{{ route('costos.despachos.index') }}" class="btn btn-secondary ml-2">Cancelar</a>
    </div>
    <small class="text-muted align-self-center"><span id="countItems">0</span> ítem(s)</small>
</div>
</form>

<template id="rowTpl">
    <tr class="item-row" data-idx="__IDX__">
        <td class="text-center pt-2 row-num text-muted small">__NUM__</td>
        <td class="position-relative p-1">
            <input type="hidden" name="items[__IDX__][producto_id]" class="prod-id">
            <input type="text" class="form-control form-control-sm prod-search" placeholder="Buscar material..." autocomplete="off">
            <div class="autocomplete-list list-group shadow" style="display:none;position:absolute;z-index:9999;top:100%;left:4px;right:4px;max-height:180px;overflow-y:auto;"></div>
        </td>
        <td class="p-1"><input type="number" name="items[__IDX__][cantidad]" class="form-control form-control-sm text-center qty" min="0.001" step="0.001" value="1" required></td>
        <td class="text-center pt-2 um-lbl small text-muted">—</td>
        <td class="p-1"><input type="text" class="form-control-plaintext form-control-sm text-right cost-lbl" readonly value="S/ 0.00"></td>
        <td class="text-right pt-2 subtotal-cell font-weight-bold text-success small">S/ 0.00</td>
        <td class="text-center pt-1">
            <button type="button" class="btn btn-outline-danger btn-xs btn-del"><i class="fas fa-times"></i></button>
        </td>
    </tr>
</template>

@push('scripts')
<script>
const BUSCAR_URL = '{{ route("logistica.ingresos.productos-buscar") }}';
let rowIdx = 0;

function addRow(data = null) {
    rowIdx++;
    const tpl  = document.getElementById('rowTpl').innerHTML
        .replaceAll('__IDX__', rowIdx).replaceAll('__NUM__', rowIdx);
    document.getElementById('itemsBody').insertAdjacentHTML('beforeend', tpl);
    const row = document.getElementById('itemsBody').lastElementChild;

    if (data) {
        row.querySelector('.prod-id').value    = data.producto_id || '';
        row.querySelector('.prod-search').value = data.label || '';
        row.querySelector('.um-lbl').textContent = data.um || '—';
        row.querySelector('.qty').value         = data.cantidad || 1;
        row.querySelector('.cost-lbl').value    = 'S/ ' + parseFloat(data.costo || 0).toFixed(4);
        calcSubtotal(row, parseFloat(data.costo || 0));
    }

    attachRow(row);
    updateCount();
}

function attachRow(row) {
    const si  = row.querySelector('.prod-search');
    const pid = row.querySelector('.prod-id');
    const dd  = row.querySelector('.autocomplete-list');
    const qty = row.querySelector('.qty');
    let t = null;

    si.addEventListener('input', function () {
        pid.value = '';
        if (this.value.trim().length < 1) { dd.style.display = 'none'; return; }
        clearTimeout(t);
        t = setTimeout(() => fetchProd(this.value.trim(), dd, row), 250);
    });
    si.addEventListener('blur', () => setTimeout(() => dd.style.display = 'none', 200));
    qty.addEventListener('input', () => {
        const c = parseFloat(row.querySelector('.cost-lbl').value.replace('S/ ','')) || 0;
        calcSubtotal(row, c);
    });
    row.querySelector('.btn-del').addEventListener('click', () => {
        row.remove(); updateCount(); recalcTotal();
    });
}

function fetchProd(q, dd, row) {
    fetch(`${BUSCAR_URL}?q=${encodeURIComponent(q)}`)
        .then(r => r.json())
        .then(data => {
            dd.innerHTML = '';
            if (!data.length) {
                dd.innerHTML = '<div class="list-group-item small text-muted py-1">Sin resultados</div>';
            }
            data.forEach(p => {
                const a = document.createElement('a');
                a.href = '#'; a.className = 'list-group-item list-group-item-action py-1 px-2 small';
                a.innerHTML = `<span class="badge badge-secondary mr-1">${p.codigo}</span>${p.nombre} <span class="text-muted">(${p.um})</span>`;
                a.addEventListener('click', e => {
                    e.preventDefault();
                    row.querySelector('.prod-id').value     = p.id;
                    row.querySelector('.prod-search').value = `[${p.codigo}] ${p.nombre}`;
                    row.querySelector('.um-lbl').textContent = p.um;
                    row.querySelector('.cost-lbl').value    = 'S/ ' + p.costo.toFixed(4);
                    calcSubtotal(row, p.costo);
                    dd.style.display = 'none';
                });
                dd.appendChild(a);
            });
            dd.style.display = 'block';
        });
}

function calcSubtotal(row, costo) {
    const qty = parseFloat(row.querySelector('.qty').value) || 0;
    row.querySelector('.subtotal-cell').textContent = 'S/ ' + (qty * costo).toFixed(2);
    recalcTotal();
}

function recalcTotal() {
    let t = 0;
    document.querySelectorAll('.subtotal-cell').forEach(c => {
        t += parseFloat(c.textContent.replace('S/ ','')) || 0;
    });
    document.getElementById('totalDisplay').textContent = 'S/ ' + t.toFixed(2);
}

function updateCount() {
    document.getElementById('countItems').textContent = document.querySelectorAll('.item-row').length;
}

document.getElementById('btnAddRow').addEventListener('click', () => addRow());

@if($selected && $selected->pedido && $selected->resumen_envases)
const envasesSugeridos = @json($selected->resumen_envases ?? []);
document.getElementById('btnCargarEnvases')?.addEventListener('click', function () {
    Object.entries(envasesSugeridos).forEach(([mat, qty]) => {
        addRow({ label: mat, cantidad: qty, costo: 0, um: 'UND' });
    });
    this.closest('.alert').remove();
});
@endif

// Al menos una fila inicial
addRow();
</script>
@endpush
@endsection