183 lines
9.8 KiB
PHP
183 lines
9.8 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 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:input icon="magnifying-glass" placeholder="Cari outlet..." wire:model.live.debounce.500ms="search"
|
|
autocomplete="off" />
|
|
|
|
<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>
|
|
</div>
|
|
|
|
<flux:separator class="mb-6" />
|
|
|
|
@if ($outlets->isNotEmpty())
|
|
<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="{{ $this->getFeaturedImage($outlet) }}" alt="{{ $outlet->name }}"
|
|
class="w-12 h-12 rounded-full">
|
|
|
|
<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>
|
|
|
|
@if (!empty($this->formatOpeningHours($outlet)))
|
|
<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 ($this->formatOpeningHours($outlet) 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>
|
|
@endif
|
|
|
|
@if ($outlet->facilities->isNotEmpty())
|
|
<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->name }}</flux:badge>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<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.calendar-days class="w-4 h-4" />
|
|
Tanggal
|
|
</h4>
|
|
<div class="flex flex-col gap-2 text-xs bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
|
|
<div>
|
|
<span class="font-medium text-gray-900 dark:text-white">Tgl Buka:</span>
|
|
<span
|
|
class="text-gray-700 dark:text-gray-300">{{ formatDateLocalized($outlet->opened_date) }}</span>
|
|
<span class="text-gray-500">({{ formatRelativeTime($outlet->opened_date) }})</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">{{ formatDateLocalized($outlet->closed_date) }}</span>
|
|
<span
|
|
class="text-gray-500">({{ formatRelativeTime($outlet->closed_date) }})</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
|
|
@if ($this->getGalleryImages($outlet))
|
|
<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 ($this->getGalleryImages($outlet) as $imageUrl)
|
|
<img src="{{ $imageUrl }}" alt="{{ $outlet->name }}"
|
|
class="w-12 h-12 rounded-full -ml-3 first:ml-0">
|
|
@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 variant="primary" color="yellow" icon="pencil-square" size="sm">
|
|
</flux:button>
|
|
</flux:tooltip>
|
|
@endcan
|
|
|
|
@can('delete outlet')
|
|
<flux:modal.trigger name="delete-confirmation">
|
|
<flux:tooltip content="Hapus">
|
|
<flux:button variant="danger" icon="trash" size="sm"
|
|
wire:click="$dispatch('fn:confirmAction', {id: '{{ $outlet->hash }}'})">
|
|
</flux:button>
|
|
</flux:tooltip>
|
|
</flux:modal.trigger>
|
|
@endcan
|
|
</div>
|
|
@endcanany
|
|
</flux:card>
|
|
@endforeach
|
|
</div>
|
|
@else
|
|
@include('components.animations.lottie.boxing-cat')
|
|
@endif
|
|
</div>
|
|
|
|
@include('components.modals.confirmation', [
|
|
'modalName' => 'delete-confirmation',
|
|
'modalTitle' => 'Apakah Anda yakin?',
|
|
'modalMessage' => 'Data yang berelasi dengan data ini juga akan ikut terhapus.',
|
|
'buttonVariant' => 'primary',
|
|
'buttonColor' => 'danger',
|
|
'buttonText' => 'Ya, Hapus',
|
|
])
|
|
</flux:main>
|
|
|
|
@assets
|
|
<script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.5/dist/dotlottie-wc.js" type="module"></script>
|
|
@endassets
|