284 lines
14 KiB
PHP
284 lines
14 KiB
PHP
@extends('layoutuser.app')
|
|
@section('content')
|
|
<main class="main " id="main">
|
|
<section class="hero-section inner-page">
|
|
<div class="wave">
|
|
<svg width="1920px" height="265px" viewBox="0 0 1920 265" version="1.1" xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink">
|
|
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
|
<g id="Apple-TV" transform="translate(0.000000, -402.000000)" fill="#FFFFFF">
|
|
<path
|
|
d="M0,439.134243 C175.04074,464.89273 327.944386,477.771974 458.710937,477.771974 C654.860765,477.771974 870.645295,442.632362 1205.9828,410.192501 C1429.54114,388.565926 1667.54687,411.092417 1920,477.771974 L1920,667 L1017.15166,667 L0,667 L0,439.134243 Z"
|
|
id="Path"></path>
|
|
</g>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="row align-items-center">
|
|
<div class="col-12">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-7 text-center hero-text">
|
|
<h1 data-aos="fade-up" data-aos-delay="">
|
|
Tambah Pesanan
|
|
</h1>
|
|
<p class="mb-5" data-aos="fade-up" data-aos-delay="100">
|
|
Pilih desain yang menurut anda menarik.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section pb-9">
|
|
<div class="container">
|
|
<div class="card my-4">
|
|
<div class="card-header p-0 position-relative mt-n4 mx-3 z-index-2">
|
|
<div class="bg-gradient-primary shadow-primary border-radius-lg pt-4 pb-3">
|
|
<h6 class="text-black text-capitalize ps-3">Pilihlah Salah Satu Dari Desain Dari Kami</h6>
|
|
</div>
|
|
</div>
|
|
<div class="card-body px-4 pb-4">
|
|
<form action="{{ route('pesanan.store', ['id_pelanggan' => $pelanggan->id]) }}" method="POST"
|
|
enctype="multipart/form-data">
|
|
@csrf
|
|
|
|
<!-- Pilihan Konsep Design -->
|
|
<div class="mb-3">
|
|
<label for="design_id" class="form-label">Pilih Konsep Design</label>
|
|
|
|
<div id="designCarousel" class="carousel slide" data-bs-ride="carousel">
|
|
<div class="carousel-inner">
|
|
@foreach ($designs as $index => $design)
|
|
<div class="carousel-item {{ $index == 0 ? 'active' : '' }}">
|
|
<div class="card mx-auto" style="max-width: 600px;">
|
|
<img src="{{ asset('storage/' . $design->foto) }}"
|
|
class="card-img-top design-img" alt="{{ $design->konsep }}">
|
|
<div class="card-body text-center">
|
|
<p class="card-text"><strong>Nama Konsep :</strong>
|
|
{{ $design->konsep }}</p>
|
|
<p class="card-text"><strong>Lahan yang dibutuhkan:</strong>
|
|
{{ $design->lahan }}</p>
|
|
<p class="card-text"><strong>Harga: </strong>
|
|
Rp.{{ $design->harga }}
|
|
</p>
|
|
|
|
<!-- Radio Button dengan data-harga dan data-lahan -->
|
|
<input type="radio" name="design_id" value="{{ $design->id }}"
|
|
data-harga="{{ $design->harga }}"
|
|
data-lahan="{{ $design->lahan }}"
|
|
onchange="updateFormFields(this)" required>
|
|
<label class="form-label">Pilih {{ $design->konsep }}</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<!-- Carousel Controls -->
|
|
<button class="carousel-control-prev" type="button" data-bs-target="#designCarousel"
|
|
data-bs-slide="prev">
|
|
<span class="carousel-control-prev-icon bg-dark rounded-circle"
|
|
aria-hidden="true"></span>
|
|
<span class="visually-hidden">Sebelumnya</span>
|
|
</button>
|
|
<button class="carousel-control-next" type="button" data-bs-target="#designCarousel"
|
|
data-bs-slide="next">
|
|
<span class="carousel-control-next-icon bg-dark rounded-circle"
|
|
aria-hidden="true"></span>
|
|
<span class="visually-hidden">Selanjutnya</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Input Spesifikasi Lahan -->
|
|
<div class="mb-3">
|
|
<label for="spesifikasi_lahan" class="form-label">Spesifikasi Lahan</label>
|
|
<input type="text" class="form-control" id="spesifikasi_lahan" name="spesifikasi_lahan"
|
|
placeholder="Masukkan panjang dan lebar lahan" required>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="tanggal_pengerjaan" class="form-label">Dikerjakan tanggal / Tanggal Untuk
|
|
Survei</label>
|
|
<input type="date" class="form-control" id="tanggal_survei" name="tanggal_survei"
|
|
required>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="waktu_pengerjaan" class="form-label">Tanggal Selesai</label>
|
|
<input type="date" class="form-control" id="tanggal_selesai" name="tanggal_selesai"
|
|
placeholder="Masukkan waktu pengerjaan" required>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="pembayaran" class="form-label">Pembayaran</label>
|
|
<select class="form-select" id="status_pembayaran" name="status_pembayaran" required
|
|
onchange="toggleNominalDP(this)">
|
|
<option value="">-- Pilih Jenis Pembayaran --</option>
|
|
<option value="dp">DP</option>
|
|
<option value="belum lunas">Tidak</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- Input Nominal DP (disembunyikan secara default) -->
|
|
<div class="mb-3" id="nominalDPField" style="display: none;">
|
|
<label for="nominal_dp_display" class="form-label">Nominal DP</label>
|
|
|
|
<!-- Input untuk tampilan (diformat sebagai rupiah) -->
|
|
<input type="text" class="form-control" id="nominal_dp_display"
|
|
placeholder="Masukkan nominal DP">
|
|
|
|
<!-- Input tersembunyi untuk dikirim ke backend -->
|
|
<input type="hidden" id="nominal_dp" name="nominal_dp">
|
|
</div>
|
|
|
|
<!-- Input Request Bunga -->
|
|
<div class="mb-3">
|
|
<label for="request_bunga" class="form-label">Request Bunga</label>
|
|
<textarea class="form-control" id="request_bunga" name="request_bunga" rows="10"
|
|
placeholder="Masukkan request bunga" required></textarea>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="keterangan_tambahan" class="form-label">Keterangan tambahan</label>
|
|
<textarea class="form-control" id="keterangan_tambahan" name="keterangan_tambahan" rows="10"
|
|
placeholder="Masukkan keterangan tambahan untuk taman Anda" required></textarea>
|
|
</div>
|
|
|
|
<!-- Input Foto Lokasi -->
|
|
<div class="mb-3">
|
|
<label for="foto_lokasi" class="form-label">Foto Lokasi/Tempat</label>
|
|
<input type="file" class="form-control" id="foto_lokasi" name="foto_lokasi"
|
|
accept="image/*" required>
|
|
</div>
|
|
|
|
<!-- Input Budget -->
|
|
<div class="mb-3">
|
|
<label for="Budget" class="form-label">Budget</label>
|
|
<div class="input-group">
|
|
<span class="input-group-text">Rp</span>
|
|
<input type="text" class="form-control" id="Budget" name="Budget"
|
|
placeholder="Masukkan Budget yang sama dengan konsep bila sesuai dengan keinginan anda"
|
|
required>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tombol Submit -->
|
|
<button type="submit" class="btn btn-primary">Submit</button>
|
|
</form>
|
|
|
|
<!-- Script Bagian Bawah -->
|
|
<script>
|
|
function toggleNominalDP(select) {
|
|
const nominalField = document.getElementById('nominalDPField');
|
|
nominalField.style.display = (select.value === 'dp') ? 'block' : 'none';
|
|
}
|
|
|
|
// Update spesifikasi lahan dan budget berdasarkan Harga dan Lahan yang dipilih
|
|
function updateFormFields(radio) {
|
|
const harga = radio.getAttribute('data-harga');
|
|
const lahan = radio.getAttribute('data-lahan');
|
|
|
|
// Update Budget dan Spesifikasi Lahan
|
|
document.getElementById('Budget').value = harga;
|
|
document.getElementById('spesifikasi_lahan').value = lahan;
|
|
}
|
|
</script>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
<script>
|
|
const displayInput = document.getElementById('nominal_dp_display');
|
|
const hiddenInput = document.getElementById('nominal_dp');
|
|
|
|
// Format angka jadi rupiah
|
|
function formatRupiah(angka) {
|
|
return new Intl.NumberFormat('id-ID', {
|
|
style: 'currency',
|
|
currency: 'IDR',
|
|
minimumFractionDigits: 0
|
|
}).format(angka);
|
|
}
|
|
|
|
displayInput.addEventListener('input', function() {
|
|
let rawValue = this.value.replace(/\D/g, ''); // Hapus semua karakter selain angka
|
|
|
|
// Update hidden input (untuk disimpan)
|
|
hiddenInput.value = rawValue;
|
|
|
|
// Tampilkan kembali dalam format Rupiah
|
|
if (rawValue) {
|
|
this.value = formatRupiah(rawValue);
|
|
} else {
|
|
this.value = '';
|
|
}
|
|
});
|
|
|
|
function toggleNominalDP(select) {
|
|
const nominalField = document.getElementById('nominalDPField');
|
|
if (select.value === 'dp') {
|
|
nominalField.style.display = 'block';
|
|
} else {
|
|
nominalField.style.display = 'none';
|
|
}
|
|
}
|
|
|
|
const budgetInput = document.getElementById('Budget');
|
|
|
|
// Format Rupiah saat diketik
|
|
budgetInput.addEventListener('input', function(e) {
|
|
let value = this.value.replace(/\D/g, ''); // Hapus semua non-digit
|
|
this.value = formatRupiah(value);
|
|
});
|
|
|
|
// Format fungsi
|
|
function formatRupiah(angka) {
|
|
return angka.replace(/\B(?=(\d{3})+(?!\d))/g, '.');
|
|
}
|
|
|
|
// Sebelum form disubmit, hapus format dan kirim angka saja
|
|
const form = budgetInput.closest('form');
|
|
form.addEventListener('submit', function() {
|
|
const cleanValue = budgetInput.value.replace(/\./g, ''); // Hapus titik
|
|
budgetInput.value = cleanValue; // Simpan hanya angka ke database
|
|
});
|
|
</script>
|
|
@endsection
|
|
|
|
<style>
|
|
.card-text {
|
|
font-size: 16px;
|
|
/* Ukuran font lebih nyaman */
|
|
font-weight: 500;
|
|
/* Medium untuk tampilan lebih halus */
|
|
color: #333;
|
|
/* Warna yang lebih soft */
|
|
margin-bottom: 5px;
|
|
/* Jarak antar teks */
|
|
text-align: left;
|
|
/* Rata kiri agar lebih rapi */
|
|
}
|
|
|
|
.card-body {
|
|
text-align: left;
|
|
/* Menyesuaikan teks di dalam card */
|
|
padding: 15px;
|
|
}
|
|
|
|
.design-img {
|
|
width: 100%;
|
|
height: 500px;
|
|
object-fit: contain;
|
|
border-radius: 5px;
|
|
background-color: #f0f0f0;
|
|
}
|
|
</style>
|