@extends('layouts.app')

@section('title', 'Profile Settings')
@section('heading', 'Profile Settings')

@section('content')
@php
    $navSections = $profileNavSections ?? [
        ['id' => 'account', 'label' => 'Account', 'icon' => 'bi-person-circle'],
        ['id' => 'basic', 'label' => 'Basic Info', 'icon' => 'bi-person-vcard'],
        ['id' => 'work', 'label' => 'Work Info', 'icon' => 'bi-briefcase'],
        ['id' => 'bank', 'label' => 'Bank Account Details', 'icon' => 'bi-bank'],
        ['id' => 'security', 'label' => 'Security', 'icon' => 'bi-shield-lock'],
        ['id' => 'notifications', 'label' => 'Notifications', 'icon' => 'bi-bell'],
        ['id' => 'about', 'label' => 'About you', 'icon' => 'bi-chat-square-text'],
    ];
    $sectionIds = collect($navSections)->pluck('id')->all();
    $defaultSection = 'account';
    if ($errors->hasAny(['about', 'job_love', 'interests_hobbies', 'past_experience', 'quick_links', 'quick_links.linkedin', 'quick_links.instagram', 'quick_links.facebook'])) {
        $defaultSection = 'about';
    } elseif ($errors->hasAny(['notification_email', 'notification_email.*'])) {
        $defaultSection = 'notifications';
    } elseif ($errors->hasAny(['phone', 'gender', 'dob', 'father_name', 'pan_number'])) {
        $defaultSection = 'basic';
    } elseif ($errors->hasAny(['uan_number', 'work_state', 'pt_location'])) {
        $defaultSection = 'work';
    } elseif ($errors->hasAny(['account_holder_name', 'bank_name', 'account_number', 'branch_name', 'city', 'ifsc_code'])) {
        $defaultSection = 'bank';
    } elseif ($errors->hasAny(['name', 'email', 'profile_photo', 'password_confirmation'])) {
        $defaultSection = 'account';
    } elseif ($errors->has('password')) {
        $defaultSection = 'security';
    } elseif (! in_array($defaultSection, $sectionIds, true)) {
        $defaultSection = $sectionIds[0] ?? 'account';
    }
@endphp

<div class="mx-auto max-w-6xl space-y-6" x-data="{
    mobileNavOpen: false,
    section: @js($defaultSection),
    setSection(id) {
        this.section = id;
        this.mobileNavOpen = false;
        history.replaceState(null, '', '#' + id);
    },
    init() {
        const hash = window.location.hash.replace('#', '');
        if (@js($sectionIds).includes(hash)) {
            this.section = hash;
        }
    }
}">
    {{-- Breadcrumb --}}
    <div class="flex flex-wrap items-center justify-between gap-3 text-sm text-slate-500">
        <span class="font-medium text-slate-800">My profile</span>
        @if((auth()->user()->is_superadmin ?? false) || auth()->user()->isCompanyAccountAdmin() || auth()->user()->hasPermission('manage_settings'))
            <a
                href="{{ route('settings.home') }}"
                class="inline-flex items-center gap-1.5 rounded-lg border border-slate-200 bg-white px-3 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50"
            >
                <i class="bi bi-arrow-left"></i> Back
            </a>
        @endif
    </div>

    @if(session('success'))
        <div class="rounded-xl border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm text-emerald-800">{{ session('success') }}</div>
    @endif
    @if(session('error'))
        <div class="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800">{{ session('error') }}</div>
    @endif

    {{-- Hero --}}
    <x-card class="overflow-hidden p-0">
        <div class="relative bg-gradient-to-br from-slate-800 via-slate-700 to-slate-900 px-6 py-8 text-white sm:px-8">
            <div class="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
                <div class="flex items-center gap-4">
                    <div class="relative">
                        <x-user-avatar :user="$user" size="xl" class="!h-20 !w-20 !text-2xl ring-4 ring-white/20" />
                        @if($user->two_factor_enabled)
                            <span class="absolute -bottom-1 -right-1 flex h-7 w-7 items-center justify-center rounded-full bg-emerald-500 text-white shadow-lg" title="2FA enabled">
                                <i class="bi bi-shield-check text-sm"></i>
                            </span>
                        @endif
                    </div>
                    <div>
                        <h2 class="text-xl font-semibold tracking-tight sm:text-2xl">{{ $user->name }}</h2>
                        <p class="mt-1 text-sm text-white/80">
                            {{ $user->designation?->name ?? 'Admin' }}
                            @if($user->department?->name)
                                · {{ $user->department->name }}
                            @endif
                        </p>
                        <p class="mt-0.5 text-xs text-white/60">{{ $user->email }}</p>
                    </div>
                </div>
                <div class="w-full sm:w-auto sm:min-w-[200px]">
                    <div class="rounded-xl bg-white/10 px-4 py-3 backdrop-blur-sm">
                        <div class="mb-2 flex items-center justify-between text-xs uppercase tracking-wide text-white/70">
                            <span>Profile strength</span>
                            <span class="font-semibold text-white">{{ $profileCompletion }}%</span>
                        </div>
                        <div class="h-2 overflow-hidden rounded-full bg-white/20">
                            <div class="h-full rounded-full bg-emerald-400 transition-all" style="width: {{ $profileCompletion }}%"></div>
                        </div>
                        @if($profileCompletion < 100)
                            <p class="mt-2 text-xs text-white/70">Complete your intro to reach 100%</p>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        {{-- Quick actions --}}
        <div class="grid gap-3 border-t border-slate-100 bg-slate-50/80 p-4 sm:grid-cols-3">
            <a href="{{ route('company-policies.portal') }}" class="group flex items-center gap-3 rounded-xl border border-slate-200 bg-white px-4 py-3 transition hover:border-primary/30 hover:shadow-sm">
                <span class="flex h-10 w-10 items-center justify-center rounded-lg bg-indigo-50 text-indigo-600 group-hover:bg-indigo-100">
                    <i class="bi bi-journal-text"></i>
                </span>
                <span>
                    <span class="block text-sm font-semibold text-slate-900">Policies</span>
                    <span class="block text-xs text-slate-500">Read & acknowledge</span>
                </span>
            </a>
            <a href="{{ route('forms.portal') }}" class="group flex items-center gap-3 rounded-xl border border-slate-200 bg-white px-4 py-3 transition hover:border-primary/30 hover:shadow-sm">
                <span class="flex h-10 w-10 items-center justify-center rounded-lg bg-teal-50 text-teal-600 group-hover:bg-teal-100">
                    <i class="bi bi-ui-checks"></i>
                </span>
                <span>
                    <span class="block text-sm font-semibold text-slate-900">HR forms</span>
                    <span class="block text-xs text-slate-500">Submit responses</span>
                </span>
            </a>
            <a href="{{ route('resignations.self.create') }}" class="group flex items-center gap-3 rounded-xl border border-slate-200 bg-white px-4 py-3 transition hover:border-primary/30 hover:shadow-sm">
                <span class="flex h-10 w-10 items-center justify-center rounded-lg bg-amber-50 text-amber-600 group-hover:bg-amber-100">
                    <i class="bi bi-box-arrow-right"></i>
                </span>
                <span>
                    <span class="block text-sm font-semibold text-slate-900">Resignation</span>
                    <span class="block text-xs text-slate-500">Self-service exit</span>
                </span>
            </a>
        </div>
    </x-card>

    {{-- Mobile section nav --}}
    <div class="lg:hidden">
        <button type="button" @click="mobileNavOpen = !mobileNavOpen"
                class="flex w-full items-center justify-between rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm font-medium text-slate-700 shadow-sm">
            <span>Jump to section</span>
            <i class="bi bi-chevron-down transition" :class="mobileNavOpen && 'rotate-180'"></i>
        </button>
        <div x-show="mobileNavOpen" x-cloak class="mt-2 rounded-xl border border-slate-200 bg-white p-2 shadow-sm">
            @foreach($navSections as $section)
                <button type="button" @click="setSection('{{ $section['id'] }}')"
                        class="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-left text-sm transition hover:bg-slate-50"
                        :class="section === '{{ $section['id'] }}' ? 'bg-primary/5 font-semibold text-primary' : 'text-slate-700'">
                    <i class="bi {{ $section['icon'] }}" :class="section === '{{ $section['id'] }}' ? 'text-primary' : 'text-slate-400'"></i>
                    {{ $section['label'] }}
                </button>
            @endforeach
        </div>
    </div>

    <div class="grid gap-6 lg:grid-cols-12">
        {{-- Desktop sticky nav --}}
        <aside class="hidden lg:col-span-3 lg:block">
            <nav class="sticky top-6 space-y-1 rounded-xl border border-slate-200 bg-white p-2 shadow-sm">
                <p class="px-3 py-2 text-xs font-semibold uppercase tracking-wide text-slate-400">Profile sections</p>
                @foreach($navSections as $section)
                    <button type="button" @click="setSection('{{ $section['id'] }}')"
                            class="flex w-full items-center gap-2 rounded-lg px-3 py-2.5 text-left text-sm font-medium transition"
                            :class="section === '{{ $section['id'] }}' ? 'bg-primary/5 text-primary font-semibold' : 'text-slate-600 hover:bg-slate-50 hover:text-primary'">
                        <i class="bi {{ $section['icon'] }}" :class="section === '{{ $section['id'] }}' ? 'text-primary' : 'text-slate-400'"></i>
                        {{ $section['label'] }}
                    </button>
                @endforeach
            </nav>
        </aside>

        {{-- Main content --}}
        <div class="space-y-6 lg:col-span-9">

            {{-- Account --}}
            <section id="account" x-show="section === 'account'" x-cloak>
                <x-card class="!p-0 overflow-hidden">
                    <div class="border-b border-slate-100 bg-slate-50/50 px-6 py-4">
                        <div class="flex items-center gap-3">
                            <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-800 text-white">
                                <i class="bi bi-person-circle"></i>
                            </span>
                            <div>
                                <h3 class="text-base font-semibold text-slate-900">Account details</h3>
                                <p class="text-sm text-slate-500">Name, email, photo and password</p>
                            </div>
                        </div>
                    </div>
                    <div class="p-6">
                        <form action="{{ route('settings.profile.update') }}" method="post" enctype="multipart/form-data" class="space-y-6">
                            @csrf
                            @method('PUT')

                            <div class="flex flex-col gap-6 sm:flex-row sm:items-start">
                                <div class="flex flex-col items-center gap-3 sm:w-36">
                                    <x-user-avatar :user="$user" size="xl" class="!h-24 !w-24 !text-2xl" />
                                    <label for="profile_photo" class="cursor-pointer rounded-lg border border-dashed border-slate-300 bg-slate-50 px-3 py-2 text-center text-xs font-medium text-slate-600 hover:border-primary hover:text-primary">
                                        Change photo
                                        <input type="file" name="profile_photo" id="profile_photo" class="sr-only" accept=".jpg,.jpeg,.png,.webp,image/jpeg,image/png,image/webp">
                                    </label>
                                    <p class="text-center text-[11px] leading-tight text-slate-400">JPG, PNG, WEBP · max 2MB</p>
                                    @error('profile_photo') <p class="text-center text-xs text-red-600">{{ $message }}</p> @enderror
                                </div>
                                <div class="min-w-0 flex-1 space-y-4">
                                    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                                        <div class="sm:col-span-2">
                                            <label for="name" class="block text-sm font-medium text-slate-700">Full name</label>
                                            <input type="text" name="name" id="name" value="{{ old('name', $user->name) }}" required
                                                   class="mt-1.5 w-full rounded-lg border border-slate-300 px-3 py-2.5 text-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20">
                                            @error('name') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                                        </div>
                                        <div class="sm:col-span-2">
                                            <label for="email" class="block text-sm font-medium text-slate-700">Work email</label>
                                            <input type="email" name="email" id="email" value="{{ old('email', $user->email) }}" required
                                                   class="mt-1.5 w-full rounded-lg border border-slate-300 px-3 py-2.5 text-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20">
                                            @error('email') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                                        </div>
                                    </div>

                                    <div class="rounded-xl border border-slate-200 bg-slate-50/50 p-4">
                                        <p class="mb-3 text-sm font-medium text-slate-800">Change password</p>
                                        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                                            <div>
                                                <label for="password" class="block text-xs font-medium text-slate-600">New password</label>
                                                <input type="password" name="password" id="password" autocomplete="new-password" placeholder="Leave blank to keep"
                                                       class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20">
                                                @error('password') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                                            </div>
                                            <div>
                                                <label for="password_confirmation" class="block text-xs font-medium text-slate-600">Confirm password</label>
                                                <input type="password" name="password_confirmation" id="password_confirmation" autocomplete="new-password"
                                                       class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="flex justify-end border-t border-slate-100 pt-4">
                                <button type="submit" class="rounded-lg bg-primary px-5 py-2.5 text-sm font-medium text-white shadow-sm hover:opacity-90">
                                    Save account changes
                                </button>
                            </div>
                        </form>
                    </div>
                </x-card>

                @if(empty($twoFactorOffered))
                    <x-card class="!p-0 overflow-hidden">
                        <div class="border-b border-slate-100 bg-slate-50/50 px-6 py-4">
                            <div class="flex items-center gap-3">
                                <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-800 text-white">
                                    <i class="bi bi-shield-check"></i>
                                </span>
                                <div>
                                    <h3 class="text-base font-semibold text-slate-900">Privacy & sessions</h3>
                                    <p class="text-sm text-slate-500">Active devices and personal data export</p>
                                </div>
                            </div>
                        </div>
                        <div class="divide-y divide-slate-100">
                            @include('settings.partials.two-factor-legacy-disable')
                            @if(! empty($sessions) && $sessions->isNotEmpty())
                                <div class="p-6">
                                    <p class="font-medium text-slate-900">Active sessions</p>
                                    <p class="mt-1 text-sm text-slate-500">Devices where you're currently signed in.</p>
                                    <ul class="mt-4 space-y-2">
                                        @foreach($sessions as $session)
                                            <li class="flex flex-wrap items-center justify-between gap-3 rounded-xl border px-4 py-3 {{ $session->is_current ? 'border-emerald-200 bg-emerald-50/50' : 'border-slate-200 bg-white' }}">
                                                <div class="flex items-center gap-3">
                                                    <span class="flex h-9 w-9 items-center justify-center rounded-lg {{ $session->is_current ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-500' }}">
                                                        <i class="bi bi-laptop"></i>
                                                    </span>
                                                    <div>
                                                        <p class="text-sm font-medium text-slate-800">{{ $session->ip_address ?? 'Unknown device' }}</p>
                                                        <p class="text-xs text-slate-500">{{ $session->last_activity_at?->diffForHumans() ?? 'Recently' }}</p>
                                                    </div>
                                                </div>
                                                @if($session->is_current)
                                                    <span class="rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-semibold text-emerald-800">This device</span>
                                                @else
                                                    @include('partials.delete-form', ['action' => route('settings.profile.sessions.revoke', $session), 'label' => 'Revoke'])
                                                @endif
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                            <div class="flex flex-wrap items-center justify-between gap-4 p-6">
                                <div>
                                    <p class="font-medium text-slate-900">Export my data</p>
                                    <p class="mt-1 text-sm text-slate-500">Download a JSON copy of your profile (GDPR).</p>
                                </div>
                                <a href="{{ route('settings.profile.export-data') }}" class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
                                    <i class="bi bi-download"></i> Download
                                </a>
                            </div>
                        </div>
                    </x-card>
                @endif
            </section>

            {{-- Basic Info --}}
            <section id="basic" x-show="section === 'basic'" x-cloak>
                @include('settings.profile.tabs.basic-info')
            </section>

            {{-- Work Info --}}
            <section id="work" x-show="section === 'work'" x-cloak>
                @include('settings.profile.tabs.work-info')
            </section>

            {{-- Bank --}}
            <section id="bank" x-show="section === 'bank'" x-cloak>
                @include('settings.profile.tabs.bank')
            </section>

            @if(! empty($twoFactorOffered))
            {{-- Security --}}
            <section id="security" x-show="section === 'security'" x-cloak class="space-y-6">
                <x-card class="!p-0 overflow-hidden">
                    <div class="border-b border-slate-100 bg-slate-50/50 px-6 py-4">
                        <div class="flex items-center gap-3">
                            <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-800 text-white">
                                <i class="bi bi-shield-lock"></i>
                            </span>
                            <div>
                                <h3 class="text-base font-semibold text-slate-900">Security</h3>
                                <p class="text-sm text-slate-500">Two-factor authentication and active sessions</p>
                            </div>
                        </div>
                    </div>
                    <div class="divide-y divide-slate-100">
                        {{-- 2FA --}}
                        <div class="p-6">
                            @if(! empty($twoFactorRequired))
                                <div class="mb-4 rounded-lg border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-900">
                                    <i class="bi bi-shield-exclamation me-1"></i>
                                    Your company <strong>requires</strong> two-factor authentication for all employees.
                                    @if(! empty($mustEnrollTwoFactor))
                                        Please enable a method below to continue using KiyoHR.
                                    @endif
                                </div>
                            @elseif(($twoFactorPolicy ?? 'optional') === 'optional')
                                <p class="mb-4 text-sm text-slate-500">Two-factor authentication is optional at your company. You may enable it for extra account security.</p>
                            @endif

                            <div class="flex flex-wrap items-start justify-between gap-4">
                                <div>
                                    <p class="font-medium text-slate-900">Two-factor authentication</p>
                                    <p class="mt-1 max-w-lg text-sm text-slate-500">Add a second step after your password — email code or authenticator app.</p>
                                </div>
                                @if($user->two_factor_enabled)
                                    <span class="inline-flex items-center gap-1.5 rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700">
                                        <i class="bi bi-check-circle-fill"></i>
                                        {{ $user->two_factor_method === 'totp' ? 'Authenticator' : 'Email' }} enabled
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1.5 rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-600">
                                        Not enabled
                                    </span>
                                @endif
                            </div>

                            @if($user->two_factor_enabled)
                                @if($user->two_factor_method === 'totp' && $totpProvisioningUri)
                                    <div class="mt-4 rounded-lg border border-slate-200 bg-slate-50 p-3">
                                        <p class="text-xs font-medium text-slate-600">Authenticator setup URI</p>
                                        <p class="mt-1 break-all font-mono text-xs text-slate-500">{{ $totpProvisioningUri }}</p>
                                    </div>
                                @endif
                                @if(! empty($canDisableTwoFactor))
                                <form action="{{ route('settings.profile.two-factor.disable') }}" method="post" class="mt-4 flex flex-wrap items-end gap-3">
                                    @csrf
                                    <div class="min-w-[200px] flex-1">
                                        <label for="two_factor_password" class="block text-xs font-medium text-slate-600">Confirm with password</label>
                                        <input type="password" name="password" id="two_factor_password" required
                                               class="mt-1 w-full max-w-xs rounded-lg border border-slate-300 px-3 py-2 text-sm">
                                        @error('password') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                                    </div>
                                    <button type="submit" class="rounded-lg border border-red-200 bg-red-50 px-4 py-2 text-sm font-medium text-red-700 hover:bg-red-100">
                                        Disable 2FA
                                    </button>
                                </form>
                                @else
                                    <p class="mt-4 text-sm text-slate-500">
                                        <i class="bi bi-lock-fill me-1 text-slate-400"></i>
                                        Two-factor authentication is required by your company and cannot be turned off.
                                    </p>
                                @endif
                            @else
                                <div class="mt-4 flex flex-wrap gap-3">
                                    <form action="{{ route('settings.profile.two-factor.enable') }}" method="post">
                                        @csrf
                                        <button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-slate-800 px-4 py-2.5 text-sm font-medium text-white hover:bg-slate-700">
                                            <i class="bi bi-envelope-check"></i> Email OTP
                                        </button>
                                    </form>
                                    <form action="{{ route('settings.profile.two-factor.enable-totp') }}" method="post">
                                        @csrf
                                        <button type="submit" class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-medium text-slate-700 hover:bg-slate-50">
                                            <i class="bi bi-phone"></i> Authenticator app
                                        </button>
                                    </form>
                                </div>
                                @if(session('totp_secret'))
                                    <p class="mt-3 text-sm text-slate-600">Manual secret: <code class="rounded bg-slate-100 px-2 py-0.5 font-mono text-xs">{{ session('totp_secret') }}</code></p>
                                @endif
                            @endif
                        </div>

                        {{-- Sessions --}}
                        @if(! empty($sessions) && $sessions->isNotEmpty())
                            <div class="p-6">
                                <p class="font-medium text-slate-900">Active sessions</p>
                                <p class="mt-1 text-sm text-slate-500">Devices where you're currently signed in.</p>
                                <ul class="mt-4 space-y-2">
                                    @foreach($sessions as $session)
                                        <li class="flex flex-wrap items-center justify-between gap-3 rounded-xl border px-4 py-3 {{ $session->is_current ? 'border-emerald-200 bg-emerald-50/50' : 'border-slate-200 bg-white' }}">
                                            <div class="flex items-center gap-3">
                                                <span class="flex h-9 w-9 items-center justify-center rounded-lg {{ $session->is_current ? 'bg-emerald-100 text-emerald-700' : 'bg-slate-100 text-slate-500' }}">
                                                    <i class="bi bi-laptop"></i>
                                                </span>
                                                <div>
                                                    <p class="text-sm font-medium text-slate-800">{{ $session->ip_address ?? 'Unknown device' }}</p>
                                                    <p class="text-xs text-slate-500">{{ $session->last_activity_at?->diffForHumans() ?? 'Recently' }}</p>
                                                </div>
                                            </div>
                                            @if($session->is_current)
                                                <span class="rounded-full bg-emerald-100 px-2.5 py-0.5 text-xs font-semibold text-emerald-800">This device</span>
                                            @else
                                                @include('partials.delete-form', ['action' => route('settings.profile.sessions.revoke', $session), 'label' => 'Revoke'])
                                            @endif
                                        </li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        {{-- GDPR --}}
                        <div class="flex flex-wrap items-center justify-between gap-4 p-6">
                            <div>
                                <p class="font-medium text-slate-900">Export my data</p>
                                <p class="mt-1 text-sm text-slate-500">Download a JSON copy of your profile (GDPR).</p>
                            </div>
                            <a href="{{ route('settings.profile.export-data') }}" class="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">
                                <i class="bi bi-download"></i> Download
                            </a>
                        </div>
                    </div>
                </x-card>
            </section>
            @endif

            @if(! empty($showEmailNotifications))
            {{-- Notifications (admin / HR) --}}
            <section id="notifications" x-show="section === 'notifications'" x-cloak>
                <x-card class="!p-0 overflow-hidden">
                    <div class="border-b border-slate-100 bg-slate-50/50 px-6 py-4">
                        <div class="flex items-center gap-3">
                            <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-800 text-white">
                                <i class="bi bi-bell"></i>
                            </span>
                            <div>
                                <h3 class="text-base font-semibold text-slate-900">Email notifications</h3>
                                <p class="text-sm text-slate-500">In-app alerts are always on. Choose what also emails you.</p>
                            </div>
                        </div>
                    </div>
                    <form action="{{ route('settings.profile.update') }}" method="post" class="p-6">
                        @csrf
                        @method('PUT')
                        <input type="hidden" name="name" value="{{ old('name', $user->name) }}">
                        <input type="hidden" name="email" value="{{ old('email', $user->email) }}">

                        <div class="grid gap-3 sm:grid-cols-2">
                            @foreach($notificationCategories as $key => $meta)
                                @php
                                    $enabled = array_key_exists($key, $emailNotificationPrefs)
                                        ? (bool) $emailNotificationPrefs[$key]
                                        : (bool) ($meta['default_email'] ?? true);
                                @endphp
                                <label class="flex cursor-pointer items-start gap-3 rounded-xl border border-slate-200 p-4 transition hover:border-slate-300">
                                    <input type="hidden" name="notification_email[{{ $key }}]" value="0">
                                    <input type="checkbox" name="notification_email[{{ $key }}]" value="1"
                                           class="mt-0.5 rounded border-slate-300 text-primary focus:ring-primary/30" {{ $enabled ? 'checked' : '' }}>
                                    <span class="min-w-0">
                                        <span class="block text-sm font-medium text-slate-900">{{ $meta['label'] ?? $key }}</span>
                                        <span class="mt-0.5 block text-xs leading-relaxed text-slate-500">{{ $meta['description'] ?? '' }}</span>
                                    </span>
                                </label>
                            @endforeach
                        </div>

                        <div class="mt-6 flex justify-end border-t border-slate-100 pt-4">
                            <button type="submit" class="rounded-lg bg-slate-800 px-5 py-2.5 text-sm font-medium text-white hover:bg-slate-700">
                                Save preferences
                            </button>
                        </div>
                    </form>
                </x-card>
            </section>
            @endif

            {{-- About --}}
            <section id="about" x-show="section === 'about'" x-cloak>
                <x-card class="!p-0 overflow-hidden">
                    <div class="border-b border-slate-100 bg-slate-50/50 px-6 py-4">
                        <div class="flex flex-wrap items-center justify-between gap-3">
                            <div class="flex items-center gap-3">
                                <span class="flex h-9 w-9 items-center justify-center rounded-lg bg-slate-800 text-white">
                                    <i class="bi bi-chat-square-text"></i>
                                </span>
                                <div>
                                    <h3 class="text-base font-semibold text-slate-900">Introduce yourself</h3>
                                    <p class="text-sm text-slate-500">Help colleagues get to know you</p>
                                </div>
                            </div>
                            <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-600">{{ $profileCompletion }}% complete</span>
                        </div>
                    </div>
                    <form method="POST" action="{{ route('settings.profile.intro.update') }}" enctype="multipart/form-data" class="space-y-5 p-6">
                        @csrf
                        @method('PUT')
                        <div>
                            <label for="about" class="block text-sm font-medium text-slate-700">About</label>
                            <textarea id="about" name="about" rows="3" placeholder="A short bio for your team directory…"
                                      class="mt-1.5 w-full rounded-lg border border-slate-300 px-3 py-2.5 text-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20">{{ old('about', $intro->about) }}</textarea>
                            @error('about') <p class="mt-1 text-xs text-red-600">{{ $message }}</p> @enderror
                        </div>
                        <div class="grid gap-5 md:grid-cols-2">
                            <div>
                                <label for="job_love" class="block text-sm font-medium text-slate-700">What I love about my job</label>
                                <textarea id="job_love" name="job_love" rows="3" class="mt-1.5 w-full rounded-lg border border-slate-300 px-3 py-2.5 text-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20">{{ old('job_love', $intro->job_love) }}</textarea>
                            </div>
                            <div>
                                <label for="interests_hobbies" class="block text-sm font-medium text-slate-700">Interests & hobbies</label>
                                <textarea id="interests_hobbies" name="interests_hobbies" rows="3" class="mt-1.5 w-full rounded-lg border border-slate-300 px-3 py-2.5 text-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20">{{ old('interests_hobbies', $intro->interests_hobbies) }}</textarea>
                            </div>
                        </div>
                        <div>
                            <label for="past_experience" class="block text-sm font-medium text-slate-700">Past experience</label>
                            <textarea id="past_experience" name="past_experience" rows="3" class="mt-1.5 w-full rounded-lg border border-slate-300 px-3 py-2.5 text-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20">{{ old('past_experience', $intro->past_experience) }}</textarea>
                        </div>

                        <div>
                            <p class="mb-3 text-sm font-medium text-slate-700">Social links</p>
                            <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                                <div>
                                    <label for="quick_links_linkedin" class="mb-1 flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-slate-500">
                                        <i class="bi bi-linkedin text-[#0A66C2]"></i> LinkedIn
                                    </label>
                                    <input id="quick_links_linkedin" type="url" name="quick_links[linkedin]" value="{{ old('quick_links.linkedin', $quickLinks['linkedin'] ?? null) }}" placeholder="https://"
                                           class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20">
                                </div>
                                <div>
                                    <label for="quick_links_instagram" class="mb-1 flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-slate-500">
                                        <i class="bi bi-instagram text-pink-600"></i> Instagram
                                    </label>
                                    <input id="quick_links_instagram" type="url" name="quick_links[instagram]" value="{{ old('quick_links.instagram', $quickLinks['instagram'] ?? null) }}" placeholder="https://"
                                           class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20">
                                </div>
                                <div>
                                    <label for="quick_links_facebook" class="mb-1 flex items-center gap-1.5 text-xs font-medium uppercase tracking-wide text-slate-500">
                                        <i class="bi bi-facebook text-blue-600"></i> Facebook
                                    </label>
                                    <input id="quick_links_facebook" type="url" name="quick_links[facebook]" value="{{ old('quick_links.facebook', $quickLinks['facebook'] ?? null) }}" placeholder="https://"
                                           class="w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20">
                                </div>
                            </div>
                        </div>

                        <div class="flex justify-end border-t border-slate-100 pt-4">
                            <button type="submit" class="rounded-lg bg-primary px-5 py-2.5 text-sm font-medium text-white shadow-sm hover:opacity-90">
                                Save intro
                            </button>
                        </div>
                    </form>
                </x-card>
            </section>
        </div>
    </div>
</div>

@push('styles')
<style>
    [x-cloak] { display: none !important; }
</style>
@endpush

@push('scripts')
<script>
    document.getElementById('profile_photo')?.addEventListener('change', function (e) {
        const file = e.target.files?.[0];
        if (!file || !file.type.startsWith('image/')) return;
        const reader = new FileReader();
        reader.onload = function (ev) {
            const img = document.querySelector('#account img[alt]');
            if (img) img.src = ev.target?.result;
        };
        reader.readAsDataURL(file);
    });
</script>
@endpush
@endsection