@extends('layouts.app')

@section('titulo', 'Gestión de Tarifas')

@section('content')
<div x-data="tarifaManager()" class="container mx-auto px-4 py-8">
    <!-- Header & Filtros -->
    <div class="mb-8 flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <h1 class="text-3xl md:text-4xl font-bold text-slate-800 dark:text-white mb-2 tracking-tight">
                Tarifas de <span class="bg-clip-text text-transparent bg-gradient-to-r from-brand-orange to-brand-wine dark:from-orange-400 dark:to-pink-500">Domicilio</span>
            </h1>
            <p class="text-sm text-slate-500 dark:text-slate-400 mt-1">Configura los valores sugeridos según tipo de cliente y zona.</p>
        </div>
        
        <div class="flex items-center space-x-3">
            <button @click="openCreateModal()" 
                    class="bg-brand-orange hover:bg-brand-orange/90 text-white px-6 py-3 rounded-2xl font-bold shadow-lg shadow-brand-orange/20 transition-all flex items-center space-x-2 transform hover:-translate-y-0.5">
                <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>
                <span>Nueva Tarifa</span>
            </button>
        </div>
    </div>

    <!-- Filtros (Glass Card) -->
    <div class="glass-card-premium p-6 mb-8 border border-brand-orange/20 shadow-orange-100/20 rounded-3xl">
        <div class="flex flex-col md:flex-row gap-4 items-center justify-between">
            <div class="relative w-full md:w-96">
                <input type="text" x-model="search" @input.debounce.500ms="handleSearch()"
                       placeholder="Buscar tarifa por nombre..."
                       class="w-full bg-surface border-0 rounded-2xl py-3 pl-5 pr-12 text-slate-700 shadow-sm focus:ring-2 focus:ring-brand-orange transition-all">
                <div class="absolute right-4 top-3 flex items-center gap-2">
                    <button x-show="search" @click="search = ''; handleSearch()" class="p-1 rounded-lg text-slate-300 hover:text-rose-500 hover:bg-rose-50 dark:hover:bg-rose-900/30 transition-all" title="Limpiar búsqueda">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M6 18L18 6M6 6l12 12"></path></svg>
                    </button>
                    <svg class="w-6 h-6 text-slate-400" 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>
            
            <div class="flex items-center space-x-4">
                <span class="text-xs font-bold uppercase tracking-wider text-slate-400">Estado:</span>
                <div class="flex bg-surface p-1 rounded-xl shadow-inner">
                    <button @click="status = 'Todos'; handleSearch()" 
                            :class="status === 'Todos' ? 'bg-white shadow text-brand-orange' : 'text-slate-500 hover:text-slate-700'"
                            class="px-4 py-1.5 rounded-lg text-sm font-bold transition-all">Todos</button>
                    <button @click="status = 'Activos'; handleSearch()" 
                            :class="status === 'Activos' ? 'bg-white shadow text-brand-green' : 'text-slate-500 hover:text-slate-700'"
                            class="px-4 py-1.5 rounded-lg text-sm font-bold transition-all">Activos</button>
                    <button @click="status = 'Inactivos'; handleSearch()" 
                            :class="status === 'Inactivos' ? 'bg-white shadow text-slate-700' : 'text-slate-500 hover:text-slate-700'"
                            class="px-4 py-1.5 rounded-lg text-sm font-bold transition-all">Inactivos</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Tabla de Tarifas (Container for AJAX) -->
    <div id="tarifas-table-container">
        @include('tarifas.table')
    </div>

    @include('tarifas.modals.tarifa-form')
    @include('tarifas.modals.delete')
</div>

@push('scripts')
<script>
function tarifaManager() {
    return {
        search: '',
        status: 'Todos',
        modalTarifa: false,
        editing: false,
        tarifaId: null,
        deleteModal: {
            open: false,
            action: '',
            nombre: ''
        },
        loadingToggle: null,
        searchTimeout: null,
        form: {
            nombre: '',
            precio_base: '',
            tarifa_combo: '',
            tarifa_corporativa: '',
            activo: true
        },

        openCreateModal() {
            this.editing = false;
            this.tarifaId = null;
            this.form = {
                nombre: '',
                precio_base: '',
                tarifa_combo: '',
                tarifa_corporativa: '',
                activo: true
            };
            this.modalTarifa = true;
        },

        openEditModal(tarifa) {
            this.editing = true;
            this.tarifaId = tarifa.id;
            this.form = {
                nombre: tarifa.nombre,
                precio_base: tarifa.precio_base,
                tarifa_combo: tarifa.tarifa_combo,
                tarifa_corporativa: tarifa.tarifa_corporativa,
                activo: !!tarifa.activo
            };
            this.modalTarifa = true;
        },

        confirmCancel() {
            this.modalTarifa = false;
        },

        handleSearch() {
            clearTimeout(this.searchTimeout);
            this.searchTimeout = setTimeout(() => {
                this.fetchTarifas();
            }, 500);
        },

        fetchTarifas() {
            const params = new URLSearchParams({
                q: this.search,
                status: this.status
            });

            fetch(`{{ route('tarifas.index') }}?${params.toString()}`, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(res => res.text())
            .then(html => {
                document.getElementById('tarifas-table-container').innerHTML = html;
            })
            .catch(err => console.error('Error fetching:', err));
        },

        async toggleStatus(id) {
            this.loadingToggle = id;
            try {
                const res = await fetch(`/tarifas/${id}/toggle-status`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                });
                const data = await res.json();
                if (data.success) {
                    this.fetchTarifas();
                    window.dispatchEvent(new CustomEvent('notify', {
                        detail: { type: 'success', title: 'Actualizado', message: data.message }
                    }));
                }
            } catch (err) {
                console.error(err);
            } finally {
                this.loadingToggle = null;
            }
        },

        confirmDelete(id, nombre) {
            this.deleteModal.action = `/tarifas/${id}`;
            this.deleteModal.nombre = nombre;
            this.deleteModal.open = true;
        },

        submitForm(event) {
            event.target.submit();
        }
    }
}
</script>
@endpush
@endsection