@extends('layouts.app')
@section('title', 'Nueva Orden de Compra')
@section('page-title', 'Nueva Orden de Compra')
@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('logistica.dashboard') }}">Logística</a></li>
    <li class="breadcrumb-item"><a href="{{ route('logistica.ordenes-compra.index') }}">Órdenes de Compra</a></li>
    <li class="breadcrumb-item active">Nueva</li>
@endsection
@section('content')

@if($cotizacion)
<div class="alert alert-info alert-dismissible fade show py-2 mb-3">
    <i class="fas fa-link mr-1"></i>
    Generando OC desde <strong>Cotización {{ $cotizacion->numero }}</strong>
    — Proveedor: <strong>{{ $cotizacion->proveedor->razon_social ?? '—' }}</strong>
    | Total: <strong>S/. {{ number_format($cotizacion->total, 2) }}</strong>
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>
@endif

<form method="POST" action="{{ route('logistica.ordenes-compra.store') }}" id="formOC">
@csrf

<div class="card">
    <div class="card-header">
        <h3 class="card-title"><i class="fas fa-plus mr-2"></i>Nueva Orden de Compra</h3>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-md-5">
                <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', $cotizacion?->proveedor_id) == $prov->id ? 'selected' : '' }}>
                                {{ $prov->ruc }} — {{ $prov->razon_social }}
                            </option>
                        @endforeach
                    </select>
                    @error('proveedor_id')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label>Fecha de Pedido <span class="text-danger">*</span></label>
                    <input type="date" name="fecha_pedido"
                        class="form-control @error('fecha_pedido') is-invalid @enderror"
                        value="{{ old('fecha_pedido', date('Y-m-d')) }}"
                        required>
                    @error('fecha_pedido')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
            <div class="col-md-3">
                <div class="form-group">
                    <label>Fecha Entrega Esperada</label>
                    <input type="date" name="fecha_entrega_esperada"
                        class="form-control"
                        value="{{ old('fecha_entrega_esperada') }}">
                </div>
            </div>
            <div class="col-md-12">
                <div class="form-group">
                    <label>Observaciones</label>
                    <textarea name="observaciones" class="form-control" rows="2"
                        placeholder="Observaciones generales de la orden...">{{ old('observaciones') }}</textarea>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <h3 class="card-title mb-0"><i class="fas fa-list mr-2"></i>Ítems de la Orden</h3>
        <button type="button" id="btnAgregarItem" class="btn btn-light btn-sm">
            <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:35%">Producto</th>
                        <th style="width:15%">Cantidad</th>
                        <th style="width:15%">Precio Unit. (S/.)</th>
                        <th style="width:15%">Subtotal (S/.)</th>
                        <th style="width:15%">Observación</th>
                        <th style="width:5%"></th>
                    </tr>
                </thead>
                <tbody id="itemsBody">
                    {{-- Las filas se generan por JS --}}
                </tbody>
                <tfoot>
                    <tr class="table-light">
                        <td colspan="3" class="text-right font-weight-bold">Subtotal:</td>
                        <td id="totalSubtotal" class="font-weight-bold">S/. 0.00</td>
                        <td colspan="2"></td>
                    </tr>
                    <tr class="table-light">
                        <td colspan="3" class="text-right">IGV (18%):</td>
                        <td id="totalIgv">S/. 0.00</td>
                        <td colspan="2"></td>
                    </tr>
                    <tr class="table-success">
                        <td colspan="3" class="text-right font-weight-bold">TOTAL:</td>
                        <td id="totalFinal" class="font-weight-bold text-success">S/. 0.00</td>
                        <td colspan="2"></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    @error('items')
        <div class="alert alert-danger m-3">{{ $message }}</div>
    @enderror
</div>

<div class="card">
    <div class="card-body">
        <button type="submit" class="btn btn-primary">
            <i class="fas fa-save mr-1"></i>Guardar Orden de Compra
        </button>
        <a href="{{ route('logistica.ordenes-compra.index') }}" class="btn btn-secondary ml-2">
            <i class="fas fa-times mr-1"></i>Cancelar
        </a>
    </div>
</div>

</form>

@push('scripts')
<script>
(function () {
    var productos = {!! json_encode($productosJs) !!};
    @php
    $itemsFromCot = $cotizacion ? $cotizacion->items->map(function($i) {
        return [
            'producto_id' => $i->producto_id,
            'cantidad'    => (float) $i->cantidad,
            'precio'      => (float) $i->precio_unitario,
            'um'          => optional(optional($i->producto)->unidadMedida)->abreviatura ?? '',
        ];
    })->values()->toArray() : [];
    @endphp
    var initialItems = {!! json_encode($itemsFromCot) !!};
    let rowIndex = 0;

    function buildProductoOptions(selectedId) {
        return productos.map(function(p) {
            var sel = (selectedId == p.id) ? ' selected' : '';
            return '<option value="' + p.id + '" data-precio="' + p.precio + '" data-um="' + p.um + '"' + sel + '>'
                 + '[' + p.codigo + '] ' + p.nombre + ' (' + p.um + ')'
                 + '</option>';
        }).join('');
    }

    function addRow(data) {
        data = data || {};
        var i  = rowIndex++;
        var tr = document.createElement('tr');
        tr.dataset.idx = i;
        tr.innerHTML =
            '<td>'
            + '<select name="items[' + i + '][producto_id]" class="form-control form-control-sm select-producto" required>'
            + '<option value="">Seleccionar producto...</option>'
            + buildProductoOptions(data.producto_id || '')
            + '</select>'
            + '</td>'
            + '<td>'
            + '<div class="input-group input-group-sm">'
            + '<input type="number" name="items[' + i + '][cantidad]" class="form-control input-cantidad"'
            + ' value="' + (data.cantidad || '') + '" step="0.001" min="0.001" required>'
            + '<div class="input-group-append"><span class="input-group-text um-label">' + (data.um || '') + '</span></div>'
            + '</div>'
            + '</td>'
            + '<td>'
            + '<div class="input-group input-group-sm">'
            + '<div class="input-group-prepend"><span class="input-group-text">S/.</span></div>'
            + '<input type="number" name="items[' + i + '][precio_unitario]" class="form-control input-precio"'
            + ' value="' + (data.precio || '') + '" step="0.0001" min="0" required>'
            + '</div>'
            + '</td>'
            + '<td><span class="subtotal-item font-weight-bold">S/. 0.00</span></td>'
            + '<td>'
            + '<input type="text" name="items[' + i + '][observacion]" class="form-control form-control-sm"'
            + ' value="' + (data.observacion || '') + '" placeholder="Opcional">'
            + '</td>'
            + '<td class="text-center">'
            + '<button type="button" class="btn btn-xs btn-danger btn-remove-item" title="Eliminar fila">'
            + '<i class="fas fa-times"></i></button>'
            + '</td>';
        document.getElementById('itemsBody').appendChild(tr);
        recalcRow(tr);
        attachRowEvents(tr);
    }

    function recalcRow(tr) {
        var qty   = parseFloat(tr.querySelector('.input-cantidad').value) || 0;
        var price = parseFloat(tr.querySelector('.input-precio').value)   || 0;
        tr.querySelector('.subtotal-item').textContent = 'S/. ' + (qty * price).toFixed(2);
        recalcTotals();
    }

    function recalcTotals() {
        var subtotal = 0;
        document.querySelectorAll('.subtotal-item').forEach(function(el) {
            subtotal += parseFloat(el.textContent.replace('S/. ', '')) || 0;
        });
        var igv   = subtotal * 0.18;
        var total = subtotal + igv;
        document.getElementById('totalSubtotal').textContent = 'S/. ' + subtotal.toFixed(2);
        document.getElementById('totalIgv').textContent      = 'S/. ' + igv.toFixed(2);
        document.getElementById('totalFinal').textContent    = 'S/. ' + total.toFixed(2);
    }

    function attachRowEvents(tr) {
        tr.querySelector('.select-producto').addEventListener('change', function () {
            var opt   = this.options[this.selectedIndex];
            tr.querySelector('.input-precio').value        = opt.dataset.precio || '';
            tr.querySelector('.um-label').textContent      = opt.dataset.um     || '';
            recalcRow(tr);
        });
        tr.querySelector('.input-cantidad').addEventListener('input', function() { recalcRow(tr); });
        tr.querySelector('.input-precio').addEventListener('input',   function() { recalcRow(tr); });
        tr.querySelector('.btn-remove-item').addEventListener('click', function () {
            if (document.querySelectorAll('#itemsBody tr').length > 1) {
                tr.remove();
                recalcTotals();
            } else {
                alert('La orden debe tener al menos un ítem.');
            }
        });
    }

    document.getElementById('btnAgregarItem').addEventListener('click', function() { addRow(); });

    document.getElementById('formOC').addEventListener('submit', function (e) {
        if (document.querySelectorAll('#itemsBody tr').length === 0) {
            e.preventDefault();
            alert('Debe agregar al menos un ítem a la orden.');
        }
    });

    if (initialItems.length > 0) {
        initialItems.forEach(function(item) { addRow(item); });
    } else {
        addRow();
    }
})();
</script>
@endpush

@endsection