@extends('layout.app')

@section('body')

    <!-- ============================================================
         PROFILE HEADER
    ============================================================= -->

    @include('header')



    <!-- ============================================================
         MAIN
    ============================================================= -->

    <main class="min-h-[calc(100vh-68px)] bg-[var(--surface-page)] px-4 py-8 sm:px-6 lg:px-8">

        <div class="mx-auto max-w-6xl">


            <!-- ==================================================
                 PAGE HEADER
            =================================================== -->

            <section class="mb-8">

                <p class="mb-2 text-sm text-[var(--content-muted)]">
                    Mon espace
                </p>

                <div
                    class="flex flex-col gap-4
                           sm:flex-row sm:items-end
                           sm:justify-between"
                >

                    <div>

                        <h1
                            class="text-3xl font-bold
                                   tracking-tight text-[var(--content-primary)]
                                   sm:text-4xl"
                        >
                            Mon profil
                        </h1>

                        <p
                            class="mt-3 max-w-2xl
                                   text-sm leading-6
                                   text-[var(--content-muted)]"
                        >
                            Gérez vos informations personnelles
                            et les paramètres de sécurité de votre compte.
                        </p>

                    </div>


                    <!-- Status -->

                    <div
                        class="inline-flex w-fit
                               items-center gap-2
                               rounded-full
                               border border-emerald-500/10
                               bg-emerald-500/[0.06]
                               px-3 py-1.5
                               text-xs font-medium
                               text-emerald-400"
                    >

                        <span
                            class="h-1.5 w-1.5 rounded-full
                                   bg-emerald-400"
                        ></span>

                        Compte actif

                    </div>

                </div>

            </section>



            <!-- ==================================================
                 IDENTITY CARD
            =================================================== -->

            <section
                class="relative mb-6 overflow-hidden
                       rounded-2xl
                       border border-[var(--line-subtle)]
                       bg-[var(--surface-panel-strong)]"
            >

                <!-- Glow -->

                <div
                    class="absolute -right-24 -top-24
                           h-64 w-64 rounded-full
                           bg-[var(--color-orange)]/[0.07]
                           blur-[100px]"
                ></div>


                <div
                    class="relative flex flex-col gap-6
                           p-6 sm:p-8
                           md:flex-row
                           md:items-center
                           md:justify-between"
                >

                    <!-- Identity -->

                    <div
                        class="flex min-w-0
                               items-center gap-5"
                    >

                        <!-- Avatar -->

                        <div
                            class="flex h-20 w-20 shrink-0
                                   items-center justify-center
                                   rounded-2xl
                                   bg-gradient-to-br
                                   from-[var(--color-orange)]
                                   to-[#8f4d0d]
                                   text-2xl font-semibold
                                   text-[var(--content-primary)]
                                   shadow-lg
                                   shadow-[var(--color-orange)]/10
                                   sm:h-24 sm:w-24
                                   sm:text-3xl"
                        >
                            {{ strtoupper(substr(auth()->user()->name ?? 'U', 0, 1)) }}
                        </div>


                        <div class="min-w-0">

                            <div
                                class="flex flex-wrap
                                       items-center gap-2"
                            >

                                <h2
                                    class="truncate text-xl
                                           font-semibold
                                           tracking-tight
                                           text-[var(--content-primary)]
                                           sm:text-2xl"
                                >
                                    {{ auth()->user()->name ?? 'Utilisateur' }}
                                </h2>

                                <span
                                    class="rounded-full
                                           bg-[var(--color-orange)]/10
                                           px-2.5 py-1
                                           text-[10px]
                                           font-semibold uppercase
                                           tracking-[0.12em]
                                           text-[var(--color-orange)]"
                                >
                                    Administrateur
                                </span>

                            </div>

                            <p
                                class="mt-1 break-all
                                       text-sm text-[var(--content-muted)]"
                            >
                                {{ auth()->user()->email }}
                            </p>

                        </div>

                    </div>


                    <!-- Member since -->

                    <div
                        class="border-t border-[var(--line-subtle)]
                               pt-4
                               md:border-l
                               md:border-t-0
                               md:pl-8
                               md:pt-0"
                    >

                        <p
                            class="text-[10px]
                                   font-medium uppercase
                                   tracking-[0.18em]
                                   text-[var(--content-muted)]"
                        >
                            Membre depuis
                        </p>

                        <p
                            class="mt-1 text-sm
                                   font-medium text-[var(--content-secondary)]"
                        >
                            {{ auth()->user()->created_at?->format('d F Y') ?? '—' }}
                        </p>

                    </div>

                </div>

            </section>



            <!-- ==================================================
                 CONTENT GRID
            =================================================== -->

            <section class="grid grid-cols-1 gap-6">


                <!-- ==================================================
                     PERSONAL INFORMATION
                =================================================== -->

                <article
                    class="overflow-hidden
                           rounded-2xl
                           border border-[var(--line-subtle)]
                           bg-[var(--surface-panel-strong)]
                           lg:col-span-2"
                >

                    <!-- Header -->

                    <div
                        class="flex items-center justify-between
                               border-b border-[var(--line-subtle)]
                               px-5 py-4"
                    >

                        <div>

                            <h3
                                class="text-sm font-semibold
                                       text-[var(--content-primary)]"
                            >
                                Informations personnelles
                            </h3>

                            <p
                                class="mt-1 text-xs text-[var(--content-muted)]"
                            >
                                Les informations associées à votre compte
                            </p>

                        </div>

                        <span
                            class="flex h-9 w-9
                                   items-center justify-center
                                   rounded-xl
                                   bg-[var(--color-orange)]/10
                                   text-[var(--color-orange)]"
                        >
                            <i class="bi bi-person"></i>
                        </span>

                    </div>


                    <!-- Form -->

                    @if (session('status') === 'profile-information-updated')
                        <div
                            class="mx-5 mt-5 rounded-xl
                                   border border-emerald-500/20
                                   bg-emerald-500/[0.06]
                                   px-4 py-3
                                   text-sm text-emerald-300
                                   sm:mx-6"
                            role="status"
                        >
                            <div class="flex items-center gap-3">
                                <i class="bi bi-check-circle"></i>
                                <span>Vos informations ont été modifiées avec succès.</span>
                            </div>
                        </div>
                    @endif

                    @if ($errors->updateProfileInformation->any())
                        <div
                            class="mx-5 mt-5 rounded-xl
                                   border border-red-500/20
                                   bg-red-500/[0.06]
                                   px-4 py-3
                                   text-sm text-red-300
                                   sm:mx-6"
                            role="alert"
                        >
                            <ul class="space-y-1">
                                @foreach ($errors->updateProfileInformation->all() as $error)
                                    <li class="flex items-start gap-3">
                                        <i class="bi bi-exclamation-circle mt-0.5 shrink-0"></i>
                                        <span>{{ $error }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form
                        method="POST"
                        action="{{ route('user-profile-information.update') }}"
                        class="p-5 sm:p-6"
                    >

                        @csrf
                        @method('PUT')

                        <div
                            class="grid grid-cols-1
                                   gap-x-6 gap-y-5
                                   sm:grid-cols-2"
                        >

                            <!-- Name -->

                            <div class="sm:col-span-2">

                                <label
                                    for="name"
                                    class="mb-2 block text-xs
                                           font-medium uppercase
                                           tracking-[0.08em]
                                           text-[var(--content-muted)]"
                                >
                                    Nom complet
                                </label>

                                <input
                                    id="name"
                                    name="name"
                                    type="text"
                                    value="{{ old('name', auth()->user()->name) }}"
                                    autocomplete="name"
                                    required
                                    class="h-11 w-full
                                           rounded-xl
                                           border border-[var(--line-subtle)]
                                           bg-[var(--surface-page)]
                                           px-4
                                           text-sm text-[var(--content-primary)]
                                           outline-none
                                           transition
                                           placeholder:text-[var(--content-muted)]
                                           focus:border-[var(--color-orange)]/40
                                           focus:ring-2
                                           focus:ring-[var(--color-orange)]/10"
                                >

                            </div>


                            <!-- Email -->

                            <div class="sm:col-span-2">

                                <label
                                    for="email"
                                    class="mb-2 block text-xs
                                           font-medium uppercase
                                           tracking-[0.08em]
                                           text-[var(--content-muted)]"
                                >
                                    Adresse e-mail
                                </label>

                                <div class="relative">

                                    <i
                                        class="bi bi-envelope
                                               pointer-events-none
                                               absolute left-4 top-1/2
                                               -translate-y-1/2
                                               text-[var(--content-muted)]"
                                    ></i>

                                    <input
                                        id="email"
                                        name="email"
                                        type="email"
                                        value="{{ old('email', auth()->user()->email) }}"
                                        autocomplete="email"
                                        required
                                        class="h-11 w-full
                                               rounded-xl
                                               border border-[var(--line-subtle)]
                                               bg-[var(--surface-page)]
                                               pl-11 pr-4
                                               text-sm text-[var(--content-primary)]
                                               outline-none
                                               transition
                                               focus:border-[var(--color-orange)]/40
                                               focus:ring-2
                                               focus:ring-[var(--color-orange)]/10"
                                    >

                                </div>

                            </div>


                        </div>


                        <!-- Save -->

                        <div
                            class="mt-6 flex flex-col-reverse
                                   gap-3 border-t
                                   border-[var(--line-subtle)]
                                   pt-5
                                   sm:flex-row
                                   sm:items-center
                                   sm:justify-end"
                        >

                            <button
                                type="submit"
                                class="inline-flex h-10
                                       items-center
                                       justify-center gap-2
                                       rounded-xl
                                       bg-[var(--color-orange)]
                                       px-5
                                       text-sm font-semibold
                                       text-[var(--content-primary)]
                                       shadow-lg
                                       shadow-[var(--color-orange)]/10
                                       transition
                                       hover:brightness-110
                                       hover:bg-[var(--color-orange)]/40
                                       active:scale-[0.98]"
                            >
                                <i class="bi bi-check2"></i>
                                Enregistrer
                            </button>

                        </div>

                    </form>

                </article>


                <!-- ==================================================
                     PASSWORD
                =================================================== -->

                <article
                    class="overflow-hidden
                           rounded-2xl
                           border border-[var(--line-subtle)]
                           bg-[var(--surface-panel-strong)]
                           lg:col-span-2"
                >

                    <!-- Header -->

                    <div
                        class="flex items-center justify-between
                               border-b border-[var(--line-subtle)]
                               px-5 py-4"
                    >

                        <div>

                            <h3
                                class="text-sm font-semibold
                                       text-[var(--content-primary)]"
                            >
                                Modifier le mot de passe
                            </h3>

                            <p
                                class="mt-1 text-xs text-[var(--content-muted)]"
                            >
                                Utilisez un mot de passe unique
                                et suffisamment sécurisé.
                            </p>

                        </div>

                        <span
                            class="flex h-9 w-9
                                   items-center justify-center
                                   rounded-xl
                                   bg-emerald-500/10
                                   text-emerald-400"
                        >
                            <i class="bi bi-shield-lock"></i>
                        </span>

                    </div>


                    <!-- Password form -->

                    @if (session('status') === 'password-updated')
                        <div
                            class="mx-5 mt-5 rounded-xl
                                   border border-emerald-500/20
                                   bg-emerald-500/[0.06]
                                   px-4 py-3
                                   text-sm text-emerald-300
                                   sm:mx-6"
                            role="status"
                        >
                            <div class="flex items-center gap-3">
                                <i class="bi bi-check-circle"></i>
                                <span>Votre mot de passe a été modifié avec succès.</span>
                            </div>
                        </div>
                    @endif

                    @if ($errors->updatePassword->any())
                        <div
                            class="mx-5 mt-5 rounded-xl
                                   border border-red-500/20
                                   bg-red-500/[0.06]
                                   px-4 py-3
                                   text-sm text-red-300
                                   sm:mx-6"
                            role="alert"
                        >
                            <ul class="space-y-1">
                                @foreach ($errors->updatePassword->all() as $error)
                                    <li class="flex items-start gap-3">
                                        <i class="bi bi-exclamation-circle mt-0.5 shrink-0"></i>
                                        <span>{{ $error }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    <form
                        method="POST"
                        action="{{ route('user-password.update') }}"
                        class="p-5 sm:p-6"
                    >

                        @csrf
                        @method('PUT')

                        <div
                            class="grid grid-cols-1
                                   gap-5
                                   sm:grid-cols-3"
                        >

                            <!-- Current password -->

                            <div>

                                <label
                                    for="current_password"
                                    class="mb-2 block text-xs
                                           font-medium uppercase
                                           tracking-[0.08em]
                                           text-[var(--content-muted)]"
                                >
                                    Mot de passe actuel
                                </label>

                                <div class="relative">

                                    <input
                                        id="current_password"
                                        name="current_password"
                                        type="password"
                                        autocomplete="current-password"
                                        class="h-11 w-full
                                               rounded-xl
                                               border border-[var(--line-subtle)]
                                               bg-[var(--surface-page)]
                                               px-4 pr-11
                                               text-sm text-[var(--content-primary)]
                                               outline-none
                                               transition
                                               focus:border-[var(--color-orange)]/40
                                               focus:ring-2
                                               focus:ring-[var(--color-orange)]/10"
                                    >

                                    <button
                                        type="button"
                                        data-password-toggle="current_password"
                                        class="absolute right-3 top-1/2
                                               -translate-y-1/2
                                               text-[var(--content-muted)]
                                               transition
                                               hover:text-[var(--content-secondary)]"
                                    >
                                        <i class="bi bi-eye"></i>
                                    </button>

                                </div>

                            </div>


                            <!-- New password -->

                            <div>

                                <label
                                    for="password"
                                    class="mb-2 block text-xs
                                           font-medium uppercase
                                           tracking-[0.08em]
                                           text-[var(--content-muted)]"
                                >
                                    Nouveau mot de passe
                                </label>

                                <div class="relative">

                                    <input
                                        id="password"
                                        name="password"
                                        type="password"
                                        autocomplete="new-password"
                                        class="h-11 w-full
                                               rounded-xl
                                               border border-[var(--line-subtle)]
                                               bg-[var(--surface-page)]
                                               px-4 pr-11
                                               text-sm text-[var(--content-primary)]
                                               outline-none
                                               transition
                                               focus:border-[var(--color-orange)]/40
                                               focus:ring-2
                                               focus:ring-[var(--color-orange)]/10"
                                    >

                                    <button
                                        type="button"
                                        data-password-toggle="password"
                                        class="absolute right-3 top-1/2
                                               -translate-y-1/2
                                               text-[var(--content-muted)]
                                               transition
                                               hover:text-[var(--content-secondary)]"
                                    >
                                        <i class="bi bi-eye"></i>
                                    </button>

                                </div>

                            </div>


                            <!-- Confirmation -->

                            <div>

                                <label
                                    for="password_confirmation"
                                    class="mb-2 block text-xs
                                           font-medium uppercase
                                           tracking-[0.08em]
                                           text-[var(--content-muted)]"
                                >
                                    Confirmation
                                </label>

                                <div class="relative">

                                    <input
                                        id="password_confirmation"
                                        name="password_confirmation"
                                        type="password"
                                        autocomplete="new-password"
                                        class="h-11 w-full
                                               rounded-xl
                                               border border-[var(--line-subtle)]
                                               bg-[var(--surface-page)]
                                               px-4 pr-11
                                               text-sm text-[var(--content-primary)]
                                               outline-none
                                               transition
                                               focus:border-[var(--color-orange)]/40
                                               focus:ring-2
                                               focus:ring-[var(--color-orange)]/10"
                                    >

                                    <button
                                        type="button"
                                        data-password-toggle="password_confirmation"
                                        class="absolute right-3 top-1/2
                                               -translate-y-1/2
                                               text-[var(--content-muted)]
                                               transition
                                               hover:text-[var(--content-secondary)]"
                                    >
                                        <i class="bi bi-eye"></i>
                                    </button>

                                </div>

                            </div>

                        </div>


                        <!-- Password hints -->

                        <div
                            class="mt-5 rounded-xl
                                   border border-[var(--line-subtle)]
                                   bg-[var(--surface-panel-strong)]
                                   px-4 py-3"
                        >

                            <div class="flex gap-3">

                                <i
                                    class="bi bi-info-circle
                                           mt-0.5 shrink-0
                                           text-sm
                                           text-[var(--content-muted)]"
                                ></i>

                                <p
                                    class="text-xs leading-5
                                           text-[var(--content-muted)]"
                                >
                                    Votre mot de passe doit comporter
                                    au minimum 8 caractères et idéalement
                                    mélanger lettres, chiffres et caractères
                                    spéciaux.
                                </p>

                            </div>

                        </div>


                        <!-- Save -->

                        <div
                            class="mt-5 flex justify-end"
                        >

                            <button
                                type="submit"
                                class="inline-flex h-10
                                       items-center
                                       justify-center gap-2
                                       rounded-xl
                                       bg-[var(--color-orange)]
                                       px-5
                                       text-sm font-semibold
                                       text-[var(--content-primary)]
                                       shadow-lg
                                       shadow-[var(--color-orange)]/10
                                       transition
                                       hover:brightness-110
                                       hover:bg-[var(--color-orange)]/40
                                       active:scale-[0.98]"
                            >
                                <i class="bi bi-shield-check"></i>

                                Modifier le mot de passe

                            </button>

                        </div>

                    </form>

                </article>

            </section>



            <!-- ==================================================
                 FOOTER
            =================================================== -->

            <div
                class="mt-8 flex flex-col gap-2
                       border-t border-[var(--line-subtle)]
                       pt-5
                       text-[11px] text-[var(--content-muted)]
                       sm:flex-row
                       sm:items-center
                       sm:justify-between"
            >

                <span>
                    Les Francas de Donchery
                </span>

            </div>

        </div>

    </main>



    <!-- ============================================================
         PASSWORD VISIBILITY
    ============================================================= -->

    <script>
        document.addEventListener('DOMContentLoaded', () => {

            document
                .querySelectorAll('[data-password-toggle]')
                .forEach(button => {

                    button.addEventListener('click', () => {

                        const input = document.getElementById(
                            button.dataset.passwordToggle
                        );

                        if (!input) {
                            return;
                        }

                        const icon = button.querySelector('i');

                        if (input.type === 'password') {

                            input.type = 'text';

                            icon.classList.remove('bi-eye');
                            icon.classList.add('bi-eye-slash');

                        } else {

                            input.type = 'password';

                            icon.classList.remove('bi-eye-slash');
                            icon.classList.add('bi-eye');

                        }

                    });

                });

        });
    </script>

@endsection