{{-- Diseño moderno (v3): nueva reserva en 4 pasos con el resumen siempre a la derecha.
     Mismos campos (name/id), validaciones y script que reservation/create; solo cambia la presentación. --}}
@extends('layout.main') @section('content')
@include('reservation._alerts')
<div class="v3-page">
    <a href="{{ route('reservations.index') }}" class="v3-back">← Reservas</a>
    <div class="v3-head">
        <div><h1>Nueva reserva</h1>
            <p class="v3-sub">Los productos reservados se separan del stock de la tienda. Los abonos quedan en la reserva y no generan factura.</p></div>
    </div>
    {!! Form::open(['route' => 'reservations.store', 'method' => 'post', 'id' => 'reservation-form']) !!}
    <input type="hidden" name="form_token" value="{{ $form_token }}">
    <div class="v3-cols">
        <div class="v3-main">
            <section class="v3-card" aria-label="Cliente">
                <h2>1 · Cliente</h2>
                <div class="row">
                    <div class="col-md-4 form-group">
                        <label><strong>Código del cliente</strong></label>
                        <input type="text" name="client_code" id="client_code" value="{{ old('client_code', request('client_code')) }}" maxlength="50" class="form-control text-uppercase" placeholder="Ej. MARIA23">
                        <small class="v3-muted">Para el live: basta el código.</small>
                    </div>
                    <div class="col-md-8 form-group">
                        <label><strong>Cliente</strong> <small>(opcional)</small></label>
                            @include('reservation._customer_picker', ['selected' => $selected_customer])
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4 form-group mb-0">
                        <label><strong>Tienda *</strong></label>
                        <select required name="warehouse_id" id="warehouse_id" class="form-control">
                            @if($warehouses->count() > 1)<option value="">Elige la tienda...</option>@endif
                            @foreach($warehouses as $w)
                            <option value="{{ $w->id }}" @if(old('warehouse_id', auth()->user()->warehouse_id) == $w->id) selected @endif>{{ $w->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4 form-group mb-0">
                        <label><strong>Responsable *</strong></label>
                        <select required name="user_id" id="user_id" class="form-control">
                            @foreach($responsables as $u)
                            <option value="{{ $u->id }}" data-warehouse="{{ $u->warehouse_id }}" @if(old('user_id', auth()->id()) == $u->id) selected @endif>{{ $u->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4 form-group mb-0">
                        <label><strong>Caja</strong> <small>(opcional)</small></label>
                        <select name="biller_id" id="biller_id" class="form-control">
                            <option value="" data-warehouse="">Sin caja</option>
                            @foreach($billers as $b)
                            <option value="{{ $b->id }}" data-warehouse="{{ $b->warehouse_id }}" @if(old('biller_id') == $b->id) selected @endif>{{ $b->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
            </section>

            <section class="v3-card" aria-label="Productos">
                <h2>2 · Productos</h2>
                <div class="row align-items-end">
                    <div class="col-md-7 form-group">
                        <label><strong>Agregar producto</strong> <small>(solo los que tienen stock en la tienda)</small></label>
                        <select id="product-select" class="selectpicker form-control" data-live-search="true" title="Elige primero la tienda..."></select>
                    </div>
                    <div class="col-md-2 form-group">
                        <label><strong>Cantidad</strong></label>
                        <input type="number" id="add-qty" value="1" min="1" step="any" class="form-control">
                    </div>
                    <div class="col-md-3 form-group"><button type="button" id="add-product" class="v3-btn v3-btn-primary w-100"><i class="fa fa-plus"></i> Agregar</button></div>
                </div>
                <div class="table-responsive">
                    <table class="table table-sm mb-0" id="items-table">
                        <thead><tr><th>Producto</th><th style="width:120px">Cantidad</th><th style="width:140px">Precio (con IVA)</th><th class="text-right" style="width:120px">Subtotal</th><th style="width:40px"></th></tr></thead>
                        <tbody></tbody>
                        <tfoot class="d-none"><tr><th colspan="3" class="text-right">Productos</th><th class="text-right" id="products-total">$0.00</th><th></th></tr>
                            <tr><th colspan="3" class="text-right">Envío</th><th class="text-right" id="shipping-total">$0.00</th><th></th></tr>
                            <tr><th colspan="3" class="text-right">TOTAL</th><th class="text-right" id="total">$0.00</th><th></th></tr></tfoot>
                    </table>
                </div>
            </section>

            <section class="v3-card" aria-label="Entrega">
                <h2>3 · Entrega</h2>
                <div class="row">
                    <div class="col-md-5 form-group mb-0">
                        <label><strong>Método de entrega</strong></label>
                        <select name="shipping_method" id="shipping_method" class="form-control">
                            <option value="">Por definir</option>
                            @foreach($metodos_envio as $m)
                            <option value="{{ $m }}" @if(old('shipping_method') == $m) selected @endif>{{ $m }}{{ isset($envios[$m]) ? ($envios[$m]['mode'] == 'retiro' ? ' — retiro $0' : ($envios[$m]['cost'] !== null ? ' — $' . number_format($envios[$m]['cost'], 2) : '')) : '' }}</option>
                            @endforeach
                        </select>
                        <input type="number" name="shipping_cost" id="shipping_cost" value="{{ old('shipping_cost') }}" min="0" step="0.01" class="form-control mt-2 d-none" placeholder="Costo de envío $">
                    </div>
                    <div class="col-md-7 form-group mb-0">
                        <label><strong>Nota</strong></label>
                        <input type="text" name="note" value="{{ old('note') }}" maxlength="1000" class="form-control" placeholder="Ej. talla, color, live del jueves">
                    </div>
                </div>
            </section>

            <section class="v3-card" aria-label="Primer abono">
                <h2>4 · Primer abono</h2>
                <div class="row">
                    <div class="col-md-4 form-group mb-0">
                        <label><strong>Abono inicial</strong></label>
                        <input type="number" name="abono" id="abono" value="{{ old('abono', 0) }}" min="0" step="0.01" class="form-control">
                    </div>
                    <div class="col-md-4 form-group mb-0">
                        <label><strong>Forma de pago</strong></label>
                        <select name="forma_pago" class="form-control">
                            @foreach($formas_pago as $code => $label)
                            <option value="{{ $code }}" @if(old('forma_pago') == $code) selected @endif>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-4 form-group mb-0">
                        <label><strong>Nota del abono</strong></label>
                        <input type="text" name="payment_note" value="{{ old('payment_note') }}" maxlength="191" class="form-control" placeholder="Ej. N° de transferencia">
                    </div>
                </div>
            </section>
        </div>

        <aside class="v3-side" aria-label="Resumen" style="position:sticky;top:84px">
            <div class="v3-card">
                <h2>Resumen</h2>
                <div class="v3-row"><span>Productos</span><span id="v3-products">$0.00</span></div>
                <div class="v3-row"><span>Envío</span><span id="v3-shipping">$0.00</span></div>
                <div class="v3-row"><span>Total</span><span id="v3-total">$0.00</span></div>
                <div class="v3-row"><span>Abono</span><span id="v3-abono" style="color:#16a34a;font-weight:700">$0.00</span></div>
                <div class="v3-row v3-row-total"><span>Saldo</span><span id="balance">$0.00</span></div>
                <p class="v3-muted mt-2 mb-3"><span id="plazo-info"></span></p>
                <button type="submit" id="save-btn" class="v3-btn v3-btn-green v3-btn-big w-100"><i class="fa fa-save"></i> Guardar reserva</button>
                <p class="v3-muted mt-3 mb-0">Si el cliente (o su código) ya tiene una reserva activa en esta tienda, lo nuevo se suma a esa reserva. Para reservar no hacen falta datos de facturación.</p>
            </div>
        </aside>
    </div>
    {!! Form::close() !!}
</div>
<script>
    // Copia los totales que calcula el script de siempre (#products-total, #shipping-total, #total) al resumen de la derecha.
    $(function () {
        var sync = function () {
            $('#v3-products').text($('#products-total').text());
            $('#v3-shipping').text($('#shipping-total').text());
            $('#v3-total').text($('#total').text());
            $('#v3-abono').text('$' + (parseFloat($('#abono').val()) || 0).toFixed(2));
        };
        new MutationObserver(sync).observe(document.getElementById('items-table'), { subtree: true, childList: true, characterData: true });
        $('#abono').on('input change', sync);
        sync();
    });
</script>
@include('reservation._new_customer_modal')

<script type="text/javascript">
    var products = {};
    var productsUrl = "{{ url('reservations/products') }}/";

    function money(n) { return '$' + (Math.round(n * 100) / 100).toFixed(2); }

    function recalc() {
        var total = 0;
        $('#items-table tbody tr').each(function() {
            var qty = parseFloat($(this).find('.qty').val()) || 0;
            var price = parseFloat($(this).find('.price').data('price')) || 0;
            var sub = Math.round(qty * price * 100) / 100;
            $(this).find('.sub').text(money(sub));
            total += sub;
        });
        $('#products-total').text(money(total));
        total += shippingCost();
        $('#shipping-total').text(money(shippingCost()));
        $('#total').text(money(total));
        var abono = parseFloat($('#abono').val()) || 0;
        $('#balance').text(money(total - abono));
        return total;
    }

    // Entrega: retiro = $0; envío = costo del catálogo, o el que se escribe si el catálogo no lo tiene.
    var envios = @json($envios, JSON_UNESCAPED_UNICODE);
    function shippingCost() {
        var e = envios[$('#shipping_method').val()];
        if (!e || e.mode == 'retiro') return 0;
        return parseFloat($('#shipping_cost').val()) || 0;
    }
    $('#shipping_method').on('change', function() {
        var e = envios[$(this).val()];
        // Envío: el costo del catálogo se llena solo y se puede cambiar.
        $('#shipping_cost').toggleClass('d-none', !e || e.mode == 'retiro').prop('required', !!e && e.mode != 'retiro');
        if (e && e.mode != 'retiro' && e.cost !== null && (this.dataset.touched || $('#shipping_cost').val() === '')) $('#shipping_cost').val(e.cost.toFixed(2));
        this.dataset.touched = 1;
        recalc();
    }).trigger('change');
    $('#shipping_cost').on('input', recalc);

    var currentUser = '{{ auth()->id() }}';
    var keepBiller = {{ old('form_token') ? 'true' : 'false' }}; // al volver de un error se respeta la caja elegida (aunque sea "Sin caja")
    function filterBillers() {
        var w = String($('#warehouse_id').val() || '');
        // Caja: solo las de la tienda elegida (o "Sin caja"). Por defecto, la primera caja de la tienda.
        var biller = $('#biller_id'), firstBiller = '';
        biller.find('option').each(function() {
            var v = String($(this).val()), ok = v === '' || String($(this).data('warehouse')) === w;
            $(this).toggle(ok).prop('disabled', !ok);
            if (ok && v !== '' && firstBiller === '') firstBiller = v;
        });
        if (biller.find('option:selected').prop('disabled') || (!biller.val() && !keepBiller)) biller.val(firstBiller);
        keepBiller = false;
        // Responsable: usuarios de la tienda, usuarios sin tienda fija y quien registra. Por defecto, quien registra.
        var user = $('#user_id');
        user.find('option').each(function() {
            var ow = String($(this).data('warehouse') || ''), ok = ow === w || ow === '' || String($(this).val()) === currentUser;
            $(this).toggle(ok).prop('disabled', !ok);
        });
        if (!user.val() || user.find('option:selected').prop('disabled')) user.val(currentUser);
    }

    // Opción del buscador de productos. Se busca por nombre y código; los tokens van sin comillas ni < > &
    // porque bootstrap-select los copia al HTML sin escapar.
    function productOption(p) {
        return $('<option>').val(p.id).attr('data-tokens', String(p.name + ' ' + p.code).replace(/["'<>&]/g, ' '))
            .text(p.name + ' — ' + p.code + ' — ' + money(p.price) + ' (stock: ' + p.stock + ')');
    }

    // Cambia el texto de ayuda del buscador de productos (bootstrap-select lo guarda en sus opciones).
    function setTitle(select, title) {
        if (select.data('selectpicker')) select.data('selectpicker').options.title = title;
        select.attr('title', title).selectpicker('refresh');
    }

    function loadProducts() {
        var w = $('#warehouse_id').val();
        filterBillers();
        $('#items-table tbody').empty();
        recalc();
        if (!w) { setTitle($('#product-select').html(''), 'Elige primero la tienda...'); return; }
        $.get(productsUrl + w, function(rows) {
            products = {};
            var select = $('#product-select').empty();
            rows.forEach(function(p) {
                products[p.id] = p;
                select.append(productOption(p));
            });
            setTitle(select, rows.length ? 'Busca por nombre o código...' : 'No hay productos con stock en esta tienda');
            // Si el guardado anterior no pasó (por ejemplo, fecha inválida), se vuelven a poner los productos.
            oldLines.forEach(function(line) { if (products[line[0]]) addRow(products[line[0]], parseFloat(line[1]) || 1); });
            oldLines = [];
            recalc();
        });
    }

    var oldLines = {!! json_encode(array_map(null, (array) old('product_id', []), (array) old('qty', []))) !!};

    function addRow(p, qty) {
        var existing = $('#items-table tbody tr[data-id="' + p.id + '"]');
        if (existing.length) {
            var input = existing.find('.qty');
            input.val((parseFloat(input.val()) || 0) + qty);
            return;
        }
        var name = $('<div>').text(p.name + ' (' + p.code + ')').html();
        $('#items-table tbody').append(
            '<tr data-id="' + p.id + '">' +
            '<td>' + name + '<input type="hidden" name="product_id[]" value="' + p.id + '"></td>' +
            '<td><input type="number" name="qty[]" class="form-control form-control-sm qty" value="' + qty + '" min="1" max="' + p.stock + '" step="any"></td>' +
            '<td class="price" data-price="' + p.price + '">' + money(p.price) + '</td>' +
            '<td class="text-right sub"></td>' +
            '<td><button type="button" class="btn btn-sm btn-danger remove">&times;</button></td></tr>');
    }

    // Plazo de pago de la tienda elegida (Reservas → Configuración).
    var plazos = @json($plazos);
    function showPlazo() {
        var days = plazos[$('#warehouse_id').val()];
        if (!days) { $('#plazo-info').text(''); return; }
        var due = new Date(); due.setDate(due.getDate() + days);
        $('#plazo-info').html('Plazo de pago: <strong>' + days + ' días</strong> · vence el <strong>' + due.toLocaleDateString('es-EC') + '</strong>');
    }
    $('#warehouse_id').on('change', loadProducts).on('change', showPlazo);
    if ($('#warehouse_id').val()) loadProducts(); else filterBillers();
    showPlazo();

    $('#add-product').on('click', function() {
        var p = products[$('#product-select').val()];
        var qty = parseFloat($('#add-qty').val()) || 0;
        if (!p || qty <= 0) { alert('Elige un producto y una cantidad.'); return; }
        addRow(p, qty);
        $('#add-qty').val(1);
        $('#product-select').val('').selectpicker('refresh');
        recalc();
    });

    $('#items-table').on('input', '.qty', recalc);
    $('#items-table').on('click', '.remove', function() { $(this).closest('tr').remove(); recalc(); });
    $('#abono').on('input', recalc);

    $('#reservation-form').on('submit', function(e) {
        var total = recalc();
        var abono = parseFloat($('#abono').val()) || 0;
        if (!$('#items-table tbody tr').length) { alert('Agrega al menos un producto.'); e.preventDefault(); return; }
        if (!$.trim($('#client_code').val()) && !$('#customer_id').val()) { alert('Escribe el código del cliente o elige un cliente.'); e.preventDefault(); return; }
        if (abono > total) { alert('El abono no puede ser mayor al total.'); e.preventDefault(); return; }
        var msg = '¿Guardar la reserva por ' + money(total) + '?';
        if (abono > 0) msg += '\nAbono inicial: ' + money(abono) + ' (no genera factura).';
        if (!confirm(msg)) { e.preventDefault(); return; }
        // Evita guardar dos veces por doble clic.
        $('#save-btn').prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Guardando...');
    });
</script>
@endsection