<flux:main>
    <div class="flex justify-between items-center">
        <div>
            <flux:heading size="xl">{{ $pageTitle }}</flux:heading>
        </div>
        @can('create user')
            <div>
                <flux:button href="{{ route('studio.master.user.create') }}" variant="primary" wire:navigate.hover
                    class="text-sm">
                    Tambah
                </flux:button>
            </div>
        @endcan
    </div>

    <div class="mt-6">
        <div class="mb-6 grid grid-cols-1 lg:grid-cols-2 gap-4">
            <flux:card class="flex flex-col justify-center">
                <flux:input icon="magnifying-glass" placeholder="Cari outlet..."
                    wire:model.live.debounce.500ms="search" />
            </flux:card>

            <flux:card>
                <flux:checkbox.group wire:model.live="status" variant="buttons">
                    @foreach (\App\Enums\UserStatus::cases() as $status)
                        <flux:checkbox value="{{ $status->value }}" label="{{ $status->label() }}" />
                    @endforeach
                </flux:checkbox.group>
            </flux:card>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 items-start">
            @foreach ($employees as $employee)
                <flux:card
                    class="relative space-y-4 transition-transform duration-300 ease-out hover:-translate-y-1 hover:shadow-lg">
                    <div
                        class="flex flex-col items-center text-center mb-4 p-4 rounded-t-lg {{ $employee['user']['status']['gradient'] }}">
                        <flux:avatar circle size="xl" name="{{ $employee['full_name'] }}"
                            class="mb-3" />
                        <flux:heading size="lg" class="mb-1 text-white">{{ $employee['full_name'] }}
                        </flux:heading>
                        <div class="text-sm text-white/80 mb-2">{{ $employee['code'] }}</div>
                    </div>

                    <flux:separator></flux:separator>

                    <div class="space-y-3">
                        <div>
                            <flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">Kredensial
                            </flux:heading>
                            <div class="flex items-start gap-2 text-sm">
                                <flux:icon.envelope
                                    class="w-4 h-4 text-gray-500 dark:text-white flex-shrink-0 mt-0.5" />
                                <div class="text-gray-700 dark:text-gray-300">
                                    <flux:text>{{ $employee['user']['email'] }}</flux:text>
                                    <flux:text class="text-xs">{{ $employee['user']['username'] }}</flux:text>
                                </div>
                            </div>
                        </div>

                        <div>
                            <flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">Telepon
                            </flux:heading>
                            <div class="flex items-center gap-2 text-sm">
                                <flux:icon.phone class="w-4 h-4 text-gray-500 dark:text-white" />
                                <flux:text>{{ $employee['phone_number'] }}</flux:text>
                            </div>
                        </div>

                        <div>
                            <flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">Alamat
                            </flux:heading>
                            <div class="flex items-start gap-2 text-sm">
                                <flux:icon.map-pin class="w-4 h-4 text-gray-500 dark:text-white flex-shrink-0 mt-0.5" />
                                <flux:text>{{ $employee['address'] }}</flux:text>
                            </div>
                        </div>

                        <div class="grid grid-cols-2 gap-3">
                            <div>
                                <flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">Jenis
                                    Kelamin</flux:heading>
                                <flux:badge color="{{ $employee['gender']['color'] }}" size="sm">
                                    {{ $employee['gender']['label'] }}
                                </flux:badge>
                            </div>

                            <div>
                                <flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">Gaji
                                </flux:heading>
                                <flux:text>{{ $employee['base_salary'] }}</flux:text>
                            </div>
                        </div>

                        @if ($employee['referral_code'])
                            <div>
                                <flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">Kode
                                    Referral</flux:heading>
                                <flux:badge color="zinc" size="sm">{{ $employee['referral_code'] }}</flux:badge>
                            </div>
                        @endif

                        @if (count($employee['outlets']) > 0)
                            <div>
                                <flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">Outlet
                                </flux:heading>
                                <div class="flex flex-wrap gap-2">
                                    @foreach ($employee['outlets'] as $outlet)
                                        <span class="text-xs text-gray-400 border border-gray-400 rounded px-2 py-1">
                                            {{ $outlet }}
                                        </span>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        <div>
                            <flux:heading class="uppercase font-semibold text-gray-500 dark:text-gray-400 ">
                                Informasi
                                Tanggal</flux:heading>
                            <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
                                <div class="flex flex-col gap-2 text-xs">
                                    <div>
                                        <span class="font-medium text-gray-900 dark:text-white">Tgl Lahir:</span>
                                        <span
                                            class="text-gray-700 dark:text-gray-300">{{ $employee['birthdate'] }}</span>
                                        <span class="text-gray-500">({{ $employee['birth_age'] }})</span>
                                    </div>
                                    <div>
                                        <span class="font-medium text-gray-900 dark:text-white">Tgl
                                            Bergabung:</span>
                                        <span
                                            class="text-gray-700 dark:text-gray-300">{{ $employee['user']['hire_date'] }}</span>
                                        <span class="text-gray-500">({{ $employee['user']['hire_ago'] }})</span>
                                    </div>
                                    @if ($employee['user']['resign_date'])
                                        <div>
                                            <span class="font-medium text-gray-900 dark:text-white">Tgl
                                                Resign:</span>
                                            <span
                                                class="text-gray-700 dark:text-gray-300">{{ $employee['user']['resign_date'] }}</span>
                                            <span class="text-gray-500">({{ $employee['user']['resign_ago'] }})</span>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>

                    @canany(['update user', 'delete user'])
                        @if (auth()->id() !== $employee['user']['id'])
                            <flux:separator></flux:separator>
                            <div class="flex gap-2 pt-2">
                                @can('update user')
                                    <flux:tooltip content="Ubah">
                                        <flux:button href="{{ route('studio.master.user.edit', $employee['user']['hash']) }}"
                                            wire:navigate.hover variant="primary" color="yellow" icon="pencil-square"
                                            size="sm"></flux:button>
                                    </flux:tooltip>
                                @endcan

                                @can('delete user')
                                    <flux:modal.trigger name="delete">
                                        <flux:tooltip content="Hapus">
                                            <flux:button variant="danger" icon="trash" size="sm"
                                                wire:click="$dispatch('fn:confirmDelete', {id: '{{ $employee['user']['hash'] }}'})">
                                            </flux:button>
                                        </flux:tooltip>
                                    </flux:modal.trigger>
                                @endcan
                            </div>
                        @endif
                    @endcanany
                </flux:card>
            @endforeach
        </div>
    </div>

    @include('components.confirmation.delete')
</flux:main>
