313 lines
17 KiB
PHP
313 lines
17 KiB
PHP
@extends('layout-user.index')
|
|
@section('title', 'Halaman Utama')
|
|
@section('css')
|
|
@php
|
|
$carUnitImagePath = asset('storage/'.$carUnit->photos->first()->file_path);
|
|
@endphp
|
|
<style>
|
|
:root {
|
|
--car-unit-image: url('{{ $carUnitImagePath }}');
|
|
}
|
|
</style>
|
|
<link href="{{ asset('user/css/car-detail.css') }}" rel="stylesheet">
|
|
<style>
|
|
.faq {
|
|
margin-top: 20px;
|
|
}
|
|
.faq-item {
|
|
border: 1px solid #ddd;
|
|
padding: 15px;
|
|
margin-bottom: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
.faq-question {
|
|
cursor: pointer;
|
|
margin: 0;
|
|
}
|
|
.faq-answer {
|
|
display: none;
|
|
margin-top: 10px;
|
|
}
|
|
</style>
|
|
@endsection
|
|
@section('content')
|
|
<div class="container" style="margin-top: 5px; margin-bottom: 50px">
|
|
<div class="row" style="margin-top: 20px;">
|
|
<div class="col-md-7">
|
|
<div class="gallery">
|
|
<a href="{{ asset('storage/'.$carUnit->photos->first()->file_path) }}" class="cover-image" >
|
|
<img style="width: 100%; height: auto; max-width: 630px; max-height: 400px; display: none;">
|
|
</a>
|
|
@foreach ($carUnit->photos->slice(1) as $photo)
|
|
<a href="{{ asset('storage/'.$photo->file_path) }}"></a>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
<div class="col-md-5">
|
|
<h3>{{$carUnit->name}}</h3>
|
|
<p class="text-muted fw-normal"> {{$carUnit->brand->name}} - {{$carUnit->year}} - {{$carUnit->transmission}} - {{$carUnit->fuel_type}}</p>
|
|
<p class="lead"><b>Rp. {{ number_format($carUnit->price, 0, ',', '.') }}</b></p>
|
|
<div class="row" style="margin-bottom: 10px;">
|
|
<div class="col-xs-12">
|
|
<button class="btn btn-danger btn-block btn-round" style="padding: 10px 0;"><i class="fa fa-heart"></i> Suka</button>
|
|
</div>
|
|
</div>
|
|
<div class="row" style="margin-bottom: 10px;">
|
|
<div class="col-xs-12">
|
|
<button class="btn btn-primary btn-block btn-round" id="checkUnitBtn" style="padding: 10px 0;">
|
|
<i class="fa fa-calendar"></i> Cek Unit & Test Drive
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<p class="lead mt-4">Butuh bantuan? Hubungi kami melalui <a href="#">WhatsApp <i class="fa fa-whatsapp"></i></a></p>
|
|
</div>
|
|
</div>
|
|
<div class="table-container">
|
|
<div class="mt-5 border border-dark p-5">
|
|
<h3 class="text-center mb-5"><u>Detail Mobil</u></h3>
|
|
<table class="border-table">
|
|
<tbody>
|
|
<tr>
|
|
<td class="fw-bold fs-3">Jenis Bahan Bakar</td>
|
|
<td class="fw-bold fs-3 text-right">{{$carUnit->fuel_type}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold fs-3">Jenis Transmisi</td>
|
|
<td class="fw-bold fs-3 text-right">{{$carUnit->transmission}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold fs-3">Jarak Tempuh Saat Ini</td>
|
|
<td class="fw-bold fs-3 text-right">{{$carUnit->mileage}} Km</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold fs-3">Jumlah Tempat Duduk</td>
|
|
<td class="fw-bold fs-3 text-right">{{$carUnit->seat}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold fs-3">Kapasitas Mesin</td>
|
|
<td class="fw-bold fs-3 text-right">{{$carUnit->engine_cc}} cc</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold fs-3">Garansi</td>
|
|
<td class="fw-bold fs-3 text-right">{{$carUnit->warranty}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold fs-3">Warna</td>
|
|
<td class="fw-bold fs-3 text-right">{{$carUnit->color}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold fs-3">Buku Servis</td>
|
|
<td class="fw-bold fs-3 text-right">{{$carUnit->service_book == 1 ? 'Ya' : 'Tidak'}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold fs-3">Dokumen</td>
|
|
<td class="fw-bold fs-3 text-right">{{$carUnit->unit_document == 1 ? 'Ya' : 'Tidak'}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold fs-3">Kunci Cadangan</td>
|
|
<td class="fw-bold fs-3 text-right">{{$carUnit->spare_key == 1 ? 'Ya' : 'Tidak'}}</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-bold fs-3">Masa Berlaku STNK</td>
|
|
<td class="fw-bold fs-3 text-right">{{$carUnit->stnk_validity_period}}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="table-container">
|
|
<div class="mt-5 border border-dark p-5">
|
|
<h3 class="text-center mb-5 title"><u>Deskripsi</u></h3>
|
|
<p class="lead description"><b>{{$carUnit->description}}</b></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="section-title">
|
|
<h3 class="title">Pertanyaan yang Sering Diajukan (FAQ)</h3>
|
|
</div>
|
|
<div class="faq">
|
|
<div class="faq-item">
|
|
<h4 class="faq-question">Q: Bagaimana cara membeli mobil di sini? <span style="float: right;">▾</span></h4>
|
|
<p class="faq-answer" style="display: none;">A: Di sini, Anda dapat melihat unit yang tersedia dan menjadwalkan untuk cek unit/test drive. Untuk melakukan pembelian atau transaksi, Anda dapat langsung datang ke showroom kami.</p>
|
|
</div>
|
|
<div class="faq-item">
|
|
<h4 class="faq-question">Q: Metode pembayaran apa saja yang diterima? <span style="float: right;">▾</span></h4>
|
|
<p class="faq-answer" style="display: none;">A: Kami menerima berbagai metode pembayaran termasuk transfer bank, kartu kredit, dan opsi pembiayaan. Silakan hubungi tim penjualan kami untuk informasi lebih lanjut.</p>
|
|
</div>
|
|
<div class="faq-item">
|
|
<h4 class="faq-question">Q: Apakah saya bisa tukar tambah mobil lama saya? <span style="float: right;">▾</span></h4>
|
|
<p class="faq-answer" style="display: none;">A: Ya, kami menawarkan opsi tukar tambah. Silakan hubungi tim kami melalui WhatsApp, bawa mobil Anda untuk evaluasi dan kami akan memberikan penawaran yang kompetitif.</p>
|
|
</div>
|
|
<div class="faq-item">
|
|
<h4 class="faq-question">Q: Apakah ada garansi untuk mobil-mobilnya? <span style="float: right;">▾</span></h4>
|
|
<p class="faq-answer" style="display: none;">A: Ya, semua mobil kami dilengkapi dengan garansi standar. Detail garansi bervariasi tergantung pada model dan tahun mobil. Silakan periksa halaman detail mobil untuk informasi lebih lanjut.</p>
|
|
</div>
|
|
<div class="faq-item">
|
|
<h4 class="faq-question">Q: Bagaimana cara menghubungi layanan pelanggan? <span style="float: right;">▾</span></h4>
|
|
<p class="faq-answer" style="display: none;">A: Anda bisa menghubungi tim layanan pelanggan kami melalui WhatsApp kami.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="checkUnitModal" tabindex="-1" role="dialog" aria-labelledby="checkUnitModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="checkUnitModalLabel">Form Cek Unit & Test Drive</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="checkUnitForm" enctype="multipart/form-data">
|
|
@csrf
|
|
<input type="hidden" id="car_id" name="car_id" value="{{ $carUnit->id }}">
|
|
@if(auth()->check())
|
|
<div class="form-group">
|
|
<label for="name">Nama:</label>
|
|
<input type="text" class="form-control" id="name" name="name" value="{{ auth()->user()->name }}" disabled>
|
|
<input type="hidden" id="user_id" name="user_id" value="{{ auth()->user()->id }}">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="phone">Nomor Telepon:</label>
|
|
<input type="text" class="form-control" id="phone" name="phone" value="{{ auth()->user()->phone }}" disabled>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="date">Tanggal:</label>
|
|
<input type="date" class="form-control" id="date" name="date" required
|
|
min="{{ now()->addDays(1)->format('Y-m-d') }}"
|
|
max="{{ now()->addDays(3)->format('Y-m-d') }}">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="time">Jam (WIB):</label>
|
|
<input type="time" class="form-control" id="time" value="16:00" disabled required>
|
|
<input type="hidden" id="hiddenTime" name="time" value="16:00">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="note">Catatan Tambahan:</label>
|
|
<textarea class="form-control" id="note" name="note" placeholder="Kosongkan jika tidak ada catatan tambahan"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="form-check">
|
|
<input type="checkbox" class="form-check-input" id="agreement">
|
|
<label class="form-check-label" for="agreement">
|
|
Saya menyetujui
|
|
<u><a href="#" data-toggle="modal" data-target="#termsModal">persyaratan dan ketentuan</a></u>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-danger" data-dismiss="modal">Batal</button>
|
|
<button type="button" class="btn btn-primary" id="simpanButton">Kirim</button>
|
|
</div>
|
|
@else
|
|
<div class="form-group">
|
|
<label for="name">Nama:</label>
|
|
<input type="text" class="form-control" id="name" name="name" placeholder="Masukkan nama Anda">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="phone">Nomor Telepon:</label>
|
|
<input type="text" class="form-control" id="phone" name="phone" placeholder="Masukkan nomor telepon Anda">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="date">Tanggal:</label>
|
|
<input type="date" class="form-control" id="date" name="date" required
|
|
min="{{ now()->addDays(1)->format('Y-m-d') }}"
|
|
max="{{ now()->addDays(3)->format('Y-m-d') }}">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="time">Jam (WIB):</label>
|
|
<input type="time" class="form-control" id="time" value="16:00" disabled required>
|
|
<input type="hidden" id="hiddenTime" name="time" value="16:00">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="note">Catatan Tambahan:</label>
|
|
<textarea class="form-control" id="note" name="note" placeholder="Kosongkan jika tidak ada catatan tambahan"></textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<div class="form-check">
|
|
<input type="checkbox" class="form-check-input" id="agreement">
|
|
<label class="form-check-label" for="agreement">
|
|
Saya menyetujui
|
|
<u><a href="#" data-toggle="modal" data-target="#termsModal">persyaratan dan ketentuan</a></u>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="payment">Pilih Metode Pembayaran: </label>
|
|
<select class="form-control" id="payment" name="payment" required>
|
|
<option value="" disabled selected>Pilih metode pembayaran</option>
|
|
<option value="BCA : 0123456789 a/n Risky">BCA : 0123456789 a/n Risky</option>
|
|
<option value="DANA : 081234567890">DANA : 081234567890 a/n Risky</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="payment_proof">Unggah Bukti Transfer:</label>
|
|
<input type="file" class="form-control" id="payment_proof" name="payment_proof" required>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-danger" data-dismiss="modal">Batal</button>
|
|
<button type="button" class="btn btn-primary" id="simpanButton">Kirim</button>
|
|
</div>
|
|
@endif
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal fade" id="termsModal" tabindex="-1" role="dialog" aria-labelledby="termsModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="termsModalLabel">Persyaratan dan Ketentuan</h5>
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>
|
|
Berikut adalah persyaratan dan ketentuan terkait dengan layanan Cek Unit & Test Drive:
|
|
</p>
|
|
<ol>
|
|
<li>1. Biaya cek unit sebesar Rp15.000 akan dikenakan untuk biaya operasional.</li>
|
|
<li>2. Jika jadwal cek unit dibatalkan oleh pengguna, biaya cek unit tidak dapat dikembalikan.</li>
|
|
<li>3. Jika unit mobil yang dipilih terjual sebelum jadwal cek unit, biaya cek unit akan dikembalikan dengan konfirmasi melalui WhatsApp kami.</li>
|
|
<li>4. Test drive hanya dilakukan di sekitar lokasi showroom.</li>
|
|
<li>5. Test drive harus didampingi oleh perwakilan dari pihak kami.</li>
|
|
<li>6. Durasi dan rute test drive akan ditentukan oleh perwakilan kami.</li>
|
|
<li>7. Pengguna harus mematuhi semua aturan lalu lintas dan instruksi dari perwakilan kami selama test drive.</li>
|
|
<li>8. Kami berhak untuk menolak atau menghentikan test drive jika ada pelanggaran aturan atau perilaku tidak aman.</li>
|
|
<li>9. Kami tidak bertanggung jawab atas kecelakaan atau kerusakan selama test drive, kecuali disebabkan oleh kelalaian dari perwakilan kami.</li>
|
|
<li>10. Pengguna harus memiliki lisensi mengemudi yang valid dan memenuhi syarat-syarat lain yang mungkin diperlukan oleh peraturan setempat.</li>
|
|
</ol>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button type="button" class="btn btn-danger" data-dismiss="modal">Tutup</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
@section('js')
|
|
<script>
|
|
document.querySelectorAll('.faq-question').forEach(question => {
|
|
question.addEventListener('click', () => {
|
|
const answer = question.nextElementSibling;
|
|
const isVisible = answer.style.display === 'block';
|
|
document.querySelectorAll('.faq-answer').forEach(a => a.style.display = 'none');
|
|
answer.style.display = isVisible ? 'none' : 'block';
|
|
});
|
|
});
|
|
</script>
|
|
<script>
|
|
var isAuthenticated = @json(auth()->check());
|
|
</script>
|
|
<script src="{{ asset ('user/modal/car-detail.js') }}"></script>
|
|
@endsection
|