<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-300">Admin</p>
                <h2 class="text-2xl font-bold text-slate-950 dark:text-white">Maintenance Mode</h2>
            </div>

            <span class="inline-flex w-fit rounded-full px-4 py-2 text-sm font-black uppercase tracking-wide {{ $settings['mode'] === 'on' ? 'bg-red-100 text-red-700 dark:bg-red-950 dark:text-red-200' : 'bg-emerald-100 text-emerald-700 dark:bg-emerald-950 dark:text-emerald-200' }}">
                {{ $settings['mode'] === 'on' ? 'Maintenance ON' : 'Maintenance OFF' }}
            </span>
        </div>
    </x-slot>

    <div class="grid gap-6 xl:grid-cols-[1fr_24rem]">
        <section class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
            <div>
                <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-300">Website Access</p>
                <h3 class="mt-2 text-xl font-bold text-slate-950 dark:text-white">Control who can access ViZuTrade.</h3>
                <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-300">
                    When maintenance mode is on, visitors and normal users see the maintenance page. Admin users can still log in, access the admin dashboard, and turn maintenance mode off.
                </p>
            </div>

            <form method="POST" action="{{ route('admin.maintenance.update') }}" class="mt-6 space-y-5">
                @csrf
                @method('PATCH')

                <div>
                    <label for="maintenance_title" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Maintenance Title</label>
                    <input
                        id="maintenance_title"
                        name="maintenance_title"
                        value="{{ old('maintenance_title', $settings['title']) }}"
                        class="mt-1 block w-full rounded-lg border-blue-100 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-blue-900 dark:bg-slate-950 dark:text-slate-100"
                        required
                    >
                    @error('maintenance_title')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-300">{{ $message }}</p>
                    @enderror
                </div>

                <div>
                    <label for="maintenance_message" class="text-sm font-semibold text-slate-700 dark:text-slate-200">Maintenance Message</label>
                    <textarea
                        id="maintenance_message"
                        name="maintenance_message"
                        rows="5"
                        class="mt-1 block w-full rounded-lg border-blue-100 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-blue-900 dark:bg-slate-950 dark:text-slate-100"
                        required
                    >{{ old('maintenance_message', $settings['message']) }}</textarea>
                    @error('maintenance_message')
                        <p class="mt-1 text-sm text-red-600 dark:text-red-300">{{ $message }}</p>
                    @enderror
                </div>

                <div class="flex flex-wrap gap-3">
                    <button type="submit" class="rounded-lg border border-blue-100 px-5 py-2.5 text-sm font-bold text-blue-700 transition hover:-translate-y-0.5 hover:bg-blue-50 dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60">
                        Save Message
                    </button>
                    <button
                        type="submit"
                        formaction="{{ route('admin.maintenance.enable') }}"
                        class="rounded-lg bg-red-600 px-5 py-2.5 text-sm font-bold text-white shadow-sm shadow-red-600/20 transition hover:-translate-y-0.5 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-400"
                    >
                        Save & Turn Maintenance ON
                    </button>
                </div>
            </form>
        </section>

        <aside class="space-y-6">
            <section class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-300">Current Status</p>
                <h3 class="mt-2 text-2xl font-black text-slate-950 dark:text-white">{{ $settings['mode'] === 'on' ? 'Website paused' : 'Website live' }}</h3>
                <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-300">
                    {{ $settings['mode'] === 'on' ? 'Normal users and visitors are being redirected to the maintenance page.' : 'Visitors and users can access ViZuTrade normally.' }}
                </p>
            </section>

            <section class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-300">Mode Switch</p>
                <div class="mt-5 grid gap-3">
                    <form method="POST" action="{{ route('admin.maintenance.disable') }}">
                        @csrf
                        @method('PATCH')
                        <button type="submit" class="w-full rounded-lg bg-emerald-600 px-5 py-2.5 text-sm font-bold text-white shadow-sm shadow-emerald-600/20 transition hover:-translate-y-0.5 hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-400">
                            Turn Maintenance OFF
                        </button>
                    </form>

                    <a href="#maintenance_title" class="w-full rounded-lg border border-blue-100 px-5 py-2.5 text-center text-sm font-bold text-blue-700 transition hover:-translate-y-0.5 hover:bg-blue-50 dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60">
                        Edit Message
                    </a>
                </div>
            </section>

            <section class="rounded-lg border border-blue-100 bg-blue-50/70 p-6 dark:border-blue-900/50 dark:bg-blue-950/30">
                <p class="text-sm font-bold text-blue-700 dark:text-blue-200">Safety note</p>
                <p class="mt-2 text-sm leading-6 text-slate-600 dark:text-slate-300">
                    This feature does not use <span class="font-semibold">php artisan down</span>. It is controlled from the database, so an admin can log in and switch it off from this page.
                </p>
            </section>
        </aside>
    </div>
</x-app-layout>
