@extends('layouts.app')

@section('mobile-title', 'Profile')
@section('mobile-subtitle', $user->name)

@section('content')
    <div class="space-y-6 md:hidden">
        <section class="text-center">
            <div class="relative mx-auto flex h-24 w-24 items-center justify-center rounded bg-emerald-100 text-3xl font-bold text-emerald-900">
                {{ collect(explode(' ', $user->name))->map(fn ($part) => substr($part, 0, 1))->take(2)->join('') }}
                <span class="absolute bottom-1 right-1 h-4 w-4 rounded-full border-2 border-white bg-emerald-700"></span>
            </div>
            <h1 class="mt-4 text-2xl font-bold">{{ $user->name }}</h1>
            <p class="mt-1 text-sm text-zinc-600">{{ ucfirst($user->role) }} · Stephup Construction</p>
            <div class="mt-5 flex gap-3">
                <a href="#password-form" class="inline-flex flex-1 items-center justify-center gap-2 rounded bg-emerald-900 px-4 py-2.5 text-sm font-bold text-white"><span class="material-symbols-outlined text-base">edit</span>Edit Profile</a>
                <a href="mailto:{{ $user->email }}" class="inline-flex items-center justify-center rounded border border-zinc-300 bg-white px-4 py-2.5 text-sm font-bold text-zinc-800"><span class="material-symbols-outlined text-base">mail</span></a>
            </div>
        </section>

        <section class="grid grid-cols-3 gap-2">
            <div class="rounded border border-zinc-200 bg-white p-3 text-center shadow-sm"><div class="text-2xl font-bold text-emerald-800">12</div><div class="mt-1 text-[11px] font-bold uppercase text-zinc-600">Active Projects</div></div>
            <div class="rounded border border-zinc-200 bg-white p-3 text-center shadow-sm"><div class="text-2xl font-bold text-blue-700">8</div><div class="mt-1 text-[11px] font-bold uppercase text-zinc-600">Certifications</div></div>
            <div class="rounded border-b-4 border-b-emerald-800 border-zinc-200 bg-white p-3 text-center shadow-sm"><div class="text-2xl font-bold text-emerald-800">98%</div><div class="mt-1 text-[11px] font-bold uppercase text-zinc-600">Safety Rating</div></div>
        </section>

        <section>
            <h2 class="text-lg font-bold">Certifications</h2>
            <div class="mt-3 divide-y divide-zinc-100 overflow-hidden rounded border border-zinc-200 bg-white shadow-sm">
                @foreach ([['OSHA 30-Hour', 'Dec 2026', 'bg-emerald-50'], ['Site Safety Manager', 'Aug 2025', 'bg-blue-50'], ['Advanced First Aid', 'Mar 2025', 'bg-zinc-100']] as [$title, $expires, $color])
                    <div class="flex items-center gap-4 px-4 py-4">
                        <span class="h-10 w-10 rounded {{ $color }}"></span>
                        <span class="min-w-0 flex-1"><span class="block font-bold">{{ $title }}</span><span class="mt-1 block text-sm text-zinc-600">Expires: {{ $expires }}</span></span>
                        <span class="inline-flex items-center gap-1 text-xs font-bold text-emerald-900"><span class="material-symbols-outlined text-sm">visibility</span>VIEW</span>
                    </div>
                @endforeach
            </div>
        </section>

        <section>
            <h2 class="text-lg font-bold">Recent Activity</h2>
            <div class="mt-3 space-y-4 border-l-2 border-zinc-300 pl-5">
                @foreach ([['Approved Field Report', 'Skyline Tower B · 2 hours ago', 'border-emerald-700'], ['Uploaded 4 photos', 'Foundation Pour · Yesterday', 'border-blue-700'], ['Completed Safety Audit', 'Metro Extension Project · Oct 24, 2023', 'border-slate-600']] as [$title, $detail, $color])
                    <div class="relative">
                        <span class="absolute -left-[29px] top-1 h-4 w-4 rounded-full border-2 {{ $color }} bg-white"></span>
                        <div class="font-bold">{{ $title }}</div>
                        <div class="mt-1 text-sm text-zinc-600">{{ $detail }}</div>
                    </div>
                @endforeach
            </div>
        </section>

        <section class="overflow-hidden rounded border border-zinc-200 bg-white shadow-sm">
            <h2 class="border-b border-zinc-100 px-4 py-3 text-lg font-bold">Account</h2>
            <a href="#password-form" class="flex items-center justify-between border-b border-zinc-100 px-4 py-4">
                <span class="inline-flex items-center gap-3 font-semibold"><span class="material-symbols-outlined">lock</span>Security & Password</span>
                <span class="material-symbols-outlined text-zinc-500">chevron_right</span>
            </a>
            <div class="flex items-center justify-between border-b border-zinc-100 px-4 py-4">
                <span class="inline-flex items-center gap-3 font-semibold"><span class="material-symbols-outlined">notifications</span>Notifications</span>
                <span class="material-symbols-outlined text-zinc-500">chevron_right</span>
            </div>
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button class="flex w-full items-center gap-3 px-4 py-4 text-left font-bold text-red-700"><span class="material-symbols-outlined">logout</span>Sign Out</button>
            </form>
        </section>

        <section id="password-form" class="rounded border border-zinc-200 bg-white p-4 shadow-sm">
            <h2 class="text-lg font-bold">Change password</h2>
            <form method="POST" action="{{ route('profile.password.update') }}" class="mt-4 grid gap-4">
                @csrf
                @method('PUT')
                <input name="current_password" type="password" required placeholder="Current password" class="w-full rounded border border-zinc-300 px-3 py-2 text-sm">
                <input name="password" type="password" required placeholder="New password" class="w-full rounded border border-zinc-300 px-3 py-2 text-sm">
                <input name="password_confirmation" type="password" required placeholder="Confirm password" class="w-full rounded border border-zinc-300 px-3 py-2 text-sm">
                <button class="rounded bg-emerald-900 px-4 py-2.5 text-sm font-bold text-white">Update password</button>
            </form>
        </section>
    </div>

    <div class="hidden md:block">
    <div class="mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
        <div>
            <h1 class="text-3xl font-bold">User Profile</h1>
            <p class="mt-1 text-sm text-zinc-600">Manage personal information, credentials, and account settings.</p>
        </div>
        <a href="{{ route('dashboard') }}" class="inline-flex rounded border border-zinc-300 px-4 py-2.5 text-sm font-bold text-zinc-700">Cancel</a>
    </div>

    <div class="grid gap-6 lg:grid-cols-[360px_1fr]">
        <aside class="space-y-6">
            <section class="rounded border border-zinc-200 bg-white p-5 text-center shadow-sm">
                <div class="mx-auto flex h-28 w-28 items-center justify-center rounded bg-emerald-100 text-3xl font-bold text-emerald-900">{{ collect(explode(' ', $user->name))->map(fn ($part) => substr($part, 0, 1))->take(2)->join('') }}</div>
                <h2 class="mt-5 text-xl font-bold">{{ $user->name }}</h2>
                <p class="mt-1 text-sm text-emerald-900">{{ ucfirst($user->role) }}</p>
                <p class="mt-1 text-sm text-zinc-600">{{ $user->email }}</p>
                <div class="mt-5 grid grid-cols-2 gap-3 border-t border-zinc-200 pt-4 text-left text-sm">
                    <div><div class="text-xs font-bold uppercase text-zinc-600">Employee ID</div><div class="mt-1 font-semibold">SU-{{ str_pad((string) $user->id, 4, '0', STR_PAD_LEFT) }}</div></div>
                    <div><div class="text-xs font-bold uppercase text-zinc-600">Joined</div><div class="mt-1 font-semibold">{{ $user->created_at->format('M Y') }}</div></div>
                </div>
            </section>

            <section class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
                <h2 class="text-lg font-bold">Skills & Expertise</h2>
                <div class="mt-4 flex flex-wrap gap-2">
                    @foreach (['Site Operations', 'Risk Management', 'Reports', 'Health & Safety', 'Project Delivery'] as $skill)
                        <span class="rounded-full border border-zinc-200 bg-zinc-50 px-3 py-1 text-sm text-zinc-700">{{ $skill }}</span>
                    @endforeach
                </div>
            </section>
        </aside>

        <section class="space-y-6">
            <section class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
                <h2 class="text-lg font-bold">Account Information</h2>
                <div class="mt-5 grid gap-5 sm:grid-cols-2">
                    <div>
                        <label class="text-sm font-semibold">Email Address</label>
                        <div class="mt-2 rounded border border-zinc-300 bg-zinc-50 px-3 py-2 text-sm">{{ $user->email }}</div>
                    </div>
                    <div>
                        <label class="text-sm font-semibold">Role</label>
                        <div class="mt-2 rounded border border-zinc-300 bg-zinc-50 px-3 py-2 text-sm">{{ ucfirst($user->role) }}</div>
                    </div>
                    <div>
                        <label class="text-sm font-semibold">Status</label>
                        <div class="mt-2 rounded border border-zinc-300 bg-zinc-50 px-3 py-2 text-sm">{{ ucfirst($user->status ?: 'active') }}</div>
                    </div>
                    <div>
                        <label class="text-sm font-semibold">Last updated</label>
                        <div class="mt-2 rounded border border-zinc-300 bg-zinc-50 px-3 py-2 text-sm">{{ $user->updated_at->diffForHumans() }}</div>
                    </div>
                </div>
            </section>

            <section class="rounded border border-zinc-200 bg-white p-5 shadow-sm">
                <h2 class="text-lg font-bold">Change password</h2>
                <form method="POST" action="{{ route('profile.password.update') }}" class="mt-5 grid gap-5">
                    @csrf
                    @method('PUT')
                    <div>
                        <label class="text-sm font-semibold" for="current_password">Current password</label>
                        <input id="current_password" name="current_password" type="password" required class="mt-2 w-full rounded border border-zinc-300 px-3 py-2 text-sm">
                    </div>
                    <div class="grid gap-5 sm:grid-cols-2">
                        <div>
                            <label class="text-sm font-semibold" for="password">New password</label>
                            <input id="password" name="password" type="password" required class="mt-2 w-full rounded border border-zinc-300 px-3 py-2 text-sm">
                        </div>
                        <div>
                            <label class="text-sm font-semibold" for="password_confirmation">Confirm password</label>
                            <input id="password_confirmation" name="password_confirmation" type="password" required class="mt-2 w-full rounded border border-zinc-300 px-3 py-2 text-sm">
                        </div>
                    </div>
                    <div>
                        <button class="rounded bg-emerald-900 px-4 py-2.5 text-sm font-bold text-white hover:bg-emerald-800">Update password</button>
                    </div>
                </form>
            </section>
        </section>
    </div>
    </div>
@endsection