<flux:main>
    <div class="flex justify-between items-center">
        <div>
            <flux:heading size="xl">{{ $pageTitle }}</flux:heading>
        </div>
        @can('create outlet')
            <div>
                <flux:button href="{{ route('studio.master.outlet.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\OutletStatus::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 gap-6 items-start">
            @foreach ($outlets as $outlet)
                <flux:card
                    class="space-y-2 transition-transform duration-300 ease-out hover:-translate-y-1 hover:shadow-lg">
                    <div class="flex items-start justify-between mb-4">
                        <div class="flex items-center gap-3">
                            <img src="{{ $outlet['image'] }}" alt="{{ $outlet['image'] }}"
                                class="w-12 h-12 rounded-full cursor-pointer"
                                wire:click="openImage('{{ $outlet['image'] }}')">

                            <div>
                                <flux:heading size="lg">{{ $outlet['name'] }}</flux:heading>
                                <flux:badge color="{{ $outlet['status']['color'] }}" size="sm">
                                    {{ $outlet['status']['label'] }}
                                </flux:badge>
                            </div>
                        </div>
                    </div>

                    <div class="space-y-3 mb-4">
                        <div class="flex items-center gap-2 text-sm">
                            <flux:icon.phone class="w-4 h-4 text-gray-500 dark:text-white" />
                            <span class="text-gray-700 dark:text-gray-300">{{ $outlet['phone_number'] }}</span>
                        </div>

                        <div class="flex items-start gap-2 text-sm">
                            <flux:icon.map-pin class="w-4 h-4 text-gray-500 dark:text-white" />
                            <div class="text-gray-700 dark:text-gray-300">
                                <div class="font-medium">{{ $outlet['landmark'] }}</div>
                                <div class="text-gray-600 dark:text-gray-400">{{ $outlet['address'] }}</div>
                            </div>
                        </div>
                    </div>

                    <div class="mb-4">
                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
                            <flux:icon.clock class="w-4 h-4" />
                            Jam Operasional
                        </h4>
                        <div class="space-y-1 bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
                            @foreach ($outlet['opening_hours'] as $day => $time)
                                <div class="flex justify-between text-xs">
                                    <span
                                        class="font-medium text-gray-700 dark:text-gray-300">{{ $day }}:</span>
                                    <span class="text-gray-600 dark:text-gray-400">
                                        {{ $time['is_closed'] ? 'Tutup' : "{$time['open']} - {$time['close']}" }}
                                    </span>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="mb-4">
                        <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
                            <flux:icon.wifi class="w-4 h-4" />
                            Fasilitas
                        </h4>
                        <div class="flex flex-wrap gap-2">
                            @foreach ($outlet['facilities'] as $facility)
                                <flux:badge color="zinc" size="sm">{{ $facility }}</flux:badge>
                            @endforeach
                        </div>
                    </div>

                    <div class="mb-4 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 Buka:</span>
                                <span class="text-gray-700 dark:text-gray-300">{{ $outlet['opened_date'] }}</span>
                                <span class="text-gray-500">({{ $outlet['opened_ago'] }})</span>
                            </div>
                            @if ($outlet['closed_date'])
                                <div>
                                    <span class="font-medium text-gray-900 dark:text-white">Tgl Tutup:</span>
                                    <span class="text-gray-700 dark:text-gray-300">{{ $outlet['closed_date'] }}</span>
                                    <span class="text-gray-500">({{ $outlet['closed_ago'] }})</span>
                                </div>
                            @endif
                        </div>
                    </div>

                    @if (count($outlet['images']) > 0)
                        <div class="mb-4">
                            <h4
                                class="text-sm font-semibold text-gray-900 dark:text-white mb-2 flex items-center gap-2">
                                <flux:icon.photo class="w-4 h-4" />
                                Gambar
                            </h4>
                            <div class="flex mt-6">
                                @foreach ($outlet['images'] as $key => $value)
                                    <img src="{{ $value }}" alt="{{ $value }}"
                                        class="w-12 h-12 rounded-full -ml-3 first:ml-0 cursor-pointer"
                                        wire:click="openImage('{{ $value }}')">
                                @endforeach
                            </div>
                        </div>
                    @endif

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

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

    @include('components.confirmation.delete')

    <flux:modal name="image-modal" class="w-[95%] max-w-sm md:max-w-xl mx-auto" @close="closeModal('form-modal')">
        <div class="flex justify-center items-center p-4">
            <img src="{{ $imageUrl }}" alt="Outlet Image" class="rounded-lg max-h-[80vh] object-contain" />
        </div>
    </flux:modal>

</flux:main>
