@extends('layouts.app')

@section('title', 'Nueva Cotización — ' . \App\Models\Setting::get('app_name', 'TI Manager'))

@section('content')
<div class="animate-fadeIn" x-data="quoteForm()">
    
    <div class="page-header" style="margin-bottom: 24px;">
        <div style="display: flex; align-items: center; gap: 10px;">
            <a href="{{ route('quotes.index') }}" class="btn btn-ghost" style="padding: 8px; color: var(--text-muted);"><i class="ph ph-arrow-left" style="font-size: 1.5rem;"></i></a>
            <div>
                <h1 class="page-title" style="margin: 0;">Crear Nueva Cotización</h1>
                <p class="text-muted" style="margin-top: 4px; font-size: 0.95rem;">Rellena los datos para generar el documento formal.</p>
            </div>
        </div>
    </div>

    <form @submit.prevent="submitQuote" id="quoteForm">
        @csrf
        <div class="quote-grid">
            
            {{-- Columna Izquierda: Datos principales e items --}}
            <div style="display: flex; flex-direction: column; gap: 24px;">
                
                {{-- Cliente --}}
                <div class="card-glass" style="position: relative; z-index: 50;">
                    <h3 style="border-bottom: 1px solid rgba(0,0,0,0.06); padding-bottom: 10px; margin-bottom: 15px; display: flex; align-items: center; gap: 8px;">
                        <i class="ph ph-user-circle" style="color: var(--primary);"></i>
                        Datos del Cliente / Empresa
                    </h3>
                    
                    <div class="customer-grid">
                        <div style="position: relative;" @click.outside="showDropdown = false">
                            <label class="form-label" style="font-weight: 600;">Buscar Empresa Existente</label>
                            <div style="position: relative;">
                                <i class="ph ph-magnifying-glass" style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted);"></i>
                                <input type="text" x-model="searchQuery" @input="selectedIndex = -1" @focus="showDropdown = true" @keydown.arrow-down.prevent="navigateDropdown(1)" @keydown.arrow-up.prevent="navigateDropdown(-1)" @keydown.enter.prevent="selectHighlighted()" class="form-control" placeholder="Buscar..." style="width: 100%; padding: 10px 10px 10px 35px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                            </div>
                            
                            <div x-show="showDropdown && filteredCompanies.length > 0" style="position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); z-index: 100; max-height: 200px; overflow-y: auto; padding: 8px; margin-top: 4px;">
                                <template x-for="(comp, index) in filteredCompanies" :key="comp.id">
                                    <div @click="selectCompany(comp)" 
                                         :style="{ background: selectedIndex === index ? 'rgba(0,0,0,0.03)' : 'transparent' }"
                                         style="padding: 10px 15px; cursor: pointer; border-radius: var(--radius-sm); margin-bottom: 4px; transition: background 0.2s;" 
                                         @mouseover="selectedIndex = index"
                                         @mouseout="selectedIndex = -1">
                                        <div style="font-weight: 600;" x-text="comp.name"></div>
                                        <div style="font-size: 0.8rem; color: var(--text-muted);" x-text="'NIT: ' + (comp.nit || 'N/A')"></div>
                                    </div>
                                </template>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="form-label" style="font-weight: 600;">Nombre o Razón Social *</label>
                            <input type="text" x-model="customer.name" required class="form-control" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                        </div>
                        <div class="form-group">
                            <label class="form-label" style="font-weight: 600;">NIT / Documento</label>
                            <input type="text" x-model="customer.document" class="form-control" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                        </div>
                        <div class="form-group">
                            <label class="form-label" style="font-weight: 600;">Dirección</label>
                            <input type="text" x-model="customer.address" class="form-control" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                        </div>
                        <div class="form-group">
                            <label class="form-label" style="font-weight: 600;">Teléfono</label>
                            <input type="text" x-model="customer.phone" class="form-control" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                        </div>
                        <div class="form-group">
                            <label class="form-label" style="font-weight: 600;">Correo Electrónico</label>
                            <input type="email" x-model="customer.email" class="form-control" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                        </div>
                    </div>
                </div>

                {{-- Ítems de Cotización --}}
                <div class="card-glass">
                    <h3 style="border-bottom: 1px solid rgba(0,0,0,0.06); padding-bottom: 10px; margin-bottom: 15px; display: flex; align-items: center; gap: 8px;">
                        <i class="ph ph-list-numbers" style="color: var(--primary);"></i>
                        Productos / Servicios
                    </h3>
                    
                    <div style="display: flex; flex-direction: column; gap: 15px; margin-bottom: 15px;">
                        <template x-for="(item, index) in items" :key="index">
                            <div class="item-row" style="background: rgba(0,0,0,0.02); padding: 15px; border-radius: var(--radius-md); border: 1px solid rgba(0,0,0,0.05);">
                                <div style="flex: 2; position: relative;" @click.outside="item.showDropdown = false">
                                    <label class="form-label" style="font-size: 0.8rem; font-weight: 600;">Descripción</label>
                                    <input type="text" x-model="item.description" 
                                           @input="item.selectedIndex = -1; filterProducts(item)" 
                                           @focus="item.showDropdown = true; filterProducts(item)" 
                                           @keydown.arrow-down.prevent="navigateProductDropdown(item, 1)" 
                                           @keydown.arrow-up.prevent="navigateProductDropdown(item, -1)" 
                                           @keydown.enter.prevent="selectHighlightedProduct(item)" 
                                           required class="form-control" placeholder="Ej: Mantenimiento preventivo PC..." style="width: 100%; padding: 8px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                                           
                                    <div x-show="item.showDropdown && item.filteredProducts && item.filteredProducts.length > 0" style="position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); z-index: 100; max-height: 200px; overflow-y: auto; padding: 8px; margin-top: 4px;">
                                        <template x-for="(prod, pIndex) in item.filteredProducts" :key="prod.id">
                                            <div @click="selectProduct(item, prod)" 
                                                 :style="{ background: item.selectedIndex === pIndex ? 'rgba(0,0,0,0.03)' : 'transparent' }"
                                                 style="padding: 10px 15px; cursor: pointer; border-radius: var(--radius-sm); margin-bottom: 4px; transition: background 0.2s;" 
                                                 @mouseover="item.selectedIndex = pIndex"
                                                 @mouseout="item.selectedIndex = -1">
                                                <div style="font-weight: 600;" x-text="prod.name"></div>
                                                <div style="font-size: 0.8rem; color: var(--text-muted); display: flex; justify-content: space-between;">
                                                    <span></span>
                                                    <strong style="color: var(--primary);" x-text="'$' + formatMoney(prod.price)"></strong>
                                                </div>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                                <div style="flex: 1; max-width: 100px;">
                                    <label class="form-label" style="font-size: 0.8rem; font-weight: 600;">Cant.</label>
                                    <input type="number" x-model.number="item.quantity" min="1" step="1" required class="form-control" style="width: 100%; padding: 8px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                                </div>
                                <div style="flex: 1; max-width: 150px;">
                                    <label class="form-label" style="font-size: 0.8rem; font-weight: 600;">Precio Unit.</label>
                                    <input type="number" x-model.number="item.unit_price" min="0" step="1" required class="form-control" style="width: 100%; padding: 8px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                                </div>
                                <div style="flex: 1; max-width: 150px;">
                                    <label class="form-label" style="font-size: 0.8rem; font-weight: 600;">Total</label>
                                    <div style="padding: 8px; font-weight: 600; font-family: monospace; font-size: 1.1rem; background: #fff; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.05); text-align: right;">
                                        $ <span x-text="formatMoney(item.quantity * item.unit_price)"></span>
                                    </div>
                                </div>
                                <div style="padding-top: 24px;">
                                    <button type="button" @click="removeItem(index)" class="btn btn-ghost text-danger" style="padding: 8px;" title="Eliminar Fila">
                                        <i class="ph ph-trash" style="font-size: 1.2rem;"></i>
                                    </button>
                                </div>
                            </div>
                        </template>
                    </div>

                    <button type="button" @click="addItem" class="btn btn-outline" style="border: 1px dashed var(--primary); color: var(--primary); background: transparent; width: 100%; padding: 12px; font-weight: 600; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 8px; border-radius: var(--radius-md);">
                        <i class="ph ph-plus"></i> Agregar Fila
                    </button>
                </div>
            </div>

            {{-- Columna Derecha: Configuración, Totales y Guardar --}}
            <div style="display: flex; flex-direction: column; gap: 24px;">
                
                {{-- Resumen de Totales --}}
                <div class="card-glass" style="background: var(--primary-light);">
                    <h3 style="margin-top: 0; margin-bottom: 15px; color: var(--primary); display: flex; align-items: center; gap: 8px;">
                        <i class="ph ph-calculator"></i>
                        Resumen Total
                    </h3>
                    
                    <div style="display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 1.05rem;">
                        <span style="color: var(--text-secondary);">Subtotal:</span>
                        <span style="font-weight: 600; font-family: monospace;">$<span x-text="formatMoney(subtotal)"></span></span>
                    </div>

                    <template x-if="enableTaxes">
                        <div style="display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 1.05rem;">
                            <span style="color: var(--text-secondary);">Impuesto (<span x-text="taxPercentage"></span>%):</span>
                            <span style="font-weight: 600; font-family: monospace;">$<span x-text="formatMoney(taxAmount)"></span></span>
                        </div>
                    </template>

                    <div style="display: flex; justify-content: space-between; margin-top: 15px; padding-top: 15px; border-top: 1px dashed rgba(0,0,0,0.1); font-size: 1.4rem;">
                        <strong style="color: var(--primary);">Total:</strong>
                        <strong style="font-family: monospace; color: var(--primary);">$<span x-text="formatMoney(total)"></span></strong>
                    </div>
                </div>

                {{-- Opciones del Documento --}}
                <div class="card-glass">
                    <h3 style="border-bottom: 1px solid rgba(0,0,0,0.06); padding-bottom: 10px; margin-bottom: 15px; display: flex; align-items: center; gap: 8px;">
                        <i class="ph ph-gear"></i>
                        Opciones del Documento
                    </h3>
                    
                    <div class="form-group" style="margin-bottom: 15px;">
                        <label class="form-label" style="font-weight: 600;">Cuenta Bancaria (Opcional)</label>
                        <select x-model="bankAccountId" class="form-control" style="width: 100%; padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);">
                            <option value="">No mostrar cuenta bancaria</option>
                            <option value="all">Mostrar TODAS las cuentas</option>
                            @foreach($bankAccounts as $bank)
                                <option value="{{ $bank->id }}">{{ $bank->bank_name }} - {{ $bank->account_number }}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <button type="submit" class="btn fab-save" :disabled="isSubmitting" style="z-index: 1000; background: var(--primary); color: #fff; border: none; font-family: inherit; font-size: 1.1rem; font-weight: 600; cursor: pointer; display: flex; justify-content: center; align-items: center; gap: 10px; transition: all 0.3s ease; box-shadow: 0 10px 30px rgba(145, 200, 73, 0.5);">
                    <i class="ph ph-check-circle" style="font-size: 1.4rem;" x-show="!isSubmitting"></i>
                    <i class="ph ph-spinner ph-spin" style="font-size: 1.4rem;" x-show="isSubmitting" style="display: none;"></i>
                    <span class="fab-text" x-text="isSubmitting ? 'Guardando...' : 'Generar Cotización'"></span>
                </button>
            </div>
        </div>
    </form>
</div>

@push('scripts')
<style>
    .quote-grid {
        display: grid;
        grid-template-columns: 1fr 350px;
        gap: 24px;
        align-items: start;
    }
    .customer-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
    .item-row {
        display: flex;
        gap: 10px;
        align-items: flex-start;
    }
    .fab-save {
        position: fixed;
        bottom: 40px;
        right: 40px;
        padding: 15px 35px;
        border-radius: 50px;
    }
    .fab-text {
        display: inline;
    }
    
    @media (max-width: 900px) {
        .quote-grid {
            grid-template-columns: 1fr;
        }
        .customer-grid {
            grid-template-columns: 1fr;
        }
        .item-row {
            flex-direction: column;
        }
        .item-row > div {
            width: 100% !important;
            max-width: none !important;
            flex: 1 1 100% !important;
        }
        .fab-save {
            bottom: 90px;
            right: 20px;
            padding: 0;
            width: 60px;
            height: 60px;
            border-radius: 50%;
        }
        .fab-text {
            display: none !important;
        }
        .fab-save i {
            font-size: 1.8rem !important;
            margin: 0;
        }
    }
</style>
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('quoteForm', () => ({
            companies: @json($companies),
            products: @json($products),
            searchQuery: '',
            showDropdown: false,
            selectedIndex: -1,
            
            companyId: null,
            customer: {
                name: '',
                document: '',
                address: '',
                phone: '',
                email: ''
            },
            
            items: [
                { description: '', quantity: 1, unit_price: 0, showDropdown: false, selectedIndex: -1, filteredProducts: [] }
            ],
            
            enableTaxes: {{ $enableTaxes ? 'true' : 'false' }},
            taxPercentage: {{ $taxPercentage }},
            
            bankAccountId: 'all',
            
            isSubmitting: false,

            get filteredCompanies() {
                const query = this.searchQuery.trim().toLowerCase();
                if (query.length === 0) return this.companies.slice(0, 6);
                
                return this.companies.filter(c => 
                    c.name.toLowerCase().includes(query) || 
                    (c.nit && c.nit.toLowerCase().includes(query))
                ).slice(0, 6); // Limitar a 6 resultados para no saturar
            },

            selectCompany(comp) {
                this.companyId = comp.id;
                this.customer.name = comp.name;
                this.customer.document = comp.nit || '';
                this.customer.address = comp.address || '';
                this.customer.phone = comp.phone || '';
                this.customer.email = comp.email || '';
                this.searchQuery = comp.name;
                this.showDropdown = false;
                this.selectedIndex = -1;
            },

            navigateDropdown(direction) {
                if (!this.showDropdown) {
                    this.showDropdown = true;
                    return;
                }
                const max = this.filteredCompanies.length - 1;
                this.selectedIndex += direction;
                if (this.selectedIndex < 0) this.selectedIndex = 0;
                if (this.selectedIndex > max) this.selectedIndex = max;
            },

            selectHighlighted() {
                if (this.showDropdown && this.selectedIndex >= 0 && this.filteredCompanies[this.selectedIndex]) {
                    this.selectCompany(this.filteredCompanies[this.selectedIndex]);
                }
            },

            addItem() {
                this.items.push({ description: '', quantity: 1, unit_price: 0, showDropdown: false, selectedIndex: -1, filteredProducts: [] });
            },

            removeItem(index) {
                if(this.items.length > 1) {
                    this.items.splice(index, 1);
                } else {
                    Swal.fire({ title: 'Atención', text: "Debe haber al menos un ítem.", icon: 'warning', confirmButtonText: 'Entendido' });
                }
            },

            filterProducts(item) {
                const query = item.description.trim().toLowerCase();
                if (query.length === 0) {
                    item.filteredProducts = this.products.slice(0, 6);
                    return;
                }
                item.filteredProducts = this.products.filter(p => 
                    p.name.toLowerCase().includes(query)
                ).slice(0, 6);
            },

            selectProduct(item, prod) {
                item.description = prod.name;
                item.unit_price = Math.round(prod.price) || 0;
                item.showDropdown = false;
                item.selectedIndex = -1;
                item.filteredProducts = [];
            },

            navigateProductDropdown(item, direction) {
                if (!item.showDropdown) {
                    item.showDropdown = true;
                    this.filterProducts(item);
                    return;
                }
                if (!item.filteredProducts) item.filteredProducts = [];
                const max = item.filteredProducts.length - 1;
                if (max < 0) return;
                item.selectedIndex += direction;
                if (item.selectedIndex < 0) item.selectedIndex = 0;
                if (item.selectedIndex > max) item.selectedIndex = max;
            },

            selectHighlightedProduct(item) {
                if (item.showDropdown && item.selectedIndex >= 0 && item.filteredProducts && item.filteredProducts[item.selectedIndex]) {
                    this.selectProduct(item, item.filteredProducts[item.selectedIndex]);
                }
            },

            get subtotal() {
                return this.items.reduce((sum, item) => sum + (item.quantity * item.unit_price), 0);
            },

            get taxAmount() {
                if(!this.enableTaxes) return 0;
                return this.subtotal * (this.taxPercentage / 100);
            },

            get total() {
                return this.subtotal + this.taxAmount;
            },

            formatMoney(amount) {
                return Number(amount).toLocaleString('es-CO', { minimumFractionDigits: 0, maximumFractionDigits: 0 });
            },

            async submitQuote() {
                if(this.items.length === 0 || !this.customer.name) {
                    Swal.fire({ title: 'Atención', text: "Por favor completa los campos requeridos.", icon: 'warning', confirmButtonText: 'Entendido' });
                    return;
                }

                this.isSubmitting = true;

                const payload = {
                    company_id: this.companyId,
                    customer_name: this.customer.name,
                    customer_document: this.customer.document,
                    customer_address: this.customer.address,
                    customer_phone: this.customer.phone,
                    customer_email: this.customer.email,
                    items: this.items,
                    subtotal: this.subtotal,
                    tax_amount: this.taxAmount,
                    total: this.total,
                    bank_account_id: this.bankAccountId,
                    _token: document.querySelector('input[name="_token"]').value
                };

                try {
                    const response = await fetch('{{ route('quotes.store') }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json'
                        },
                        body: JSON.stringify(payload)
                    });

                    const data = await response.json();
                    
                    if(data.success) {
                        window.location.href = data.redirect;
                    } else {
                        Swal.fire({ title: 'Atención', text: "Error: " + (data.message || 'No se pudo guardar la cotización.'), icon: 'warning', confirmButtonText: 'Entendido' });
                        this.isSubmitting = false;
                    }
                } catch(error) {
                    Swal.fire({ title: 'Atención', text: "Ocurrió un error en la conexión.", icon: 'warning', confirmButtonText: 'Entendido' });
                    console.error(error);
                    this.isSubmitting = false;
                }
            }
        }));
    });
</script>
@endpush
@endsection