<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">
            {{ __('Configuración General') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                <div class="p-6 text-gray-900 dark:text-gray-100">

                    @if (session('success'))
                        <div class="mb-4 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative" role="alert">
                            <span class="block sm:inline">{{ session('success') }}</span>
                        </div>
                    @endif

                    @if ($errors->any())
                        <div class="mb-4 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
                            <ul class="list-disc pl-5">
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form action="{{ route('settings.update') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            
                            <!-- General Settings -->
                            <div>
                                <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">Ajustes Generales</h3>
                                
                                <div class="mb-4">
                                    <label for="system_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Nombre del Sistema</label>
                                    <input type="text" name="system_name" id="system_name" 
                                        value="{{ old('system_name', $settings['system_name'] ?? '') }}" 
                                        class="mt-1 block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                </div>

                                <div class="mb-4">
                                    <label for="igv_percentage" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Porcentaje IGV (%)</label>
                                    <input type="number" step="0.01" name="igv_percentage" id="igv_percentage" 
                                        value="{{ old('igv_percentage', $settings['igv_percentage'] ?? '18') }}" 
                                        class="mt-1 block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                </div>

                                <div class="mb-4">
                                    <label for="receipt_model" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Modelo de Boleta/Impresión</label>
                                    <select name="receipt_model" id="receipt_model" class="mt-1 block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                        <option value="ticket" {{ (old('receipt_model', $settings['receipt_model'] ?? '') == 'ticket') ? 'selected' : '' }}>Ticket (80mm)</option>
                                        <option value="A4" {{ (old('receipt_model', $settings['receipt_model'] ?? '') == 'A4') ? 'selected' : '' }}>Formato A4</option>
                                    </select>
                                </div>

                                <div class="mb-4">
                                    <label for="reservation_expiry_minutes" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Tiempo de Reserva (minutos)</label>
                                    <input type="number" name="reservation_expiry_minutes" id="reservation_expiry_minutes" 
                                        value="{{ old('reservation_expiry_minutes', $settings['reservation_expiry_minutes'] ?? '120') }}" 
                                        class="mt-1 block w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                                    <p class="mt-1 text-xs text-gray-500">Tiempo que el stock permanece "apartado" antes de expirar.</p>
                                </div>

                                <!-- Delivery Status Toggle -->
                                <div class="mb-4 p-4 bg-indigo-50 dark:bg-indigo-900/30 rounded-xl border border-indigo-100 dark:border-indigo-800">
                                    <label class="flex items-center cursor-pointer">
                                        <div class="relative">
                                            <input type="checkbox" name="delivery_active" id="delivery_active" class="sr-only" 
                                                {{ (old('delivery_active', $settings['delivery_active'] ?? '0') == '1') ? 'checked' : '' }}>
                                            <div class="block bg-gray-300 dark:bg-gray-600 w-12 h-7 rounded-full"></div>
                                            <div class="dot absolute left-1 top-1 bg-white w-5 h-5 rounded-full transition shadow-sm"></div>
                                        </div>
                                        <div class="ml-3 font-bold text-indigo-900 dark:text-indigo-300 uppercase tracking-widest text-xs">
                                            🚚 Estado de Reparto (Activo)
                                        </div>
                                    </label>
                                    <p class="mt-2 text-[10px] text-indigo-600 dark:text-indigo-400 font-medium italic">Si se activa, los clientes verán un aviso de "Reparto Activo" en el catálogo.</p>
                                </div>
                            </div>

                            <!-- Appearance Settings -->
                            <div>
                                <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">Apariencia</h3>

                                <div class="mb-4">
                                    <label for="company_logo" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Logo de la Empresa</label>
                                    
                                    @if(isset($settings['company_logo']) && $settings['company_logo'] != 'default.png')
                                        <div class="mt-2 mb-2">
                                            <img src="{{ asset('storage/' . $settings['company_logo']) }}" alt="Logo Actual" class="h-20 object-contain">
                                        </div>
                                    @endif
                                    
                                    <input type="file" name="company_logo" id="company_logo" accept="image/*"
                                        class="mt-1 block w-full text-sm text-gray-500 dark:text-gray-400
                                        file:mr-4 file:py-2 file:px-4
                                        file:rounded-full file:border-0
                                        file:text-sm file:font-semibold
                                        file:bg-indigo-50 dark:file:bg-indigo-900 file:text-indigo-700 dark:file:text-indigo-300
                                        hover:file:bg-indigo-100 dark:hover:file:bg-indigo-800">
                                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">formatos soportados: JPG, PNG. Tamaño máximo: 2MB.</p>
                                </div>
                            </div>
                        </div>

                        <div class="mt-8 flex justify-end">
                            <button type="submit" class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                                Guardar Configuración
                            </button>
                        </div>
                    </form>

                </div>
            </div>
        </div>
    </div>

    @push('scripts')
    <style>
        /* Estilos para el toggle personalizado */
        input:checked ~ .dot {
            transform: translateX(100%);
            background-color: #4f46e5;
        }
        input:checked ~ .block {
            background-color: #c7d2fe;
        }
    </style>
    @endpush
</x-app-layout>
