@extends('layouts.admin')

@section('content')

<div class="p-4 bg-white block sm:flex items-center justify-between border-b border-gray-200">
    <div class="w-full mb-1">
        <div class="mb-4">
            <h1 class="text-xl font-semibold text-gray-900 sm:text-2xl">Crear Cupón</h1>
        </div>
    </div>
</div>

<div class="p-4">
    <form action="{{ route('coupons.store') }}" method="POST" class="space-y-6">
        @csrf
        
        <!-- Basic Information -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-700">Código del cupón *</label>
                <input type="text" name="code" value="{{ old('code') }}" required
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                @error('code')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700">Nombre *</label>
                <input type="text" name="name" value="{{ old('name') }}" required
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                @error('name')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700">Descripción</label>
            <textarea name="description" rows="3"
                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">{{ old('description') }}</textarea>
            @error('description')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <!-- Discount Configuration -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-700">Tipo de descuento *</label>
                <select name="type" required onchange="updateValueLabel(this.value)"
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                    <option value="">Seleccionar tipo</option>
                    <option value="fixed_amount" {{ old('type') === 'fixed_amount' ? 'selected' : '' }}>Monto fijo</option>
                    <option value="percentage" {{ old('type') === 'percentage' ? 'selected' : '' }}>Porcentaje</option>
                </select>
                @error('type')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700" id="value-label">Valor *</label>
                <input type="number" name="value" value="{{ old('value') }}" step="0.01" min="0" required
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                @error('value')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <!-- Validity Period -->
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-700">Válido desde *</label>
                <input type="datetime-local" name="valid_from" value="{{ old('valid_from') }}" required
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                @error('valid_from')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700">Válido hasta *</label>
                <input type="datetime-local" name="valid_to" value="{{ old('valid_to') }}" required
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                @error('valid_to')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <!-- Application Rules -->
        <div>
            <label class="block text-sm font-medium text-gray-700">Se aplica a *</label>
            <select name="applies_to" required onchange="updateAppliesTo(this.value)"
                class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                <option value="">Seleccionar aplicación</option>
                <option value="cart" {{ old('applies_to') === 'cart' ? 'selected' : '' }}>Todo el carrito</option>
                <option value="product" {{ old('applies_to') === 'product' ? 'selected' : '' }}>Productos específicos</option>
                <option value="category" {{ old('applies_to') === 'category' ? 'selected' : '' }}>Categorías específicas</option>
                <option value="brand" {{ old('applies_to') === 'brand' ? 'selected' : '' }}>Marcas específicas</option>
                <option value="vendor" {{ old('applies_to') === 'vendor' ? 'selected' : '' }}>Proveedores específicos</option>
                <option value="customer" {{ old('applies_to') === 'customer' ? 'selected' : '' }}>Clientes específicos</option>
                <option value="customer_type" {{ old('applies_to') === 'customer_type' ? 'selected' : '' }}>Tipos de cliente</option>
            </select>
            @error('applies_to')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <!-- Dynamic selection based on applies_to -->
        <div id="applies_to_selection" style="display: none;">
            <label class="block text-sm font-medium text-gray-700" id="selection-label">Seleccionar elementos</label>
            <input 
                type="text" 
                id="applies-to-filter"
                placeholder="Buscar..."
                class="w-full mb-2 border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-blue-500 focus:border-blue-500"
            >
            <div id="applies-to-checkboxes" class="border border-gray-300 rounded-lg p-3 max-h-60 overflow-y-auto bg-gray-50">
                <!-- Checkboxes will be dynamically populated here -->
            </div>
            @error('applies_to_ids')
                <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
            @enderror
        </div>

        <!-- Usage Limits -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <div>
                <label class="block text-sm font-medium text-gray-700">Límite por cliente</label>
                <input type="number" name="usage_limit_per_customer" value="{{ old('usage_limit_per_customer') }}" min="1"
                    placeholder="Sin límite"
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                <p class="mt-1 text-xs text-gray-500">Dejar vacío para permitir usos ilimitados</p>
                @error('usage_limit_per_customer')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700">Límite total</label>
                <input type="number" name="total_usage_limit" value="{{ old('total_usage_limit') }}" min="1"
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                @error('total_usage_limit')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700">Monto mínimo</label>
                <input type="number" name="minimum_amount" value="{{ old('minimum_amount') }}" step="0.01" min="0"
                    class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500">
                @error('minimum_amount')
                    <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                @enderror
            </div>
        </div>

        <!-- Zone/Route Restrictions -->
        <div class="border-t border-gray-200 pt-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Restricciones de Zona/Ruta</h3>
            <p class="text-sm text-gray-500 mb-4">Opcional: Restringir este cupón a zonas o rutas específicas. Dejar vacío para permitir en todas las zonas/rutas.</p>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- Zone IDs -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Zonas permitidas (por ID)</label>
                    <select name="allowed_zone_ids[]" multiple 
                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                        size="5">
                        @foreach($zones as $zone)
                            <option value="{{ $zone->id }}" {{ in_array($zone->id, old('allowed_zone_ids', [])) ? 'selected' : '' }}>
                                ID: {{ $zone->id }} - Zona: {{ $zone->zone ?? 'N/A' }} - Ruta: {{ $zone->route ?? 'N/A' }}
                            </option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-gray-500">Mantén presionado Ctrl/Cmd para seleccionar múltiples</p>
                    @error('allowed_zone_ids')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Zone Numbers -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Zonas permitidas (por número)</label>
                    <select name="allowed_zones[]" multiple 
                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                        size="5">
                        @foreach($uniqueZones as $zoneNum)
                            <option value="{{ $zoneNum }}" {{ in_array($zoneNum, old('allowed_zones', [])) ? 'selected' : '' }}>
                                Zona {{ $zoneNum }}
                            </option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-gray-500">Mantén presionado Ctrl/Cmd para seleccionar múltiples</p>
                    @error('allowed_zones')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

                <!-- Routes -->
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-2">Rutas permitidas</label>
                    <select name="allowed_routes[]" multiple 
                        class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                        size="5">
                        @foreach($uniqueRoutes as $route)
                            <option value="{{ $route }}" {{ in_array($route, old('allowed_routes', [])) ? 'selected' : '' }}>
                                Ruta {{ $route }}
                            </option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-gray-500">Mantén presionado Ctrl/Cmd para seleccionar múltiples</p>
                    @error('allowed_routes')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Active Status -->
        <div>
            <label class="flex items-center">
                <input type="checkbox" name="active" value="1" {{ old('active', true) ? 'checked' : '' }}
                    class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
                <span class="ml-2 text-sm text-gray-700">Cupón activo</span>
            </label>
        </div>

        <!-- Brand/vendor discount stacking -->
        <div>
            <input type="hidden" name="apply_on_brand_vendor_discounts" value="0">
            <label class="flex items-center">
                <input type="checkbox" name="apply_on_brand_vendor_discounts" value="1" {{ old('apply_on_brand_vendor_discounts', false) ? 'checked' : '' }}
                    class="rounded border-gray-300 text-blue-600 shadow-sm focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50">
                <span class="ml-2 text-sm text-gray-700">Acumular con descuentos de marca/proveedor</span>
            </label>
            <p class="mt-1 ml-6 text-xs text-gray-500">
                Por defecto el cupón NO se acumula: en productos con descuento de marca o proveedor se aplica el mejor descuento (el de marca/proveedor o el del cupón). Si se activa, el cupón se aplica ADEMÁS del descuento de marca/proveedor.
            </p>
        </div>

        <!-- Submit Buttons -->
        <div class="flex justify-end space-x-3">
            <a href="{{ route('coupons.index') }}"
                class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded">
                Cancelar
            </a>
            <button type="submit"
                class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
                Crear Cupón
            </button>
        </div>
    </form>
</div>

@php
    $categoriesData = $categories->map(function ($c) {
        return ['id' => $c->id, 'name' => $c->name];
    })->values();
    
    $brandsData = $brands->map(function ($b) {
        return ['id' => $b->id, 'name' => $b->name];
    })->values();
    
    $vendorsData = $vendors->map(function ($v) {
        return ['id' => $v->id, 'name' => $v->name];
    })->values();
    
    $rolesData = $roles->map(function ($r) {
        return ['id' => $r->name, 'name' => $r->name];
    })->values();
@endphp

<script>
    const selectionData = {
        category: @json($categoriesData),
        brand: @json($brandsData),
        vendor: @json($vendorsData),
        customer_type: @json($rolesData)
    };

    const ajaxSearchUrls = {
        product: "{{ route('coupons.search-products') }}",
        customer: "{{ route('coupons.search-customers') }}"
    };

    const ajaxTypes = ['product', 'customer'];
    let searchDebounceTimer = null;
    let currentAppliesTo = null;

    function updateValueLabel(type) {
        const label = document.getElementById('value-label');
        if (type === 'fixed_amount') {
            label.textContent = 'Valor (monto en $) *';
        } else if (type === 'percentage') {
            label.textContent = 'Valor (porcentaje %) *';
        } else {
            label.textContent = 'Valor *';
        }
    }

    function createCheckboxItem(item, checked) {
        const itemLabel = document.createElement('label');
        itemLabel.className = 'flex items-center py-1.5 px-2 hover:bg-white rounded cursor-pointer applies-to-item';
        
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.name = 'applies_to_ids[]';
        checkbox.value = item.id;
        checkbox.className = 'w-4 h-4 text-blue-600 rounded focus:ring-blue-500';
        if (checked) checkbox.checked = true;
        
        const span = document.createElement('span');
        span.className = 'ml-2 text-sm text-gray-700';
        span.setAttribute('data-search', (item.display || item.name).toLowerCase());
        span.textContent = item.display || item.name;
        
        itemLabel.appendChild(checkbox);
        itemLabel.appendChild(span);
        return itemLabel;
    }

    function getCheckedIds() {
        const checked = document.querySelectorAll('#applies-to-checkboxes input[type="checkbox"]:checked');
        return Array.from(checked).map(cb => cb.value);
    }

    function updateAppliesTo(appliesTo) {
        const selectionDiv = document.getElementById('applies_to_selection');
        const checkboxesContainer = document.getElementById('applies-to-checkboxes');
        const label = document.getElementById('selection-label');
        const filterInput = document.getElementById('applies-to-filter');

        currentAppliesTo = appliesTo;

        if (appliesTo === 'cart') {
            selectionDiv.style.display = 'none';
            return;
        }

        const labels = {
            product: 'Seleccionar productos',
            category: 'Seleccionar categorías',
            brand: 'Seleccionar marcas',
            vendor: 'Seleccionar proveedores',
            customer: 'Seleccionar clientes',
            customer_type: 'Seleccionar tipos de cliente'
        };
        label.textContent = labels[appliesTo] || 'Seleccionar elementos';
        selectionDiv.style.display = 'block';
        filterInput.value = '';

        if (ajaxTypes.includes(appliesTo)) {
            checkboxesContainer.innerHTML = '<p class="text-sm text-gray-500 p-2">Escribe al menos 2 caracteres para buscar...</p>';
            
            filterInput.oninput = function() {
                clearTimeout(searchDebounceTimer);
                const query = this.value.trim();
                
                if (query.length < 2) {
                    const existing = checkboxesContainer.querySelectorAll('.applies-to-item');
                    if (existing.length === 0) {
                        checkboxesContainer.innerHTML = '<p class="text-sm text-gray-500 p-2">Escribe al menos 2 caracteres para buscar...</p>';
                    }
                    return;
                }
                
                searchDebounceTimer = setTimeout(() => {
                    const checkedIds = getCheckedIds();
                    
                    fetch(ajaxSearchUrls[appliesTo] + '?q=' + encodeURIComponent(query))
                        .then(r => r.json())
                        .then(results => {
                            const checkedElements = checkboxesContainer.querySelectorAll('input[type="checkbox"]:checked');
                            const preservedItems = [];
                            checkedElements.forEach(cb => {
                                preservedItems.push(cb.closest('.applies-to-item'));
                            });

                            checkboxesContainer.innerHTML = '';

                            preservedItems.forEach(el => {
                                checkboxesContainer.appendChild(el);
                            });

                            results.forEach(item => {
                                if (!checkedIds.includes(String(item.id))) {
                                    checkboxesContainer.appendChild(createCheckboxItem(item, false));
                                }
                            });

                            if (checkboxesContainer.children.length === 0) {
                                checkboxesContainer.innerHTML = '<p class="text-sm text-gray-500 p-2">No se encontraron resultados.</p>';
                            }
                        });
                }, 300);
            };
        } else {
            checkboxesContainer.innerHTML = '';
            selectionData[appliesTo].forEach(item => {
                checkboxesContainer.appendChild(createCheckboxItem(item, false));
            });

            filterInput.oninput = function() {
                const filter = this.value.toLowerCase();
                checkboxesContainer.querySelectorAll('.applies-to-item').forEach(item => {
                    const searchText = item.querySelector('[data-search]').getAttribute('data-search');
                    item.style.display = searchText.includes(filter) ? '' : 'none';
                });
            };
        }
    }

    document.addEventListener('DOMContentLoaded', function() {
        const typeSelect = document.querySelector('select[name="type"]');
        const appliesSelect = document.querySelector('select[name="applies_to"]');
        
        if (typeSelect.value) updateValueLabel(typeSelect.value);
        if (appliesSelect.value) updateAppliesTo(appliesSelect.value);
    });
</script>

@endsection