@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')

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

            <!-- Figures -->
            @if ($userStats || $roleStats || $paymentStats)
                <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-4">
                    @if ($userStats)
                        <x-stat-card :label="__('Total users')" :value="$userStats['total']" :href="route('users.index')">
                            <x-slot name="icon">
                                <svg class="h-6 w-6" 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 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
                                </svg>
                            </x-slot>
                        </x-stat-card>

                        <x-stat-card :label="__('Active users')" :value="$userStats['active']" :href="route('users.index')" tone="emerald">
                            <x-slot name="icon">
                                <svg class="h-6 w-6" 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-stat-card>

                        <x-stat-card :label="__('Inactive users')" :value="$userStats['inactive']" :href="route('users.index')" tone="amber">
                            <x-slot name="icon">
                                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636" />
                                </svg>
                            </x-slot>
                        </x-stat-card>
                    @endif

                    @if ($roleStats)
                        <x-stat-card
                            :label="__('Roles')"
                            :value="$roleStats['total']"
                            :href="route('roles.index')"
                            :hint="__(':count active', ['count' => $roleStats['active']])"
                            tone="violet"
                        >
                            <x-slot name="icon">
                                <svg class="h-6 w-6" 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.75m-3-7.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.749c0 5.592 3.824 10.29 9 11.623 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.571-.598-3.751h-.152c-3.196 0-6.1-1.248-8.25-3.285z" />
                                </svg>
                            </x-slot>
                        </x-stat-card>
                    @endif

                    @if ($paymentStats)
                        <x-stat-card :label="__('Paid this month')" :value="$paymentStats['paid_this_month']" :href="route('payments.index')" :hint="__('of :amount salaries due', ['amount' => $paymentStats['salary_due_this_month']])" tone="emerald">
                            <x-slot name="icon">
                                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
                                </svg>
                            </x-slot>
                        </x-stat-card>

                        <x-stat-card
                            :label="__('Pending payments')"
                            :value="$paymentStats['pending_total']"
                            :href="route('payments.index')"
                            :hint="trans_choice(':count payment waiting|:count payments waiting', $paymentStats['pending_count'], ['count' => $paymentStats['pending_count']])"
                            tone="amber"
                        >
                            <x-slot name="icon">
                                <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.8" stroke="currentColor" aria-hidden="true">
                                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                            </x-slot>
                        </x-stat-card>
                    @endif
                </div>
            @endif

            <!-- Your Card, Access and Quick Actions -->
            <div class="grid grid-cols-1 gap-8 xl:grid-cols-3">
                <x-employee-card :user="$user" />

                @include('dashboard.partials.access')

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

                    <div class="flex flex-col gap-3">
                        @can(PermissionName::CreateUsers->value)
                            <x-primary-button :href="route('users.create')">
                                <x-icon-plus />
                                {{ __('Add user') }}
                            </x-primary-button>
                        @endcan

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

                        @can(PermissionName::CreatePayments->value)
                            <x-secondary-button :href="route('payments.create')">
                                <x-icon-plus />
                                {{ __('Record payment') }}
                            </x-secondary-button>
                        @endcan

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

            <!-- Recent Users: a row of its own, across the full width -->
            @if ($canViewUsers)
                <div class="overflow-hidden rounded-2xl bg-white shadow-raised">
                    <div class="flex items-center justify-between gap-4 border-b border-gray-100 px-6 py-4">
                        <h3 class="text-base font-semibold text-gray-900">{{ __('Recently added users') }}</h3>

                        <a href="{{ route('users.index') }}" class="text-sm font-medium text-brand-600 hover:text-brand-500 rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-brand-500">
                            {{ __('View all') }}
                        </a>
                    </div>

                    <table
                        id="recent-users-table"
                        data-datatable="{{ route('users.index') }}"
                        data-search-placeholder="{{ __('Search name or email...') }}"
                        data-page-length="5"
                        data-order="{{ json_encode([[4, 'desc']]) }}"
                        data-columns="{{ json_encode([
                            ['data' => 'DT_RowIndex', 'title' => '#', 'orderable' => false, 'searchable' => false, 'className' => 'dt-number'],
                            ['data' => 'user', 'name' => 'name', 'title' => __('User')],
                            ['data' => 'role', 'title' => __('Role'), 'orderable' => false, 'searchable' => false],
                            ['data' => 'status', 'name' => 'is_active', 'title' => __('Status'), 'searchable' => false],
                            ['data' => 'added', 'name' => 'created_at', 'title' => __('Added'), 'searchable' => false],
                        ]) }}"
                    ></table>
                </div>
            @endif
        </div>
    </div>
</x-app-layout>