@extends('layouts.app')
@section('title','Comercial — Nuevo Pedido')
@section('page-title','Nuevo Pedido de Venta')

@section('content')
@if($errors->any())<div class="alert alert-danger"><ul class="mb-0">@foreach($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul></div>@endif
@if($cotizacion)
<div class="alert alert-info mb-3">
    <i class="fas fa-link mr-2"></i>Pedido generado a partir de la cotización <strong>{{ $cotizacion->numero }}</strong> — {{ $cotizacion->cliente?->razon_social }}
</div>
@endif

<form action="{{ route('comercial.pedidos.store') }}" method="POST" id="formPed">
@csrf
@if($cotizacion)<input type="hidden" name="cotizacion_id" value="{{ $cotizacion->id }}">@endif

{{-- Datos del pedido --}}
<div class="card">
    <div class="card-header"><h3 class="card-title"><i class="fas fa-shopping-cart mr-1"></i>Datos del Pedido</h3></div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-4 form-group">
                <label>Cliente <span class="text-danger">*</span></label>
                <select name="cliente_id" class="form-control" required>
                    <option value="">— Seleccionar —</option>
                    @foreach($clientes as $c)
                    <option value="{{ $c->id }}" data-tipo="{{ $c->tipo }}"
                        {{ ($cotizacion?->cliente_id ?? old('cliente_id', request('cliente_id')))==$c->id?'selected':'' }}>
                        {{ $c->razon_social }}
                    </option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-2 form-group">
                <label>Tipo <span class="text-danger">*</span></label>
                <select name="tipo" id="tipoPed" class="form-control" required>
                    <option value="nacional"    {{ ($cotizacion?->tipo ?? old('tipo','nacional'))==='nacional'?'selected':'' }}>Nacional</option>
                    <option value="exportacion" {{ ($cotizacion?->tipo ?? old('tipo'))==='exportacion'?'selected':'' }}>Exportación</option>
                </select>
            </div>
            <div class="col-md-2 form-group">
                <label>Moneda</label>
                <select name="moneda" class="form-control">
                    <option value="PEN" {{ ($cotizacion?->moneda ?? old('moneda','PEN'))==='PEN'?'selected':'' }}>PEN</option>
                    <option value="USD" {{ ($cotizacion?->moneda ?? old('moneda'))==='USD'?'selected':'' }}>USD</option>
                </select>
            </div>
            <div class="col-md-2 form-group">
                <label>T/C</label>
                <input type="number" name="tipo_cambio_valor" step="0.0001" min="0.01" class="form-control"
                       value="{{ old('tipo_cambio_valor', $cotizacion?->tipo_cambio_valor ?? $tipoCambio?->usd_pen ?? 3.80) }}">
            </div>
            <div class="col-md-2 form-group">
                <label>Orden de Producción</label>
                <select name="orden_produccion_id" id="selOP" class="form-control">
                    <option value="">— Sin vincular —</option>
                    @foreach($ordenes as $op)
                    <option value="{{ $op->id }}"
                        data-fruta="{{ $op->fruta->nombre ?? '' }}"
                        data-kg="{{ $op->kg_pulpa_obtenida ?? $op->kg_mp_programados }}"
                        {{ old('orden_produccion_id')==$op->id?'selected':'' }}>
                        {{ $op->codigo }} — {{ $op->fruta->nombre ?? '?' }} ({{ $op->fecha->format('d/m') }})
                    </option>
                    @endforeach
                </select>
            </div>
        </div>
        <div id="infoOP" class="alert alert-secondary py-1 mb-2" style="display:none">
            <i class="fas fa-industry mr-1"></i>
            <span id="infoOPtxt"></span>
        </div>
        <div class="row" id="secExpPed" style="{{ ($cotizacion?->tipo ?? 'nacional')==='exportacion'?'':'display:none' }}">
            <div class="col-md-3 form-group">
                <label>Incoterm</label>
                <select name="incoterm" class="form-control">
                    <option value="">—</option>
                    @foreach(['EXW','FOB','CIF','CFR','DAP','DDP'] as $inc)
                    <option value="{{ $inc }}" {{ ($cotizacion?->incoterm)===$inc?'selected':'' }}>{{ $inc }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-md-3 form-group">
                <label>Puerto de Destino</label>
                <input type="text" name="puerto_destino" class="form-control" value="{{ old('puerto_destino',$cotizacion?->puerto_destino) }}">
            </div>
            <div class="col-md-3 form-group">
                <label>Fecha Entrega Estimada</label>
                <input type="date" name="fecha_entrega_estimada" class="form-control" value="{{ old('fecha_entrega_estimada') }}">
            </div>
            <div class="col-md-3 form-group">
                <label>Condiciones de pago</label>
                <input type="text" name="condiciones_pago" class="form-control" value="{{ old('condiciones_pago',$cotizacion?->condiciones_pago) }}">
            </div>
        </div>
        <div class="form-group mb-0">
            <label>Notas</label>
            <textarea name="notas" class="form-control" rows="2">{{ old('notas') }}</textarea>
        </div>
    </div>
</div>

{{-- Ítems --}}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="card-title"><i class="fas fa-list mr-1"></i>Ítems del Pedido</h3>
        <button type="button" id="btnAddPed" class="btn btn-sm btn-outline-primary"><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">
            <thead class="thead-light">
                <tr>
                    <th style="min-width:170px">Descripción</th>
                    <th style="min-width:110px">Tipo pulpa</th>
                    <th style="min-width:80px">Fruta</th>
                    <th style="min-width:80px">Kg / Cant.</th>
                    <th style="min-width:80px">Presentación</th>
                    <th style="min-width:70px">Kg/envase</th>
                    <th style="min-width:60px">Envases</th>
                    <th style="min-width:90px">Precio unit.</th>
                    <th style="min-width:80px">Subtotal</th>
                    <th style="width:30px"></th>
                </tr>
            </thead>
            <tbody id="pedItemsBody">
            @if($cotizacion)
            @foreach($cotizacion->items->sortBy('orden') as $i => $item)
            <tr class="fila-item" data-idx="{{ $i }}">
                <td><input type="text" name="items[{{ $i }}][descripcion]" class="form-control form-control-sm" value="{{ $item->descripcion }}" required></td>
                <td>
                    <select name="items[{{ $i }}][tipo_pulpa]" class="form-control form-control-sm">
                        <option value="">—</option>
                        @foreach(['past_sin_pepa'=>'Past. S/P','past_con_pepa'=>'Past. C/P','nopast_sin_pepa'=>'NoPast. S/P','nopast_con_pepa'=>'NoPast. C/P'] as $k=>$v)
                        <option value="{{ $k }}" {{ $item->tipo_pulpa===$k?'selected':'' }}>{{ $v }}</option>
                        @endforeach
                    </select>
                </td>
                <td><input type="text" name="items[{{ $i }}][fruta]" class="form-control form-control-sm" value="{{ $item->fruta }}"></td>
                <td><input type="number" name="items[{{ $i }}][cantidad]" class="form-control form-control-sm item-cant" step="0.001" value="{{ $item->cantidad }}" required></td>
                <td>
                    <select name="items[{{ $i }}][presentacion]" class="form-control form-control-sm item-pres">
                        <option value="">— N/A —</option>
                        @foreach(\App\Models\PedidoComercialItem::$PRESENTACIONES as $pk => $pv)
                        <option value="{{ $pk }}" data-kg="{{ $pv['kg'] }}">{{ $pv['label'] }}</option>
                        @endforeach
                    </select>
                </td>
                <td><input type="number" name="items[{{ $i }}][kg_por_envase]" class="form-control form-control-sm item-kge" step="0.001" min="0" placeholder="kg"></td>
                <td><input type="text" class="form-control form-control-sm item-nenv bg-light" readonly placeholder="—"></td>
                <td><input type="number" name="items[{{ $i }}][precio_unitario]" class="form-control form-control-sm item-precio" step="0.0001" value="{{ $item->precio_unitario }}" required></td>
                <td><input type="text" class="form-control form-control-sm item-sub bg-light" readonly value="{{ $item->subtotal }}"></td>
                <td class="text-center"><button type="button" class="btn btn-xs btn-outline-danger btn-quitar"><i class="fas fa-times"></i></button></td>
            </tr>
            @endforeach
            @endif
            </tbody>
        </table>
        </div>
    </div>
    <div class="card-footer">
        <div class="row">
            {{-- Resumen envases (se actualiza con JS) --}}
            <div class="col-md-6">
                <div id="resumenEnvases" class="d-none">
                    <strong><i class="fas fa-box-open mr-1 text-warning"></i>Requerimiento de envases:</strong>
                    <span id="textoEnvases" class="ml-2"></span>
                </div>
            </div>
            <div class="col-md-6">
                <table class="table table-sm mb-0 float-right" style="width:auto">
                    <tr><td class="text-right text-muted pr-3">Subtotal:</td><td class="text-right font-weight-bold" id="pSubtotal">0.00</td></tr>
                    <tr id="pFilIGV"><td class="text-right text-muted pr-3">IGV (18%):</td><td class="text-right" id="pIGV">0.00</td></tr>
                    <tr><td class="text-right pr-3 font-weight-bold">Total:</td><td class="text-right font-weight-bold text-success" id="pTotal">0.00</td></tr>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="d-flex mt-2" style="gap:8px;">
    <button type="submit" class="btn btn-primary"><i class="fas fa-save mr-1"></i>Crear Pedido</button>
    <a href="{{ route('comercial.pedidos.index') }}" class="btn btn-secondary">Cancelar</a>
</div>
</form>

{{-- Template fila --}}
<template id="tplPedItem">
    <tr class="fila-item">
        <td><input type="text" name="items[__I__][descripcion]" class="form-control form-control-sm" required></td>
        <td><select name="items[__I__][tipo_pulpa]" class="form-control form-control-sm"><option value="">—</option><option value="past_sin_pepa">Past. S/P</option><option value="past_con_pepa">Past. C/P</option><option value="nopast_sin_pepa">NoPast. S/P</option><option value="nopast_con_pepa">NoPast. C/P</option></select></td>
        <td><input type="text" name="items[__I__][fruta]" class="form-control form-control-sm"></td>
        <td><input type="number" name="items[__I__][cantidad]" class="form-control form-control-sm item-cant" step="0.001" min="0.001" required></td>
        <td><select name="items[__I__][presentacion]" class="form-control form-control-sm item-pres"><option value="">— N/A —</option>@foreach(\App\Models\PedidoComercialItem::$PRESENTACIONES as $pk => $pv)<option value="{{ $pk }}" data-kg="{{ $pv['kg'] }}">{{ $pv['label'] }}</option>@endforeach</select></td>
        <td><input type="number" name="items[__I__][kg_por_envase]" class="form-control form-control-sm item-kge" step="0.001" min="0" placeholder="kg"></td>
        <td><input type="text" class="form-control form-control-sm item-nenv bg-light" readonly placeholder="—"></td>
        <td><input type="number" name="items[__I__][precio_unitario]" class="form-control form-control-sm item-precio" step="0.0001" min="0" required></td>
        <td><input type="text" class="form-control form-control-sm item-sub bg-light" readonly></td>
        <td class="text-center"><button type="button" class="btn btn-xs btn-outline-danger btn-quitar"><i class="fas fa-times"></i></button></td>
    </tr>
</template>

@push('scripts')
<script>
// Mapa materiales por presentación
const PRES_MATS = @json(collect(\App\Models\PedidoComercialItem::$PRESENTACIONES)->map(fn($v)=>$v['materiales']));

let pidx = {{ $cotizacion ? $cotizacion->items->count() : 0 }};
const tipoPed = document.getElementById('tipoPed');
const secExp  = document.getElementById('secExpPed');

tipoPed.addEventListener('change', () => {
    secExp.style.display = tipoPed.value==='exportacion' ? '' : 'none';
    recalcularPed();
});

// Info OP seleccionada
document.getElementById('selOP').addEventListener('change', function() {
    const opt = this.options[this.selectedIndex];
    const div = document.getElementById('infoOP');
    if (this.value) {
        document.getElementById('infoOPtxt').textContent =
            `OP vinculada: ${opt.text} | Fruta: ${opt.dataset.fruta} | Kg disponibles: ${parseFloat(opt.dataset.kg||0).toFixed(0)} kg`;
        div.style.display='';
    } else {
        div.style.display='none';
    }
});

function recalcularPed() {
    let sub = 0;
    const totEnvases = {};

    document.querySelectorAll('#pedItemsBody .fila-item').forEach(row => {
        const cant  = parseFloat(row.querySelector('.item-cant')?.value) || 0;
        const prec  = parseFloat(row.querySelector('.item-precio')?.value) || 0;
        const kge   = parseFloat(row.querySelector('.item-kge')?.value) || 0;
        const lin   = Math.round(cant * prec * 100) / 100;
        const elSub = row.querySelector('.item-sub');
        if (elSub) elSub.value = lin.toFixed(2);
        sub += lin;

        // Calcular envases
        const nenvEl  = row.querySelector('.item-nenv');
        const presEl  = row.querySelector('.item-pres');
        let   nenv    = 0;
        if (kge > 0 && cant > 0) {
            nenv = Math.ceil(cant / kge);
            if (nenvEl) nenvEl.value = nenv;
        } else {
            if (nenvEl) nenvEl.value = '';
        }

        // Acumular materiales
        if (presEl && presEl.value && nenv > 0) {
            const mats = PRES_MATS[presEl.value] || [];
            mats.forEach(m => { totEnvases[m] = (totEnvases[m]||0) + nenv; });
        }
    });

    const isNac = tipoPed.value === 'nacional';
    const igv   = isNac ? Math.round(sub * 0.18 * 100) / 100 : 0;
    document.getElementById('pSubtotal').textContent = sub.toFixed(2);
    document.getElementById('pIGV').textContent      = igv.toFixed(2);
    document.getElementById('pTotal').textContent    = (sub + igv).toFixed(2);

    // Mostrar resumen envases
    const divEnv = document.getElementById('resumenEnvases');
    const keys   = Object.keys(totEnvases);
    if (keys.length) {
        document.getElementById('textoEnvases').textContent =
            keys.map(k => `${totEnvases[k]} ${k}`).join(' · ');
        divEnv.classList.remove('d-none');
    } else {
        divEnv.classList.add('d-none');
    }
}

// Al cambiar presentación, pre-llenar kg_por_envase
function bindPresentacion(row) {
    const presEl = row.querySelector('.item-pres');
    const kgeEl  = row.querySelector('.item-kge');
    presEl.addEventListener('change', () => {
        const opt = presEl.options[presEl.selectedIndex];
        const kg  = parseFloat(opt.dataset.kg || 0);
        if (kg > 0) kgeEl.value = kg;
        recalcularPed();
    });
}

function bindRow(row) {
    row.querySelectorAll('.item-cant,.item-precio,.item-kge').forEach(el =>
        el.addEventListener('input', recalcularPed)
    );
    row.querySelector('.btn-quitar').addEventListener('click', () => {
        row.remove(); recalcularPed();
    });
    bindPresentacion(row);
}

function agregarFilaPed() {
    const tpl = document.getElementById('tplPedItem').innerHTML.replace(/__I__/g, pidx++);
    const tmp = document.createElement('tbody'); tmp.innerHTML = tpl;
    const row = tmp.firstElementChild;
    bindRow(row);
    document.getElementById('pedItemsBody').appendChild(row);
}

document.getElementById('btnAddPed').addEventListener('click', agregarFilaPed);
document.querySelectorAll('#pedItemsBody .fila-item').forEach(row => bindRow(row));
if (!pidx) agregarFilaPed();
recalcularPed();
</script>
@endpush
@endsection