@extends('layouts.app')
@section('title', 'Nueva Cotización')
@section('page-title', 'Nueva Cotización')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('logistica.dashboard') }}">Logística</a></li>
    <li class="breadcrumb-item"><a href="{{ route('logistica.cotizaciones.index') }}">Cotizaciones</a></li>
    <li class="breadcrumb-item active">Nueva</li>
@endsection
@section('content')

<div class="card">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-file-invoice-dollar mr-2"></i>Nueva Cotización</h3>
    </div>
    <div class="card-body">
        <form method="POST" action="{{ route('logistica.cotizaciones.store') }}" id="form-cot">
            @csrf

            <div class="row">
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Proveedor <span class="text-danger">*</span></label>
                        <select name="proveedor_id"
                            class="form-control @error('proveedor_id') is-invalid @enderror" required>
                            <option value="">Seleccionar proveedor...</option>
                            @foreach($proveedores as $prov)
                                <option value="{{ $prov->id }}" {{ old('proveedor_id') == $prov->id ? 'selected' : '' }}>
                                    {{ $prov->razon_social }}
                                </option>
                            @endforeach
                        </select>
                        @error('proveedor_id')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="form-group">
                        <label>Requerimiento vinculado</label>
                        <select name="requerimiento_id" class="form-control" id="req_sel"
                            onchange="cargarItemsRequerimiento()">
                            <option value="">Sin requerimiento (cotización libre)</option>
                            @foreach($requerimientos as $req)
                                <option value="{{ $req->id }}"
                                    data-items="{{ json_encode($req->items->map(fn($i) => [
                                        'producto_id' => $i->producto_id,
                                        'nombre'      => $i->producto->nombre,
                                        'cantidad'    => $i->cantidad_aprobada ?? $i->cantidad_solicitada,
                                    ])) }}"
                                    {{ old('requerimiento_id') == $req->id ? 'selected' : '' }}>
                                    {{ $req->numero }} — {{ $req->area_solicitante }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <label>Fecha <span class="text-danger">*</span></label>
                        <input type="date" name="fecha"
                            class="form-control @error('fecha') is-invalid @enderror"
                            value="{{ old('fecha', date('Y-m-d')) }}" required>
                        @error('fecha')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="form-group">
                        <label>Validez (días) <span class="text-danger">*</span></label>
                        <input type="number" name="validez_dias" min="1"
                            class="form-control @error('validez_dias') is-invalid @enderror"
                            value="{{ old('validez_dias', 15) }}" required>
                        @error('validez_dias')<div class="invalid-feedback">{{ $message }}</div>@enderror
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label>Observaciones</label>
                <input type="text" name="observaciones" maxlength="500"
                    class="form-control" value="{{ old('observaciones') }}">
            </div>

            <h5 class="text-success mb-2 mt-3"><i class="fas fa-list mr-2"></i>Ítems de la Cotización</h5>
            <div class="table-responsive">
                <table class="table table-sm" id="tabla-items">
                    <thead class="thead-light">
                        <tr>
                            <th style="width:30%">Descripción</th>
                            <th style="width:15%">Producto (opc.)</th>
                            <th style="width:12%">Cantidad</th>
                            <th style="width:12%">P. Unitario (S/.)</th>
                            <th style="width:12%">Subtotal</th>
                            <th style="width:5%"></th>
                        </tr>
                    </thead>
                    <tbody id="items-body"></tbody>
                    <tfoot>
                        <tr class="font-weight-bold">
                            <td colspan="4" class="text-right">Subtotal:</td>
                            <td id="total-subtotal">S/ 0.00</td>
                            <td></td>
                        </tr>
                        <tr class="font-weight-bold">
                            <td colspan="4" class="text-right">IGV (18%):</td>
                            <td id="total-igv">S/ 0.00</td>
                            <td></td>
                        </tr>
                        <tr class="font-weight-bold text-success">
                            <td colspan="4" class="text-right">TOTAL:</td>
                            <td id="total-general">S/ 0.00</td>
                            <td></td>
                        </tr>
                    </tfoot>
                </table>
            </div>
            <button type="button" id="btn-add-item" class="btn btn-sm btn-outline-success mb-3">
                <i class="fas fa-plus mr-1"></i>Agregar ítem
            </button>

            <hr>
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save mr-1"></i>Guardar Cotización
            </button>
            <a href="{{ route('logistica.cotizaciones.index') }}" class="btn btn-secondary ml-2">
                <i class="fas fa-times mr-1"></i>Cancelar
            </a>
        </form>
    </div>
</div>

@push('scripts')
<script>
const productosOpts = `<option value="">Sin producto</option>@foreach($productos as $p)<option value="{{ $p->id }}">{{ $p->nombre }}</option>@endforeach`;
let rowIdx = 0;

function addRow(desc = '', prodId = '', qty = '', price = '') {
    const tbody = document.getElementById('items-body');
    const tr = document.createElement('tr');
    tr.className = 'item-row';
    tr.innerHTML = `
        <td><input type="text" name="items[${rowIdx}][descripcion]" class="form-control form-control-sm desc-input"
            value="${desc}" maxlength="300" required placeholder="Descripción del ítem"></td>
        <td><select name="items[${rowIdx}][producto_id]" class="form-control form-control-sm">${productosOpts.replace(`value="${prodId}"`, `value="${prodId}" selected`)}</select></td>
        <td><input type="number" name="items[${rowIdx}][cantidad]" step="0.001" min="0.001"
            class="form-control form-control-sm qty-input" value="${qty}" required placeholder="0" oninput="recalc()"></td>
        <td><input type="number" name="items[${rowIdx}][precio_unitario]" step="0.0001" min="0"
            class="form-control form-control-sm price-input" value="${price}" required placeholder="0.00" oninput="recalc()"></td>
        <td class="align-middle subtotal-cell font-weight-bold">S/ 0.00</td>
        <td class="align-middle text-center"><button type="button" class="btn btn-xs btn-danger btn-rm"><i class="fas fa-times"></i></button></td>`;
    tbody.appendChild(tr);
    rowIdx++;
    recalc();
}

document.getElementById('btn-add-item').addEventListener('click', () => addRow());

document.getElementById('items-body').addEventListener('click', e => {
    if (e.target.closest('.btn-rm')) { e.target.closest('.item-row').remove(); recalc(); }
});

function recalc() {
    let sub = 0;
    document.querySelectorAll('.item-row').forEach(r => {
        const q  = parseFloat(r.querySelector('.qty-input').value)   || 0;
        const p  = parseFloat(r.querySelector('.price-input').value) || 0;
        const s  = q * p;
        r.querySelector('.subtotal-cell').textContent = 'S/ ' + s.toFixed(2);
        sub += s;
    });
    const igv   = sub * 0.18;
    const total = sub + igv;
    document.getElementById('total-subtotal').textContent = 'S/ ' + sub.toFixed(2);
    document.getElementById('total-igv').textContent      = 'S/ ' + igv.toFixed(2);
    document.getElementById('total-general').textContent  = 'S/ ' + total.toFixed(2);
}

function cargarItemsRequerimiento() {
    const opt = document.getElementById('req_sel').options[document.getElementById('req_sel').selectedIndex];
    if (!opt.dataset.items) return;
    const items = JSON.parse(opt.dataset.items);
    document.getElementById('items-body').innerHTML = '';
    rowIdx = 0;
    items.forEach(i => addRow(i.nombre, i.producto_id, i.cantidad, ''));
    if (items.length === 0) addRow();
}

addRow(); // start with 1 empty row
</script>
@endpush

@endsection