1308 lines
58 KiB
PHP
1308 lines
58 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Form Pemesanan - Carani Estate</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
:root {
|
|
--primary-blue: #7AB2D3;
|
|
--primary-blue-rgb: 122, 178, 211;
|
|
--dark-blue: #1E3A5F;
|
|
--light-blue: #e6f2f8;
|
|
--sidebar-width: 260px;
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
background: #f8fafc;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Header Styles */
|
|
.header {
|
|
background: linear-gradient(135deg, var(--dark-blue) 0%, #1E3A5F 100%);
|
|
color: white;
|
|
padding: 15px 30px;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 1000;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.header-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.logo-icon {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: white;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
|
}
|
|
|
|
.logo-icon i {
|
|
font-size: 24px;
|
|
color: var(--dark-blue);
|
|
}
|
|
|
|
.logo-text {
|
|
font-weight: 700;
|
|
font-size: 1.2rem;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.nav-menu {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 30px;
|
|
}
|
|
|
|
.nav-item {
|
|
color: white;
|
|
text-decoration: none;
|
|
font-weight: 500;
|
|
font-size: 0.95rem;
|
|
transition: all 0.3s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
color: var(--primary-blue);
|
|
}
|
|
|
|
.nav-item.active {
|
|
color: var(--primary-blue);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.nav-item::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -5px;
|
|
left: 0;
|
|
width: 0;
|
|
height: 2px;
|
|
background: var(--primary-blue);
|
|
transition: width 0.3s ease;
|
|
}
|
|
|
|
.nav-item:hover::after {
|
|
width: 100%;
|
|
}
|
|
|
|
.user-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.notification-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
background: rgba(255,255,255,0.1);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.notification-icon:hover {
|
|
background: rgba(255,255,255,0.2);
|
|
}
|
|
|
|
.profile-icon {
|
|
width: 36px;
|
|
height: 36px;
|
|
background: rgba(255,255,255,0.1);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.profile-icon:hover {
|
|
background: rgba(255,255,255,0.2);
|
|
}
|
|
|
|
.menu-toggle{
|
|
display: none;
|
|
font-size: 22px;
|
|
cursor: pointer;
|
|
padding: 8px 10px;
|
|
border-radius: 6px;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.menu-toggle:hover{
|
|
background: rgba(255,255,255,0.15);
|
|
}
|
|
|
|
/* Main Content */
|
|
.main-content {
|
|
margin-top: 80px;
|
|
padding: 30px;
|
|
}
|
|
|
|
.booking-form-container {
|
|
max-width: 900px;
|
|
margin: 0 auto;
|
|
background: white;
|
|
border-radius: 16px;
|
|
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Property Preview Section */
|
|
.property-preview {
|
|
background: #f8fafc;
|
|
padding: 30px;
|
|
border-bottom: 1px solid #e2e8f0;
|
|
display: flex;
|
|
gap: 30px;
|
|
align-items: center;
|
|
}
|
|
|
|
.property-image {
|
|
width: 200px;
|
|
height: 200px;
|
|
border-radius: 12px;
|
|
overflow: hidden;
|
|
box-shadow: 0 6px 15px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
.property-image img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.property-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.property-name {
|
|
font-size: 1.8rem;
|
|
font-weight: 700;
|
|
color: var(--dark-blue);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.property-location {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: #64748b;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.property-location i {
|
|
color: var(--primary-blue);
|
|
}
|
|
|
|
.property-price {
|
|
font-size: 1.5rem;
|
|
font-weight: 700;
|
|
color: var(--dark-blue);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.property-type {
|
|
display: inline-block;
|
|
padding: 5px 12px;
|
|
background: var(--primary-blue);
|
|
color: white;
|
|
border-radius: 20px;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Form Section */
|
|
.form-section {
|
|
padding: 30px;
|
|
}
|
|
|
|
.section-title {
|
|
font-size: 1.4rem;
|
|
font-weight: 700;
|
|
color: var(--dark-blue);
|
|
margin-bottom: 25px;
|
|
padding-bottom: 10px;
|
|
border-bottom: 2px solid var(--primary-blue);
|
|
}
|
|
|
|
.form-row {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
margin-bottom: 8px;
|
|
font-weight: 600;
|
|
color: #2d3748;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.form-control {
|
|
width: 100%;
|
|
padding: 10px 16px;
|
|
border: 2px solid #e2e8f0;
|
|
border-radius: 10px;
|
|
font-size: 1rem;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.form-control:focus {
|
|
border-color: var(--primary-blue);
|
|
box-shadow: 0 0 0 3px rgba(var(--primary-blue-rgb), 0.2);
|
|
outline: none;
|
|
}
|
|
|
|
.form-control::placeholder {
|
|
color: #a0aec0;
|
|
}
|
|
|
|
/* Select styling */
|
|
select.form-control {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.48 0z'/%3E%3C/svg%3E");
|
|
background-repeat: no-repeat;
|
|
background-position: right 16px center;
|
|
background-size: 16px;
|
|
padding-right: 40px;
|
|
}
|
|
|
|
/* Employment Type Selection */
|
|
.employment-type {
|
|
background: #f8fafc;
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.radio-group {
|
|
display: flex;
|
|
gap: 25px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.radio-option {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.radio-input {
|
|
width: 18px;
|
|
height: 18px;
|
|
accent-color: var(--primary-blue);
|
|
}
|
|
|
|
.radio-label {
|
|
font-weight: 500;
|
|
color: #1a365d;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
/* Document Upload Section */
|
|
.document-section {
|
|
background: #f8fafc;
|
|
border-radius: 12px;
|
|
padding: 25px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.document-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 20px;
|
|
}
|
|
|
|
.upload-item {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.upload-label {
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
color: #2d3748;
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 5px;
|
|
}
|
|
|
|
.required {
|
|
color: #ef4444;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.upload-area {
|
|
border: 2px dashed #cbd5e0;
|
|
border-radius: 10px;
|
|
padding: 20px;
|
|
text-align: center;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
background: white;
|
|
}
|
|
|
|
.upload-area:hover {
|
|
border-color: var(--primary-blue);
|
|
background: #f0f9ff;
|
|
}
|
|
|
|
.upload-icon {
|
|
font-size: 2rem;
|
|
color: var(--primary-blue);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.upload-text {
|
|
font-size: 0.9rem;
|
|
color: #4a5568;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.upload-hint {
|
|
font-size: 0.8rem;
|
|
color: #94a3b8;
|
|
}
|
|
|
|
.file-input {
|
|
display: none;
|
|
}
|
|
|
|
.file-name {
|
|
margin-top: 8px;
|
|
font-size: 0.85rem;
|
|
color: var(--primary-blue);
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
/* Payment Info */
|
|
.payment-info {
|
|
background: #f0fdf4;
|
|
border-left: 4px solid #10b981;
|
|
padding: 20px;
|
|
border-radius: 12px;
|
|
margin-bottom: 25px;
|
|
}
|
|
|
|
.payment-title {
|
|
font-weight: 700;
|
|
color: #059669;
|
|
margin-bottom: 15px;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.payment-details {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 10px;
|
|
}
|
|
|
|
.payment-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 8px 0;
|
|
border-bottom: 1px solid #d1fae5;
|
|
}
|
|
|
|
.payment-item:last-child {
|
|
border-bottom: none;
|
|
font-weight: 700;
|
|
color: var(--dark-blue);
|
|
}
|
|
|
|
.payment-label {
|
|
color: #64748b;
|
|
}
|
|
|
|
/* Action Buttons */
|
|
.form-actions {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin-top: 30px;
|
|
padding-top: 25px;
|
|
border-top: 1px solid #e2e8f0;
|
|
}
|
|
|
|
.btn {
|
|
padding: 14px 30px;
|
|
border-radius: 12px;
|
|
font-weight: 600;
|
|
font-size: 1.1rem;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--primary-blue);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: #6aa5c6;
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 6px 15px rgba(var(--primary-blue-rgb), 0.3);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: #e2e8f0;
|
|
color: #4a5568;
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: #cbd5e0;
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.property-preview {
|
|
flex-direction: column;
|
|
text-align: center;
|
|
}
|
|
|
|
.property-image {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.form-row,
|
|
.document-grid,
|
|
.payment-details {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.form-actions {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.btn {
|
|
width: 100%;
|
|
}
|
|
|
|
/* tombol toggle muncul di mobile */
|
|
.menu-toggle{
|
|
display: block;
|
|
color: white;
|
|
order: 2;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 480px) {
|
|
.header {
|
|
padding: 15px 15px;
|
|
}
|
|
|
|
.logo-text {
|
|
display: none;
|
|
}
|
|
|
|
.logo-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
font-size: 20px;
|
|
}
|
|
|
|
.main-content {
|
|
padding: 15px;
|
|
}
|
|
|
|
.property-name {
|
|
font-size: 1.5rem;
|
|
}
|
|
|
|
.form-section {
|
|
padding: 20px;
|
|
}
|
|
|
|
.radio-group {
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- Header -->
|
|
<header class="header">
|
|
<div class="header-container">
|
|
<div class="logo">
|
|
<div class="logo-icon">
|
|
<i class="fas fa-home"></i>
|
|
</div>
|
|
<div class="logo-text">Carani Estate</div>
|
|
</div>
|
|
|
|
<div class="menu-toggle" onclick="toggleMenu()">
|
|
<i class="fas fa-bars"></i>
|
|
</div>
|
|
<nav class="nav-menu" id="navMenu">
|
|
<a href="{{ route('welcome') }}"
|
|
class="nav-item {{ request()->routeIs('welcome') ? 'active' : '' }}">
|
|
Beranda
|
|
</a>
|
|
<a href="{{ route('tentang-kami') }}"
|
|
class="nav-item {{ request()->routeIs('tentang-kami') ? 'active' : '' }}">
|
|
Tentang Kami
|
|
</a>
|
|
<a href="{{ route('halaman-katalog') }}"
|
|
class="nav-item {{ request()->routeIs('halaman-katalog') ? 'active' : '' }}">
|
|
Katalog
|
|
</a>
|
|
<a href="{{ route('halaman-chatbot') }}"
|
|
class="nav-item {{ request()->routeIs('halaman-chatbot') ? 'active' : '' }}">
|
|
ChatBot
|
|
</a>
|
|
@auth
|
|
<a href="{{ route('riwayat-pemesanan') }}" class="nav-item {{ request()->routeIs('riwayat-pemesanan') ? 'active' : '' }}">
|
|
Riwayat Pemesanan
|
|
</a>
|
|
@endauth
|
|
<a href="{{ route('halaman-kontak') }}"
|
|
class="nav-item {{ request()->routeIs('kontak') ? 'active' : '' }}">
|
|
Kontak
|
|
</a>
|
|
</nav>
|
|
|
|
<div class="user-actions">
|
|
|
|
{{-- Notifikasi hanya kalau login --}}
|
|
@auth
|
|
<a href="{{ route('halaman-notifikasi') }}" class="notification-icon" style="position:relative;">
|
|
<i class="fas fa-bell"></i>
|
|
|
|
@php
|
|
$jumlahBelumBaca = \App\Models\Notifikasi::where('id_user', Auth::id())
|
|
->where('status_baca', 0)->count();
|
|
@endphp
|
|
|
|
@if($jumlahBelumBaca > 0)
|
|
<span style="position:absolute; top:-5px; right:-5px;
|
|
background:#ef4444; color:white; border-radius:50%;
|
|
width:18px; height:18px; font-size:0.65rem;
|
|
display:flex; align-items:center; justify-content:center;
|
|
font-weight:700;">
|
|
{{ $jumlahBelumBaca > 9 ? '9+' : $jumlahBelumBaca }}
|
|
</span>
|
|
@endif
|
|
</a>
|
|
@endauth
|
|
|
|
{{-- Guest --}}
|
|
@guest
|
|
<a href="{{ route('login') }}" class="nav-item login-link">
|
|
<i class="fas fa-sign-in-alt me-1"></i> Login
|
|
</a>
|
|
@else
|
|
{{-- HANYA ICON PROFILE --}}
|
|
<a href="{{ route('halaman-profil') }}" class="profile-icon">
|
|
<img src="{{ Auth::user()->profile_photo
|
|
? asset('storage/profile_photos/' . Auth::user()->profile_photo)
|
|
: asset('default-avatar.png') }}"
|
|
alt="Profile" class="profile-img">
|
|
</a>
|
|
@endguest
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<div class="main-content">
|
|
<div class="booking-form-container">
|
|
<form action="{{ route('pemesanan.proses') }}" method="POST" enctype="multipart/form-data" id="bookingForm">
|
|
@csrf
|
|
<input type="hidden" name="id_properti" value="{{ $properti->id_properti }}">
|
|
<!-- Property Preview -->
|
|
<!-- Property Preview - DINAMIS -->
|
|
<div class="property-preview">
|
|
<div class="property-image">
|
|
@php
|
|
// Ambil gambar pertama dari properti (sesuaikan dengan modelmu)
|
|
$gambar = $properti->gambar_properti
|
|
? (filter_var($properti->gambar_properti, FILTER_VALIDATE_URL)
|
|
? $properti->gambar_properti
|
|
: asset('storage/' . $properti->gambar_properti))
|
|
: asset('images/placeholder-properti.jpg');
|
|
@endphp
|
|
<img src="{{ $gambar }}" alt="{{ $properti->nama_properti }}"
|
|
onerror="this.src='{{ asset('images/placeholder-properti.jpg') }}'">
|
|
</div>
|
|
<div class="property-info">
|
|
<h2 class="property-name">{{ $properti->nama_properti }}</h2>
|
|
<div class="property-location">
|
|
<i class="fas fa-map-marker-alt"></i>
|
|
<span>{{ $properti->lokasi_properti ?? 'Lokasi tidak tersedia' }}</span>
|
|
</div>
|
|
<div class="property-price">Rp {{ number_format($properti->harga_properti, 0, ',', '.') }}</div>
|
|
<span class="property-type">
|
|
{{ $properti->tipe_properti }} - {{ ucfirst($properti->kategori_properti) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Section -->
|
|
<div class="form-section">
|
|
<h3 class="section-title">Informasi Pribadi</h3>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="fullName" class="form-label">Nama Lengkap <span class="required">*</span></label>
|
|
<input type="text" class="form-control" id="fullName" name="nama_lengkap"
|
|
value="{{ old('nama_lengkap', Auth::user()->nama_user ?? '') }}"
|
|
placeholder="Masukkan nama lengkap Anda" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="phone" class="form-label">Nomor HP <span class="required">*</span></label>
|
|
<input type="tel" class="form-control" id="phone" name="no_hp"
|
|
value="{{ old('no_hp', Auth::user()->no_hp ?? '') }}"
|
|
placeholder="Contoh: 081234567890" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="email" class="form-label">Email <span class="required">*</span></label>
|
|
<input type="email" class="form-control" id="email" name="email"
|
|
value="{{ old('email', Auth::user()->email_user ?? '') }}"
|
|
placeholder="Masukkan email Anda" required readonly>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="address" class="form-label">Alamat Lengkap <span class="required">*</span></label>
|
|
<textarea class="form-control" id="address" name="alamat" rows="2"
|
|
placeholder="Masukkan alamat lengkap Anda" required>{{ old('alamat', Auth::user()->alamat_user ?? '') }}</textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Property Details -->
|
|
<div class="form-section">
|
|
<h3 class="section-title">Detail Properti</h3>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="propertyType" class="form-label">Tipe Properti <span class="required">*</span></label>
|
|
<div class="form-control" style="background-color: #ffffff; font-weight: 500;">
|
|
{{ $properti->tipe_properti ?? 'Tidak tersedia' }}
|
|
@if($properti->tipe_properti == '30/60')
|
|
<span class="text-muted">(Subsidi)</span>
|
|
@else
|
|
<span class="text-muted">(Komersil)</span>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- ✅ Tetap kirim value saat form submit --}}
|
|
<input type="hidden" name="tipe_dipilih" value="{{ $properti->tipe_properti ?? '' }}">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="downPayment" class="form-label">Uang Muka <span class="required">*</span></label>
|
|
@php
|
|
// Hitung DP: 15% untuk subsidi, 20% untuk komersil (sesuaikan kebijakan)
|
|
$harga = $properti->harga_properti ?? 0;
|
|
$kategori = $properti->kategori_properti ?? 'komersil';
|
|
$persenDP = ($kategori == 'subsidi') ? 0.15 : 0.20;
|
|
$dp = $harga * $persenDP;
|
|
@endphp
|
|
<input type="text" class="form-control" id="downPayment" name="uang_muka"
|
|
value="Rp {{ number_format($dp, 0, ',', '.') }}" readonly>
|
|
<!-- Hidden input untuk kirim nilai angka ke backend -->
|
|
<input type="hidden" name="uang_muka_value" value="{{ $dp }}">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Payment Method Section -->
|
|
<div class="form-section">
|
|
<h3 class="section-title">Metode Pembayaran</h3>
|
|
<div class="form-group">
|
|
<label for="paymentMethod" class="form-label">Pilih Metode Pembayaran <span class="required">*</span></label>
|
|
<select class="form-control" id="paymentMethod" name="jenis_transaksi" required>
|
|
<option value="">Pilih Metode Pembayaran</option>
|
|
<option value="kredit">KPR (Kredit Pemilikan Rumah)</option>
|
|
<option value="lunas">Lunas</option>
|
|
<!-- <option value="kredit">Cicilan Tanpa Bunga</option> -->
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Employment Type -->
|
|
<div class="form-section">
|
|
<h3 class="section-title">Jenis Pekerjaan</h3>
|
|
<div class="employment-type">
|
|
<div class="radio-group">
|
|
<div class="radio-option">
|
|
<input type="radio" name="employmentType" id="employment-pns" value="pns" class="radio-input" checked>
|
|
<label for="employment-pns" class="radio-label">Pegawai Swasta/PNS</label>
|
|
</div>
|
|
<div class="radio-option">
|
|
<input type="radio" name="employmentType" id="employment-wiraswasta" value="wiraswasta" class="radio-input">
|
|
<label for="employment-wiraswasta" class="radio-label">Wirausaha/Non PNS</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Document Uploads - PNS -->
|
|
<div class="form-section" id="pns-documents">
|
|
<h3 class="section-title">Dokumen Persyaratan (Pegawai Swasta/PNS)</h3>
|
|
<div class="document-section">
|
|
<div class="document-grid">
|
|
<div class="upload-item">
|
|
<label class="upload-label">Fotokopi KTP (Suami & Istri) <span class="required">*</span></label>
|
|
<div class="upload-area" id="ktpUpload">
|
|
<i class="fas fa-id-card upload-icon"></i>
|
|
<p class="upload-text">Klik atau drag file</p>
|
|
<p class="upload-hint">JPG/PNG/PDF | Max 5MB</p>
|
|
<input type="file" class="file-input" id="ktpFile" name="ktp[]" accept=".jpg,.jpeg,.png,.pdf" multiple>
|
|
<div class="file-name" id="ktpFileName"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upload-item">
|
|
<label class="upload-label">Fotokopi Kartu Keluarga <span class="required">*</span></label>
|
|
<div class="upload-area" id="kkUpload">
|
|
<i class="fas fa-users upload-icon"></i>
|
|
<p class="upload-text">Klik atau drag file</p>
|
|
<p class="upload-hint">JPG/PNG/PDF | Max 5MB</p>
|
|
<input type="file" class="file-input" id="kkFile" name="kk" accept=".jpg,.jpeg,.png,.pdf" multiple>
|
|
<div class="file-name" id="kkFileName"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upload-item">
|
|
<label class="upload-label">Fotokopi Surat Nikah <span class="required">*</span></label>
|
|
<div class="upload-area" id="marriageUpload">
|
|
<i class="fas fa-ring upload-icon"></i>
|
|
<p class="upload-text">Klik atau drag file</p>
|
|
<p class="upload-hint">JPG/PNG/PDF | Max 5MB</p>
|
|
<input type="file" class="file-input" id="marriageFile" name="surat_nikah" accept=".jpg,.jpeg,.png,.pdf" multiple>
|
|
<div class="file-name" id="marriageFileName"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upload-item">
|
|
<label class="upload-label">Fotokopi NPWP Pemohon <span class="required">*</span></label>
|
|
<div class="upload-area" id="npwpUpload">
|
|
<i class="fas fa-file-alt upload-icon"></i>
|
|
<p class="upload-text">Klik atau drag file</p>
|
|
<p class="upload-hint">JPG/PNG/PDF | Max 5MB</p>
|
|
<input type="file" class="file-input" id="npwpFile" name="npwp" accept=".jpg,.jpeg,.png,.pdf" multiple>
|
|
<div class="file-name" id="npwpFileName"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upload-item">
|
|
<label class="upload-label">Foto Berwarna 3x4 (Suami & Istri) <span class="required">*</span></label>
|
|
<div class="upload-area" id="photoUpload">
|
|
<i class="fas fa-camera upload-icon"></i>
|
|
<p class="upload-text">Klik atau drag file</p>
|
|
<p class="upload-hint">JPG/PNG | Max 2MB</p>
|
|
<input type="file" class="file-input" id="photoFile" name="foto_3x4" accept=".jpg,.jpeg,.png,.pdf" multiple>
|
|
<div class="file-name" id="photoFileName"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upload-item">
|
|
<label class="upload-label">Surat Keterangan Kerja <span class="required">*</span></label>
|
|
<div class="upload-area" id="workCertUpload">
|
|
<i class="fas fa-briefcase upload-icon"></i>
|
|
<p class="upload-text">Klik atau drag file</p>
|
|
<p class="upload-hint">JPG/PNG/PDF | Max 5MB</p>
|
|
<input type="file" class="file-input" id="workCertFile" name="surat_kerja" accept=".jpg,.jpeg,.png,.pdf" multiple>
|
|
<div class="file-name" id="workCertFileName"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upload-item">
|
|
<label class="upload-label">Slip Gaji 3 Bulan Terakhir <span class="required">*</span></label>
|
|
<div class="upload-area" id="salaryUpload">
|
|
<i class="fas fa-file-invoice-dollar upload-icon"></i>
|
|
<p class="upload-text">Klik atau drag file</p>
|
|
<p class="upload-hint">JPG/PNG/PDF | Max 5MB</p>
|
|
<input type="file" class="file-input" id="salaryFile" name="slip_gaji[]" accept=".jpg,.jpeg,.png,.pdf" multiple>
|
|
<div class="file-name" id="salaryFileName"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upload-item">
|
|
<label class="upload-label">Rekening Koran 3 Bulan Terakhir <span class="required">*</span></label>
|
|
<div class="upload-area" id="bankUpload">
|
|
<i class="fas fa-file-invoice upload-icon"></i>
|
|
<p class="upload-text">Klik atau drag file</p>
|
|
<p class="upload-hint">JPG/PNG/PDF | Max 5MB</p>
|
|
<input type="file" class="file-input" id="bankFile" name="rekening_koran[]" accept=".jpg,.jpeg,.png,.pdf" multiple>
|
|
<div class="file-name" id="bankFileName"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upload-item">
|
|
<label class="upload-label">Foto Selfie Ukuran 4R <span class="required">*</span></label>
|
|
<div class="upload-area" id="selfieUpload">
|
|
<i class="fas fa-user upload-icon"></i>
|
|
<p class="upload-text">Klik atau drag file</p>
|
|
<p class="upload-hint">JPG/PNG | Max 3MB</p>
|
|
<input type="file" class="file-input" id="selfieFile" name="selfie" accept=".jpg,.jpeg,.png,.pdf" multiple>
|
|
<div class="file-name" id="selfieFileName"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upload-item">
|
|
<label class="upload-label">Foto Lokasi Tempat Kerja <span class="required">*</span></label>
|
|
<div class="upload-area" id="workplaceUpload">
|
|
<i class="fas fa-building upload-icon"></i>
|
|
<p class="upload-text">Klik atau drag file</p>
|
|
<p class="upload-hint">JPG/PNG | Max 3MB</p>
|
|
<input type="file" class="file-input" id="workplaceFile" name="foto_tempat_kerja" accept=".jpg,.jpeg,.png,.pdf" multiple>
|
|
<div class="file-name" id="workplaceFileName"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Document Uploads - Wiraswasta (hidden by default) -->
|
|
<div class="form-section" id="wiraswasta-documents" style="display: none;">
|
|
<h3 class="section-title">Dokumen Persyaratan (Wirausaha/Non PNS)</h3>
|
|
<div class="document-section">
|
|
<div class="document-grid">
|
|
<div class="upload-item">
|
|
<label class="upload-label">Fotokopi KTP (Suami & Istri) <span class="required">*</span></label>
|
|
<div class="upload-area" id="ktpUploadW">
|
|
<i class="fas fa-id-card upload-icon"></i>
|
|
<p class="upload-text">Klik atau drag file</p>
|
|
<p class="upload-hint">JPG/PNG/PDF | Max 5MB</p>
|
|
<input type="file" class="file-input" id="ktpFileW" name="ktp[]" accept=".jpg,.jpeg,.png,.pdf" multiple>
|
|
<div class="file-name" id="ktpFileNameW"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upload-item">
|
|
<label class="upload-label">Fotokopi Kartu Keluarga <span class="required">*</span></label>
|
|
<div class="upload-area" id="kkUploadW">
|
|
<i class="fas fa-users upload-icon"></i>
|
|
<p class="upload-text">Klik atau drag file</p>
|
|
<p class="upload-hint">JPG/PNG/PDF | Max 5MB</p>
|
|
<input type="file" class="file-input" id="kkFileW" name="kk" accept=".jpg,.jpeg,.png,.pdf" multiple>
|
|
<div class="file-name" id="kkFileNameW"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upload-item">
|
|
<label class="upload-label">Fotokopi Surat Nikah <span class="required">*</span></label>
|
|
<div class="upload-area" id="marriageUploadW">
|
|
<i class="fas fa-ring upload-icon"></i>
|
|
<p class="upload-text">Klik atau drag file</p>
|
|
<p class="upload-hint">JPG/PNG/PDF | Max 5MB</p>
|
|
<input type="file" class="file-input" id="marriageFileW" name="surat_nikah" accept=".jpg,.jpeg,.png,.pdf" multiple>
|
|
<div class="file-name" id="marriageFileNameW"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upload-item">
|
|
<label class="upload-label">Fotokopi NPWP Pemohon <span class="required">*</span></label>
|
|
<div class="upload-area" id="npwpUploadW">
|
|
<i class="fas fa-file-alt upload-icon"></i>
|
|
<p class="upload-text">Klik atau drag file</p>
|
|
<p class="upload-hint">JPG/PNG/PDF | Max 5MB</p>
|
|
<input type="file" class="file-input" id="npwpFileW" name="npwp" accept=".jpg,.jpeg,.png,.pdf" multiple>
|
|
<div class="file-name" id="npwpFileNameW"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upload-item">
|
|
<label class="upload-label">SPT Pajak <span class="required">*</span></label>
|
|
<div class="upload-area" id="sptUpload">
|
|
<i class="fas fa-file-invoice upload-icon"></i>
|
|
<p class="upload-text">Klik atau drag file</p>
|
|
<p class="upload-hint">JPG/PNG/PDF | Max 5MB</p>
|
|
<input type="file" class="file-input" id="sptFile" name="spt_pajak" accept=".jpg,.jpeg,.png,.pdf" multiple>
|
|
<div class="file-name" id="sptFileName"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upload-item">
|
|
<label class="upload-label">Foto Berwarna 3x4 (Suami & Istri) <span class="required">*</span></label>
|
|
<div class="upload-area" id="photoUploadW">
|
|
<i class="fas fa-camera upload-icon"></i>
|
|
<p class="upload-text">Klik atau drag file</p>
|
|
<p class="upload-hint">JPG/PNG | Max 2MB</p>
|
|
<input type="file" class="file-input" id="marriageFile" name="surat_nikah" accept=".jpg,.jpeg,.png,.pdf" multiple>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upload-item">
|
|
<label class="upload-label">Surat Keterangan Usaha/SIUP <span class="required">*</span></label>
|
|
<div class="upload-area" id="businessCertUpload">
|
|
<i class="fas fa-file-contract upload-icon"></i>
|
|
<p class="upload-text">Klik atau drag file</p>
|
|
<p class="upload-hint">JPG/PNG/PDF | Max 5MB</p>
|
|
<input type="file" class="file-input" id="businessCertFile" name="surat_ket_usaha" accept=".jpg,.jpeg,.png,.pdf" multiple>
|
|
<div class="file-name" id="businessCertFileName"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upload-item">
|
|
<label class="upload-label">Surat Keterangan Penghasilan Usaha <span class="required">*</span></label>
|
|
<div class="upload-area" id="incomeCertUpload">
|
|
<i class="fas fa-file-signature upload-icon"></i>
|
|
<p class="upload-text">Klik atau drag file</p>
|
|
<p class="upload-hint">JPG/PNG/PDF | Max 5MB</p>
|
|
<input type="file" class="file-input" id="incomeCertFile" name="surat_penghasilan_usaha" accept=".jpg,.jpeg,.png,.pdf" multiple>
|
|
<div class="file-name" id="incomeCertFileName"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upload-item">
|
|
<label class="upload-label">Pembukuan Usaha 6 Bulan Terakhir <span class="required">*</span></label>
|
|
<div class="upload-area" id="businessRecordUpload">
|
|
<i class="fas fa-book upload-icon"></i>
|
|
<p class="upload-text">Klik atau drag file</p>
|
|
<p class="upload-hint">JPG/PNG/PDF | Max 5MB</p>
|
|
<input type="file" class="file-input" id="businessRecordFile" name="pembukuan_usaha" accept=".jpg,.jpeg,.png,.pdf" multiple>
|
|
<div class="file-name" id="businessRecordFileName"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upload-item">
|
|
<label class="upload-label">Rekening Koran 3 Bulan Terakhir <span class="required">*</span></label>
|
|
<div class="upload-area" id="bankUploadW">
|
|
<i class="fas fa-file-invoice upload-icon"></i>
|
|
<p class="upload-text">Klik atau drag file</p>
|
|
<p class="upload-hint">JPG/PNG/PDF | Max 5MB</p>
|
|
<input type="file" class="file-input" id="bankFileW" name="rekening_koran[]" accept=".jpg,.jpeg,.png,.pdf" multiple>
|
|
<div class="file-name" id="bankFileNameW"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upload-item">
|
|
<label class="upload-label">Foto Selfie Ukuran 4R <span class="required">*</span></label>
|
|
<div class="upload-area" id="selfieUploadW">
|
|
<i class="fas fa-user upload-icon"></i>
|
|
<p class="upload-text">Klik atau drag file</p>
|
|
<p class="upload-hint">JPG/PNG | Max 3MB</p>
|
|
<input type="file" class="file-input" id="selfieFile" name="selfie" accept=".jpg,.jpeg,.png,.pdf" multiple>
|
|
<div class="file-name" id="selfieFileNameW"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="upload-item">
|
|
<label class="upload-label">Foto Lokasi Tempat Usaha <span class="required">*</span></label>
|
|
<div class="upload-area" id="businessPlaceUpload">
|
|
<i class="fas fa-store upload-icon"></i>
|
|
<p class="upload-text">Klik atau drag file</p>
|
|
<p class="upload-hint">JPG/PNG | Max 3MB</p>
|
|
<input type="file" class="file-input" id="businessPlaceFile" name="foto_tempat_usaha" accept=".jpg,.jpeg,.png,.pdf" multiple>
|
|
<div class="file-name" id="businessPlaceFileName"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Payment Information -->
|
|
<div class="form-section">
|
|
<h3 class="section-title">Informasi Pembayaran</h3>
|
|
<div class="payment-info">
|
|
<div class="payment-title">Rincian Biaya</div>
|
|
<div class="payment-details">
|
|
<div class="payment-item">
|
|
<span class="payment-label">Harga Properti</span>
|
|
<span class="payment-value">Rp 285.000.000</span>
|
|
</div>
|
|
<div class="payment-item">
|
|
<span class="payment-label">Uang Muka</span>
|
|
<span class="payment-value">Rp 45.000.000</span>
|
|
</div>
|
|
<div class="payment-item">
|
|
<span class="payment-label">Biaya Booking</span>
|
|
<span class="payment-value">Rp 2.000.000</span>
|
|
</div>
|
|
<div class="payment-item">
|
|
<span class="payment-label">Total Pembayaran</span>
|
|
<span class="payment-value">Rp 47.000.000</span>
|
|
</div>
|
|
</div>
|
|
<p style="margin-top: 15px; font-size: 0.9rem; color: #64748b;">
|
|
<strong>Catatan:</strong> Biaya booking akan dikembalikan jika KPR disetujui bank. Pembayaran dapat dilakukan melalui transfer bank atau datang langsung ke kantor pemasaran.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" id="cancelBtn">
|
|
<i class="fas fa-times me-2"></i>Batal
|
|
</button>
|
|
<button type="submit" class="btn btn-primary" id="submitBtn">
|
|
<i class="fas fa-paper-plane me-2"></i>Kirim Pemesanan
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Upload Bukti Booking Fee (KHUSUS LUNAS) -->
|
|
<div class="form-section" id="booking-proof-section" style="display: none;">
|
|
<h3 class="section-title">Upload Bukti Booking Fee</h3>
|
|
|
|
<div class="upload-item">
|
|
<label class="upload-label">
|
|
Bukti Pembayaran Booking Fee <span class="required">*</span>
|
|
</label>
|
|
|
|
<div class="upload-area">
|
|
<i class="fas fa-receipt upload-icon"></i>
|
|
<p class="upload-text">Klik atau drag file</p>
|
|
<p class="upload-hint">JPG/PNG/PDF | Max 5MB</p>
|
|
|
|
<input
|
|
type="file"
|
|
class="file-input"
|
|
name="bukti_booking"
|
|
id="buktiBooking"
|
|
accept=".jpg,.jpeg,.png,.pdf"
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</form>{{-- tutup form --}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Payment method dropdown change handler
|
|
// ========== MODAL PREVIEW ==========
|
|
const modal = document.createElement('div');
|
|
modal.id = 'previewModal';
|
|
modal.style.cssText = `
|
|
display:none; position:fixed; inset:0; background:rgba(0,0,0,0.75);
|
|
z-index:9999; align-items:center; justify-content:center; padding:20px;
|
|
`;
|
|
modal.innerHTML = `
|
|
<div style="background:#fff; border-radius:12px; max-width:90vw; max-height:90vh;
|
|
overflow:auto; padding:20px; position:relative; min-width:300px;">
|
|
<button id="previewClose" style="position:absolute; top:10px; right:14px;
|
|
background:none; border:none; font-size:24px; cursor:pointer; color:#333; line-height:1;">×</button>
|
|
<p id="previewTitle" style="font-weight:600; margin:0 32px 12px 0; font-size:13px; color:#555; word-break:break-all;"></p>
|
|
<div id="previewContent"></div>
|
|
</div>
|
|
`;
|
|
document.body.appendChild(modal);
|
|
|
|
modal.addEventListener('click', e => { if (e.target === modal) closePreview(); });
|
|
document.getElementById('previewClose').addEventListener('click', closePreview);
|
|
document.addEventListener('keydown', e => { if (e.key === 'Escape') closePreview(); });
|
|
|
|
function closePreview() {
|
|
modal.style.display = 'none';
|
|
document.getElementById('previewContent').innerHTML = '';
|
|
}
|
|
|
|
function openPreview(file) {
|
|
document.getElementById('previewTitle').textContent = file.name;
|
|
const content = document.getElementById('previewContent');
|
|
content.innerHTML = '';
|
|
|
|
const url = URL.createObjectURL(file);
|
|
|
|
if (file.type.startsWith('image/')) {
|
|
const img = document.createElement('img');
|
|
img.style.cssText = 'max-width:100%; max-height:75vh; display:block; border-radius:6px;';
|
|
img.src = url;
|
|
img.onload = () => URL.revokeObjectURL(url);
|
|
content.appendChild(img);
|
|
} else if (file.type === 'application/pdf') {
|
|
const iframe = document.createElement('iframe');
|
|
iframe.src = url;
|
|
iframe.style.cssText = 'width:75vw; height:75vh; border:none; border-radius:6px;';
|
|
content.appendChild(iframe);
|
|
}
|
|
|
|
modal.style.display = 'flex';
|
|
}
|
|
|
|
// ========== FILE UPLOAD HANDLER (GANTI YANG LAMA) ==========
|
|
function setupFileUpload(uploadAreaId, fileInputId, fileNameId) {
|
|
const uploadArea = document.getElementById(uploadAreaId);
|
|
const fileInput = document.getElementById(fileInputId);
|
|
const fileName = document.getElementById(fileNameId);
|
|
|
|
if (!uploadArea || !fileInput || !fileName) return;
|
|
|
|
uploadArea.addEventListener('click', function(e) {
|
|
// Jangan trigger klik file input kalau yg diklik tombol preview
|
|
if (e.target.closest('button[data-preview]')) return;
|
|
fileInput.click();
|
|
});
|
|
|
|
fileInput.addEventListener('change', function() {
|
|
const files = Array.from(this.files);
|
|
if (!files.length) return;
|
|
|
|
fileName.innerHTML = '';
|
|
|
|
files.forEach(file => {
|
|
const row = document.createElement('div');
|
|
row.style.cssText = 'display:flex; align-items:center; gap:6px; margin-top:5px;';
|
|
|
|
const nameSpan = document.createElement('span');
|
|
nameSpan.textContent = file.name;
|
|
nameSpan.style.cssText = 'font-size:0.82rem; color:#7AB2D3; font-weight:500; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;';
|
|
|
|
const btnLihat = document.createElement('button');
|
|
btnLihat.type = 'button';
|
|
btnLihat.setAttribute('data-preview', '1');
|
|
btnLihat.textContent = '👁 Lihat';
|
|
btnLihat.style.cssText = `
|
|
font-size:11px; padding:2px 8px; border-radius:4px; cursor:pointer;
|
|
background:#e8f0fe; border:1px solid #7AB2D3; color:#1E3A5F;
|
|
white-space:nowrap; flex-shrink:0;
|
|
`;
|
|
btnLihat.addEventListener('click', (e) => {
|
|
e.stopPropagation(); // supaya tidak trigger uploadArea click
|
|
openPreview(file);
|
|
});
|
|
|
|
row.appendChild(nameSpan);
|
|
row.appendChild(btnLihat);
|
|
fileName.appendChild(row);
|
|
});
|
|
});
|
|
}
|
|
|
|
// ========== SETUP PNS ==========
|
|
setupFileUpload('ktpUpload', 'ktpFile', 'ktpFileName');
|
|
setupFileUpload('kkUpload', 'kkFile', 'kkFileName');
|
|
setupFileUpload('marriageUpload', 'marriageFile', 'marriageFileName');
|
|
setupFileUpload('npwpUpload', 'npwpFile', 'npwpFileName');
|
|
setupFileUpload('photoUpload', 'photoFile', 'photoFileName');
|
|
setupFileUpload('workCertUpload', 'workCertFile', 'workCertFileName');
|
|
setupFileUpload('salaryUpload', 'salaryFile', 'salaryFileName');
|
|
setupFileUpload('bankUpload', 'bankFile', 'bankFileName');
|
|
setupFileUpload('selfieUpload', 'selfieFile', 'selfieFileName');
|
|
setupFileUpload('workplaceUpload', 'workplaceFile', 'workplaceFileName');
|
|
|
|
// ========== SETUP WIRASWASTA ==========
|
|
setupFileUpload('ktpUploadW', 'ktpFileW', 'ktpFileNameW');
|
|
setupFileUpload('kkUploadW', 'kkFileW', 'kkFileNameW');
|
|
setupFileUpload('marriageUploadW', 'marriageFileW', 'marriageFileNameW');
|
|
setupFileUpload('npwpUploadW', 'npwpFileW', 'npwpFileNameW');
|
|
setupFileUpload('sptUpload', 'sptFile', 'sptFileName');
|
|
setupFileUpload('photoUploadW', 'photoFileW', 'photoFileNameW');
|
|
setupFileUpload('businessCertUpload', 'businessCertFile', 'businessCertFileName');
|
|
setupFileUpload('incomeCertUpload', 'incomeCertFile', 'incomeCertFileName');
|
|
setupFileUpload('businessRecordUpload', 'businessRecordFile', 'businessRecordFileName');
|
|
setupFileUpload('bankUploadW', 'bankFileW', 'bankFileNameW');
|
|
setupFileUpload('selfieUploadW', 'selfieFileW', 'selfieFileNameW');
|
|
setupFileUpload('businessPlaceUpload', 'businessPlaceFile', 'businessPlaceFileName');
|
|
|
|
// ========== SISA SCRIPT LAMA (payment, employment toggle, submit, cancel) ==========
|
|
const paymentMethodSelect = document.getElementById('paymentMethod');
|
|
const downPaymentInput = document.getElementById('downPayment');
|
|
const paymentDetails = document.querySelector('.payment-details');
|
|
|
|
paymentMethodSelect.addEventListener('change', function() {
|
|
// ... (isi sama persis dengan script lama)
|
|
});
|
|
|
|
const pnsRadio = document.getElementById('employment-pns');
|
|
const wiraswastaRadio = document.getElementById('employment-wiraswasta');
|
|
const pnsDocuments = document.getElementById('pns-documents');
|
|
const wiraswastaDocuments = document.getElementById('wiraswasta-documents');
|
|
|
|
pnsRadio.addEventListener('change', function() {
|
|
if (this.checked) { pnsDocuments.style.display='block'; wiraswastaDocuments.style.display='none'; }
|
|
});
|
|
wiraswastaRadio.addEventListener('change', function() {
|
|
if (this.checked) { pnsDocuments.style.display='none'; wiraswastaDocuments.style.display='block'; }
|
|
});
|
|
|
|
// Cancel button
|
|
document.getElementById('cancelBtn').addEventListener('click', function() {
|
|
if (confirm('Apakah Anda yakin ingin membatalkan pemesanan? Semua data yang telah diisi akan hilang.')) {
|
|
window.location.href = 'katalog.html';
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
document.getElementById('paymentMethod').addEventListener('change', function() {
|
|
let metode = this.value;
|
|
let dpField = document.getElementById('downPayment').closest('.form-group');
|
|
|
|
if (metode === 'lunas') {
|
|
dpField.style.display = 'none';
|
|
} else {
|
|
dpField.style.display = 'block';
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
document.getElementById('paymentMethod').addEventListener('change', function() {
|
|
let metode = this.value;
|
|
|
|
let bookingSection = document.getElementById('booking-proof-section');
|
|
let buktiInput = document.getElementById('buktiBooking');
|
|
|
|
if (metode === 'lunas') {
|
|
bookingSection.style.display = 'block';
|
|
buktiInput.setAttribute('required', 'required');
|
|
} else {
|
|
bookingSection.style.display = 'none';
|
|
buktiInput.removeAttribute('required');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|