261 lines
12 KiB
PHP
261 lines
12 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Daftar Booking</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
animation: {
|
|
'fade-in': 'fadeIn 1s ease-out forwards',
|
|
'slide-up': 'slideUp 0.8s ease-out forwards'
|
|
},
|
|
keyframes: {
|
|
fadeIn: {
|
|
'0%': { opacity: '0' },
|
|
'100%': { opacity: '1' },
|
|
},
|
|
slideUp: {
|
|
'0%': { transform: 'translateY(20px)', opacity: '0' },
|
|
'100%': { transform: 'translateY(0)', opacity: '1' },
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: #f7fafc;
|
|
}
|
|
.fade-in {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
|
|
}
|
|
.fade-in.active {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-gray-50">
|
|
|
|
<!-- Sidebar -->
|
|
<div id="sidebar" class="fixed top-0 left-0 w-64 bg-white shadow-md z-30 h-screen overflow-y-auto md:block hidden">
|
|
<div class="p-5 border-b">
|
|
<h2 class="text-2xl font-bold text-blue-600">
|
|
<a href="/admin/dashboard" class="hover:underline">Admin Panel</a>
|
|
</h2>
|
|
</div>
|
|
<nav class="p-4 space-y-3">
|
|
<a href="/admin/bookings" class="flex items-center gap-3 px-4 py-2 rounded hover:bg-blue-100 transition-all">
|
|
<i class="bi bi-calendar3 text-blue-500"></i> Booking
|
|
</a>
|
|
<a href="/admin/users" class="flex items-center gap-3 px-4 py-2 rounded hover:bg-blue-100 transition-all">
|
|
<i class="bi bi-people-fill text-blue-500"></i> Pengguna
|
|
</a>
|
|
<a href="/admin/upload" class="flex items-center gap-3 px-4 py-2 rounded hover:bg-blue-100 transition-all">
|
|
<i class="bi bi-upload text-blue-500"></i> Token Foto
|
|
</a>
|
|
<a href="/admin/reports" class="flex items-center gap-3 px-4 py-2 rounded hover:bg-blue-100 transition-all">
|
|
<i class="bi bi-boxes text-blue-500"></i> Produk
|
|
</a>
|
|
<form action="/logout" method="POST" class="px-4 mt-4">
|
|
@csrf
|
|
<button type="submit" class="w-full flex items-center justify-center gap-2 bg-red-500 text-white py-2 rounded hover:bg-red-600 transition-all">
|
|
<i class="bi bi-box-arrow-right"></i> Logout
|
|
</button>
|
|
</form>
|
|
</nav>
|
|
</div>
|
|
|
|
<!-- Mobile Sidebar Toggle Button -->
|
|
<div class="md:hidden flex justify-between items-center bg-white shadow px-4 py-3 fixed top-0 left-0 w-full z-20">
|
|
<button onclick="toggleSidebar()" class="text-2xl text-blue-600">
|
|
<i class="bi bi-list"></i>
|
|
</button>
|
|
<h1 class="text-xl font-bold text-blue-600">Admin Panel</h1>
|
|
</div>
|
|
|
|
<!-- Overlay for Mobile Sidebar -->
|
|
<div id="overlay" class="fixed inset-0 bg-black bg-opacity-40 hidden z-20" onclick="toggleSidebar()"></div>
|
|
|
|
<!-- Main Content -->
|
|
<!-- Main Content -->
|
|
<div class="md:ml-64 p-6 pt-24 md:pt-6 space-y-6 animate-fade-in">
|
|
<h1 class="text-3xl font-bold text-gray-700 animate-slide-up">Daftar Booking</h1>
|
|
|
|
@if(session('success'))
|
|
<p class="text-green-600 font-semibold mt-3">{{ session('success') }}</p>
|
|
@endif
|
|
|
|
@if(session('error'))
|
|
<p class="text-red-600 font-semibold mt-3">{{ session('error') }}</p>
|
|
@endif
|
|
|
|
<!-- Pencarian -->
|
|
<div class="flex items-center space-x-4 mb-6">
|
|
<form action="{{ url('/admin/bookings') }}" method="GET" class="flex items-center space-x-2 w-full max-w-lg">
|
|
<input type="text" name="search" value="{{ request()->get('search') }}" placeholder="Cari customer atau tanggal..." class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
|
|
<button type="submit" class="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 focus:outline-none">
|
|
<i class="bi bi-search"></i> Cari
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Tabel Booking -->
|
|
<div class="mt-6 overflow-x-auto bg-white p-4 shadow-md rounded-lg">
|
|
<table class="min-w-full table-auto text-sm">
|
|
<thead class="bg-blue-500 text-white">
|
|
<tr>
|
|
<th class="p-3">No</th>
|
|
<th class="p-3">Customer</th>
|
|
<th class="p-3">Tanggal</th>
|
|
<th class="p-3">Produk</th>
|
|
<th class="p-3">Paket</th>
|
|
<th class="p-3">Total Harga</th>
|
|
<th class="p-3">Metode</th>
|
|
<th class="p-3">DP</th>
|
|
<th class="p-3">Bukti</th>
|
|
<th class="p-3">Status</th>
|
|
<th class="p-3">Keterangan</th>
|
|
<th class="p-3">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@php
|
|
$bookings = \App\Models\Booking::query();
|
|
|
|
// Pencarian berdasarkan input
|
|
if(request()->has('search')) {
|
|
$search = request()->get('search');
|
|
$bookings = $bookings->where(function($query) use ($search) {
|
|
$query->whereHas('customer', function($query) use ($search) {
|
|
$query->where('name', 'like', '%' . $search . '%');
|
|
})
|
|
->orWhere('tanggal_pemotretan', 'like', '%' . $search . '%');
|
|
});
|
|
}
|
|
|
|
// Ambil data booking
|
|
$bookings = $bookings->get();
|
|
@endphp
|
|
|
|
@foreach($bookings as $booking)
|
|
<tr class="border-b hover:bg-gray-100">
|
|
<td class="p-3 text-center">{{ $loop->iteration }}</td>
|
|
<td class="p-3 break-words max-w-[150px]">{{ $booking->customer->name }}</td>
|
|
<td class="p-3 text-center">{{ $booking->tanggal_pemotretan }}</td>
|
|
<td class="p-3 break-words max-w-[120px]">{{ $booking->produk }}</td>
|
|
<td class="p-3 text-center">{{ ucfirst($booking->paket) }}</td>
|
|
<td class="p-3">Rp {{ number_format($booking->total_harga, 0, ',', '.') }}</td>
|
|
<td class="p-3 text-center">{{ ucfirst($booking->payment_method) ?? 'Belum Dipilih' }}</td>
|
|
<td class="p-3">Rp {{ number_format($booking->dp ?? 0, 0, ',', '.') }}</td>
|
|
<td class="p-3 text-center">
|
|
@if($booking->bukti_transfer)
|
|
<a href="{{ asset('/' . $booking->bukti_transfer) }}" target="_blank" class="text-blue-600 underline">Lihat</a>
|
|
@else
|
|
<span class="text-gray-500 italic">Belum Ada</span>
|
|
@endif
|
|
</td>
|
|
<td class="p-3 text-center">
|
|
@if($booking->status == 'pending')
|
|
<span class="text-yellow-500 font-semibold">Pending</span>
|
|
@elseif($booking->status == 'approved')
|
|
<span class="text-green-500 font-semibold">Disetujui</span>
|
|
@else
|
|
<span class="text-red-500 font-semibold">Ditolak</span>
|
|
@endif
|
|
</td>
|
|
<td class="p-3 break-words max-w-[180px]">
|
|
@if($booking->keterangan)
|
|
<span class="text-sm text-red-600 italic">{{ $booking->keterangan }}</span>
|
|
@else
|
|
<span class="text-gray-400 text-sm italic">-</span>
|
|
@endif
|
|
</td>
|
|
<td class="p-3 flex flex-col sm:flex-row gap-2 justify-center items-center">
|
|
<form action="{{ route('admin.bookings.destroy', $booking->id) }}" method="POST" onsubmit="return confirm('Yakin ingin menghapus booking ini?');">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="bg-gray-500 text-white px-3 py-2 rounded hover:bg-gray-600" title="Hapus">
|
|
<i class="bi bi-trash"></i>
|
|
</button>
|
|
</form>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Modal Tolak Booking -->
|
|
<div id="modalDecline" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<form method="POST" action="" id="formDecline" class="bg-white p-6 rounded-lg w-96 shadow-lg">
|
|
@csrf
|
|
<h2 class="text-xl font-semibold mb-4 text-red-600">Tolak Booking</h2>
|
|
<label class="block mb-2 font-medium">Keterangan Penolakan:</label>
|
|
<textarea name="keterangan" rows="4" required class="w-full border p-2 rounded"></textarea>
|
|
<div class="mt-4 flex justify-end gap-3">
|
|
<button type="button" onclick="closeModal('modalDecline')" class="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400">Batal</button>
|
|
<button type="submit" class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600">Tolak</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- Modal Terima Booking -->
|
|
<div id="modalAccept" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<form method="POST" action="" id="formAccept" class="bg-white p-6 rounded-lg w-96 shadow-lg">
|
|
@csrf
|
|
<h2 class="text-xl font-semibold mb-4 text-green-600">Terima Booking</h2>
|
|
<label class="block mb-2 font-medium">Masukkan DP (Rp):</label>
|
|
<input type="number" name="dp" required class="w-full border p-2 rounded" min="0">
|
|
<div class="mt-4 flex justify-end">
|
|
<button type="button" onclick="closeModal('modalAccept')" class="mr-3 px-4 py-2 bg-gray-300 rounded">Batal</button>
|
|
<button type="submit" class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">Kirim</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
function openAcceptModal(id) {
|
|
const form = document.getElementById('formAccept');
|
|
form.action = `/admin/bookings/${id}/accept`; // Update form action to the accept route
|
|
document.getElementById('modalAccept').classList.remove('hidden');
|
|
}
|
|
function toggleSidebar() {
|
|
const sidebar = document.getElementById('sidebar');
|
|
const overlay = document.getElementById('overlay');
|
|
sidebar.classList.toggle('hidden');
|
|
overlay.classList.toggle('hidden');
|
|
}
|
|
|
|
function openAcceptModal(id) {
|
|
const form = document.getElementById('formAccept');
|
|
form.action = `/admin/bookings/${id}/accept`; // Update form action to the accept route
|
|
document.getElementById('modalAccept').classList.remove('hidden');
|
|
}
|
|
|
|
function openDeclineModal(id) {
|
|
const formDecline = document.getElementById('formDecline');
|
|
formDecline.action = "/admin/bookings/" + id + "/decline";
|
|
document.getElementById('modalDecline').classList.remove('hidden');
|
|
}
|
|
|
|
function closeModal(modalId) {
|
|
document.getElementById(modalId).classList.add('hidden');
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|