345 lines
12 KiB
PHP
345 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>Upload Foto - Skyrent Studio</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
|
|
<style>
|
|
body {
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background: linear-gradient(to right, #f1f5f9, #ffffff);
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.main-container {
|
|
max-width: 1200px;
|
|
margin: 50px auto;
|
|
padding: 5px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
}
|
|
|
|
.box {
|
|
background: #ffffff;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
|
|
padding: 25px;
|
|
flex: 1 1 500px;
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
|
|
.box:hover {
|
|
transform: translateY(-3px);
|
|
}
|
|
|
|
h2,
|
|
h3 {
|
|
color: #1e293b;
|
|
margin-bottom: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
label {
|
|
font-weight: 600;
|
|
display: block;
|
|
margin: 10px 0 5px;
|
|
color: #475569;
|
|
}
|
|
|
|
select,
|
|
input[type="file"],
|
|
input[type="text"] {
|
|
width: 100%;
|
|
padding: 10px;
|
|
margin: 5px 0 15px;
|
|
border: 1px solid #cbd5e1;
|
|
border-radius: 8px;
|
|
font-size: 15px;
|
|
background-color: #f8fafc;
|
|
transition: border 0.2s;
|
|
}
|
|
|
|
select:focus,
|
|
input:focus {
|
|
border-color: #38bdf8;
|
|
outline: none;
|
|
}
|
|
|
|
button {
|
|
width: 100%;
|
|
background: #4ade80;
|
|
color: white;
|
|
padding: 12px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
}
|
|
|
|
button:hover {
|
|
background: #22c55e;
|
|
}
|
|
|
|
.success-message {
|
|
color: #16a34a;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.error-message {
|
|
color: #b91c1c;
|
|
font-weight: bold;
|
|
text-align: center;
|
|
}
|
|
|
|
.alert {
|
|
background: #d1fae5;
|
|
border: 1px solid #6ee7b7;
|
|
padding: 12px;
|
|
margin-bottom: 20px;
|
|
border-radius: 6px;
|
|
text-align: center;
|
|
}
|
|
|
|
.back-link {
|
|
display: block;
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
color: #3b82f6;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.back-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 14px;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
padding: 12px;
|
|
border: 1px solid #e5e7eb;
|
|
text-align: left;
|
|
}
|
|
|
|
th {
|
|
background-color: #f3f4f6;
|
|
color: #1f2937;
|
|
}
|
|
|
|
tr:nth-child(even) {
|
|
background-color: #f9fafb;
|
|
}
|
|
|
|
tr:hover {
|
|
background-color: #e0f2fe;
|
|
}
|
|
|
|
@media(max-width: 768px) {
|
|
.main-container {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<!-- Header -->
|
|
<div class="bg-white shadow px-6 py-4 flex justify-between items-center">
|
|
<h1 class="text-2xl font-bold text-blue-600">Dashboard Karyawan</h1>
|
|
<div class="flex items-center space-x-4">
|
|
<a href="{{ route('user.dashboard') }}" class="bg-blue-600 text-white px-3 py-1 text-sm rounded hover:bg-blue-700 transition">
|
|
⬅ Dashboard
|
|
</a>
|
|
<div class="flex items-center space-x-2 text-gray-600 text-sm">
|
|
<span>Login sebagai:</span>
|
|
<strong>{{ Auth::user()->name }}</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="main-container">
|
|
<!-- KIRI: Tabel Token -->
|
|
<div class="box">
|
|
<h3>Daftar Foto Terupload</h3>
|
|
@if($photos->count() > 0)
|
|
<label for="search">Cari Data:</label>
|
|
<input type="text" id="search" placeholder="Cari berdasarkan nama, produk, atau token...">
|
|
|
|
<div class="table-container overflow-y-auto max-h-[300px] overflow-x-auto mt-3">
|
|
<table class="min-w-full table-auto border border-gray-300" id="photoTable">
|
|
<thead class="bg-gray-100">
|
|
<tr>
|
|
<th>Token</th>
|
|
<th>Nama</th>
|
|
<th>Produk</th>
|
|
<th>Tanggal Pemotretan</th>
|
|
<th>Tanggal Upload</th>
|
|
<th>Jumlah Foto</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach(collect($photos)->unique('token') as $photo)
|
|
<tr class="even:bg-gray-100 hover:bg-gray-200">
|
|
<td class="px-4 py-2 border">{{ $photo->token }}</td>
|
|
<td class="px-4 py-2 border">{{ $photo->customer->name }}</td>
|
|
<td class="px-4 py-2 border">{{ $photo->booking->produk }}</td>
|
|
<td class="px-4 py-2 border">{{ $photo->booking->tanggal_pemotretan }}</td>
|
|
<td class="px-4 py-2 border">{{ $photo->created_at->format('Y-m-d H:i') }}</td>
|
|
<td class="px-4 py-2 border">
|
|
{{ collect($photos)->where('token', $photo->token)->count() }}
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
@else
|
|
<p class="text-center text-gray-500">Belum ada foto yang diupload.</p>
|
|
@endif
|
|
</div>
|
|
|
|
<!-- KANAN: Form Upload -->
|
|
<div class="box">
|
|
<h2>Upload Foto</h2>
|
|
|
|
@if(session('token'))
|
|
<div class="alert">
|
|
✅ <strong>Token Anda: {{ session('token') }}</strong><br>
|
|
Simpan token ini untuk mendownload foto Anda nanti.
|
|
</div>
|
|
@endif
|
|
|
|
@if(session('success'))
|
|
<p class="success-message">{{ session('success') }}</p>
|
|
@endif
|
|
|
|
@if ($errors->any())
|
|
<div class="error-message">
|
|
<ul>
|
|
@foreach ($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
<form action="{{ route('user.upload.store') }}" method="POST" enctype="multipart/form-data">
|
|
@csrf
|
|
|
|
<label for="customer_id">Pilih Customer:</label>
|
|
<select name="customer_id" id="customer_id" required>
|
|
<option value="">-- Pilih Customer --</option>
|
|
@php
|
|
// Ambil ID customer dari bookings yang belum punya foto
|
|
$availableCustomerIds = $bookingsWithoutPhotoToken->pluck('customer_id')->unique();
|
|
@endphp
|
|
@foreach($customers as $customer)
|
|
@if($availableCustomerIds->contains($customer->id))
|
|
<option value="{{ $customer->id }}">{{ $customer->name }}</option>
|
|
@endif
|
|
@endforeach
|
|
</select>
|
|
<label for="booking_id">Pilih Booking:</label>
|
|
<select name="booking_id" id="booking_id" required>
|
|
<option value="">-- Pilih Booking --</option>
|
|
</select>
|
|
|
|
<label for="photos">Pilih Foto:</label>
|
|
<input type="file" name="photos[]" multiple accept="image/*" required>
|
|
|
|
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded">
|
|
Upload
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- BAWAH: Tabel Booking Belum Ada Foto -->
|
|
<div class="box w-full">
|
|
<h3>Booking Belum Ada Foto</h3>
|
|
@if($bookingsWithoutPhotoToken->count() > 0)
|
|
<div class="table-container overflow-y-auto max-h-[400px] overflow-x-auto mt-3">
|
|
<table class="min-w-full table-auto border border-gray-300">
|
|
<thead class="bg-gray-100">
|
|
<tr>
|
|
<th>Nama Customer</th>
|
|
<th>Produk</th>
|
|
<th>Paket</th>
|
|
<th>Tanggal Pemotretan</th>
|
|
<th>Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($bookingsWithoutPhotoToken as $booking)
|
|
<tr class="even:bg-gray-100 hover:bg-gray-200">
|
|
<td class="px-4 py-2 border">{{ $booking->customer->name }}</td>
|
|
<td class="px-4 py-2 border">{{ $booking->produk }}</td>
|
|
<td class="px-4 py-2 border">{{ $booking->paket }}</td>
|
|
<td class="px-4 py-2 border">{{ $booking->tanggal_pemotretan }}</td>
|
|
<td class="px-4 py-2 border text-red-600 font-semibold">Belum Ada Foto</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
@else
|
|
<p class="text-center text-gray-500">Semua booking sudah memiliki foto.</p>
|
|
@endif
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('customer_id').addEventListener('change', function () {
|
|
let customerId = this.value;
|
|
let bookingSelect = document.getElementById('booking_id');
|
|
bookingSelect.innerHTML = '<option value="">-- Pilih Booking --</option>';
|
|
|
|
if (customerId) {
|
|
fetch(`/user/bookings/${customerId}`)
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.length > 0) {
|
|
data.forEach(booking => {
|
|
let option = document.createElement('option');
|
|
option.value = booking.id;
|
|
option.textContent = `${booking.produk} (${booking.tanggal_pemotretan})`;
|
|
bookingSelect.appendChild(option);
|
|
});
|
|
} else {
|
|
let option = document.createElement('option');
|
|
option.value = "";
|
|
option.textContent = "Tidak ada booking tersedia";
|
|
bookingSelect.appendChild(option);
|
|
}
|
|
})
|
|
.catch(error => console.error('Error fetching bookings:', error));
|
|
}
|
|
});
|
|
|
|
document.getElementById('search').addEventListener('keyup', function () {
|
|
let keyword = this.value.toLowerCase();
|
|
let rows = document.querySelectorAll('#photoTable tbody tr');
|
|
|
|
rows.forEach(row => {
|
|
let text = row.textContent.toLowerCase();
|
|
row.style.display = text.includes(keyword) ? '' : 'none';
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|