@extends('layouts.app')

@section('title', 'Nuevo Producto/Servicio — ' . \App\Models\Setting::get('app_name', 'TI Manager'))

@section('content')
<div class="animate-fadeIn">
    
    <div class="page-header">
        <div class="page-header-top">
            <h1 class="page-title">
                <i class="ph ph-shopping-bag" style="color: var(--primary);"></i>
                Nuevo Producto o Servicio
            </h1>
            <div class="d-flex gap-sm">
                <a href="{{ route('products.index') }}" class="btn btn-outline btn-sm">
                    <i class="ph ph-arrow-left"></i>
                    Volver
                </a>
            </div>
        </div>
    </div>

    <div class="card">
        <form action="{{ route('products.store') }}" method="POST">
            @csrf
            
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md);">
                <div class="form-group" style="grid-column: 1 / -1;">
                    <label class="form-label">Nombre del Producto / Servicio <span class="text-danger">*</span></label>
                    <input type="text" name="name" class="form-control" required value="{{ old('name') }}">
                </div>

                <div class="form-group" x-data="categoryDropdown()" style="position: relative;" @click.outside="show = false">
                    <label class="form-label">Categoría</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" name="category_name" x-model="search" @input="show = true; filter(); selectedIndex = -1" @focus="show = true; filter()" @keydown.arrow-down.prevent="navigate(1)" @keydown.arrow-up.prevent="navigate(-1)" @keydown.enter.prevent="selectHighlighted(); if(!exactMatch && search.length > 0) show = false" class="form-control" placeholder="Buscar o crear nueva..." style="width: 100%; padding: 10px 10px 10px 35px; border-radius: var(--radius-sm); border: 1px solid rgba(0,0,0,0.15);" autocomplete="off">
                    </div>
                    
                    <div x-show="show" 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; display: none;">
                        <template x-for="(cat, index) in filteredCategories" :key="cat">
                            <div @click="select(cat)" 
                                 :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: 500;" x-text="cat"></div>
                            </div>
                        </template>
                        <!-- Mostrar opción de crear nueva si no hay coincidencia exacta -->
                        <template x-if="!exactMatch && search.length > 0">
                            <div @click="show = false" style="padding: 10px 15px; cursor: pointer; border-radius: var(--radius-sm); border-top: 1px dashed rgba(0,0,0,0.1); margin-top: 4px; background: rgba(145, 200, 73, 0.05);">
                                <span style="color: var(--primary);"><i class="ph ph-plus"></i> Crear categoría "</span><span x-text="search" style="font-weight: 600; color: var(--primary);"></span><span style="color: var(--primary);">"</span>
                            </div>
                        </template>
                        <template x-if="filteredCategories.length === 0 && search.length === 0">
                            <div style="padding: 10px; color: var(--text-muted); font-size: 0.9rem; text-align: center;">Escribe para buscar o crear.</div>
                        </template>
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">URL de Imagen (Opcional)</label>
                    <input type="url" name="image_url" class="form-control" placeholder="https://..." value="{{ old('image_url') }}">
                </div>

                <div class="form-group">
                    <label class="form-label">Costo Original (Precio al que sale)</label>
                    <div style="position: relative;">
                        <span style="position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted);">$</span>
                        <input type="number" step="0.01" name="cost_price" id="cost_price" class="form-control" style="padding-left: 25px;" value="{{ old('cost_price') }}">
                    </div>
                </div>

                <div class="form-group">
                    <label class="form-label">Porcentaje de Ganancia (%) <span class="text-danger">*</span></label>
                    <input type="number" step="0.01" name="markup_percentage" id="markup_percentage" class="form-control" required value="{{ old('markup_percentage', 45) }}">
                </div>

                <div class="form-group" style="grid-column: 1 / -1; background: var(--primary-light); padding: 15px; border-radius: var(--radius-md); display: flex; justify-content: space-between; align-items: center;">
                    <span style="font-weight: 600; color: var(--primary);">Precio de Venta Calculado:</span>
                    <span style="font-weight: 800; font-size: 1.5rem; color: var(--primary);" id="calculated_price">$0.00</span>
                </div>

                <div class="form-group" style="grid-column: 1 / -1;">
                    <label class="form-label">
                        URL de Origen (Opcional)
                        <span style="font-size: 0.8rem; font-weight: normal; color: var(--text-muted); display: block; margin-top: 4px;">
                            Si ingresas un enlace de Shopify o WooCommerce, el sistema podrá sincronizar el precio automáticamente.
                        </span>
                    </label>
                    <input type="url" name="source_url" class="form-control" placeholder="https://mi-proveedor.com/producto" value="{{ old('source_url') }}">
                </div>

                <div class="form-group" style="grid-column: 1 / -1;">
                    <label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
                        <input type="checkbox" name="is_active" value="1" checked style="width: 18px; height: 18px; accent-color: var(--primary);">
                        <span style="font-weight: 500;">Producto Activo</span>
                    </label>
                </div>

                <div class="form-group" style="grid-column: 1 / -1;">
                    <label style="display: flex; align-items: center; gap: 10px; cursor: pointer;">
                        <input type="checkbox" name="sync_now" value="1" checked style="width: 18px; height: 18px; accent-color: var(--primary);">
                        <span style="font-weight: 500;">Sincronizar precio web al guardar (Si tiene URL)</span>
                    </label>
                </div>
            </div>

            <div style="margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--border-color); display: flex; justify-content: flex-end; gap: 10px;">
                <a href="{{ route('products.index') }}" class="btn btn-outline">Cancelar</a>
                <button type="submit" class="btn btn-primary">
                    <i class="ph ph-floppy-disk"></i>
                    Guardar Producto
                </button>
            </div>
        </form>
    </div>
</div>

@push('scripts')
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('categoryDropdown', () => ({
            categories: @json($categories->pluck('name')),
            search: '{{ old("category_name") }}',
            show: false,
            selectedIndex: -1,
            filteredCategories: [],
            
            init() {
                this.filter();
            },
            filter() {
                const query = this.search.toLowerCase().trim();
                if (!query) {
                    this.filteredCategories = this.categories.slice(0, 10);
                } else {
                    this.filteredCategories = this.categories.filter(c => c.toLowerCase().includes(query)).slice(0, 10);
                }
            },
            get exactMatch() {
                return this.categories.some(c => c.toLowerCase() === this.search.toLowerCase().trim());
            },
            navigate(dir) {
                if (!this.show) { this.show = true; this.filter(); return; }
                const max = this.filteredCategories.length - 1;
                this.selectedIndex += dir;
                if (this.selectedIndex < 0) this.selectedIndex = 0;
                if (this.selectedIndex > max) this.selectedIndex = max;
            },
            selectHighlighted() {
                if (this.show && this.selectedIndex >= 0 && this.filteredCategories[this.selectedIndex]) {
                    this.select(this.filteredCategories[this.selectedIndex]);
                }
            },
            select(cat) {
                this.search = cat;
                this.show = false;
            }
        }));
    });

    const costPriceInput = document.getElementById('cost_price');
    const markupInput = document.getElementById('markup_percentage');
    const calculatedPrice = document.getElementById('calculated_price');

    function updatePrice() {
        const cost = parseFloat(costPriceInput.value) || 0;
        const markup = parseFloat(markupInput.value) || 0;
        const price = cost * (1 + (markup / 100));
        
        calculatedPrice.textContent = new Intl.NumberFormat('es-CO', {
            style: 'currency',
            currency: 'COP',
            minimumFractionDigits: 0,
            maximumFractionDigits: 0
        }).format(price);
    }

    costPriceInput.addEventListener('input', updatePrice);
    markupInput.addEventListener('input', updatePrice);
    
    // Initial calculation
    updatePrice();
</script>
@endpush
@endsection