@extends('layouts.admin')
@section('title', 'Admin Profile')

@section('content')
<div class="min-h-screen bg-slate-50">
    <div class="mx-auto max-w-5xl px-4 py-8 sm:px-6 lg:px-8">

        @php
            $photoUrl = !empty($admin->photo) ? asset($admin->photo) : null;
        @endphp

        {{-- Header --}}
        <div class="mb-6 flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
            <div>
                <h1 class="text-2xl font-bold text-slate-800 md:text-3xl">Admin Profile</h1>
                <p class="mt-1 text-sm text-slate-500">
                    আপনার অ্যাডমিন প্রোফাইলের তথ্য এখানে দেখা যাচ্ছে।
                </p>
            </div>

            <a href="{{ route('admin.profile.edit') }}"
               class="inline-flex items-center justify-center rounded-2xl bg-indigo-600 px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700 hover:shadow-lg">
                <span class="mr-2">✏</span>
                Edit Profile
            </a>
        </div>

        {{-- Profile Card --}}
        <div class="overflow-hidden rounded-3xl border border-slate-200 bg-white shadow-sm">

            {{-- Top Cover --}}
            <div class="relative h-40 bg-gradient-to-r from-indigo-600 via-blue-600 to-cyan-500">
                <div class="absolute inset-0 bg-black/10"></div>
            </div>

            {{-- Content --}}
            <div class="relative px-6 pb-8">
                <div class="-mt-16 flex flex-col gap-6 md:flex-row md:items-end md:justify-between">

                    {{-- Left: Photo + Basic Info --}}
                    <div class="flex flex-col gap-4 md:flex-row md:items-end">
                        <div class="rounded-full border-4 border-white bg-white shadow-lg">
                            @if($photoUrl)
                                <img src="{{ $photoUrl }}"
                                     alt="Admin Photo"
                                     class="h-28 w-28 rounded-full object-cover">
                            @else
                                <div class="flex h-28 w-28 items-center justify-center rounded-full bg-slate-100 text-3xl font-bold text-slate-500">
                                    {{ strtoupper(substr($admin->name ?? 'A', 0, 1)) }}
                                </div>
                            @endif
                        </div>

                        <div class="pt-2 md:pt-0">
                            <h2 class="text-2xl font-bold text-slate-800">{{ $admin->name }}</h2>
                            <p class="mt-1 break-all text-sm text-slate-500">{{ $admin->email }}</p>

                            <div class="mt-3 inline-flex items-center rounded-full bg-indigo-50 px-3 py-1 text-xs font-semibold text-indigo-700">
                                Administrator
                            </div>
                        </div>
                    </div>

                    {{-- Right: UID Box --}}
                    <div class="rounded-2xl border border-slate-200 bg-slate-50 px-5 py-4 shadow-sm">
                        <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">UID</div>
                        <div class="mt-1 text-lg font-bold text-slate-800">{{ $admin->uid }}</div>
                    </div>
                </div>

                {{-- Info Grid --}}
                <div class="mt-8 grid grid-cols-1 gap-6 md:grid-cols-2">

                    <div class="rounded-2xl border border-slate-200 bg-slate-50 p-5">
                        <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Full Name</div>
                        <div class="mt-2 text-base font-semibold text-slate-800">{{ $admin->name }}</div>
                    </div>

                    <div class="rounded-2xl border border-slate-200 bg-slate-50 p-5">
                        <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Email Address</div>
                        <div class="mt-2 break-all text-base font-semibold text-slate-800">{{ $admin->email }}</div>
                    </div>

                    <div class="rounded-2xl border border-slate-200 bg-slate-50 p-5">
                        <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">User ID</div>
                        <div class="mt-2 text-base font-semibold text-slate-800">{{ $admin->uid }}</div>
                    </div>

                    <div class="rounded-2xl border border-slate-200 bg-slate-50 p-5">
                        <div class="text-xs font-semibold uppercase tracking-wide text-slate-500">Photo Status</div>
                        <div class="mt-2">
                            @if($admin->photo)
                                <span class="inline-flex items-center rounded-full bg-emerald-100 px-3 py-1 text-xs font-semibold text-emerald-700">
                                    Uploaded
                                </span>
                            @else
                                <span class="inline-flex items-center rounded-full bg-amber-100 px-3 py-1 text-xs font-semibold text-amber-700">
                                    No Photo
                                </span>
                            @endif
                        </div>
                    </div>
                </div>

                {{-- Bottom Action Bar --}}
                <div class="mt-8 flex flex-wrap items-center gap-3 border-t border-slate-200 pt-6">
                    <a href="{{ route('admin.profile.edit') }}"
                       class="inline-flex items-center rounded-2xl bg-indigo-600 px-5 py-3 text-sm font-semibold text-white shadow-sm transition hover:bg-indigo-700">
                        Update Profile
                    </a>

                    <a href="{{ route('admin.dashboard') }}"
                       class="inline-flex items-center rounded-2xl bg-slate-200 px-5 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-300">
                        Back to Dashboard
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection