Untitled

import React from "react";
import { useState } from "react";

const SimulasiKredit = () => {
  const [dataKendaraan, setDataKendaraan] = useState({
    estimasiHarga: "",
    pilihDataKendaraan: false,
  });
  const [rincianKredit, setRincianKredit] = useState({
    pilihCreditCompany: "",
    termasukPembayaranCicilanDiMuka: false,
    downPaymentRp: 0,
    downPaymentPersen: 0,
    tenor: 12,
    pilihPaketAsuransi: "",
    pembayaranAsuransi: "Cash",
  });

  const handleEstimasiHargaChange = (e) => {
    setDataKendaraan({
      ...dataKendaraan,
      estimasiHarga: e.target.value,
    });
  };

  const handlePilihDataKendaraanChange = (e) => {
    setDataKendaraan({
      ...dataKendaraan,
      pilihDataKendaraan: e.target.value,
    });
  };

  const handlePilihCreditCompanyChange = (e) => {
    setRincianKredit({
      ...rincianKredit,
      pilihCreditCompany: e.target.value,
    });
  };

  const handleTermasukPembayaranCicilanDiMukaChange = (e) => {
    setRincianKredit({
      ...rincianKredit,
      termasukPembayaranCicilanDiMuka: e.target.value,
    });
  };

  const handleDownPaymentRpChange = (e) => {
    setRincianKredit({
      ...rincianKredit,
      downPaymentRp: e.target.value,
    });
  };

  const handleDownPaymentPersenChange = (e) => {
    setRincianKredit({
      ...rincianKredit,
      downPaymentPersen: e.target.value,
    });
  };

  const handleTenorChange = (e) => {
    setRincianKredit({
      ...rincianKredit,
      tenor: e.target.value,
    });
  };

  const handlePilihPaketAsuransiChange = (e) => {
    setRincianKredit({
      ...rincianKredit,
      pilihPaketAsuransi: e.target.value,
    });
  };

  const handlePembayaranAsuransiChange = (e) => {
    setRincianKredit({
      ...rincianKredit,
      pembayaranAsuransi: e.target.value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    // Lakukan simulasi kredit di sini

    alert("Simulasi kredit berhasil!");
  };

  return (
    <div>
      <h1>Simulasi Kredit</h1>

      <form onSubmit={handleSubmit}>
        <h2>Pilih Data Kendaraan</h2>

        <label htmlFor="estimasiHarga">Estimasi Harga Kendaraan</label>
        <input
          type="number"
          id="estimasiHarga"
          name="estimasiHarga"
          value={dataKendaraan.estimasiHarga}
          onChange={handleEstimasiHargaChange}
        />

        <label htmlFor="pilihDataKendaraan">Sudah Pilih Data Kendaraan?</label>
        <input
          type="checkbox"
          id="pilihDataKendaraan"
          name="pilihDataKendaraan"
          checked={dataKendaraan.pilihDataKendaraan}
          onChange={handlePilihDataKendaraanChange}
        />

        <h2>Lengkapi Rincian Kredit</h2>

        <label htmlFor="pilihCreditCompany">Pilih Credit Company</label>
        <select
          id="pilihCreditCompany"
          name="pilihCreditCompany"
          value={rincianKredit.pilihCreditCompany}
          onChange={handlePilihCreditCompanyChange}
        >
          <option value="">-- Pilih Credit Company --</option>
          <option value="SANF">SANF</option>
          <option value="ACC">ACC</option>
        </select>

        <label htmlFor="termasukPembayaranCicilanDiMuka">
          Termasuk Pembayaran Cicilan di Muka?
        </label>
        <input
          type="checkbox"
          id="termasukPembayaranCicilanDiMuka"
          name="termasukPembayaranCicilanDiMuka"
          checked={rincianKredit.termasukPembayaranCicilanDiMuka}
          >

        </input>
            
        <label htmlFor="downPaymentRp">Down Payment (Rp)</label>
        <input
          type="number"
          id="downPaymentRp"
          name="downPaymentRp"
          value={rincianKredit.downPaymentRp}
          onChange={handleDownPaymentRpChange}
        />

        <label htmlFor="downPaymentPersen">Down Payment (%)</label>
        <input
          type="number"
          id="downPaymentPersen"
          name="downPaymentPersen"
          value={rincianKredit.downPaymentPersen}
          onChange={handleDownPaymentPersenChange}
        />

        <label htmlFor="tenor">Tenor (Bulan)</label>
        <input
          type="number"
          id="tenor"
          name="tenor"
          value={rincianKredit.tenor}
          onChange={handleTenorChange}
        />

        <label htmlFor="pilihPaketAsuransi">Pilih Paket Asuransi</label>
        <select
          id="pilihPaketAsuransi"
          name="pilihPaketAsuransi"
          value={rincianKredit.pilihPaketAsuransi}
          onChange={handlePilihPaketAsuransiChange}
        >
          <option value="">-- Pilih Paket Asuransi --</option>
          <option value="Paket A">Paket A</option>
          <option value="Paket B">Paket B</option>
        </select>

        <label htmlFor="pembayaranAsuransi">Pembayaran Asuransi</label>
        <select
          id="pembayaranAsuransi"
          name="pembayaranAsuransi"
          value={rincianKredit.pembayaranAsuransi}
          onChange={handlePembayaranAsuransiChange}
        >
          <option value="Cash">Cash</option>
          <option value="Cicilan">Cicilan</option>
        </select>

        <button type="submit">Simulasi Kredit</button>
      </form>
    </div>
  );
};

export default SimulasiKredit;