<div>
    {{-- Header --}}
    <div class="mb-4 sm:mb-6">
        <h1 class="text-xl sm:text-2xl font-bold text-gray-900">{{ __('إعدادات النظام') }}</h1>
        <p class="mt-1 text-sm text-gray-500">{{ __('إدارة الإعدادات العامة والمالية والحضور والإشعارات والتسجيل') }}</p>
    </div>

    {{-- Success flash --}}
    @if(session('success'))
        <div class="mb-4 p-3 bg-green-50 border border-green-200 text-green-700 rounded-lg text-sm">
            {{ session('success') }}
        </div>
    @endif

    {{-- Tabs --}}
    <div class="mb-6">
        <div class="border-b border-gray-200">
            <nav class="flex gap-1 -mb-px overflow-x-auto scrollbar-hide" aria-label="{{ __('أقسام الإعدادات') }}">
                @foreach($tabs as $key => $label)
                    <button
                        type="button"
                        wire:click="$set('activeTab', '{{ $key }}')"
                        class="shrink-0 px-3 sm:px-4 py-2.5 text-sm font-medium whitespace-nowrap border-b-2 transition-colors
                            {{ $activeTab === $key
                                ? 'border-blue-600 text-blue-700'
                                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300' }}"
                    >
                        {{ $label }}
                    </button>
                @endforeach
            </nav>
        </div>
    </div>

    {{-- Settings Form --}}
    <form wire:submit="save">
        <div class="bg-white border border-gray-200 rounded-lg p-4 sm:p-6 shadow-sm">
            @if(empty($schema))
                <div class="p-8 text-center">
                    <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                    </svg>
                    <p class="mt-4 text-sm text-gray-500">{{ __('لا توجد إعدادات في هذا القسم') }}</p>
                </div>
            @else
                <div class="space-y-6">
                    @foreach($schema as $key => $config)
                        <div class="max-w-lg w-full">
                            <label for="setting-{{ $key }}" class="block text-sm font-medium text-gray-700 mb-1.5">
                                {{ __($config['label']) }}
                            </label>

                            @if($config['type'] === 'boolean')
                                {{-- Toggle switch --}}
                                <label class="inline-flex items-center cursor-pointer gap-3">
                                    <span class="relative" dir="ltr">
                                        <input
                                            type="checkbox"
                                            id="setting-{{ $key }}"
                                            wire:model="settings.{{ $key }}"
                                            value="1"
                                            @checked(filter_var($settings[$key] ?? false, FILTER_VALIDATE_BOOLEAN))
                                            class="sr-only peer"
                                        >
                                        <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                                    </span>
                                    <span class="text-sm text-gray-600">
                                        {{ filter_var($settings[$key] ?? false, FILTER_VALIDATE_BOOLEAN) ? __('مفعّل') : __('معطّل') }}
                                    </span>
                                </label>

                            @elseif($config['type'] === 'select')
                                {{-- Select dropdown --}}
                                <select
                                    id="setting-{{ $key }}"
                                    wire:model="settings.{{ $key }}"
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
                                >
                                    @foreach($config['options'] as $optValue => $optLabel)
                                        <option value="{{ $optValue }}">{{ $optLabel }}</option>
                                    @endforeach
                                </select>

                            @elseif($config['type'] === 'number')
                                {{-- Number input --}}
                                <input
                                    type="number"
                                    id="setting-{{ $key }}"
                                    wire:model="settings.{{ $key }}"
                                    dir="ltr"
                                    step="{{ $config['step'] ?? '1' }}"
                                    @if(isset($config['min'])) min="{{ $config['min'] }}" @endif
                                    @if(isset($config['max'])) max="{{ $config['max'] }}" @endif
                                    class="w-full max-w-xs rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm text-start"
                                >

                            @elseif($config['type'] === 'time')
                                {{-- Time input --}}
                                <input
                                    type="time"
                                    id="setting-{{ $key }}"
                                    wire:model="settings.{{ $key }}"
                                    dir="ltr"
                                    class="w-full max-w-xs rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
                                >

                            @else
                                {{-- Text input --}}
                                <input
                                    type="text"
                                    id="setting-{{ $key }}"
                                    wire:model="settings.{{ $key }}"
                                    class="w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-sm"
                                >
                            @endif

                            @if(!empty($config['hint']))
                                <p class="mt-1.5 text-xs text-gray-500">{{ __($config['hint']) }}</p>
                            @endif
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

        {{-- Save button --}}
        @if(!empty($schema))
            <div class="mt-6 flex flex-col-reverse sm:flex-row gap-3">
                <button
                    type="submit"
                    wire:loading.attr="disabled"
                    wire:target="save"
                    class="w-full sm:w-auto inline-flex items-center justify-center px-6 py-2.5 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 disabled:bg-blue-400 disabled:cursor-not-allowed transition-colors"
                >
                    <span wire:loading.remove wire:target="save">{{ __('حفظ الإعدادات') }}</span>
                    <span wire:loading wire:target="save" class="inline-flex items-center">
                        <svg class="animate-spin -ms-1 me-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                        </svg>
                        {{ __('جارٍ الحفظ...') }}
                    </span>
                </button>
            </div>
        @endif
    </form>
</div>
