@extends('layouts.app')
@section('title', 'Konfigurasi Sistem')
@section('content')
@php
    $orderedGroups = collect(['system', 'attendance', 'alert'])
        ->filter(fn (string $group) => $settings->has($group));

    $remainingGroups = $settings->keys()->reject(fn (string $group) => $orderedGroups->contains($group));
    $tabGroups = $orderedGroups->concat($remainingGroups)->values();
    $firstTab = $tabGroups->first() ?? 'system';

    $tabLabels = [
        'system' => 'Umum',
        'attendance' => 'Absensi',
        'alert' => 'Notifikasi',
    ];
@endphp

<div x-data="{ tab: '{{ $firstTab }}', saving: false }">
    <div class="mb-6">
        <h1 class="text-2xl font-semibold text-gray-900 dark:text-white">Konfigurasi Sistem</h1>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Atur parameter dan kebijakan sistem absensi</p>
    </div>

    @if (session('success'))
        <x-alert type="success">{{ session('success') }}</x-alert>
    @endif

    @if ($errors->any())
        <x-alert type="danger">Gagal menyimpan pengaturan. Periksa input lalu coba lagi.</x-alert>
    @endif

    <form method="POST" action="{{ route('admin.settings.update') }}" @submit="saving = true">
        @csrf
        @method('PATCH')

        <div class="border-b border-gray-200 dark:border-gray-700 mb-6">
            <ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-400">
                @foreach ($tabGroups as $group)
                    <li class="mr-2">
                        <button
                            type="button"
                            @click="tab = '{{ $group }}'"
                            :class="tab === '{{ $group }}' ? 'text-primary-600 border-primary-600 dark:text-primary-500 dark:border-primary-500 border-b-2' : 'border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300'"
                            class="inline-block p-4 rounded-t-lg"
                        >
                            {{ $tabLabels[$group] ?? ucfirst($group) }}
                        </button>
                    </li>
                @endforeach
            </ul>
        </div>
        @foreach ($tabGroups as $group)
            @php
                $groupSettings = $settings->get($group, collect());
            @endphp

            <div x-show="tab === '{{ $group }}'" x-cloak class="max-w-2xl">
                <div class="p-6 bg-white border border-gray-200 rounded-lg shadow-sm dark:bg-gray-800 dark:border-gray-700 space-y-5">
                    <h3 class="text-base font-semibold text-gray-900 dark:text-white">{{ $tabLabels[$group] ?? ucfirst($group) }}</h3>

                    @foreach ($groupSettings as $setting)
                        <div class="space-y-2">
                            <label for="setting-{{ $setting['id'] }}" class="block text-sm font-medium text-gray-900 dark:text-white">
                                {{ $setting['label'] }}
                            </label>

                            @if ($setting['input_type'] === 'boolean')
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input
                                        id="setting-{{ $setting['id'] }}"
                                        type="checkbox"
                                        name="settings[{{ $setting['id'] }}]"
                                        value="1"
                                        class="sr-only peer"
                                        {{ old('settings.'.$setting['id'], $setting['value']) ? 'checked' : '' }}
                                    >
                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer dark:bg-gray-600 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 dark:border-gray-600 peer-checked:bg-primary-600"></div>
                                </label>
                            @elseif ($setting['input_type'] === 'json')
                                <textarea
                                    id="setting-{{ $setting['id'] }}"
                                    name="settings[{{ $setting['id'] }}]"
                                    rows="4"
                                    class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                                >{{ old('settings.'.$setting['id'], json_encode($setting['value'], JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES)) }}</textarea>
                            @else
                                <input
                                    id="setting-{{ $setting['id'] }}"
                                    type="{{ $setting['input_type'] }}"
                                    name="settings[{{ $setting['id'] }}]"
                                    value="{{ old('settings.'.$setting['id'], $setting['value']) }}"
                                    class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
                                >
                            @endif

                            @if (! empty($setting['description']))
                                <p class="text-xs text-gray-500 dark:text-gray-400">{{ $setting['description'] }}</p>
                            @endif

                            @error('settings.'.$setting['id'])
                                <p class="text-xs text-red-600 dark:text-red-400">{{ $message }}</p>
                            @enderror
                        </div>
                    @endforeach

                    <div class="flex justify-end pt-2">
                        <button
                            type="submit"
                            :disabled="saving"
                            :class="saving ? 'opacity-70 cursor-not-allowed' : ''"
                            class="px-5 py-2.5 text-sm font-medium text-white bg-primary-700 rounded-lg hover:bg-primary-800"
                        >
                            <span x-show="!saving">Simpan Pengaturan</span>
                            <span x-show="saving">Menyimpan...</span>
                        </button>
                    </div>
                </div>
            </div>
        @endforeach
    </form>
</div>
@endsection