LauckCycles/resources/views/sales/create.blade.php

<x-layout title="Lauck - Nueva Venta">
    @push('styles')
    <style>
        /* Select2 adaptado al Tema 'Lauck' (Neutral + Neon Lime) */
        .select2-container--default .select2-selection--single {
            background-color: #262626 !important; /* neutral-800 */
            border-color: #404040 !important;     /* neutral-700 */
            color: white !important;
            height: 42px;
            display: flex;
            align-items: center;
            border-radius: 0.5rem; /* rounded-lg */
        }
        .select2-container--default .select2-selection--single .select2-selection__rendered { 
            color: white !important; 
            line-height: 42px; 
            padding-left: 12px;
        }
        .select2-dropdown { 
            background-color: #262626 !important; /* neutral-800 */
            border-color: #404040 !important;     /* neutral-700 */
            color: white !important; 
        }
        /* Color de resalto al pasar el mouse u opción seleccionada */
        .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable { 
            background-color: #ccff00 !important; /* neon-lime */
            color: #171717 !important; /* neutral-900 */
            font-weight: bold;
        }
        /* Ajuste del placeholder */
        .select2-container--default .select2-selection--single .select2-selection__placeholder {
            color: #9ca3af !important; /* gray-400 */
        }
    </style>
    @endpush

    <x-section-header subtitle="Punto de Venta" title="Nueva " highlight="Venta" />

    <div class="w-full max-w-5xl mx-auto bg-panel-bg border border-neutral-800 rounded-xl p-8 shadow-lg">

        @if(session('success'))
            <div class="bg-green-900/50 border border-green-500 text-green-300 px-4 py-3 rounded-lg mb-6 shadow-sm">
                {{ session('success') }}
            </div>
        @endif
        @if(session('error'))
            <div class="bg-red-900/50 border border-red-500 text-red-300 px-4 py-3 rounded-lg mb-6 shadow-sm">
                {{ session('error') }}
            </div>
        @endif
        @if($errors->any())
            <div class="bg-red-900/50 border border-red-500 text-red-300 px-4 py-3 rounded-lg mb-6 shadow-sm">
                <ul class="list-disc list-inside">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('sales.store') }}" method="POST">
            @csrf

            <div class="grid grid-cols-1 md:grid-cols-12 gap-6 mb-8 border-b border-neutral-800 pb-8">
                <div class="md:col-span-10">
                    <x-forms.label for="client_id" value="Cliente" />
                    <div class="relative">
                        <select name="client_id" class="w-full select2-basic">
                            <option value="">-- Consumidor Final (Anónimo) --</option>
                            @foreach($clients as $client)
                                <option value="{{ $client->id }}">{{ $client->name }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="md:col-span-2 flex items-end">
                    <a href="{{ route('clients.create', ['origin' => 'sales']) }}" target="_blank" class="bg-indigo-100 text-indigo-700 hover:bg-indigo-200 px-4 py-2 rounded-md font-bold flex items-center border border-indigo-200" title="Crear nuevo cliente">
                        +
                    </a>
                </div>
            </div>

            <div class="mb-8">
                <div class="flex justify-between items-end mb-4">
                    <x-forms.label value="Detalle de Productos" />
                    <div class="text-sm text-gray-400">
                        Total Items: <span class="text-white font-mono" id="item-count">1</span>
                    </div>
                </div>
                
                <div id="items-container" class="space-y-3">
                    
                    <div class="item-row grid grid-cols-1 md:grid-cols-12 gap-4 items-start bg-neutral-800/50 p-4 rounded-xl border border-neutral-800">
                        
                        <div class="md:col-span-6">
                            <label class="block text-gray-400 text-xs mb-1.5 uppercase tracking-wider font-semibold">Producto</label>
                            <select name="items[0][product_id]" class="w-full select2-product product-select">
                                <option value="" data-price="0" selected disabled>Buscar producto...</option>
                                @foreach($products as $product)
                                    <option value="{{ $product->id }}" data-price="{{ $product->price }}">
                                        {{ $product->sku }} - {{ $product->name }} (Stock: {{ $product->stock_quantity }})
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="md:col-span-2">
                            <label class="block text-gray-400 text-xs mb-1.5 uppercase tracking-wider font-semibold">Cant.</label>
                            <input type="number" name="items[0][quantity]" value="1" min="1" 
                                   class="quantity-input bg-neutral-800 border-neutral-700 text-white text-sm rounded-lg focus:ring-neon-lime focus:border-neon-lime block w-full p-2.5 h-[42px]">
                        </div>

                        <div class="md:col-span-3 text-right flex flex-col justify-center h-[42px] mt-6">
                            <span class="text-xs text-gray-500">Subtotal</span>
                            <span class="row-total text-lg font-bold text-neon-lime">$0.00</span>
                        </div>

                        <div class="md:col-span-1 flex items-end justify-end h-[42px] mt-6">
                            <button type="button" class="btn-remove text-neutral-500 hover:text-red-500 transition-colors p-2" title="Quitar item">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                                </svg>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="mt-4">
                    <button type="button" id="btn-add-row" class="inline-flex items-center text-neon-lime hover:text-[#b3e600] font-bold text-sm transition-colors">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
                        </svg>
                        Agregar otro producto
                    </button>
                </div>

                <div class="mt-5 flex justify-end items-center border-t border-neutral-700 pt-6">
                    <div class="text-right">
                        <span class="block text-gray-400 text-sm mb-1">Monto Total a Pagar</span>
                        <span id="grand-total" class="text-3xl font-bold text-white">$0.00</span>
                    </div>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-end border-t border-neutral-800 pt-6">
                
                <div>
                    <x-forms.label for="payment_method" value="Método de Pago" />
                    <select name="payment_method" class="bg-neutral-800 border-neutral-700 text-white text-sm rounded-lg focus:ring-neon-lime focus:border-neon-lime block w-full p-2.5">
                        <option value="Efectivo">Efectivo</option>
                        <option value="Tarjeta de Débito">Tarjeta de Débito</option>
                        <option value="Tarjeta de Crédito">Tarjeta de Crédito</option>
                        <option value="Transferencia">Transferencia</option>
                    </select>
                </div>

                <div class="flex justify-end gap-4">
                    <a href="{{ route('sales.create') }}" class="px-6 py-2.5 text-gray-400 hover:text-white font-medium text-sm transition-colors flex items-center">
                        Cancelar
                    </a>
                    <button type="submit" class="px-8 py-2.5 bg-neon-lime text-neutral-900 font-bold rounded-lg hover:bg-[#b3e600] transition-colors shadow-lg shadow-neon-lime/20 transform hover:scale-105">
                        Confirmar Venta
                    </button>
                </div>
            </div>

        </form>
    </div>

    <script type="module">
        let rowCount = 0;

        $(document).ready(function() {
            initSelect2();
            actualizarBloqueos(); // Bloqueo inicial

            // --- AGREGAR FILA ---
            $('#btn-add-row').click(function() {
                rowCount++;
                const container = $('#items-container');
                const firstRow = container.find('.item-row').first();

                $('.select2-product').select2('destroy'); // Destruir

                const newRow = firstRow.clone(); // Clonar

                initSelect2(); // Reactivar originales

                // Limpiar nueva fila
                newRow.find('input').val(1);
                newRow.find('.row-total').text('$0.00');
                
                // Actualizar atributos
                newRow.find('select').attr('name', `items[${rowCount}][product_id]`).val('');
                newRow.find('input').attr('name', `items[${rowCount}][quantity]`);

                // Desbloquear opciones en la nueva fila (vital)
                newRow.find('option').prop('disabled', false);

                container.append(newRow);
                initSelect2(); // Activar nueva
                actualizarBloqueos(); // Recalcular bloqueos
                actualizarContadorItems();
            });

            // --- ELIMINAR FILA ---
            $(document).on('click', '.btn-remove', function() {
                if ($('.item-row').length > 1) {
                    $(this).closest('.item-row').remove();
                    recalcularTodo();
                    actualizarBloqueos();
                    actualizarContadorItems();
                } else {
                    alert("Debe haber al menos un producto.");
                }
            });

            // --- EVENTOS ---
            $(document).on('select2:select input', '.product-select, .quantity-input', function() {
                let row = $(this).closest('.item-row');
                calcularFila(row);
                recalcularTodo();
                
                if ($(this).hasClass('product-select')) {
                    actualizarBloqueos();
                }
            });
        });

        // --- FUNCIONES ---
        function initSelect2() {
            $('.select2-basic').select2({ width: '100%' });
            $('.select2-product').select2({ 
                width: '100%', 
                placeholder: "Buscar producto...",
                language: { noResults: () => "Sin resultados" }
            });
        }

        function calcularFila(row) {
            let select = row.find('.product-select');
            let input = row.find('.quantity-input');
            let option = select.find(':selected');
            let price = parseFloat(option.data('price')) || 0;
            let qty = parseInt(input.val()) || 0;
            let subtotal = price * qty;
            row.find('.row-total').text('$' + subtotal.toFixed(2));
        }

        function recalcularTodo() {
            let grandTotal = 0;
            $('.item-row').each(function() {
                let row = $(this);
                let price = parseFloat(row.find('.product-select').find(':selected').data('price')) || 0;
                let qty = parseInt(row.find('.quantity-input').val()) || 0;
                grandTotal += (price * qty);
            });
            $('#grand-total').text('$' + grandTotal.toFixed(2));
        }

        function actualizarContadorItems() {
            $('#item-count').text($('.item-row').length);
        }

        function actualizarBloqueos() {
            let seleccionados = [];
            $('.product-select').each(function() {
                let valor = $(this).val();
                if (valor) seleccionados.push(valor);
            });

            $('.product-select').each(function() {
                let selectActual = $(this);
                let miValor = selectActual.val();
                selectActual.find('option').each(function() {
                    let opcion = $(this);
                    let valorOpcion = opcion.val();
                    if (!valorOpcion) return;

                    if (seleccionados.includes(valorOpcion) && valorOpcion != miValor) {
                        opcion.prop('disabled', true);
                    } else {
                        opcion.prop('disabled', false);
                    }
                });
            });
        }
    </script>
</x-layout>