@extends('layouts.admin')

@section('title', 'Settings — OAH')

@php
    $passwordMismatchMessage = 'Password confirmation does not match.';
    $activeTab = session('settings_tab', 'profile');

    if ($errors->has('legal_breakdown_email') || $errors->has('training_or_top_up_email')) {
        $activeTab = 'enquiry';
    } elseif ($errors->has('email') || $errors->has('password')) {
        $activeTab = 'profile';
    }
@endphp

@section('content')
<x-admin.nav :show-title="false" />

<div class="mx-auto max-w-[min(100%,92rem)] px-4 pb-16 pt-8 sm:px-6 sm:pt-10">
    <div class="mb-6">
        <a href="{{ route('admin.dashboard') }}" class="text-sm font-semibold text-oah-muted hover:text-oah-black">
            ← Back to dashboard
        </a>
    </div>

    <div class="mx-auto max-w-2xl">
        <div class="overflow-hidden rounded-2xl border border-neutral-200 bg-white shadow-oah">
            <div class="h-1 bg-gradient-to-r from-oah-yellow via-oah-yellow-dark to-oah-yellow"></div>

            <div class="border-b border-neutral-100 px-5 pt-8 sm:px-8">
                <h1 class="text-xl font-extrabold uppercase tracking-tight text-oah-black sm:text-2xl">Settings</h1>

                <div
                    class="mt-6 inline-flex w-full max-w-full rounded-xl bg-neutral-100 p-1 sm:w-auto"
                    role="tablist"
                    aria-label="Settings sections"
                >
                    <button
                        type="button"
                        id="settings-tab-profile"
                        class="settings-tab flex-1 rounded-lg px-4 py-2.5 text-sm font-bold transition sm:flex-none sm:px-5"
                        role="tab"
                        aria-selected="{{ $activeTab === 'profile' ? 'true' : 'false' }}"
                        aria-controls="settings-panel-profile"
                        data-settings-tab="profile"
                    >
                        Profile
                    </button>
                    <button
                        type="button"
                        id="settings-tab-enquiry"
                        class="settings-tab flex-1 rounded-lg px-4 py-2.5 text-sm font-bold transition sm:flex-none sm:px-5"
                        role="tab"
                        aria-selected="{{ $activeTab === 'enquiry' ? 'true' : 'false' }}"
                        aria-controls="settings-panel-enquiry"
                        data-settings-tab="enquiry"
                    >
                        Enquiry Emails
                    </button>
                </div>
            </div>

            <div
                id="settings-panel-profile"
                class="settings-panel px-5 py-8 sm:px-8 {{ $activeTab === 'profile' ? '' : 'hidden' }}"
                role="tabpanel"
                aria-labelledby="settings-tab-profile"
                @if ($activeTab !== 'profile') hidden @endif
            >
                <p class="mb-6 text-sm text-oah-muted">Your login Email and password.</p>

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

                    <x-oah.field label="Admin Email" for="settings_email" required>
                        <input
                            type="email"
                            id="settings_email"
                            name="email"
                            value="{{ old('email', $admin->email) }}"
                            required
                            class="oah-input"
                            autocomplete="email"
                        >
                    </x-oah.field>

                    <x-oah.field label="New password" for="settings_password" required>
                        <div class="relative">
                            <input
                                type="password"
                                id="settings_password"
                                name="password"
                                required
                                class="oah-input pr-11"
                                autocomplete="new-password"
                            >
                            <button
                                type="button"
                                class="oah-password-toggle absolute right-3 top-1/2 inline-flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-lg text-oah-muted transition hover:bg-neutral-100 hover:text-oah-black"
                                data-target="settings_password"
                                aria-label="Show password"
                            >
                                <svg class="oah-password-icon-show h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/>
                                    <circle cx="12" cy="12" r="3"/>
                                </svg>
                                <svg class="oah-password-icon-hide hidden h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 3l18 18M10.58 10.58A3 3 0 0012 15a3 3 0 002.42-4.42M9.88 4.24A10.94 10.94 0 0112 5c6.5 0 10 7 10 7a18.2 18.2 0 01-4.88 5.12M6.12 6.12A18.2 18.2 0 002 12s3.5 7 10 7a10.94 10.94 0 003.12-.38"/>
                                </svg>
                            </button>
                        </div>
                    </x-oah.field>

                    <x-oah.field label="Confirm new password" for="settings_password_confirmation" required>
                        <div class="relative">
                            <input
                                type="password"
                                id="settings_password_confirmation"
                                name="password_confirmation"
                                required
                                class="oah-input pr-11"
                                autocomplete="new-password"
                            >
                            <button
                                type="button"
                                class="oah-password-toggle absolute right-3 top-1/2 inline-flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-lg text-oah-muted transition hover:bg-neutral-100 hover:text-oah-black"
                                data-target="settings_password_confirmation"
                                aria-label="Show password"
                            >
                                <svg class="oah-password-icon-show h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z"/>
                                    <circle cx="12" cy="12" r="3"/>
                                </svg>
                                <svg class="oah-password-icon-hide hidden h-5 w-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M3 3l18 18M10.58 10.58A3 3 0 0012 15a3 3 0 002.42-4.42M9.88 4.24A10.94 10.94 0 0112 5c6.5 0 10 7 10 7a18.2 18.2 0 01-4.88 5.12M6.12 6.12A18.2 18.2 0 002 12s3.5 7 10 7a10.94 10.94 0 003.12-.38"/>
                                </svg>
                            </button>
                        </div>
                    </x-oah.field>

                    <div class="flex flex-col-reverse gap-3 border-t border-neutral-100 pt-5 sm:flex-row sm:justify-end">
                        <a href="{{ route('admin.dashboard') }}" class="rounded-lg border border-neutral-300 px-5 py-2.5 text-sm font-medium hover:bg-neutral-50">
                            Cancel
                        </a>
                        <button type="submit" class="btn-oah rounded-lg px-6 py-2.5 text-sm font-bold">
                            Save profile
                        </button>
                    </div>
                </form>
            </div>

            <div
                id="settings-panel-enquiry"
                class="settings-panel px-5 py-8 sm:px-8 {{ $activeTab === 'enquiry' ? '' : 'hidden' }}"
                role="tabpanel"
                aria-labelledby="settings-tab-enquiry"
                @if ($activeTab !== 'enquiry') hidden @endif
            >
                <p class="mb-6 text-sm text-oah-muted">Set the Email Address for each client dashboard button.</p>

                <form method="POST" action="{{ route('admin.settings.enquiry-emails.update') }}" class="space-y-6">
                    @csrf
                    @method('PUT')

                    <x-oah.field
                        label="Legal Hours Breakdown"
                        for="legal_breakdown_email"
                        required
                    >
                        <input
                            type="email"
                            id="legal_breakdown_email"
                            name="legal_breakdown_email"
                            value="{{ old('legal_breakdown_email', $legalBreakdownEmail) }}"
                            required
                            class="oah-input"
                            autocomplete="email"
                            placeholder="accounts@example.com"
                        >
                    </x-oah.field>

                    <x-oah.field
                        label="Training Or Top-Up"
                        for="training_or_top_up_email"
                        required
                    >
                        <input
                            type="email"
                            id="training_or_top_up_email"
                            name="training_or_top_up_email"
                            value="{{ old('training_or_top_up_email', $trainingOrTopUpEmail) }}"
                            required
                            class="oah-input"
                            autocomplete="email"
                            placeholder="admin@example.com"
                        >
                    </x-oah.field>

                    <div class="flex flex-col-reverse gap-3 border-t border-neutral-100 pt-5 sm:flex-row sm:justify-end">
                        <a href="{{ route('admin.dashboard') }}" class="rounded-lg border border-neutral-300 px-5 py-2.5 text-sm font-medium hover:bg-neutral-50">
                            Cancel
                        </a>
                        <button type="submit" class="btn-oah rounded-lg px-6 py-2.5 text-sm font-bold">
                            Save Emails
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

@push('styles')
<style>
    .settings-tab {
        color: #6b7280;
    }

    .settings-tab:hover {
        color: #0a0a0a;
    }

    .settings-tab.is-active {
        background: #fff;
        color: #0a0a0a;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }
</style>
@endpush

@push('scripts')
<script>
    (function () {
        const passwordInput = document.getElementById('settings_password');
        const confirmInput = document.getElementById('settings_password_confirmation');
        const passwordMismatchMessage = @json($passwordMismatchMessage);
        const hasConfirmationError = @json($errors->has('password') && $errors->first('password') === $passwordMismatchMessage);
        const initialTab = @json($activeTab);

        const tabButtons = document.querySelectorAll('[data-settings-tab]');
        const tabPanels = document.querySelectorAll('.settings-panel');

        function setActiveTab(tabName) {
            tabButtons.forEach(function (button) {
                const isActive = button.dataset.settingsTab === tabName;
                button.classList.toggle('is-active', isActive);
                button.setAttribute('aria-selected', isActive ? 'true' : 'false');
            });

            tabPanels.forEach(function (panel) {
                const isActive = panel.id === 'settings-panel-' + tabName;
                panel.classList.toggle('hidden', !isActive);
                panel.hidden = !isActive;
            });
        }

        tabButtons.forEach(function (button) {
            button.addEventListener('click', function () {
                setActiveTab(button.dataset.settingsTab);
            });
        });

        setActiveTab(initialTab);

        function resetPasswordToggle(input) {
            const button = document.querySelector('.oah-password-toggle[data-target="' + input.id + '"]');

            if (!button) {
                return;
            }

            input.type = 'password';
            button.setAttribute('aria-label', 'Show password');
            button.querySelector('.oah-password-icon-show')?.classList.remove('hidden');
            button.querySelector('.oah-password-icon-hide')?.classList.add('hidden');
        }

        function clearConfirmPassword() {
            if (!confirmInput) {
                return;
            }

            confirmInput.value = '';
            resetPasswordToggle(confirmInput);
        }

        document.querySelectorAll('.oah-password-toggle').forEach(function (button) {
            button.addEventListener('click', function () {
                const input = document.getElementById(button.dataset.target);

                if (!input) {
                    return;
                }

                const isHidden = input.type === 'password';
                input.type = isHidden ? 'text' : 'password';
                button.setAttribute('aria-label', isHidden ? 'Hide password' : 'Show password');
                button.querySelector('.oah-password-icon-show')?.classList.toggle('hidden', isHidden);
                button.querySelector('.oah-password-icon-hide')?.classList.toggle('hidden', !isHidden);
            });
        });

        function showPasswordMismatchToast() {
            if (window.OahToast) {
                window.OahToast.show(passwordMismatchMessage, 'error');
            }
        }

        if (hasConfirmationError) {
            clearConfirmPassword();
        }

        confirmInput?.addEventListener('blur', function () {
            if (passwordInput?.value && confirmInput.value && passwordInput.value !== confirmInput.value) {
                clearConfirmPassword();
                showPasswordMismatchToast();
            }
        });
    })();
</script>
@endpush
@endsection