@extends('admin.layouts.app')

@section('content')
<div class="max-w-6xl space-y-8">
    <div>
        <h2 class="text-4xl font-extrabold">My Profile</h2>
        <p class="text-gray-400 mt-2">Manage your account information, profile photo and password.</p>
    </div>

    <div class="grid lg:grid-cols-3 gap-6">
        <div class="glass-card rounded-[1.8rem] p-8">
            <div class="flex flex-col items-center text-center">
                @if(auth()->user()->avatar_url)
                    <img src="{{ auth()->user()->avatar_url }}"
                         alt="{{ auth()->user()->name }}"
                         class="w-28 h-28 rounded-full object-cover border-4 border-red-700 mb-4">
                @else
                    <div class="w-28 h-28 rounded-full bg-red-600 flex items-center justify-center text-3xl font-bold mb-4">
                        {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                    </div>
                @endif

                <h3 class="text-2xl font-bold">{{ auth()->user()->name }}</h3>
                <p class="text-gray-400 mt-1 break-all">{{ auth()->user()->email }}</p>
                <p class="text-red-500 uppercase text-sm mt-2">{{ auth()->user()->role }}</p>
                <p class="text-gray-500 text-sm mt-4">Joined {{ auth()->user()->created_at?->format('F d, Y') }}</p>

                @if(auth()->user()->avatar)
                    <form action="{{ route('admin.profile.avatar.remove') }}" method="POST" class="mt-5">
                        @csrf
                        @method('DELETE')
                        <button class="border border-red-700 hover:bg-red-600/10 px-4 py-2 rounded-xl text-sm font-semibold">
                            Remove Photo
                        </button>
                    </form>
                @endif
            </div>
        </div>

        <div class="lg:col-span-2 space-y-6">
            <form action="{{ route('admin.profile.update') }}" method="POST" enctype="multipart/form-data" class="glass-card rounded-[1.8rem] p-8 space-y-5">
                @csrf

                <div>
                    <h3 class="text-2xl font-bold mb-1">Profile Information</h3>
                    <p class="text-gray-400 text-sm">Update your name, email address and profile photo.</p>
                </div>

                <div class="grid md:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm text-gray-300 mb-2">Full Name</label>
                        <input
                            type="text"
                            name="name"
                            value="{{ old('name', auth()->user()->name) }}"
                            class="w-full rounded-xl bg-black border border-gray-700 text-white px-4 py-3"
                        >
                    </div>

                    <div>
                        <label class="block text-sm text-gray-300 mb-2">Email Address</label>
                        <input
                            type="email"
                            name="email"
                            value="{{ old('email', auth()->user()->email) }}"
                            class="w-full rounded-xl bg-black border border-gray-700 text-white px-4 py-3"
                        >
                    </div>
                </div>

                <div>
                    <label class="block text-sm text-gray-300 mb-2">Profile Photo</label>
                    <input
                        type="file"
                        name="avatar"
                        class="w-full rounded-xl bg-black border border-gray-700 text-white px-4 py-3"
                    >
                </div>

                <button class="bg-red-600 hover:bg-red-700 px-6 py-3 rounded-xl font-semibold text-white">
                    Save Profile
                </button>
            </form>

            <form action="{{ route('admin.profile.password') }}" method="POST" class="glass-card rounded-[1.8rem] p-8 space-y-5">
                @csrf

                <div>
                    <h3 class="text-2xl font-bold mb-1">Change Password</h3>
                    <p class="text-gray-400 text-sm">Use a strong password to keep your account secure.</p>
                </div>

                <div class="grid md:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-sm text-gray-300 mb-2">Current Password</label>
                        <input
                            type="password"
                            name="current_password"
                            class="w-full rounded-xl bg-black border border-gray-700 text-white px-4 py-3"
                        >
                    </div>

                    <div>
                        <label class="block text-sm text-gray-300 mb-2">New Password</label>
                        <input
                            type="password"
                            name="password"
                            class="w-full rounded-xl bg-black border border-gray-700 text-white px-4 py-3"
                        >
                    </div>

                    <div>
                        <label class="block text-sm text-gray-300 mb-2">Confirm Password</label>
                        <input
                            type="password"
                            name="password_confirmation"
                            class="w-full rounded-xl bg-black border border-gray-700 text-white px-4 py-3"
                        >
                    </div>
                </div>

                <button class="bg-red-600 hover:bg-red-700 px-6 py-3 rounded-xl font-semibold text-white">
                    Update Password
                </button>
            </form>
        </div>
    </div>
</div>
@endsection