165 lines
7.0 KiB
PHP
165 lines
7.0 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Kelola Foto</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap" rel="stylesheet">
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background-color: white;
|
|
color: black;
|
|
}
|
|
.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-100">
|
|
|
|
<!-- Sidebar -->
|
|
<div id="sidebar" class="fixed top-0 left-0 w-64 bg-white shadow-md z-30 h-full overflow-y-auto hidden md:block">
|
|
<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 Topbar -->
|
|
<div class="md:hidden fixed top-0 left-0 right-0 bg-white shadow px-4 py-3 z-30 flex justify-between items-center">
|
|
<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>
|
|
|
|
<!-- Sidebar Overlay Mobile -->
|
|
<div id="overlay" class="fixed inset-0 bg-black bg-opacity-40 hidden z-20" onclick="toggleSidebar()"></div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="md:ml-64 mt-16 md:mt-0 p-4 fade-in relative z-10">
|
|
<h1 class="text-3xl font-bold text-gray-800 mb-4">Kelola Foto</h1>
|
|
|
|
@if(session('success'))
|
|
<div class="text-green-600 font-semibold mb-4">{{ session('success') }}</div>
|
|
@endif
|
|
|
|
<!-- Form Pencarian Token -->
|
|
<form method="GET" id="searchForm" class="mb-6">
|
|
<input
|
|
type="text"
|
|
name="search"
|
|
value="{{ request('search') }}"
|
|
placeholder="Cari nama customer, produk, atau token..."
|
|
class="w-full sm:w-2/3 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400"
|
|
oninput="document.getElementById('searchForm').submit();"
|
|
>
|
|
</form>
|
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md p-6">
|
|
<h2 class="text-2xl font-semibold mb-4">Daftar Token Foto Aktif</h2>
|
|
<ul class="space-y-6">
|
|
@php
|
|
$shownTokens = [];
|
|
$search = strtolower(request('search', ''));
|
|
@endphp
|
|
|
|
@foreach($photos as $photo)
|
|
@php
|
|
$token = $photo->token;
|
|
$customerName = strtolower($photo->customer->name ?? '');
|
|
$produk = strtolower($photo->booking->produk ?? '');
|
|
|
|
$match = !$search || str_contains($customerName, $search) || str_contains($produk, $search) || str_contains(strtolower($token), $search);
|
|
@endphp
|
|
|
|
@if($token && !in_array($token, $shownTokens) && $match)
|
|
@php $shownTokens[] = $token; @endphp
|
|
<li class="border-b pb-4">
|
|
<div class="flex flex-col lg:flex-row lg:justify-between gap-4">
|
|
<div class="space-y-1 text-gray-700">
|
|
<p><strong>Customer:</strong> {{ $photo->customer->name }}</p>
|
|
<p><strong>Produk:</strong> {{ $photo->booking->produk }}</p>
|
|
<p><strong>Tanggal Pemotretan:</strong> {{ $photo->booking->tanggal_pemotretan }}</p>
|
|
<p><strong>Token:</strong> {{ $photo->token }}</p>
|
|
<p><strong>Jumlah File:</strong> {{ $photo->where('token', $photo->token)->count() }}</p>
|
|
</div>
|
|
<div class="flex flex-col sm:flex-row gap-2">
|
|
<!-- Hapus Token -->
|
|
<form action="{{ route('photo.clearToken', $photo->id) }}" method="POST" onsubmit="return confirm('Yakin ingin menghapus token ini dan semua fotonya?');">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button class="bg-red-500 text-white px-4 py-2 rounded hover:bg-red-600 w-full sm:w-auto">
|
|
<i class="bi bi-trash-fill mr-2"></i> Hapus Token
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Reset Token -->
|
|
<form action="{{ route('admin.upload.resetToken', $photo->id) }}" method="POST" onsubmit="return confirm('Yakin ingin reset token ini?')">
|
|
@csrf
|
|
@method('PATCH')
|
|
<button class="bg-yellow-500 text-white px-4 py-2 rounded hover:bg-yellow-600 flex items-center justify-center gap-2 w-full sm:w-auto">
|
|
<i class="bi bi-arrow-clockwise"></i> <span>Regenerasi Token</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
@endif
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Script -->
|
|
<script>
|
|
function toggleSidebar() {
|
|
const sidebar = document.getElementById("sidebar");
|
|
const overlay = document.getElementById("overlay");
|
|
sidebar.classList.toggle("hidden");
|
|
overlay.classList.toggle("hidden");
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
setTimeout(() => {
|
|
document.querySelectorAll('.fade-in').forEach(el => {
|
|
el.classList.add('active');
|
|
});
|
|
}, 200);
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|