@extends('layouts.app')

@section('title', 'Nuevo Pedido')

@section('content')
    <div class="max-w-5xl mx-auto" x-data="orderForm()">

        <!-- Header -->
        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
            <div>
                <h2
                    class="text-3xl font-bold bg-gradient-to-r from-slate-900 to-slate-700 dark:from-white dark:to-slate-300 bg-clip-text text-transparent">
                    Crear Nuevo Pedido
                </h2>
                <p class="text-slate-500 dark:text-slate-400 mt-1 font-medium">Registre una nueva orden de venta para sus
                    clientes</p>
            </div>
            <a href="{{ route('pedidos.index') }}"
                class="px-5 py-2.5 rounded-xl border border-slate-200 dark:border-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-800 transition font-bold shadow-sm flex items-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                </svg>
                Cancelar
            </a>
        </div>

        @if($errors->any())
            <div
                class="glass-card-premium border-l-4 border-l-red-500 bg-red-50/90 dark:bg-red-900/10 p-4 mb-6 animate-pulse-soft">
                <div class="flex items-start gap-3">
                    <svg class="w-6 h-6 text-red-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <div>
                        <h4 class="font-bold text-red-700 dark:text-red-400">Por favor corrija los siguientes errores:</h4>
                        <ul class="list-disc pl-5 mt-1 text-sm text-red-600 dark:text-red-300">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        @endif

        <form action="{{ route('pedidos.store') }}" method="POST" class="space-y-8" @submit.prevent="submitForm">
            @csrf

            <!-- Detalles Principales -->
            <div class="glass-card-premium p-8 relative overflow-hidden">
                <div
                    class="absolute top-0 right-0 w-64 h-64 bg-brand-orange/5 rounded-full blur-3xl -mr-32 -mt-32 pointer-events-none">
                </div>

                <h3 class="flex items-center gap-2 text-xl font-bold text-slate-800 dark:text-white mb-6">
                    <span class="w-8 h-8 rounded-lg bg-brand-orange/10 flex items-center justify-center text-brand-orange">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                        </svg>
                    </span>
                    Información del Cliente
                </h3>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
                    <!-- Selector Cliente -->
                    <div class="space-y-2">
                        <label class="block text-sm font-bold text-slate-700 dark:text-slate-300">Cliente</label>
                        <div class="relative">
                            <select name="cliente_id" required x-model="clienteId" @change="onClienteChange" class="input-premium w-full pl-10 h-12">
                                <option value="">Seleccione un cliente...</option>
                                @foreach($clientes as $cliente)
                                    <option value="{{ $cliente->id }}">{{ $cliente->nombre_completo ?? $cliente->nombre }}
                                    </option>
                                @endforeach
                            </select>
                            <svg class="w-5 h-5 text-slate-400 absolute left-3 top-3.5 pointer-events-none" fill="none"
                                stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                            </svg>
                        </div>
                        <div class="flex items-center gap-2 mt-1">
                            <p class="text-xs text-slate-400 pl-1">¿No existe? <a href="{{ route('clientes.index') }}"
                                    class="text-brand-orange hover:underline font-bold">Crear Cliente</a></p>
                            
                            <template x-if="clienteInfo?.es_recurrente">
                                <span class="px-2 py-0.5 bg-indigo-100 text-indigo-600 text-[10px] font-black uppercase rounded-lg animate-pulse-soft">
                                    Cliente Recurrente
                                </span>
                            </template>
                            <template x-if="clienteInfo?.has_plantilla">
                                <span class="px-2 py-0.5 bg-emerald-100 text-emerald-600 text-[10px] font-black uppercase rounded-lg">
                                    Con Plantilla
                                </span>
                            </template>
                        </div>
                    </div>

                    <!-- Selector Dirección -->
                    <div class="space-y-2" x-show="clienteId">
                        <label class="block text-sm font-bold text-slate-700 dark:text-slate-300">Dirección de Entrega</label>
                        <div class="relative">
                            <select name="direccion_id" required class="input-premium w-full pl-10 h-12">
                                <template x-for="addr in addresses" :key="addr.id">
                                    <option :value="addr.id" :selected="addr.es_principal" x-text="`${addr.direccion}${addr.detalles ? ' - ' + addr.detalles : ''} (${addr.barrio})`"></option>
                                </template>
                                <option value="" x-show="addresses.length === 0">No hay direcciones registradas...</option>
                            </select>
                            <svg class="w-5 h-5 text-slate-400 absolute left-3 top-3.5 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                            </svg>
                        </div>
                    </div>

                    <!-- Fecha de Entrega -->
                    <div class="space-y-2">
                        <label class="block text-sm font-bold text-slate-700 dark:text-slate-300">Fecha de Entrega</label>
                        <div class="relative">
                            <input type="date" name="fecha_entrega" value="{{ date('Y-m-d') }}" required
                                min="{{ date('Y-m-d') }}"
                                class="input-premium w-full pl-10 h-12 text-slate-600 dark:text-slate-300">
                            <svg class="w-5 h-5 text-slate-400 absolute left-3 top-3.5 pointer-events-none" fill="none"
                                stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                        </div>
                    </div>

                    <!-- Checkbox Regalo -->
                    <div class="col-span-1 md:col-span-2">
                        <label
                            class="glass-card p-4 flex items-center gap-4 cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800/50 transition group border border-slate-200 dark:border-slate-700 rounded-xl">
                            <div class="relative flex items-center">
                                <input type="checkbox" name="es_regalo" value="1"
                                    class="w-5 h-5 rounded text-berry-red focus:ring-berry-red/30 bg-white dark:bg-slate-900 border-slate-300 dark:border-slate-600 transition">
                            </div>
                            <div>
                                <span
                                    class="block font-bold text-slate-700 dark:text-slate-200 group-hover:text-berry-red transition">¿Es
                                    para Regalo?</span>
                                <span class="text-xs text-slate-500 font-medium">Se incluirá una tarjeta y empaque especial
                                    sin costo adicional.</span>
                            </div>
                            <div class="ml-auto text-2xl group-hover:scale-125 transition duration-300">🎁</div>
                        </label>
                    </div>

                    <!-- Observaciones -->
                    <div class="col-span-1 md:col-span-2 space-y-2">
                        <label class="block text-sm font-bold text-slate-700 dark:text-slate-300">Observaciones
                            (Opcional)</label>
                        <textarea name="observacion" rows="2" class="input-premium w-full p-4"
                            placeholder="Instrucciones especiales para entrega, empaquetado, etc..."></textarea>
                    </div>
                </div>
            </div>

            <!-- Selección de Productos -->
            <div class="glass-card-premium p-8 relative overflow-hidden">
                <div
                    class="absolute top-0 left-0 w-64 h-64 bg-fresh-green/5 rounded-full blur-3xl -ml-32 -mt-32 pointer-events-none">
                </div>

                <div class="flex flex-col md:flex-row justify-between items-end md:items-center gap-4 mb-6">
                    <h3 class="flex items-center gap-2 text-xl font-bold text-slate-800 dark:text-white">
                        <span
                            class="w-8 h-8 rounded-lg bg-fresh-green/10 flex items-center justify-center text-fresh-green">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" />
                            </svg>
                        </span>
                        Detalle del Pedido
                    </h3>

                    <button type="button" @click="addProduct()"
                        class="px-4 py-2 bg-fresh-green/10 text-fresh-green rounded-lg font-bold hover:bg-fresh-green hover:text-white transition flex items-center gap-2 text-sm shadow-sm ring-1 ring-fresh-green/20">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                        </svg>
                        Agregar Producto
                    </button>
                </div>

                <div class="overflow-hidden rounded-2xl border border-slate-200 dark:border-slate-700/50 shadow-sm">
                    <table class="w-full">
                        <thead class="bg-slate-50/50 dark:bg-slate-800/50 border-b border-slate-200 dark:border-slate-700">
                            <tr>
                                <th class="px-6 py-4 text-left text-xs font-bold text-slate-500 uppercase tracking-wider">
                                    Producto</th>
                                <th
                                    class="px-6 py-4 text-center text-xs font-bold text-slate-500 uppercase tracking-wider w-32">
                                    Cant.</th>
                                <th
                                    class="px-6 py-4 text-right text-xs font-bold text-slate-500 uppercase tracking-wider w-40">
                                    Precio</th>
                                <th
                                    class="px-6 py-4 text-right text-xs font-bold text-slate-500 uppercase tracking-wider w-40">
                                    Total</th>
                                <th class="px-6 py-4 w-16"></th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 dark:divide-slate-700/50 bg-white dark:bg-slate-900/40">
                            <template x-for="(row, index) in rows" :key="index">
                                <tr class="hover:bg-slate-50/50 dark:hover:bg-slate-800/50 transition group">
                                    <td class="px-6 py-4">
                                        <!-- Custom Select with Search handled by Alpine -->
                                        <div class="relative">
                                            <!-- Hidden input to submit the ID properly -->
                                            <input type="hidden" :name="`productos[${index}][id]`" x-model="row.id">

                                            <!-- Simple Select for now (can be upgraded to Searchable Dropdown if requested) -->
                                            <select x-model="row.id" @change="updateRow(index)" required
                                                class="input-premium w-full py-2 text-sm pl-9">
                                                <option value="">Seleccione un producto...</option>
                                                <template x-for="prod in products" :key="prod.id">
                                                    <option :value="prod.id"
                                                        x-text="`${prod.icono || ''} ${prod.nombre} (Stock: ${prod.stock_actual})`">
                                                    </option>
                                                </template>
                                            </select>

                                            <!-- Icon Decoration -->
                                            <div class="absolute left-3 top-2.5 text-lg pointer-events-none">
                                                <span x-text="getRowIcon(row.id) || '📦'"></span>
                                            </div>
                                        </div>
                                    </td>
                                    <td class="px-6 py-4">
                                        <div class="relative">
                                            <input type="number" :name="`productos[${index}][cantidad]`"
                                                x-model="row.cantidad" min="1" required
                                                class="input-premium w-full text-center font-bold text-slate-700 dark:text-slate-200">
                                        </div>
                                    </td>
                                    <td class="px-6 py-4 text-right">
                                        <div class="text-xs text-slate-400">Unitario</div>
                                        <div class="font-medium text-slate-600 dark:text-slate-300">$<span
                                                x-text="formatNumber(row.price)"></span></div>
                                    </td>
                                    <td class="px-6 py-4 text-right">
                                        <div class="text-xs text-slate-400">Subtotal</div>
                                        <div class="font-bold text-slate-800 dark:text-white">$<span
                                                x-text="formatNumber(row.price * row.cantidad)"></span></div>
                                    </td>
                                    <td class="px-6 py-4 text-center">
                                        <button type="button" @click="removeRow(index)"
                                            class="w-8 h-8 rounded-full flex items-center justify-center text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition opacity-0 group-hover:opacity-100"
                                            title="Eliminar línea">
                                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <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>
                                    </td>
                                </tr>
                            </template>
                        </tbody>
                        <tfoot class="bg-slate-50 dark:bg-slate-800/30 border-t border-slate-200 dark:border-slate-700">
                            <tr>
                                <td colspan="3" class="px-6 py-4 text-right">
                                    <span class="text-sm font-bold text-slate-500 uppercase tracking-widest">Total
                                        Estimado</span>
                                </td>
                                <td class="px-6 py-4 text-right">
                                    <span
                                        class="text-2xl font-black bg-gradient-to-r from-berry-red to-pink-600 bg-clip-text text-transparent">
                                        $<span x-text="formatNumber(total)"></span>
                                    </span>
                                </td>
                                <td></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>

            <!-- Footer Actions -->
            <div class="flex justify-end gap-4 pt-4">
                <a href="{{ route('pedidos.index') }}"
                    class="px-6 py-3 rounded-xl font-bold text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 transition">
                    Cancelar
                </a>
                <button type="submit"
                    class="px-8 py-3 bg-gradient-to-r from-berry-red to-pink-600 text-white rounded-xl font-bold shadow-lg shadow-berry-red/30 hover:shadow-berry-red/50 hover:scale-105 transition transform flex items-center gap-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                    Confirmar Pedido
                </button>
            </div>
        </form>
    </div>

    <script>
        function orderForm() {
            return {
                products: @json($productos),
                clienteInfo: null,
                clienteId: '',
                addresses: [],
                rows: [
                    { id: '', cantidad: 1, price: 0 }
                ],
                init() {
                    console.log("Productos disponibles:", this.products);
                },
                async onClienteChange() {
                    if (!this.clienteId) {
                        this.addresses = [];
                        this.clienteInfo = null;
                        return;
                    }

                    // 1. Cargar Info del Cliente (Recurrencia, etc)
                    try {
                        const rInfo = await fetch(`{{ url('clientes') }}/${this.clienteId}/info`);
                        if (rInfo.ok) {
                            this.clienteInfo = await rInfo.json();
                        }
                    } catch (e) { console.error("Error cargando info cliente:", e); }

                    // 2. Cargar Direcciones
                    try {
                        const rAddr = await fetch(`{{ url('clientes') }}/${this.clienteId}/addresses`);
                        if (rAddr.ok) {
                            this.addresses = await rAddr.json();
                        }
                    } catch (e) { console.error("Error cargando direcciones:", e); }

                    // 3. Cargar Plantilla si existe y el usuario acepta
                    if (this.clienteInfo?.has_plantilla) {
                        window.dispatchEvent(new CustomEvent('open-confirm', {
                            detail: {
                                title: 'Cargar Plantilla Recurrente',
                                message: 'Este cliente tiene una plantilla de pedidos recurrente. ¿Desea cargar los productos automáticamente?',
                                type: 'info',
                                callback: async () => {
                                    try {
                                        const rPlant = await fetch(`{{ url('clientes') }}/${this.clienteId}/plantilla`);
                                        if (rPlant.ok) {
                                            const plantilla = await rPlant.json();
                                            if (plantilla && plantilla.length > 0) {
                                                // Limpiar filas si solo hay una vacía
                                                if (this.rows.length === 1 && !this.rows[0].id) {
                                                    this.rows = [];
                                                }
                                                
                                                plantilla.forEach(item => {
                                                    const prod = this.products.find(p => p.id == item.producto_id);
                                                    if (prod) {
                                                        this.rows.push({
                                                            id: item.producto_id,
                                                            cantidad: item.cantidad,
                                                            price: parseFloat(prod.precio_venta || 0)
                                                        });
                                                    }
                                                });

                                                window.dispatchEvent(new CustomEvent('notify', { 
                                                    detail: { title: 'Plantilla Cargada', message: `Se cargaron ${plantilla.length} productos.`, type: 'success' } 
                                                }));
                                            }
                                        }
                                    } catch (e) { console.error("Error cargando plantilla:", e); }
                                }
                            }
                        }));
                    }
                },
                addProduct() {
                    this.rows.push({ id: '', cantidad: 1, price: 0 });
                },
                removeRow(index) {
                    if (this.rows.length > 1) {
                        this.rows.splice(index, 1);
                    } else {
                        // Reset last row instead of empty/error
                        this.rows[0] = { id: '', cantidad: 1, price: 0 };
                    }
                },
                updateRow(index) {
                    const row = this.rows[index];
                    const product = this.products.find(p => p.id == row.id);
                    if (product) {
                        row.price = parseFloat(product.precio_venta || 0);
                    } else {
                        row.price = 0;
                    }
                },
                getRowIcon(id) {
                    if (!id) return '';
                    const product = this.products.find(p => p.id == id);
                    return product ? (product.icono || '📦') : '';
                },
                get total() {
                    return this.rows.reduce((sum, row) => sum + (row.price * row.cantidad), 0);
                },
                formatNumber(num) {
                    return new Intl.NumberFormat('es-CO').format(num);
                },
                submitForm(event) {
                    // Filter empty rows
                    const activeRows = this.rows.filter(r => r.id && r.cantidad > 0);

                    if (activeRows.length === 0) {
                        window.dispatchEvent(new CustomEvent('notify', { 
                            detail: { title: 'Error en Pedido', message: 'Debe seleccionar al menos un producto válido.', type: 'error' } 
                        }));
                        return;
                    }
                    event.target.submit();
                }
            }
        }
    </script>
@endsection