686 lines
16 KiB
PHP
686 lines
16 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<meta name="csrf-token" content="{{ csrf_token() }}" />
|
|
<title>Detail Mobil Bekas</title>
|
|
<style>
|
|
:root {
|
|
font-family: Inter, system-ui, sans-serif;
|
|
background: #f8fafc;
|
|
color: #111827;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: #f0f4f8;
|
|
padding: 20px;
|
|
}
|
|
|
|
.page-shell {
|
|
max-width: 1300px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.back-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: #475569;
|
|
text-decoration: none;
|
|
margin-bottom: 24px;
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.back-link:hover {
|
|
color: #4338ca;
|
|
}
|
|
|
|
.back-link svg {
|
|
width: 18px;
|
|
height: 18px;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.detail-container {
|
|
display: grid;
|
|
grid-template-columns: 1.3fr 1fr;
|
|
gap: 32px;
|
|
align-items: start;
|
|
}
|
|
|
|
/* ── LEFT SIDE ── */
|
|
.detail-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
}
|
|
|
|
.image-section {
|
|
background: white;
|
|
border-radius: 24px;
|
|
overflow: hidden;
|
|
border: 1px solid #e5e7eb;
|
|
aspect-ratio: 4/3;
|
|
min-height: 450px;
|
|
}
|
|
|
|
.image-section img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.image-section-empty {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #f8fafc;
|
|
color: #6b7280;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.section-card {
|
|
background: white;
|
|
border-radius: 24px;
|
|
border: 1px solid #e5e7eb;
|
|
padding: 24px;
|
|
}
|
|
|
|
.section-title {
|
|
margin: 0 0 20px 0;
|
|
font-size: 1.3rem;
|
|
font-weight: 700;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.ikhtisar-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
gap: 20px;
|
|
}
|
|
|
|
.ikhtisar-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.ikhtisar-label {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 0.85rem;
|
|
color: #6b7280;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
.ikhtisar-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.ikhtisar-value {
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
color: #111827;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.description-section {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
}
|
|
|
|
.description-text {
|
|
color: #475569;
|
|
line-height: 1.7;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.description-text p {
|
|
margin: 0;
|
|
}
|
|
|
|
.read-more {
|
|
display: inline-flex;
|
|
color: #4338ca;
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
transition: color 0.2s ease;
|
|
gap: 4px;
|
|
}
|
|
|
|
.read-more:hover {
|
|
color: #3730a3;
|
|
}
|
|
|
|
/* ── RIGHT SIDE ── */
|
|
.detail-right {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
position: sticky;
|
|
top: 20px;
|
|
}
|
|
|
|
.price-section {
|
|
background: white;
|
|
border-radius: 24px;
|
|
border: 1px solid #e5e7eb;
|
|
padding: 24px;
|
|
text-align: center;
|
|
height: fit-content;
|
|
position: sticky;
|
|
top: 20px;
|
|
}
|
|
|
|
.price-label {
|
|
font-size: 0.85rem;
|
|
color: #6b7280;
|
|
margin-bottom: 8px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.3px;
|
|
}
|
|
|
|
.price-amount {
|
|
font-size: 2.2rem;
|
|
font-weight: 800;
|
|
color: #0f172a;
|
|
line-height: 1;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.booking-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
padding: 16px 24px;
|
|
background: #1a4d5c;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 12px;
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: background 0.2s ease, transform 0.2s ease;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
}
|
|
|
|
.booking-button:hover {
|
|
background: #0f3a47;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.booking-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.info-banner {
|
|
background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
|
|
border-radius: 16px;
|
|
padding: 20px;
|
|
color: white;
|
|
}
|
|
|
|
.banner-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-weight: 700;
|
|
margin-bottom: 12px;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.banner-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.banner-item {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 10px;
|
|
}
|
|
|
|
.banner-item-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
flex-shrink: 0;
|
|
margin-top: 2px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.3);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.banner-item-icon::after {
|
|
content: "✓";
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.banner-item-text {
|
|
flex: 1;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.seller-info {
|
|
background: white;
|
|
border-radius: 24px;
|
|
border: 1px solid #e5e7eb;
|
|
padding: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
}
|
|
|
|
.seller-info-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
flex: 1;
|
|
}
|
|
|
|
.seller-logo {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: #f8fafc;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 700;
|
|
color: #4338ca;
|
|
}
|
|
|
|
.seller-name {
|
|
font-weight: 700;
|
|
color: #111827;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.seller-arrow {
|
|
font-size: 1.3rem;
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.chat-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
padding: 16px 24px;
|
|
background: white;
|
|
color: #111827;
|
|
border: 2px solid #111827;
|
|
border-radius: 12px;
|
|
font-size: 0.95rem;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
text-decoration: none;
|
|
text-align: center;
|
|
}
|
|
|
|
.chat-button:hover {
|
|
background: #f8fafc;
|
|
border-color: #4338ca;
|
|
color: #4338ca;
|
|
}
|
|
|
|
.chat-icon {
|
|
width: 18px;
|
|
height: 18px;
|
|
}
|
|
|
|
.transaction-upload {
|
|
background: white;
|
|
border-radius: 24px;
|
|
border: 1px solid #e5e7eb;
|
|
padding: 24px;
|
|
}
|
|
|
|
.transaction-upload h2 {
|
|
margin: 0 0 8px;
|
|
font-size: 1.2rem;
|
|
color: #0f172a;
|
|
}
|
|
|
|
.transaction-upload p {
|
|
margin: 0 0 18px;
|
|
color: #64748b;
|
|
line-height: 1.6;
|
|
font-size: 0.92rem;
|
|
}
|
|
|
|
.upload-form {
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
|
|
.upload-form label {
|
|
display: grid;
|
|
gap: 8px;
|
|
color: #334155;
|
|
font-size: 0.9rem;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.upload-form input,
|
|
.upload-form select,
|
|
.upload-form textarea {
|
|
width: 100%;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 12px;
|
|
padding: 12px 14px;
|
|
font: inherit;
|
|
color: #0f172a;
|
|
background: #fff;
|
|
}
|
|
|
|
.upload-form textarea {
|
|
min-height: 90px;
|
|
resize: vertical;
|
|
}
|
|
|
|
.form-note {
|
|
color: #64748b;
|
|
font-size: 0.82rem;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.alert {
|
|
border-radius: 12px;
|
|
padding: 12px 14px;
|
|
margin-bottom: 16px;
|
|
font-size: 0.9rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.alert-success {
|
|
background: #dcfce7;
|
|
color: #166534;
|
|
}
|
|
|
|
.alert-danger {
|
|
background: #fee2e2;
|
|
color: #991b1b;
|
|
}
|
|
|
|
.sold-status {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 16px;
|
|
padding: 8px 14px;
|
|
border-radius: 999px;
|
|
background: #fee2e2;
|
|
color: #991b1b;
|
|
font-size: 0.8rem;
|
|
font-weight: 800;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.4px;
|
|
}
|
|
|
|
.sold-note {
|
|
border-radius: 16px;
|
|
padding: 16px;
|
|
background: #fff7ed;
|
|
color: #9a3412;
|
|
font-size: 0.92rem;
|
|
line-height: 1.6;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sold-note strong {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
color: #991b1b;
|
|
font-size: 1rem;
|
|
font-weight: 900;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.4px;
|
|
}
|
|
|
|
@media (max-width: 1024px) {
|
|
.detail-container {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.detail-right {
|
|
position: relative;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
body {
|
|
padding: 12px;
|
|
}
|
|
|
|
.page-shell {
|
|
padding: 0;
|
|
}
|
|
|
|
.image-section {
|
|
min-height: 300px;
|
|
}
|
|
|
|
.price-amount {
|
|
font-size: 1.8rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="page-shell">
|
|
<a href="{{ route('semua-mobil-bekas') }}" class="back-link">
|
|
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<path d="M15 18l-6-6 6-6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
</svg>
|
|
Kembali ke daftar
|
|
</a>
|
|
|
|
<div class="detail-container">
|
|
<!-- LEFT SIDE -->
|
|
<div class="detail-left">
|
|
<!-- Image Section -->
|
|
<div class="image-section">
|
|
<img src="{{ $category->image_url }}" alt="{{ $category->image ? $category->name : 'Gambar default ' . $category->name }}" />
|
|
</div>
|
|
|
|
<!-- Title & Subtitle -->
|
|
<div class="section-card">
|
|
<h1 style="margin: 0 0 12px 0; font-size: 1.8rem; font-weight: 800; color: #0f172a;">
|
|
{{ $category->name }}
|
|
</h1>
|
|
<p style="margin: 0 0 16px 0; font-size: 1rem; color: #6b7280; font-weight: 600;">
|
|
1.5 S Bensin-AT
|
|
</p>
|
|
<div style="display: flex; gap: 12px; flex-wrap: wrap; color: #475569; font-size: 0.9rem; font-weight: 600;">
|
|
<span style="display: flex; align-items: center; gap: 6px;">
|
|
<span style="color: #9ca3af;">⚽</span> BENSIN
|
|
</span>
|
|
<span style="display: flex; align-items: center; gap: 6px;">
|
|
<span style="color: #9ca3af;">📏</span> 55.000-60.000 KM
|
|
</span>
|
|
<span style="display: flex; align-items: center; gap: 6px;">
|
|
<span style="color: #9ca3af;">⚙️</span> AUTOMATIC
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Description Section -->
|
|
<div class="section-card">
|
|
<h2 class="section-title">Deskripsi</h2>
|
|
<div class="description-section">
|
|
<div class="description-text">
|
|
<p>{{ \Illuminate\Support\Str::limit($category->description, 150) }}</p>
|
|
</div>
|
|
<a href="#" class="read-more">
|
|
Selengkapnya
|
|
<span>→</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RIGHT SIDE -->
|
|
<div class="detail-right">
|
|
@php
|
|
$activeReservation = $category->activeReservation();
|
|
@endphp
|
|
<!-- Price Section -->
|
|
<div class="price-section">
|
|
<div class="price-label">HARGA</div>
|
|
@if($category->status === 'sold')
|
|
<div class="sold-status">Sold Out</div>
|
|
@elseif($activeReservation)
|
|
<div class="sold-status" style="background:#fef3c7; color:#92400e;">Sedang Dipesan</div>
|
|
@endif
|
|
<div class="price-amount">Rp {{ number_format($category->price, 0, ',', '.') }}</div>
|
|
<a href="{{ route('whatsapp.contact', $category) }}" class="chat-button">
|
|
<svg class="chat-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
|
|
</svg>
|
|
💬 Chat Admin via WhatsApp
|
|
</a>
|
|
</div>
|
|
|
|
@if(session('success'))
|
|
<div class="alert alert-success">{{ session('success') }}</div>
|
|
@endif
|
|
|
|
@if(session('error'))
|
|
<div class="alert alert-danger">{{ session('error') }}</div>
|
|
@endif
|
|
|
|
@if($errors->any())
|
|
<div class="alert alert-danger">
|
|
<ul style="margin:0; padding-left:18px;">
|
|
@foreach($errors->all() as $error)
|
|
<li>{{ $error }}</li>
|
|
@endforeach
|
|
</ul>
|
|
</div>
|
|
@endif
|
|
|
|
@if($category->status === 'sold')
|
|
<div class="sold-note">
|
|
<strong>Sold Out</strong>
|
|
Mobil ini sudah terjual.
|
|
</div>
|
|
@elseif($activeReservation)
|
|
<div class="sold-note">
|
|
<strong>Sedang Dipesan</strong>
|
|
@if(Auth::check() && $activeReservation->reserved_by === Auth::user()->username)
|
|
Mobil ini sedang dikunci untuk Anda sampai {{ optional($activeReservation->expires_at)->format('H:i') }}.
|
|
<a href="{{ route('transactions.payment', $activeReservation) }}" class="booking-button" style="display:block; text-align:center; text-decoration:none; margin-top:14px;">Lanjutkan Pembayaran</a>
|
|
@else
|
|
Mobil ini sedang dikunci pembeli lain sampai {{ optional($activeReservation->expires_at)->format('H:i') }}. Jika pembayaran tidak selesai tepat waktu, mobil akan tersedia kembali.
|
|
@endif
|
|
</div>
|
|
@else
|
|
<form action="{{ route('transactions.begin', $category) }}" method="POST">
|
|
@csrf
|
|
<button type="submit" class="booking-button">Booking Now</button>
|
|
</form>
|
|
@endif
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
/**
|
|
* Contact admin via WhatsApp
|
|
* Redirects to WhatsApp admin with pre-filled message about specific car
|
|
*/
|
|
function contactAdminWhatsApp(categoryId) {
|
|
const apiUrl = `/api/contact/admin-whatsapp/${categoryId}`;
|
|
|
|
sendAdminMediaNotification(categoryId)
|
|
.catch((error) => {
|
|
console.error('Error sending admin notification:', error);
|
|
});
|
|
|
|
window.location.href = apiUrl;
|
|
}
|
|
|
|
/**
|
|
* Send car image notification to admin via WhatsApp Business API.
|
|
*/
|
|
async function sendAdminMediaNotification(categoryId) {
|
|
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content');
|
|
|
|
const response = await fetch(`/whatsapp/admin-notify/${categoryId}`, {
|
|
method: 'POST',
|
|
keepalive: true,
|
|
headers: {
|
|
'Accept': 'application/json',
|
|
'X-CSRF-TOKEN': csrfToken,
|
|
'X-Requested-With': 'XMLHttpRequest'
|
|
}
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.message || 'Gagal mengirim notifikasi admin.');
|
|
}
|
|
|
|
return data;
|
|
}
|
|
|
|
/**
|
|
* Alternative: Get WhatsApp admin link via API (for custom handling)
|
|
*/
|
|
async function getAdminWhatsAppLink(categoryId) {
|
|
try {
|
|
const response = await fetch(`/api/chat/admin-whatsapp/${categoryId}`);
|
|
const data = await response.json();
|
|
|
|
if (data.success) {
|
|
// Open WhatsApp in new tab
|
|
window.open(data.data.whatsapp_link, '_blank');
|
|
return data.data;
|
|
} else {
|
|
alert(`Error: ${data.message}`);
|
|
return null;
|
|
}
|
|
} catch (error) {
|
|
console.error('Error getting WhatsApp link:', error);
|
|
alert('Terjadi kesalahan saat membuka WhatsApp.');
|
|
return null;
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|