<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>

<!-- Content Header (Page header) -->
<div class="content-header ">
<div class="container-fluid">
  <div class="row mb-2">
    <div class="col-sm-12">
      <!-- <h1 class="m-0 text-dark">Judul Atas</h1> -->
    </div><!-- /.col -->
  </div><!-- /.row -->
</div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->

<!-- Main content -->
  <section class="content">
    <div class="container-fluid">
      <div class="row">
        <div class="col-12">
          <!-- Default box -->
          <div class="card">
            <div class="card-header bg-info">
              <h3 class="card-title ">Tabungan Scan</h3>
              <div class="card-tools">
                <button type="button" class="btn btn-tool" data-card-widget="collapse" title="Collapse">
                  <i class="fas fa-minus"></i>
                </button>
                <button type="button" class="btn btn-tool" data-card-widget="remove" title="Remove">
                  <i class="fas fa-times"></i>
                </button>
              </div>
            </div>
            <!-- /.card-header -->
      <div class="card-body">

      <style>
  .form-control {
    height: 30px; /* Atur tinggi sesuai kebutuhan */
    /*border-radius: 5px;*/ /* Atur border-radius untuk sudut yang lebih halus */
    /*border: 1px solid #007bff;*/ /* Warna border */
    border-radius: 5px; /* Melengkungkan sudut */
    border: 2px solid #ccc;
    border-radius: 3px;
    font-size: 13px;
    background-color: white;
    padding: 4px 10px;
    box-sizing: border-box; /* Menghitung padding dalam lebar elemen */
  }
  .btn {
    border-radius: 5px; /* Sesuaikan dengan tombol */
  }
  .custom-spacing {
    margin-bottom: 2px; /* Jarak antar input 2px */
    }
    label{

    font-family: 'Arial', sans-serif; /* Ganti dengan font yang Anda suka */
    font-size: 12px; /* Ukuran font */
    font-weight: bold; /* Gaya font */
    color: #333; /* Warna font */
    margin-bottom: 5px; /* Jarak antara label dan input */
    padding: 4px 10px;
    }

</style>
  

  <?php
  $kode         = $_SESSION['kode'];
  error_reporting(E_ALL^(E_NOTICE|E_WARNING));
  ini_set('display_errors',1);
  error_reporting(0);

 include 'koneksi.php'; 
 require './kalenderhijriah.php';

     if(isset($_POST['rekening1'])){ 
     
      $id= substr($_POST['rekening1'],0,13);
      $register= substr($_POST['rekening1'],0,3).".".sprintf("%06d",substr($_POST['rekening1'],7,6));

      $rekening= $_POST['rekening1'];

      
      $reg =mysqli_fetch_assoc(mysqli_query($koneksi,"SELECT tgl as tgl, nama as nama,alamat as alamat,ibu as ibu,klsNow as klsNow FROM registrasi WHERE id='".$register."' GROUP BY id  ")); 
         
   }
   $rekak = mysqli_query($koneksi,"SELECT count(id) as kodea FROM bukutabungan where rekening='$id2' ");
    $rekakhir = mysqli_fetch_row($rekak) ;
    $total =mysqli_fetch_assoc(mysqli_query($koneksi,"SELECT sum(kredit-debet) AS total FROM mutasitabungan WHERE rekening='".$rekening."' GROUP BY id  ")); 

      function Rp($angka) { 
      $jadi = number_format($angka,0,'.',',');
      return $jadi;
      }

       ?>   
       <style>
.custom-input1 {
  width: 50px;
  margin-right: 10px;
}
.custom-input2 {
  width: 40px;
  margin-right: 10px;
}
.custom-input3 {
  width: 140px;
  margin-right: 10px;
}
.custom-input4 {
  width: 40px;
  margin-right: 10px;
.cariid{
width: 20px;
}
</style>         

         <form action="" method="POST">
  <div class="row">
      <div class="col-sm-6">
      <div class="form-group row custom-spacing">
              <label for="nama" class="col-sm-4">No. Rekening</label>

              <!-- Tiga input rekening bersampingan -->
              <input type="text" name="rekening1" id="rekening1" class="form-control col-sm-7" placeholder="Rekening 1" value="<?php if(isset($_POST['rekening1'])){echo $_POST['rekening1']; }else{ echo ""; }?>" onchange="this.form.submit();" onKeyDown="changeFocus(event,'cariid')" /> <!-- readonly -->
                      
                  
              
              
              <button type="submit" id="cariid" name="cariid" style="width:40px;" ><i class="fas fa-search"></i></button>
            </div>
      
</form>
<script>
function changeFocus(event, nextFieldId) {
  if (event.key === 'Enter') {
      event.preventDefault(); // Mencegah pengiriman form saat Enter ditekan
      const nextField = document.getElementById(nextFieldId);
      if (nextField) {
          nextField.focus(); // Pindah fokus ke field berikutnya
      }
  }
}
</script>
<script>
      // Data pilihan untuk dimasukkan ke dalam datalist
      const optionsData = ["11. Wadiah", "12. Idul Fitri", "13. Qurban", "40. Deposito"];

      // Mengisi datalist dengan pilihan data
      const dataList = document.getElementById('optionsList');
      optionsData.forEach(option => {
          const opt = document.createElement('option');
          opt.value = option; // Menyimpan nilai asli
          dataList.appendChild(opt);
      });

      // Menampilkan array optionsData di samping input
     // const optionsDisplay = document.getElementById('optionsDisplay');
      //optionsDisplay.innerText = "Pilihan: " + optionsData.join(", "); // Menggabungkan array menjadi string

      // Fungsi untuk memperbarui input rekening2 dengan dua karakter pertama dari pilihan
      function updateRekening2() {
          const dataInput = document.getElementById('rekening2');
          
          // Dapatkan nilai yang dipilih dari input rekening2
          const selectedValue = dataInput.value;

          // Ambil dua karakter pertama dari selectedValue
          const twoChars = selectedValue.substring(0, 2);
          // Set nilai rekening2 dengan dua karakter pertama
          dataInput.value = twoChars; // Memperbarui nilai input rekening2
      }

  </script>

       <script language="javascript" type="text/javascript">
var fromEnter = false ;
function changeFocus (event,nextFocus)
{
if (event.keyCode==13)
{
var obj = document.getElementsByName( nextFocus )[ 0 ] ;
if (obj)
obj.focus() ;
}
fromEnter = true ;
}
function checkSubmit ()
{
fromEnter = !fromEnter ;
return fromEnter ;
}
</script>
       

            <form name="myform" action=".../../simpan/simpan_tabungan_scan.php" method="POST"  class="form-simpanangsuran" id="form-simpanangsuran">

              <input type="hidden" name="rekening" id="rekening"required="" value="<?php echo $rekening;?>" />
              
              <div class="form-group row custom-spacing">
              <label for="nama" class="col-sm-4">Tanggal</label>
              <input type="text" name="tgl" id="tgl" class="tgl form-control col-sm-8" value="<?php  echo sprintf('%02d', $hijri[1]) . '-' . $calendar->monthName($hijri[0]) . '-' . $hijri[2]; ; ?>" required="" onKeyDown="changeFocus(event,'jtabungan')" />
            </div>
            <div class="form-group row custom-spacing">
              <label for="nama" class="col-sm-4">Jenis Tabungan</label>
              <div class="custom-control custom-radio col-sm-2 ">
                        <input type="radio"oninput="this.className = ''" class="custom-control-input"  id="customRadio1" name="jtabungan" value="S" onKeyDown="changeFocus(event,'nominal')" checked autofocus/>
                        <label for="customRadio1" class="custom-control-label">Setor </label>
              </div>
              <div class="custom-control custom-radio col-sm-2">
                        <input class="custom-control-input " type="radio"oninput="this.className = ''" id="customRadio2" name="jtabungan" value="T" onKeyDown="changeFocus(event,'nominal')"/>
                        <label for="customRadio2" class="custom-control-label">Tarik</label>
               </div>
               
            </div>
            <div class="form-group row custom-spacing">
              <label for="nama" class="col-sm-4">Nominal</label>
              <input type="text" name="nominal" id="nominal"required="" class="form-control col-sm-8"  onKeyDown="changeFocus(event,'keterangan')"/> 
            </div>    
            

            <script>         
            function validateInput() {
   
    var plafond = document.getElementById('nominal').value.replace(/,/g, ''); // Menghapus pemisah ribuan untuk validasi
    var numericPlafond = parseInt(nominal); // Menggunakan parseInt untuk mendapatkan nilai numerik
    
    
    
    // Validasi minimal dan maksimal plafon
    if (numericPlafond < 1000 || numericPlafond > 20000000) {
        alert('Nilai plafon harus antara 5.000.000 dan 10.000.000');
        return false; // Mencegah form untuk dikirim
    }
    
    return true; // Izinkan form untuk dikirim
}
</script>
          
                          
            <div class="form-group row custom-spacing">
              <label for="nama" class="col-sm-4">Keterangan</label>
              <input type="text" name="keterangan"value="<?php echo "an.". $reg["nama"];?>" id="keterangan" class="form-control col-sm-8" required="" onKeyDown="changeFocus(event,'simpanangsuran')"/>
          </div>
    
      </div>


      <div class="col-sm-6">
      <div class="form-group row custom-spacing"> 
          <label for="nama" class="col-sm-3" style="margin-left: 12px;">Nama</label> 
           <input type="text"name="nama" id="nama" class="form-control col-sm-8" readonly="nama" value="<?php echo $reg["nama"];?>"  />
         </div> 

         <div class="form-group row custom-spacing">
          <label for="nama" class="col-sm-3"style="margin-left: 12px;">Ibu</label> 
           <input type="text"name="kls" id="kls" class="form-control col-sm-8" readonly="kls" value="<?php echo $reg['ibu'];?>"/>
         </div>

         <div class="form-group row custom-spacing">
          <label for="nama" class="col-sm-3"style="margin-left: 12px;">Alamat</label> 
           <input type="text"name="alamat" id="alamat" class="form-control col-sm-8" readonly="alamat" value="<?php echo $reg['alamat'];?>"/>
         </div> 
         <div class="form-group row custom-spacing">
          <label for="nama" class="col-sm-3"style="margin-left: 12px;">Kelas</label> 
           <input type="text"name="kelas" id="kelas" class="form-control col-sm-8" readonly="kelas" value="<?php echo $reg['klsNow'];?>"/>
         </div> 

         <div class="form-group row"> 
          <label for="nama" class="col-sm-3"style="margin-left: 12px;">Saldo</label> 
           <input type="text"name="saldoTab" id="saldoTab" class="form-control col-sm-8" readonly="totalmargin" value="<?php echo rp($total['total']);?>"/>
         </div>
         
         

         

       </div> 
          
          <!-- /.card-body -->
          <div class="card-footer ">
            <input type="submit" name="simpanangsuran" id="simpanangsuran" 
            class="btn btn-primary"  value="Simpan" onclick='document.geElementById("myform").submit()'>
            <a href="home.php?home=<?php echo md5("tabungan");?>" id="tambah" class="btn btn-success">
              Tambah
            </a>
            <a href="home.php?home=<?php echo md5("edit_mutasitabungan");?>" class="btn btn-warning">
              Edit
            </a>
            <a href="home.php?home=<?php echo md5("delete_mutasitabungan");?>" class="btn btn-warning">
              Hapus
            </a>
            <a class="btn btn-secondary" type="button" href="faktur/cetak_faktur_angsuran.php" target="_bank">Print</a>
          </div>
          </div>
         
        </form>
         
      </div>
      <!-- /.card -->
    </div>
    <!--/.col (left) -->
  </div>
  <!-- /.row -->
</div><!-- /.container-fluid -->
</section>
<!-- /.content -->


<!-- <style>
input:out-of-range {
border:2px solid red;
}
</style> -->
<!-- <script type="text/javascript" src="jquery.js"></script>  -->
<!-- <script type="text/javascript">

$(document).ready(function(){
  $("#simpanangsuran").click(function(){
    var data       = $('#form-simpanangsuran').serialize(); 
    var rekening   = $('#rekening');
    var tgl        = $('#tgl').val()
    var pokok      = $('#pokok').val().replace(/,(?=\d{3})/g, '');
    var margin     = $('#margin').val();
    var keterangan = $('#keterangan').val();
    var bakidebet  = $('#bakidebet').val().replace(/,(?=\d{3})/g, '');
    

    if(rekening== "0"|| tgl=="0" ||  keterangan=="0"){ 
Swal.fire({
icon: 'error',
title: 'Hati-hati...',
text: 'Data masih ada yg belum diisi!',
footer: '<a href="">Anda Perlu teliti sedikit lagi?</a>'
});
    
  } else if(rekening== ""|| tgl==""|| keterangan==""){ 

    Swal.fire(
'Data Masih ada yang Kosong !',
'Mohon data dilengkapi dlu !',
'question'
);
  }else if(parseInt(pokok)>parseInt(bakidebet)){
    Swal.fire(
'Pembayaran Pokok Kelebihan !',
'Mohon dilakukan Pengurangan !',
'question'
);
             
  }else{

    $.ajax({
      type: 'POST',
      url: 'simpan/simpan_angsuran.php',
       data: data,
      success: function(data) {
       console.log(data)
       let timerInterval
       /* alert("Data Sudah Tersimpan");
      alert("Cetak Validasi?");


      window.location.href="laporan/cetak_faktur2.php" ;*/ 

       Swal.fire({
title: 'Mau Print?',
text: "Pilih Tombol Print!",
type: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',

confirmButtonText: '<a href="faktur/cetak_faktur_angsuran.php" target="_bank" class="text-white">Print</a>'  
}).then((result) => {
if (result.value) {

  /*
  Swal.fire(
    'Deleted!',
    '<a class="fa fa-print" href="laporan/cetak_faktur2.php" target="_blank">Print</a>',
    'Clik Tombol di atas'
  )*/
}
})

      

      },
      error: function(error){
        console.log(`error ${error}`)
        
       
      }
    });
  }
  });
});
</script>-->

<script type="text/javascript"> 
// untuk format koma
//https://cobangoding.com/tips-dan-trick/memberi-titik-otomatis-pada-angka-saat-menginput-dengan-javascript/#comment-757
//https://codepen.io/cobangoding/pen/QWOoLXN
$('#nominal').on('keyup',function(){
var angka = $(this).val();

var hasilAngka = formatRibuan(angka);

$(this).val(hasilAngka);
});

function formatRibuan(angka) {
var number_string = angka.replace(/[^\.\d]/g, '').toString(),
  split = number_string.split('.'),
  sisa = split[0].length % 3,
  angka_hasil = split[0].substr(0, sisa),
  ribuan = split[0].substr(sisa).match(/\d{3}/gi);

// tambahkan titik jika yang di input sudah menjadi angka ribuan
if (ribuan) {
  separator = sisa ? ',' : '';
  angka_hasil += separator + ribuan.join(',');
}

angka_hasil =
  split[1] != undefined ? angka_hasil + '.' + split[1] : angka_hasil;
return angka_hasil;
}
</script>  

</head>
</html>