228 lines
9.0 KiB
PHP
228 lines
9.0 KiB
PHP
<div class="mx-auto">
|
|
|
|
{{-- Header --}}
|
|
<div class="flex justify-between items-center mb-8">
|
|
<div>
|
|
<flux:heading size="xl">Manajemen Dokter</flux:heading>
|
|
<flux:subheading>Kelola data dokter dan jadwal praktik.</flux:subheading>
|
|
</div>
|
|
<flux:button wire:click="create" variant="primary" icon="user-plus">
|
|
Tambah Dokter
|
|
</flux:button>
|
|
</div>
|
|
|
|
{{-- Filter --}}
|
|
<div class="flex md:flex-row flex-col gap-4 mb-4">
|
|
|
|
<div class="flex-1">
|
|
<flux:input wire:model.live.debounce.300ms="search" placeholder="Cari nama atau spesialis..."
|
|
icon="magnifying-glass" />
|
|
</div>
|
|
|
|
<div class="w-full md:w-64">
|
|
<flux:select wire:model.live="filterSpecialization" icon="funnel">
|
|
<option value="">Semua Spesialis</option>
|
|
@foreach ($specializations as $sp)
|
|
<option value="{{ $sp }}">{{ $sp }}</option>
|
|
@endforeach
|
|
</flux:select>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{{-- Table --}}
|
|
<flux:table>
|
|
|
|
<flux:table.columns>
|
|
<flux:table.column>Foto</flux:table.column>
|
|
<flux:table.column>Nama</flux:table.column>
|
|
<flux:table.column>Spesialis</flux:table.column>
|
|
<flux:table.column>Telepon</flux:table.column>
|
|
<flux:table.column>Email</flux:table.column>
|
|
<flux:table.column>Jadwal</flux:table.column>
|
|
<flux:table.column align="end">Aksi</flux:table.column>
|
|
</flux:table.columns>
|
|
|
|
<flux:table.rows>
|
|
@forelse ($doctors as $doctor)
|
|
<flux:table.row :key="$doctor->id">
|
|
|
|
{{-- FOTO --}}
|
|
<flux:table.cell>
|
|
<img src="{{ $doctor->photo ? asset('storage/' . $doctor->photo) : 'https://upload.wikimedia.org/wikipedia/commons/8/89/Portrait_Placeholder.png' }}"
|
|
class="rounded-full w-10 h-10 object-cover">
|
|
</flux:table.cell>
|
|
|
|
<flux:table.cell>{{ $doctor->name }}</flux:table.cell>
|
|
|
|
<flux:table.cell>
|
|
<flux:badge color="zinc" size="sm">
|
|
{{ $doctor->specialization }}
|
|
</flux:badge>
|
|
</flux:table.cell>
|
|
|
|
<flux:table.cell>{{ $doctor->phone }}</flux:table.cell>
|
|
<flux:table.cell>{{ $doctor->email }}</flux:table.cell>
|
|
<flux:table.cell>
|
|
@php
|
|
$activeDays = collect($doctor->schedule)->filter(fn($time) => !empty($time));
|
|
@endphp
|
|
|
|
@if ($activeDays->count() > 0)
|
|
<flux:dropdown>
|
|
<flux:button variant="ghost" size="sm" icon="calendar-days" class="text-xs">
|
|
{{ $activeDays->count() }} Hari
|
|
</flux:button>
|
|
|
|
<flux:menu class="p-4 min-w-[220px]">
|
|
<div class="space-y-2">
|
|
<p class="mb-2 font-bold text-zinc-400 text-xs uppercase">Jam Praktik</p>
|
|
@foreach ($doctor->schedule as $day => $time)
|
|
@if ($time)
|
|
<div
|
|
class="flex justify-between pb-1 border-zinc-100 dark:border-white/10 border-b text-xs">
|
|
<span class="font-semibold">{{ $day }}</span>
|
|
<span
|
|
class="text-zinc-600 dark:text-zinc-400">{{ $time }}</span>
|
|
</div>
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
</flux:menu>
|
|
</flux:dropdown>
|
|
@else
|
|
<span class="text-zinc-400 text-xs italic">Belum diatur</span>
|
|
@endif
|
|
</flux:table.cell>
|
|
|
|
<flux:table.cell align="end">
|
|
<div class="flex justify-end gap-2">
|
|
|
|
<flux:button wire:click="edit({{ $doctor->id }})" variant="ghost" icon="pencil-square"
|
|
size="sm" />
|
|
|
|
<flux:button x-on:click="confirmDelete({{ $doctor->id }}, '{{ $doctor->name }}')"
|
|
variant="ghost" icon="trash" size="sm" class="text-red-500" />
|
|
|
|
</div>
|
|
</flux:table.cell>
|
|
|
|
</flux:table.row>
|
|
@empty
|
|
<flux:table.row>
|
|
<flux:table.cell colspan="6" align="center">
|
|
<div class="py-10">
|
|
<flux:icon.inbox class="mx-auto mb-4 text-gray-400" />
|
|
<flux:heading size="md" class="text-gray-500">
|
|
Tidak ada dokter ditemukan.
|
|
</flux:heading>
|
|
</div>
|
|
</flux:table.cell>
|
|
</flux:table.row>
|
|
@endforelse
|
|
</flux:table.rows>
|
|
|
|
</flux:table>
|
|
|
|
{{-- Pagination --}}
|
|
<div class="mt-4">
|
|
<flux:pagination :paginator="$doctors" />
|
|
</div>
|
|
|
|
{{-- Modal --}}
|
|
<flux:modal wire:model="isModalOpen" class="min-w-[500px]">
|
|
|
|
<form wire:submit.prevent="save" class="space-y-6">
|
|
|
|
<flux:heading size="lg">
|
|
{{ $doctorId ? 'Edit Dokter' : 'Dokter Baru' }}
|
|
</flux:heading>
|
|
|
|
{{-- Nama --}}
|
|
<flux:input wire:model="name" label="Nama Dokter" />
|
|
|
|
{{-- Spesialis --}}
|
|
<flux:input wire:model="specialization" label="Spesialis" />
|
|
|
|
{{-- Telepon --}}
|
|
<flux:input wire:model="phone" label="Telepon" />
|
|
|
|
{{-- Email --}}
|
|
<flux:input wire:model="email" label="Email" type="email" />
|
|
|
|
{{-- Jadwal --}}
|
|
<div class="space-y-3">
|
|
<flux:label>Jadwal Praktik (Jam Kerja)</flux:label>
|
|
<div
|
|
class="gap-x-6 gap-y-3 grid grid-cols-1 sm:grid-cols-2 bg-zinc-50 dark:bg-white/5 p-4 border border-zinc-200 dark:border-white/10 rounded-lg">
|
|
@foreach (['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu', 'Minggu'] as $day)
|
|
<div class="flex items-center gap-3">
|
|
<span class="w-16 font-medium text-zinc-500 text-sm">{{ $day }}</span>
|
|
<flux:input wire:model="schedule.{{ $day }}" placeholder="Contoh: 08:00 - 14:00"
|
|
size="sm" class="flex-1" />
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
<flux:description>Kosongkan jika tidak ada praktik di hari tersebut.</flux:description>
|
|
</div>
|
|
|
|
{{-- FOTO UPLOAD --}}
|
|
<div>
|
|
<label class="block mb-2 font-medium text-sm">Foto Dokter</label>
|
|
|
|
<input type="file" wire:model="photo" class="block w-full text-sm">
|
|
|
|
{{-- Loading --}}
|
|
<div wire:loading wire:target="photo" class="text-gray-500 text-sm">
|
|
Uploading...
|
|
</div>
|
|
|
|
{{-- Preview foto baru --}}
|
|
@if ($photo)
|
|
<img src="{{ $photo->temporaryUrl() }}" class="mt-3 rounded-full w-24 h-24 object-cover">
|
|
@endif
|
|
|
|
{{-- Foto lama --}}
|
|
@if (!$photo && $oldPhoto)
|
|
<img src="{{ asset('storage/' . $oldPhoto) }}" class="mt-3 rounded-full w-24 h-24 object-cover">
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Tombol --}}
|
|
<div class="flex justify-end space-x-2">
|
|
<flux:modal.close>
|
|
<flux:button variant="ghost">Batal</flux:button>
|
|
</flux:modal.close>
|
|
|
|
<flux:button type="submit" variant="primary">
|
|
Simpan Dokter
|
|
</flux:button>
|
|
</div>
|
|
|
|
</form>
|
|
|
|
</flux:modal>
|
|
|
|
</div>
|
|
|
|
{{-- SweetAlert --}}
|
|
@script
|
|
<script>
|
|
window.confirmDelete = function(id, name) {
|
|
Swal.fire({
|
|
title: 'Hapus Dokter?',
|
|
text: `Hapus dokter ${name}? Data tidak bisa dikembalikan.`,
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#ef4444',
|
|
confirmButtonText: 'Ya, Hapus',
|
|
reverseButtons: true
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
$wire.delete(id);
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
@endscript
|