@use('App\Enums\PermissionName')

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>

    <div class="py-8">
        <div class="flex flex-col gap-8 px-4 sm:px-6 lg:px-8">
            @include('dashboard.partials.welcome', ['showRole' => false])

            <x-profile-completion :user="$user" />

            <div class="grid grid-cols-1 gap-8 xl:grid-cols-3">
                <div class="flex flex-col gap-8">
                    <x-employee-card :user="$user" />

                    @include('dashboard.partials.access')
                </div>

                <div class="flex flex-col gap-8 xl:col-span-2">
                    <!-- Your Account -->
                        <div class="overflow-hidden rounded-2xl bg-white shadow-raised">
                        <div class="h-20 bg-gradient-to-r from-brand-100 via-accent-100 to-brand-50"></div>

                        <div class="flex flex-col gap-6 px-6 pb-6 sm:px-8 sm:pb-8">
                            <div class="flex flex-col items-center gap-4 text-center sm:flex-row sm:items-end sm:text-start">
                                <x-avatar :user="$user" size="lg" class="-mt-10 ring-4 ring-white" />

                                <div class="min-w-0 flex-1">
                                    <h3 class="truncate text-xl font-semibold text-gray-900">{{ $user->name }}</h3>
                                    <p class="truncate text-sm text-gray-500">{{ $user->email }}</p>
                                </div>

                                <x-primary-button :href="route('profile.edit')">
                                    {{ __('Edit profile') }}
                                </x-primary-button>
                            </div>

                            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                                <x-detail-tile :label="__('Name')">
                                    <x-slot name="icon">
                                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                                        </svg>
                                    </x-slot>
                                    {{ $user->name }}
                                </x-detail-tile>

                                <x-detail-tile :label="__('Email')">
                                    <x-slot name="icon">
                                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
                                        </svg>
                                    </x-slot>
                                    {{ $user->email }}
                                </x-detail-tile>

                                <x-detail-tile :label="__('Employee ID')">
                                    <x-slot name="icon">
                                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5zm6-10.125a1.875 1.875 0 11-3.75 0 1.875 1.875 0 013.75 0zm1.294 6.336a6.721 6.721 0 01-3.17.789 6.721 6.721 0 01-3.168-.789 3.376 3.376 0 016.338 0z" />
                                        </svg>
                                    </x-slot>
                                    {{ $user->employee_id ?? '—' }}
                                </x-detail-tile>

                                <x-detail-tile :label="__('Account status')">
                                    <x-slot name="icon">
                                        <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
                                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                        </svg>
                                    </x-slot>
                                    <x-status-badge :active="$user->is_active" />
                                </x-detail-tile>
                            </div>

                            <!-- Security -->
                            <div class="flex flex-col gap-4 rounded-xl border border-brand-100 bg-brand-50 p-4 sm:flex-row sm:items-center">
                                <div class="grid h-10 w-10 shrink-0 place-items-center rounded-lg bg-white text-brand-600 shadow-sm ring-1 ring-brand-100">
                                    <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
                                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
                                    </svg>
                                </div>

                                <div class="min-w-0 flex-1">
                                    <div class="text-sm font-semibold text-gray-900">{{ __('Keep your account safe') }}</div>
                                    <p class="text-sm text-gray-600">{{ __('Use a long password that you do not use anywhere else.') }}</p>
                                </div>

                                <x-secondary-button :href="route('profile.edit').'#update-password'">
                                    {{ __('Change my password') }}
                                </x-secondary-button>
                            </div>
                        </div>
                    </div>

                    <!-- Getting Started -->
                    <div class="flex flex-col gap-4 rounded-2xl bg-white p-6 shadow-raised">
                        <h3 class="text-base font-semibold text-gray-900">{{ __('Getting started') }}</h3>

                        <ol class="flex flex-col gap-4 text-sm">
                            <li class="flex items-start gap-3">
                                <span class="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-brand-50 text-xs font-semibold text-brand-700 ring-1 ring-brand-100">1</span>
                                <span class="text-gray-700">
                                    {{ __('Check that your name and email are correct.') }}
                                    <a href="{{ route('profile.edit') }}" class="font-medium text-brand-600 hover:text-brand-500">{{ __('Open profile') }}</a>
                                </span>
                            </li>

                            <li class="flex items-start gap-3">
                                <span class="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-brand-50 text-xs font-semibold text-brand-700 ring-1 ring-brand-100">2</span>
                                <span class="text-gray-700">
                                    {{ __('Choose a password only you know.') }}
                                    <a href="{{ route('profile.edit') }}#update-password" class="font-medium text-brand-600 hover:text-brand-500">{{ __('Change password') }}</a>
                                </span>
                            </li>

                            <li class="flex items-start gap-3">
                                <span class="grid h-6 w-6 shrink-0 place-items-center rounded-full bg-brand-50 text-xs font-semibold text-brand-700 ring-1 ring-brand-100">3</span>
                                <span class="text-gray-700">{{ __('Need to open more pages? Ask an administrator to give you more access.') }}</span>
                            </li>
                        </ol>

                        @canany([PermissionName::CreateUsers->value, PermissionName::CreateRoles->value])
                            <div class="flex flex-col gap-3 border-t border-gray-100 pt-4">
                                @can(PermissionName::CreateUsers->value)
                                    <x-secondary-button :href="route('users.create')">
                                        <x-icon-plus />
                                        {{ __('Add user') }}
                                    </x-secondary-button>
                                @endcan

                                @can(PermissionName::CreateRoles->value)
                                    <x-secondary-button :href="route('roles.create')">
                                        <x-icon-plus />
                                        {{ __('Add role') }}
                                    </x-secondary-button>
                                @endcan
                            </div>
                        @endcanany
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>