@extends('layouts.app')
{{-- title --}}
@section('title','Transaksi Pembayaran')
{{-- vendor scripts --}}
@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/forms/select/select2.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/pickers/pickadate/pickadate.css')}}">
@endsection
{{-- page-styles --}}
@section('page-styles')
<link rel="stylesheet" type="text/css" href="{{asset('css/plugins/forms/validation/form-validation.css')}}">
@endsection
@section('content')

<!-- Multiple Rules Validation start -->
<section class="multiple-validation">
  <div class="row">
    <div class="col-md-12">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">Tambah @yield('title')</h4>
        </div>
        <div class="card-content">
          <div class="card-body">
            <!-- <form class="form-horizontal form-submit" action="{{ url('/keuangan/payments') }}" method="post" enctype="multipart/form-data" novalidate> -->
            <form class="form-horizontal form-submit" id="paymentForm" action="{{ url('/keuangan/payments') }}" method="post" enctype="multipart/form-data" novalidate target="_blank">

            
              @csrf
              @include('pages.keuangan.payments.form')

<div class="row">
    
  <div class="col-sm-2">
    <div class="form-group">
    <label>Nik</label>
      <div class="controls form-label-group position-relative has-icon-left">
        <input type="text" id="nik_hid" name="nik_hid" class="form-control" placeholder="NIK" readonly>
        <input type="hidden" id="petugas" autocomplete="off" name="petugas" class="form-control  @error('name') is-invalid @enderror" placeholder="Nama" required data-validation-required-message="This name field is required" value="{{isset($petugas) ? $petugas->name : old('name')}}">

        <div class="form-control-position">
        </div>
        
      </div>
    </div>
  </div>

  <div class="col-sm-3">
    <div class="form-group">

    <label>Nama</label>
      <div class="controls form-label-group position-relative has-icon-left">
        <input type="text" id="name_hid" name="name_hid" class="form-control" placeholder="Nama" readonly>        
        <input type="hidden" id="room_hid" name="room_hid" class="form-control" placeholder="Kelas" readonly>

        <div class="form-control-position">
        </div>
      </div>
    </div>
  </div>



          <div class="col-sm-2">
            <ul class="list-unstyled">
            &nbsp;
              <li>
              <i class="cursor-pointer bx bx-time mr-50"></i>Tanggal
                                <p>
                
                {{ $currentDate }}
                </p>
              </li>
            </ul>
          </div>


          <!-- Mulai Cetak Pembayaran Payment -->

          <div class="col-sm-3">
              &nbsp;
              <br>
              <button type="button" id="btnPrintPembayaran" class="btn btn-warning">
                  <i class="bx bx-printer"></i>&nbsp;Print Pembayaran
              </button>
          </div>

          <div class="col-sm-2">
              &nbsp;
              <br>
              <button type="button" id="btnPrintTagihan" class="btn btn-danger">
                  <i class="bx bx-printer"></i>&nbsp;Tagihan
              </button>
          </div>
          <!-- Akhir Cetak Pembayaran Payment -->
       


</div>



<!-- Tambahkan div untuk menampilkan isi halaman pembayaran -->
<div id="isi_halaman_pembayaran">
  <!-- Isi halaman pembayaran di sini -->
</div>













                  <div class="col-sm-12">
                    <!-- Awal Table -->


<!-- Table Bayar start -->
  <div class="card">
    <div class="card-content">
      <div class="card-body card-dashboard">
        
        <div class="table-responsive">
          <table class="table table-sm nowrap">
            <thead>
              <tr>
                  <th style="display: none;">Id</th>
                  <th class="hidden" >NIK</th>
                  <th>V-A</th>
                  <th>Name</th>
                  <th>Tagihan</th>
                  <th>Sisa Tagihan</th>
                  <th>Cicilan</th>
                  <th>Note</th>
                  <th>Status</th>
                  <th>Bayar</th>
              </tr>
            </thead>
            <tbody id="table-body-bayar"></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
<!-- Akhir Bayar Table -->

                  </div>




                </div>




            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- Multiple Rule Validation end -->

@endsection
{{-- vendor scripts --}}
@section('vendor-scripts')
<script src="{{asset('vendors/js/forms/select/select2.full.min.js')}}"></script>
<script src="{{asset('vendors/js/forms/validation/jqBootstrapValidation.js')}}"></script>
<script src="{{asset('vendors/js/pickers/pickadate/picker.js')}}"></script>
<script src="{{asset('vendors/js/pickers/pickadate/picker.date.js')}}"></script>
<script src="{{asset('vendors/js/tables/datatable/datatables.min.js')}}"></script>
<script src="{{asset('vendors/js/tables/datatable/dataTables.bootstrap4.min.js')}}"></script>
@endsection

{{-- page scripts --}}
@section('page-scripts')
<script src="https://cdn.datatables.net/fixedcolumns/3.3.2/js/dataTables.fixedColumns.min.js"></script>

<script src="{{asset('js/scripts/forms/select/form-select2.js')}}"></script>
<script src="{{asset('js/scripts/forms/validation/form-validation.js')}}"></script>



<script>
  $(document).ready(function() {

    $("#btn-modal").click(function() {

      var selectedSchool = $("#school").val();
      var selectedRoom = $("#room").val();

      if (selectedSchool === '') {
        alert("Harap Pilih Sekolah Terlebih Dahulu!");
        return false;
      }
      if (selectedRoom === '') {
        alert("Selain Sekolah, Pilih Kelas Juga!");
        return false;
      }

      $('#selectedSchool').val(selectedSchool);
      $('#selectedRoom').val(selectedRoom);  
      //Masukin ROOM KELAS KE HIDDEN
      $('#room_hid').val(selectedRoom);  

      $('#myModal').modal('show'); 
              var table = $('#table-student').DataTable();
              table.destroy();


      //Mulai Ajax Jquery Show Table
      $.ajax({
        url: '/keuangan/payments/get_students/' + selectedRoom,
        type: 'GET', 
        dataType: 'json', 
        success: function(data) {

          var studentTableBody = $("#student-table-body");

          //Kosongkan Table
          studentTableBody.empty();

          if (data.length === 0) {
            studentTableBody.append(`
                      <tr>
                        <td colspan="7" class="text-center danger"><b>Data Tidak Di Temukan!</b></td>
                      </tr>
                    `);
          } 
          // Loop melalui data siswa dan tambahkan ke tabel
          for (var i = 0; i < data.length; i++) {
            var student = data[i];
            var row = $("<tr>");
            row.append($("<td>").text(student.nik));
            row.append($("<td>").text(student.name));

            // Tambahkan tombol "Pilih" ke dalam sel (td)
            var selectButton = $("<button>").text("Pilih");
            selectButton.attr("type", "button");
            selectButton.attr("class", "btn btn-primary");
            selectButton.attr("data-nik", student.nik); // Menyimpan nilai nik siswa dalam atribut data-nik
            selectButton.attr("data-name", student.name); // Menyimpan nilai nama siswa dalam atribut data-name

            // Tambahkan fungsi klik pada tombol "Pilih"
            selectButton.click(function() {
              //var studentId = $(this).data("student-id");
              var nik = $(this).data('nik');
              var selectedName = $(this).data('name');


              $('#nik_hid').val(nik);
              $('#name_hid').val(selectedName);

              $('#myModal').modal('hide');  
              var table = $('#table-student').DataTable();
              table.destroy();

              $('#info').removeAttr('hidden');



              //AJAX TABLE 
              
            var nik_get = $("#nik_hid").val().trim(); // Trim any whitespace from the value

            // Check if 'nik' is empty before making the AJAX call
            if (nik !== '') {
              $.ajax({
                url: '/keuangan/payments/get_virtuals/' + nik_get,
                type: 'GET',
                dataType: 'json',
                success: function (data) {
                  // Assuming the 'data' variable is an array of objects containing the table data
                  const tableBody = $("#table-body-bayar");
                  tableBody.empty();

                  // If data array is empty, display the message
                  if (data.length === 0) {
                    tableBody.append(`
                      <tr>
                        <td colspan="7" class="text-center danger"><b>Tidak Ada Tagihan Untuk Siswa ini</b></td>
                      </tr>
                    `);
                  } 
                  else {
                        function isNumeric(value) {
                          return !isNaN(parseFloat(value)) && isFinite(value);
                        }

                        function formatCurrency(amount) {
                        // Pastikan amount adalah angka
                        if (isNaN(amount) || amount === null) {
                          return '';
                        }

                        // Format angka menjadi mata uang
                        const formatter = new Intl.NumberFormat('id-ID', {
                          style: 'currency',
                          currency: 'IDR', // Ganti dengan kode mata uang yang sesuai jika tidak menggunakan Rupiah
                          minimumFractionDigits: 0,
                          maximumFractionDigits: 2,
                        });

                        return formatter.format(amount);
                      }

//TABLE PEMBAYARAN
                            data.forEach((item) => {
                              
                                const formattedTransaction = formatCurrency(item.transaction);
                                const jumlahPay = isNumeric(item.jumlah_pay) ? item.jumlah_pay : 'Invalid Value';
                                const total = isNumeric(item.jumlah_pay) && isNumeric(item.transaction) ? item.transaction - item.jumlah_pay : 'Invalid Value';

                                const row = $("<tr>");
                                row.html(`
                                  <td style="display: none;">${item.id}</td>
                                  <td style="display: none;">${item.nik}</td>
                                  <td>${item.no_virtual}</td>
                                  <td>${item.name_student}</td>
                                  <td data-id="${item.id}" data-transaction="${formattedTransaction}">${formattedTransaction}</td>
                                  <td>
                                    <span class="total" data-id="${item.id}">${total}</span>
                                  </td>

                                  <td>
                                    <span class="edit-jumlah-pay" data-id="${item.id}">${jumlahPay}</span>
                                  </td>

                                  <td>${item.note}</td>

                                  <td>
                                    <span class="status_payment" data-id="${item.id}">${item.status_payment}</span>
                                  </td>

                                  <td>
                                    <button type="button" class="btn btn-secondary" onclick="bayarLunas(${item.id})">Bayar Lunas</button>
                                  </td>                            
                                `);
                                
                                tableBody.append(row);
                            });
                            


                            

                          
                            //AKHIR EDIT JUMLAH PAYMENT CICILAN




                  } //else
                },
                error: function (xhr, status, error) {
                  console.error("Error fetching data:", error);
                }
              });
            } else {
              console.log("nik_hid is empty. Not making the AJAX call.");
            }
            function formatCurrency(amount) {
              return "Rp. " + amount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
            }

                        //Mulai Untuk Calculate Jumlah Yang Harus Di Bayarkan
                         const editedJumlahPay = {};

                        function updateJumlahPayValue(id, newValue) {
                          editedJumlahPay[id] = newValue;
                        }

                        function calculateTotalJumlahPay() {
                          let totalJumlahPay = 0;
                          for (const id in editedJumlahPay) {
                            totalJumlahPay += parseInt(editedJumlahPay[id]) || 0;
                          }
                          return totalJumlahPay;
                        }
                        //Akhir Calculate Jumlah Yang Harus Di Bayarkan

              //ENDING AJAX TABLE

            });

            // Tambahkan tombol "Pilih" ke dalam sel (td)
            row.append($("<td>").append(selectButton));

            // Tambahkan baris ke tabel
            studentTableBody.append(row);
          } 

          // Tampilkan modal setelah mengisi tabel dengan data siswa
          $('#myModal').modal('show');

          var myTable = $("#table-student").DataTable({});
          myTable.responsive.recalc();

        },
        error: function(xhr, status, error) {
          // Tampilkan pesan kesalahan jika ada masalah dengan panggilan AJAX
          console.error('Error:', error);
        }
      });
            //Akir Ajax Jquery Show Table

    });
  });
</script>


<script>
  // Function to generate a formatted invoice number
  function generateInvoiceNumber() {
    const today = new Date();
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, '0');
    const date = String(today.getDate()).padStart(2, '0');
    const existingInvoiceNumber = document.getElementById('no_faktur').value;
    const nextNumber = existingInvoiceNumber + 1;
    const invoiceNumber = `PAY/${date}/${month}/${year}/${nextNumber}`;
    return invoiceNumber;
  }

  // Fill the formatted invoice number into the input field
  document.addEventListener('DOMContentLoaded', function() {
    const invoiceNumber = generateInvoiceNumber();
    document.getElementById('no_faktur').value = invoiceNumber;
  });
</script>


<!-- START SCRIPT FOR BAYAR LUNAS -->
<script>
        function bayarLunas(id) {
            // Tampilkan peringatan sebelum pembayaran lunas
            if (confirm("Apakah Anda yakin ingin melakukan pembayaran lunas?")) {
                // Buat permintaan AJAX
                var transactionElement = $(`td[data-id="${id}"][data-transaction]`);
                var transactionValue = transactionElement.data("transaction");
                var angkaPay = transactionValue.replace("Rp", "").replace(/\./g, "");

                const petugas = $("#petugas").val();

                $.ajax({
                    url: '/keuangan/payments/virtual_payments/' + id,
                    // Ganti dengan URL yang sesuai
                    method: 'PATCH',
                    data: {
                      id: id,
                      angkaPay: angkaPay,
                      petugas: petugas,
                    },
                    headers: {
                      "X-CSRF-TOKEN": $("meta[name='csrf-token']").attr("content"),
                    },
                    success: function(response) {
                        // Tindakan setelah pembayaran lunas berhasil
                        alert("Pembayaran lunas berhasil!");
                        $(`td[data-id="${id}"]`).closest('tr').remove();

                    },
                    error: function(xhr, status, error) {
                        // Tindakan jika terjadi kesalahan
                        alert("Terjadi kesalahan saat melakukan pembayaran: " + error);
                    }
                });
            }
        }
    </script>



<!-- START SCRIPT UNTUK EDIT JUMLAH PEMBAYARAN CICILAN -->
<script>
  //START EDIT JUMLAH PAYMENT CICILAN
  $("#table-body-bayar").on("dblclick", ".edit-jumlah-pay", function () {
  const id = $(this).data("id");
  const oldValue = $(this).text();

  // Create an input field and set its value to the current 'jumlah_pay'
  const inputField = $("<input type='number'>");
  inputField.val(oldValue);

  // Create a warning message element
  const warningMessage = $("<span class='warning-message' style='color: red;'>Jumlah melebihi dari jumlah transaksi</span>");
  warningMessage.hide();

  // Append the warning message after the input field
  inputField.after(warningMessage);

  // Store the current input field for later use
  const oldInputField = $(this);

  // Display a confirmation prompt
  const confirmation = window.confirm("Apakah Anda yakin ingin mengedit jumlah pembayaran?");

  // If the user clicks "Cancel," do not proceed with editing
  if (!confirmation) {
    // Restore the span
    oldInputField.replaceWith("<span class='edit-jumlah-pay' data-id='" + id + "' data-old-value='" + oldValue + "'>" + oldValue + "</span>");
    return;
  }

  // Replace the span with the input field
  oldInputField.replaceWith(inputField);

  // Focus on the input field to enable editing (after a small delay)
  setTimeout(function () {
    inputField.focus();
  }, 10); // You can adjust the delay time as needed

  inputField.on("input", function () {
    let newValue = $(this).val();

    // Remove any non-numeric characters and the decimal point using regular expression
    newValue = newValue.replace(/[^\d]/g, "");
    $(this).val(newValue);

    // Get the corresponding transaction amount from the table
    const transactionValue = parseInt($(this).closest("tr").find("td:eq(4)").text().replace(/\D/g, ""));

    // Show the warning message if the new value exceeds the transaction amount
    if (newValue > transactionValue) {
      warningMessage.show();
    } else {
      warningMessage.hide();
    }
  });

  inputField.on("blur keypress", function (event) {
    if (event.type === "blur" || event.which === 13) {
      // Get the new value from the input field
      let newValue = parseInt($(this).val());

      // Get the corresponding transaction amount from the table
      const transactionValue = parseInt($(this).closest("tr").find("td:eq(4)").text().replace(/\D/g, ""));

      // Check if the new value is valid (not exceeding the transaction amount)
      if (isNaN(newValue) || newValue < 0 || newValue > transactionValue) {
        // Display an error message
        alert("Mohon Maaf Jumlah Pembayaran Anda Melebihi Dari Jumlah Transaksi");
        // Set the value to 0 if it's an invalid value
        newValue = 0;
      }
      else{

          // Ubah Data Edit Jumlah Pay
          const newSpan = $("<span class='edit-jumlah-pay' data-id='" + id + "' data-old-value='" + newValue + "'>" + newValue + "</span>");
          $(this).replaceWith(newSpan);
          const petugas = $("#petugas").val();

          //SEND AJAK PATCH POST
          $.ajax({
            method: "PATCH",
            url: '/keuangan/payments/virtual_loans/' + id,
            data: {
              id: id,
              newValue: newValue,
              petugas: petugas,
            },
            headers: {
              "X-CSRF-TOKEN": $("meta[name='csrf-token']").attr("content"),
            },
            success: function (response) {

              $(`td[data-id="${id}"]`).closest('tr').remove();
              alert("Cicilan Sudah Masuk, Silahkan Print Out Data!");


        
          },
            error: function (xhr, status, error) {
              alert("Gagal memperbarui jumlah pembayaran. Silakan coba lagi.");
            },
          }); //Akhir Ajax
          
      }//akhir if else jika bayar melebihi jumlah bayar
    }
  });
});

</script>


<!-- AWAL SCRIPT PRINT -->
<script>
  // Fungsi untuk mencetak pembayaran berdasarkan NIK
  document.getElementById('btnPrintPembayaran').addEventListener('click', function() {
    // Ambil data NIK, petugas, dan name_student dari input
    var nik = document.getElementById('nik_hid').value;
    var petugas = document.getElementById('petugas').value;
    var name_student = document.getElementById('name_hid').value;
    var room = document.getElementById('room_hid').value;

    // Lakukan permintaan AJAX berdasarkan NIK menggunakan $.ajax
    $.ajax({
      url: '/keuangan/payments/print_virtuals/' + nik,
      type: 'GET',
      success: function(data) {
        // Setelah data diterima dari server, cetak halaman pembayaran
        printElement('isi_halaman_pembayaran', data, petugas, name_student,room);
      },
      error: function(xhr, status, error) {
        console.error('Terjadi kesalahan:', error);
      }
    });
  });

  var totalTagihan = 0;
var totalPembayaran = 0;

  // Fungsi untuk mencetak elemen berdasarkan ID, data, dan informasi lainnya yang diterima
  function printElement(elementId, data, petugas, name_student, room) {
    var content = document.getElementById(elementId).innerHTML;
    var myWindow = window.open('', '_blank');
    myWindow.document.write('<center>');
    myWindow.document.write('<html><head><title>Cetak</title></head><body>');
    myWindow.document.write('<h2>YAYASAN DARUL FATTAH LAMPUNG <br> SEKOLAH SMP- SMA QURAN DARUL FATTAH</h2>');
    myWindow.document.write('<p>Jl. Kopi No.23 A, Gedong Meneng, Kec. Rajabasa, Kota Bandar Lampung, Lampung 35141</p>');
    myWindow.document.write('<br>');
    myWindow.document.write('<h4>BUKTI PEMBAYARAN</h4>');
    myWindow.document.write('</center>');

    myWindow.document.write('<hr>');
    myWindow.document.write('<hr style="border-top: 2px solid black;">');

    myWindow.document.write('<br>');

    // Tambahkan tag <p>Kelas: ...</p> sesuai kebutuhan

    // Tambahkan struktur tabel // Add CSS for table styling
    myWindow.document.write('<style>');
  //myWindow.document.write('body { text-align: center; }');
  myWindow.document.write('.table { width: 100%; border-collapse: collapse; margin: 20px auto; }');
  myWindow.document.write('.table th, .table td { padding: 8px; border: 1px solid #000; }');
  myWindow.document.write('.container { width: 80%; margin: 0 auto; }');

  myWindow.document.write('</style>');  
  myWindow.document.write('<style>#nama { float: left; }</style>');
  myWindow.document.write('<style>#kelas { float: left; }</style>');
  myWindow.document.write('<style>#total { float: right; }</style>');

  myWindow.document.write('<style>#petugas { text-align: right; }</style>');

  myWindow.document.write('<div class="container">');
  myWindow.document.write('<tr>');
myWindow.document.write('<td colspan="2">Nama: ' + name_student + '</td>');
  myWindow.document.write('<br>');
myWindow.document.write('<td colspan="2">Kelas: ' + room + '</td>');
myWindow.document.write('</tr>');


  myWindow.document.write('<table class="table">');
  myWindow.document.write('<thead>');
  myWindow.document.write('<tr>');
  myWindow.document.write('<th>No Va</th>');
  myWindow.document.write('<th>Bulan</th>');
  myWindow.document.write('<th>Jumlah Tagihan</th>');
  myWindow.document.write('<th>Keterangan</th>');
  myWindow.document.write('<th>Pembayaran</th>');
  myWindow.document.write('</tr>');
  myWindow.document.write('</thead>');
  myWindow.document.write('<tbody>');

  function formatIDR(amount) {
  return 'Rp. ' + amount.toLocaleString('id-ID');
}

  // Tambahkan baris data tabel// Tambahkan semua baris data tabel
  data.forEach(function(item) {
  myWindow.document.write('<tr>');
  myWindow.document.write('<td>' + item.no_virtual + '</td>');
  myWindow.document.write('<td>' + item.month + '</td>');
  myWindow.document.write('<td style="text-align: right;">' + formatIDR(item.transaction) + '</td>');
  myWindow.document.write('<td style="text-align: center;">' + item.note + '</td>');
  myWindow.document.write('<td style="text-align: right;">' + formatIDR(item.jumlah_pay) + '</td>');
  myWindow.document.write('</tr>');

  // Hitung total tagihan dan pembayaran
  totalTagihan += parseFloat(item.transaction);
  totalPembayaran += parseFloat(item.jumlah_pay);
});


  // Tutup struktur tabel
  myWindow.document.write('</tbody>');
  myWindow.document.write('</table>');

  // Tambahkan baris total
  myWindow.document.write('<p id="total">Total : ' + formatIDR(totalPembayaran) + '</p>');


    myWindow.document.write('</body></html>');
    myWindow.document.write('<br>');
    myWindow.document.write('<br>');
    myWindow.document.write('<br>');
    myWindow.document.write('<br>');
    myWindow.document.write('<br>');

    myWindow.document.write('<p id="petugas">Petugas: ' + petugas + '</p>');
    myWindow.document.write('</div>');

    myWindow.document.close();
    myWindow.print();
  }
</script>


@endsection