1277 lines
56 KiB
PHP
1277 lines
56 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 - PropertiHarmoni</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">
|
|
<!-- Property Preview -->
|
|
<div class="property-preview">
|
|
<div class="property-image">
|
|
<img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=600&q=80" alt="Kelapa Gading Regency">
|
|
</div>
|
|
<div class="property-info">
|
|
<h2 class="property-name">Kelapa Gading Regency</h2>
|
|
<div class="property-location">
|
|
<i class="fas fa-map-marker-alt"></i>
|
|
<span>Jakarta Utara, DKI Jakarta</span>
|
|
</div>
|
|
<div class="property-price">Rp 285.000.000</div>
|
|
<span class="property-type">Type 36/72 - Komersil</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Form Section -->
|
|
<div class="form-section">
|
|
<h2 class="section-title">Form Pemesanan Properti</h2>
|
|
|
|
<!-- Personal Information -->
|
|
<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" 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" 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" placeholder="Masukkan email Anda" required>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="address" class="form-label">Alamat Lengkap <span class="required">*</span></label>
|
|
<textarea class="form-control" id="address" rows="2" placeholder="Masukkan alamat lengkap Anda" required></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>
|
|
<select class="form-control" id="propertyType" required>
|
|
<option value="">Pilih Tipe Properti</option>
|
|
<option value="30/60">30/60 (Subsidi)</option>
|
|
<option value="36/72" selected>36/72 (Komersil)</option>
|
|
<option value="45/84">45/84 (Komersil)</option>
|
|
<option value="60/135">60/135 (Komersil)</option>
|
|
<option value="ruko">Ruko (Komersil)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="downPayment" class="form-label">Uang Muka <span class="required">*</span></label>
|
|
<input type="text" class="form-control" id="downPayment" value="Rp 45.000.000" readonly>
|
|
</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" required>
|
|
<option value="">Pilih Metode Pembayaran</option>
|
|
<option value="kpr" selected>KPR (Kredit Pemilikan Rumah)</option>
|
|
<option value="cash">Cash (Pembayaran Lunas)</option>
|
|
<option value="installment">Cicilan Tanpa Bunga</option>
|
|
<option value="other">Lainnya (Metode Khusus)</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" 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" accept=".jpg,.jpeg,.png,.pdf">
|
|
<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" accept=".jpg,.jpeg,.png,.pdf">
|
|
<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" accept=".jpg,.jpeg,.png,.pdf">
|
|
<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" accept=".jpg,.jpeg,.png">
|
|
<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" accept=".jpg,.jpeg,.png,.pdf">
|
|
<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" 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" 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" accept=".jpg,.jpeg,.png">
|
|
<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" accept=".jpg,.jpeg,.png">
|
|
<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" 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" accept=".jpg,.jpeg,.png,.pdf">
|
|
<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" accept=".jpg,.jpeg,.png,.pdf">
|
|
<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" accept=".jpg,.jpeg,.png,.pdf">
|
|
<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" accept=".jpg,.jpeg,.png,.pdf">
|
|
<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="photoFileW" accept=".jpg,.jpeg,.png">
|
|
<div class="file-name" id="photoFileNameW"></div>
|
|
</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" accept=".jpg,.jpeg,.png,.pdf">
|
|
<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" accept=".jpg,.jpeg,.png,.pdf">
|
|
<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" 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" 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="selfieFileW" accept=".jpg,.jpeg,.png">
|
|
<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" accept=".jpg,.jpeg,.png">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Payment method dropdown change handler
|
|
const paymentMethodSelect = document.getElementById('paymentMethod');
|
|
const downPaymentInput = document.getElementById('downPayment');
|
|
const paymentDetails = document.querySelector('.payment-details');
|
|
|
|
paymentMethodSelect.addEventListener('change', function() {
|
|
const method = this.value;
|
|
|
|
if (method === 'kpr') {
|
|
downPaymentInput.value = 'Rp 45.000.000';
|
|
paymentDetails.innerHTML = `
|
|
<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>
|
|
`;
|
|
} else if (method === 'cash') {
|
|
downPaymentInput.value = 'Rp 285.000.000';
|
|
paymentDetails.innerHTML = `
|
|
<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">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 287.000.000</span>
|
|
</div>
|
|
`;
|
|
} else if (method === 'installment') {
|
|
downPaymentInput.value = 'Rp 85.500.000';
|
|
paymentDetails.innerHTML = `
|
|
<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 (30%)</span>
|
|
<span class="payment-value">Rp 85.500.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 87.500.000</span>
|
|
</div>
|
|
`;
|
|
} else if (method === 'other') {
|
|
downPaymentInput.value = 'Rp 0';
|
|
paymentDetails.innerHTML = `
|
|
<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">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 2.000.000</span>
|
|
</div>
|
|
`;
|
|
}
|
|
});
|
|
|
|
// Employment type toggle
|
|
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';
|
|
}
|
|
});
|
|
|
|
// File upload handlers
|
|
function setupFileUpload(uploadAreaId, fileInputId, fileNameId) {
|
|
const uploadArea = document.getElementById(uploadAreaId);
|
|
const fileInput = document.getElementById(fileInputId);
|
|
const fileName = document.getElementById(fileNameId);
|
|
|
|
uploadArea.addEventListener('click', () => {
|
|
fileInput.click();
|
|
});
|
|
|
|
fileInput.addEventListener('change', function() {
|
|
if (this.files.length > 0) {
|
|
if (this.multiple && this.files.length > 1) {
|
|
fileName.textContent = `${this.files.length} file dipilih`;
|
|
} else {
|
|
fileName.textContent = this.files[0].name;
|
|
}
|
|
fileName.style.color = '#7AB2D3';
|
|
}
|
|
});
|
|
}
|
|
|
|
// Setup all file upload areas for 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 all file upload areas for 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');
|
|
|
|
// Form submission
|
|
document.getElementById('submitBtn').addEventListener('click', function() {
|
|
// Simple validation
|
|
const requiredFields = [
|
|
{ id: 'fullName', label: 'Nama Lengkap' },
|
|
{ id: 'phone', label: 'Nomor HP' },
|
|
{ id: 'email', label: 'Email' },
|
|
{ id: 'address', label: 'Alamat' },
|
|
{ id: 'propertyType', label: 'Tipe Properti' },
|
|
{ id: 'paymentMethod', label: 'Metode Pembayaran' }
|
|
];
|
|
|
|
let isValid = true;
|
|
for (const field of requiredFields) {
|
|
const input = document.getElementById(field.id);
|
|
if (!input.value.trim()) {
|
|
alert(`Mohon lengkapi field: ${field.label}`);
|
|
input.focus();
|
|
isValid = false;
|
|
break;
|
|
}
|
|
}
|
|
|
|
if (!isValid) return;
|
|
|
|
// Validate documents based on employment type
|
|
let docSection;
|
|
if (pnsRadio.checked) {
|
|
docSection = document.querySelectorAll('#pns-documents .file-input');
|
|
} else {
|
|
docSection = document.querySelectorAll('#wiraswasta-documents .file-input');
|
|
}
|
|
|
|
let missingDocs = [];
|
|
docSection.forEach(input => {
|
|
if (!input.files || input.files.length === 0) {
|
|
const label = input.closest('.upload-item').querySelector('.upload-label').textContent;
|
|
missingDocs.push(label.split(' ')[0]);
|
|
}
|
|
});
|
|
|
|
if (missingDocs.length > 0) {
|
|
alert(`Mohon lengkapi dokumen berikut:\n${missingDocs.join('\n')}`);
|
|
return;
|
|
}
|
|
|
|
// Success message
|
|
alert('Pemesanan berhasil dikirim! Tim kami akan segera menghubungi Anda untuk proses selanjutnya.');
|
|
|
|
// In real application: submit form to server
|
|
// document.getElementById('bookingForm').submit();
|
|
});
|
|
|
|
// 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>
|
|
</body>
|
|
</html>
|
|
|