<x-app-layout>

    <x-module-hero
        title="My Profile"
        description="Update your personal information and account settings"
        icon="fa-user-circle"
    >
        <x-slot name="tabs">
            <a href="{{ route('profile.show', auth()->user()) }}"
               class="module-hero-tab {{ request()->routeIs('profile.show') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-eye text-sm"></i> View Profile
            </a>
            <a href="{{ route('profile.edit') }}"
               class="module-hero-tab {{ request()->routeIs('profile.edit') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0"
               aria-current="{{ request()->routeIs('profile.edit') ? 'page' : false }}">
                <i class="fas fa-edit text-sm"></i> Edit Profile
            </a>
            @if(Route::has('settings.security'))
                <a href="{{ route('settings.security') }}"
                   class="module-hero-tab {{ request()->routeIs('settings.security') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                          inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                          md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-lock text-sm"></i> Security
                </a>
            @endif
            @if(auth()->user()->hasRole('Super Manager'))
                @if(Route::has('otp.settings'))
                    <a href="{{ route('otp.settings') }}"
                       class="module-hero-tab {{ request()->routeIs('otp.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                              inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                              md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                        <i class="fas fa-shield-alt text-sm"></i> OTP Settings
                    </a>
                @endif
            @endif
            @if(Route::has('settings.sessions'))
                <a href="{{ route('settings.sessions') }}"
                   class="module-hero-tab {{ request()->routeIs('settings.sessions') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                          inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                          md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-desktop text-sm"></i> Sessions
                </a>
            @endif
        </x-slot>
    </x-module-hero>

    <div class="p-6 space-y-6">

        {{-- Success Message --}}
        @if(session('status') === 'profile-updated')
            <div class="p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center">
                <i class="fas fa-check-circle mr-2"></i>
                Profile updated successfully!
            </div>
        @endif

        {{-- Profile Update Notice --}}
        <div class="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-start gap-3">
            <i class="fas fa-info-circle text-blue-600 mt-0.5 text-lg"></i>
            <div class="text-sm text-blue-700">
                <p class="font-semibold mb-1">Profile Update Notice</p>
                <p>You can update your name, email, username, phone, and avatar. Role assignments and account status can only be changed by administrators.</p>
            </div>
        </div>

        {{-- Update Profile Information --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900 flex items-center gap-2">
                    <i class="fas fa-user text-blue-600"></i>
                    Profile Information
                </h3>
            </div>
            <div class="p-6">
                @include('profile.partials.update-profile-information-form')
            </div>
        </div>

        {{-- Update Password --}}
        <div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
            <div class="bg-gray-50 px-6 py-4 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900 flex items-center gap-2">
                    <i class="fas fa-lock text-purple-600"></i>
                    Update Password
                </h3>
            </div>
            <div class="p-6">
                @include('profile.partials.update-password-form')
            </div>
        </div>

        {{-- Delete Account --}}
        <div class="bg-white rounded-lg shadow-sm border border-red-200 overflow-hidden">
            <div class="bg-red-50 px-6 py-4 border-b border-red-200">
                <h3 class="text-lg font-semibold text-red-800 flex items-center gap-2">
                    <i class="fas fa-trash-alt text-red-600"></i>
                    Delete Account
                </h3>
            </div>
            <div class="p-6">
                @include('profile.partials.delete-user-form')
            </div>
        </div>

    </div>

</x-app-layout>
