MIF_E31222713/resources/views/user/form/tamba-pesan2.blade.php

191 lines
9.6 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">
Isi Pesanan Sesuai dengan desain anda.
</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">Atur Request desain anda</h6>
</div>
</div>
<div class="card-body px-4 pb-4">
<form action="{{ route('pesanan.store2', ['id_pelanggan' => $pelanggan->id]) }}" method="POST"
enctype="multipart/form-data">
@csrf
<!-- 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">Harus selesai Tanggal</label>
<input type="date" class="form-control" id="tanggal_selesai" name="tanggal_selesai"
placeholder="Masukkan waktu selesai" required>
</div>
<div class="mb-3">
<label for="pembayaran" class="form-label">Pembayaran</label>
<select class="form-select" id="pembayaran" name="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 (Bunga yang Digunakan)</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 yang digunakan untuk taman anda" required></textarea>
</div>
<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>
<div class="mb-3">
<label for="foto_design" class="form-label">Foto Design (Jika Ada)</label>
<input type="file" class="form-control" id="foto_design" name="foto_design"
accept="image/*">
</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>
</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