163 lines
8.4 KiB
PHP
163 lines
8.4 KiB
PHP
<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="columns-1 md:columns-2 lg:columns-3 gap-6">
|
|
@foreach ($outlets as $outlet)
|
|
<flux:card
|
|
class="mb-6 break-inside-avoid 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">
|
|
<flux:avatar size="lg" src="{{ $outlet['image'] }}"
|
|
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>
|
|
<flux:avatar.group class="mt-6">
|
|
@foreach ($outlet['images'] as $key => $value)
|
|
<flux:avatar circle size="lg" src="{{ $value }}"
|
|
wire:click="openImage('{{ $value }}')" />
|
|
@endforeach
|
|
</flux:avatar.group>
|
|
</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>
|