@section('page-title')
    {{ __('Profile Information') }}
@endsection

@section('page-description')
    {{ __("Update your account's profile information and email address.") }}
@endsection

<section class="w-full lg:py-6">

    <div class="mx-auto">

        <!-- Verification Form -->
        <form id="send-verification"
            method="POST"
            action="{{ route('verification.send') }}">

            @csrf

        </form>

        <!-- Main Profile Form -->
        <form method="POST"
            action="{{ route('profile.update') }}"
            class="grid grid-cols-1 lg:grid-cols-3 gap-6">

            @csrf
            @method('PATCH')

            <!-- ================= LEFT PROFILE CARD ================= -->
            <div
                class="w-full rounded-3xl bg-white border border-gray-200 shadow-sm p-6 text-center h-fit">

                <!-- Avatar -->
                <div class="relative inline-block">

                    <div
                        class="h-24 w-24 rounded-full bg-gradient-to-r from-indigo-600 to-blue-500 text-white flex items-center justify-center text-3xl font-bold mx-auto shadow-lg">

                        {{ strtoupper(substr($user->name, 0, 1)) }}

                    </div>

                    <!-- Upload Button -->
                    <button type="button"
                        class="absolute bottom-0 right-0 h-9 w-9 rounded-full bg-white border border-gray-200 shadow flex items-center justify-center hover:bg-gray-50 transition">

                        <svg xmlns="http://www.w3.org/2000/svg"
                            class="w-4 h-4 text-gray-600"
                            fill="none"
                            viewBox="0 0 24 24"
                            stroke="currentColor">

                            <path stroke-linecap="round"
                                stroke-linejoin="round"
                                stroke-width="2"
                                d="M3 7a2 2 0 012-2h2l1-1h8l1 1h2a2 2 0 012 2v10a2 2 0 01-2 2H5a2 2 0 01-2-2V7z" />

                            <circle cx="12"
                                cy="13"
                                r="3"
                                stroke-width="2" />

                        </svg>

                    </button>

                </div>

                <!-- User Info -->
                <h2 class="mt-4 text-xl font-bold text-gray-900">
                    {{ $user->name }}
                </h2>

                <p class="text-sm text-gray-500">
                    Administrator
                </p>

                <!-- Stats -->
                <div class="mt-6 grid grid-cols-3 gap-3">

                    <div class="rounded-2xl bg-gray-50 p-3">
                        <div class="font-bold text-gray-900">
                            248
                        </div>
                        <div class="text-[10px] uppercase tracking-wider text-gray-500 mt-1">
                            Bookings
                        </div>
                    </div>

                    <div class="rounded-2xl bg-gray-50 p-3">
                        <div class="font-bold text-gray-900">
                            $24k
                        </div>
                        <div class="text-[10px] uppercase tracking-wider text-gray-500 mt-1">
                            Revenue
                        </div>
                    </div>

                    <div class="rounded-2xl bg-gray-50 p-3">
                        <div class="font-bold text-gray-900">
                            4.9
                        </div>
                        <div class="text-[10px] uppercase tracking-wider text-gray-500 mt-1">
                            Rating
                        </div>
                    </div>

                </div>

            </div>

            <!-- ================= RIGHT FORM CARD ================= -->
            <div
                class="lg:col-span-2 w-full rounded-3xl bg-white border border-gray-200 shadow-sm p-6">

                <!-- Heading -->
                <div class="flex items-center justify-between mb-6">

                    <div>

                        <h3 class="text-lg font-semibold text-gray-900">
                            Personal Information
                        </h3>

                        <p class="text-sm text-gray-500 mt-1">
                            Update your profile details and email address.
                        </p>

                    </div>

                </div>

                <!-- FORM GRID -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-5">

                    <!-- FULL NAME -->
                    <div>

                        <label
                            class="text-[11px] uppercase tracking-wider text-gray-500 font-semibold">

                            Full Name

                        </label>

                        <input type="text"
                            id="name"
                            name="name"
                            value="{{ old('name', $user->name) }}"
                            required
                            autofocus
                            autocomplete="name"
                            class="mt-2 w-full h-11 rounded-xl border border-gray-200 bg-gray-50 px-4 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:bg-white transition">

                        <x-input-error class="mt-2"
                            :messages="$errors->get('name')" />

                    </div>

                    <!-- EMAIL -->
                    <div>

                        <label
                            class="text-[11px] uppercase tracking-wider text-gray-500 font-semibold">

                            Email Address

                        </label>

                        <div class="relative mt-2">

                            <svg xmlns="http://www.w3.org/2000/svg"
                                class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke="currentColor">

                                <path stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M16 12H8m8 0l-8-5m8 5l-8 5" />

                            </svg>

                            <input type="email"
                                id="email"
                                name="email"
                                value="{{ old('email', $user->email) }}"
                                required
                                autocomplete="username"
                                class="w-full h-11 rounded-xl border border-gray-200 bg-gray-50 pl-11 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:bg-white transition">

                        </div>

                        <x-input-error class="mt-2"
                            :messages="$errors->get('email')" />

                        @if ($user instanceof \Illuminate\Contracts\Auth\MustVerifyEmail && ! $user->hasVerifiedEmail())

                            <div class="mt-3">

                                <p class="text-sm text-amber-600">

                                    Your email address is unverified.

                                    <button form="send-verification"
                                        class="underline hover:text-amber-700">

                                        Click here to re-send verification email.

                                    </button>

                                </p>

                                @if (session('status') === 'verification-link-sent')

                                    <p class="mt-2 text-sm text-green-600">
                                        Verification link sent successfully.
                                    </p>

                                @endif

                            </div>

                        @endif

                    </div>

                    <!-- PHONE -->
                    <div>

                        <label
                            class="text-[11px] uppercase tracking-wider text-gray-500 font-semibold">

                            Phone

                        </label>

                        <div class="relative mt-2">

                            <svg xmlns="http://www.w3.org/2000/svg"
                                class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke="currentColor">

                                <path stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498A1 1 0 0121 15.72V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />

                            </svg>

                            <input type="text"
                                placeholder="Enter phone number"
                                class="w-full h-11 rounded-xl border border-gray-200 bg-gray-50 pl-11 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:bg-white transition">

                        </div>

                    </div>

                    <!-- LOCATION -->
                    <div>

                        <label
                            class="text-[11px] uppercase tracking-wider text-gray-500 font-semibold">

                            Location

                        </label>

                        <div class="relative mt-2">

                            <svg xmlns="http://www.w3.org/2000/svg"
                                class="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"
                                fill="none"
                                viewBox="0 0 24 24"
                                stroke="currentColor">

                                <path stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M17.657 16.657L13.414 20.9a2 2 0 01-2.828 0l-4.243-4.243a8 8 0 1111.314 0z" />

                                <path stroke-linecap="round"
                                    stroke-linejoin="round"
                                    stroke-width="2"
                                    d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />

                            </svg>

                            <input type="text"
                                placeholder="Your location"
                                class="w-full h-11 rounded-xl border border-gray-200 bg-gray-50 pl-11 pr-4 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:bg-white transition">

                        </div>

                    </div>

                </div>

                <!-- BUTTONS -->
                <div
                    class="mt-8 flex flex-col sm:flex-row items-center justify-end gap-3">

                    <button type="button"
                        class="w-full sm:w-auto h-11 px-5 rounded-xl border border-gray-200 bg-white hover:bg-gray-50 text-sm font-medium transition">

                        Cancel

                    </button>

                    <button type="submit"
                        class="w-full sm:w-auto h-11 px-6 rounded-xl bg-gradient-to-r from-indigo-600 to-blue-500 hover:from-indigo-700 hover:to-blue-600 text-white text-sm font-medium shadow-lg transition">

                        Save Changes

                    </button>

                </div>

                <!-- SUCCESS MESSAGE -->
                @if (session('status') === 'profile-updated')

                    <p x-data="{ show: true }"
                        x-show="show"
                        x-transition
                        x-init="setTimeout(() => show = false, 2000)"
                        class="mt-4 text-sm text-green-600">

                        Profile updated successfully.

                    </p>

                @endif

            </div>

        </form>

    </div>

</section>