@extends('layouts.app')

@section('content')
    {{-- ── Page Header ── --}}
    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
        <div>
            <h1 class="text-2xl font-bold tracking-tight">My Profile</h1>
            <p class="text-sm text-base-content/50 mt-0.5">Manage your account details</p>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">

        {{-- ── Left: Profile Info ── --}}
        <div class="space-y-4">

            {{-- Avatar Card --}}
            <div class="card bg-base-100 border border-base-200 shadow-sm">
                <div class="card-body p-6 items-center text-center">
                    <div class="avatar avatar-placeholder mb-3">
                        <div class="bg-primary/10 text-primary rounded-full size-20">
                            <span class="text-3xl font-bold">
                                {{ strtoupper(substr($user->name, 0, 1)) }}
                            </span>
                        </div>
                    </div>
                    <p class="font-bold text-lg">{{ $user->name }}</p>
                    <p class="text-sm text-base-content/50">{{ $user->email }}</p>
                    <div class="flex flex-wrap justify-center gap-1 mt-2">
                        @forelse ($user->roles as $role)
                            <span class="badge badge-secondary badge-soft badge-sm capitalize">
                                {{ $role->name }}
                            </span>
                        @empty
                            <span class="badge badge-ghost badge-soft badge-sm">No role</span>
                        @endforelse
                    </div>
                </div>
            </div>

            {{-- Account Info --}}
            <div class="card bg-base-100 border border-base-200 shadow-sm">
                <div class="card-body p-5">
                    <h2 class="font-semibold text-sm mb-4 flex items-center gap-2">
                        <span class="icon-[tabler--info-circle] size-4 text-primary"></span>
                        Account Info
                    </h2>
                    <div class="space-y-3 text-sm">
                        <div class="flex justify-between items-center py-2 border-b border-base-200">
                            <span class="text-base-content/50">Member Since</span>
                            <span class="font-medium">{{ $user->created_at->format('d M Y') }}</span>
                        </div>
                        <div class="flex justify-between items-center py-2 border-b border-base-200">
                            <span class="text-base-content/50">Last Updated</span>
                            <span class="font-medium">{{ $user->updated_at->format('d M Y') }}</span>
                        </div>
                        <div class="flex justify-between items-center py-2">
                            <span class="text-base-content/50">Email Verified</span>
                            @if ($user->email_verified_at)
                                <span class="badge badge-success badge-soft badge-sm">Verified</span>
                            @else
                                <span class="badge badge-error badge-soft badge-sm">Not Verified</span>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

        </div>

        {{-- ── Right: Forms ── --}}
        <div class="lg:col-span-2 space-y-6">

            {{-- Success Alert --}}
            @if (session('success'))
                <div class="alert alert-success">
                    <span class="icon-[tabler--circle-check] size-5 shrink-0"></span>
                    <span>{{ session('success') }}</span>
                </div>
            @endif

            {{-- ── Update Name ── --}}
            <div class="card bg-base-100 border border-base-200 shadow-sm">
                <div class="card-body p-6">
                    <h2 class="font-semibold text-base mb-5 flex items-center gap-2">
                        <span class="icon-[tabler--user] size-5 text-primary"></span>
                        Profile Information
                    </h2>

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

                        {{-- Name --}}
                        <div>
                            <label class="label mb-1">
                                <span class="label-text font-medium">Full Name</span>
                            </label>
                            <div class="input w-full @error('name') input-error @enderror">
                                <input type="text" name="name" value="{{ old('name', $user->name) }}"
                                    class="grow" />
                                <span class="icon-[tabler--user] text-base-content/40 my-auto ms-3 size-5 shrink-0"></span>
                            </div>
                            @error('name')
                                <p class="text-error text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Email (read only) --}}
                        <div>
                            <label class="label mb-1">
                                <span class="label-text font-medium">Email Address</span>
                                <span class="label-text-alt text-base-content/40">cannot be changed</span>
                            </label>
                            <div class="input w-full bg-base-200 opacity-60 cursor-not-allowed">
                                <input type="email" value="{{ $user->email }}" class="grow" disabled readonly />
                                <span class="icon-[tabler--mail] text-base-content/40 my-auto ms-3 size-5 shrink-0"></span>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary gap-2">
                            <span class="icon-[tabler--device-floppy] size-4"></span>
                            Save Changes
                        </button>

                    </form>
                </div>
            </div>

            {{-- ── Update Password ── --}}
            <div class="card bg-base-100 border border-base-200 shadow-sm">
                <div class="card-body p-6">
                    <h2 class="font-semibold text-base mb-5 flex items-center gap-2">
                        <span class="icon-[tabler--lock] size-5 text-primary"></span>
                        Change Password
                    </h2>

                    <form method="POST" action="{{ route('profile.update-password') }}" class="space-y-5">
                        @csrf
                        @method('PUT')

                        {{-- Current Password --}}
                        <div>
                            <label class="label mb-1">
                                <span class="label-text font-medium">Current Password</span>
                            </label>
                            <div class="input w-full @error('current_password') input-error @enderror">
                                <input type="password" name="current_password" id="current-password" class="grow" />
                                <button type="button" data-toggle-password='{ "target": "#current-password" }'
                                    class="block cursor-pointer" aria-label="password toggle">
                                    <span
                                        class="icon-[tabler--eye] text-base-content/80 password-active:block hidden size-5 shrink-0"></span>
                                    <span
                                        class="icon-[tabler--eye-off] text-base-content/80 password-active:hidden block size-5 shrink-0"></span>
                                </button>
                            </div>
                            @error('current_password')
                                <p class="text-error text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- New Password --}}
                        <div>
                            <label class="label mb-1">
                                <span class="label-text font-medium">New Password</span>
                            </label>
                            <div class="input w-full @error('password') input-error @enderror">
                                <input type="password" name="password" id="new-password" class="grow" />
                                <button type="button" data-toggle-password='{ "target": "#new-password" }'
                                    class="block cursor-pointer" aria-label="password toggle">
                                    <span
                                        class="icon-[tabler--eye] text-base-content/80 password-active:block hidden size-5 shrink-0"></span>
                                    <span
                                        class="icon-[tabler--eye-off] text-base-content/80 password-active:hidden block size-5 shrink-0"></span>
                                </button>
                            </div>
                            @error('password')
                                <p class="text-error text-xs mt-1">{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Confirm Password --}}
                        <div>
                            <label class="label mb-1">
                                <span class="label-text font-medium">Confirm New Password</span>
                            </label>
                            <div class="input w-full">
                                <input type="password" name="password_confirmation" id="confirm-password"
                                    class="grow" />
                                <button type="button" data-toggle-password='{ "target": "#confirm-password" }'
                                    class="block cursor-pointer" aria-label="password toggle">
                                    <span
                                        class="icon-[tabler--eye] text-base-content/80 password-active:block hidden size-5 shrink-0"></span>
                                    <span
                                        class="icon-[tabler--eye-off] text-base-content/80 password-active:hidden block size-5 shrink-0"></span>
                                </button>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-primary gap-2">
                            <span class="icon-[tabler--key] size-4"></span>
                            Update Password
                        </button>

                    </form>
                </div>
            </div>

        </div>

    </div>
@endsection