@extends('layouts.app')
{{-- page title --}}
@section('title','Pemasukan')

{{-- vendor styles --}}
@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/tables/datatable/datatables.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/extensions/toastr.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/pickers/pickadate/pickadate.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/forms/select/select2.min.css')}}">

@endsection
{{-- page styles --}}
@section('page-styles')
<link rel="stylesheet" type="text/css" href="{{asset('css/plugins/extensions/toastr.css')}}">
@endsection

@section('content')

<style>
  .DTFC_Cloned thead {
    background: white;
  }

  .DTFC_Cloned tbody {
    background: white;
  }

</style>
<!-- Pengguna start -->
<section id="basic-datatable">
  <div class="card">
    <div class="card-content">
      <div class="card-body card-dashboard">

      <h3>Data Pemasukan</h3>

<div class="row">

      <div class="col-12 col-sm-2 col-lg-2">
        <div class="form-group">
          <label>Rentang Waktu</label>
          <fieldset class="form-group position-relative has-icon-left mb-0">
              <input type="text" id="start_date" name="start_date" class="form-control pickadate filter-change" placeholder="Dari Tanggal" value="">
            <div class="form-control-position">
              <i class='bx bx-calendar'></i>
            </div>
          </fieldset>
      </div>
    </div>
    
    <div class="col-12 col-sm-2 col-lg-2">
      <div class="form-group">
        <label></br></label>
        <fieldset class="form-group position-relative has-icon-left mb-0">
          <input type="text" id="end_date" name="end_date" class="form-control pickadate filter-change" placeholder="Sampai Tanggal" value="">
          <div class="form-control-position">
            <i class='bx bx-calendar'></i>
          </div>
        </fieldset>
      </div>
    </div>

    <div class="col-12 col-sm-2 col-lg-2">  
      <label></br></label>
              <br>
              <button type="button" id="btn-cari" class="btn btn-secondary">
              <i class="bx bx-send"></i> Cari 
      </button>
    </div>

        <div class="col-12 col-sm-3 col-lg-3">
                <label></br></label>
                <br>
                <span class="hidden" id="rekap">
                  <a href="{{ url('/keuangan/incomes/rekap/export') }}" id="export-link" class="btn btn-danger">
                    <i class="bx bx-download"></i> Export Rekap
                  </a>
                </span>
        </div>
        
        <div class="col-12 col-sm-3 col-lg-3">
                <label></br></label>
                <br>
                <span class="hidden" id="detail">
                  <a href="{{ url('/keuangan/incomes/detail/export') }}" id="export-detail-link" class="btn btn-warning">
                    <i class="bx bx-download"></i> Export Detail
                  </a>
                </span>
        </div>



        <div class="col-sm-4">
            <div class="form-group">
              <label>Jenis Pembayaran</label>
              <div class="controls form-label-group position-relative has-icon-left">
                <select id="jenis_payment" name="jenis_payment" class="select2 form-control @error('jenis_payment') is-invalid @enderror" required data-validation-required-message="This Jenis Pembayaran field is required">
                  <option value=""> Pilih Jenis Pembayaran</option>
                </select>
              </div>
            </div>
        </div>


        <div class="col-sm-4">
          <div class="form-group">
            <label>Pilih Sekolah</label>
            <div class="controls form-label-group position-relative has-icon-left">
              <select id="school" name="school" autocomplete="off" class="select2 form-control @error('id_school') is-invalid @enderror" required data-validation-required-message="This Sekolah field is required">
                <option value="">Pilih Sekolah</option>
              </select>
            </div>
          </div>
        </div>


        <div class="col-12 col-sm-3 col-lg-3">
                <label></br></label>
                <br>
                <span class="hidden" id="unit">
                  <a href="{{ url('/keuangan/incomes/data/unit/export') }}" class="btn btn-primary" id="export-unit">
                    <i class="bx bx-download"></i> Export Data Per Unit     
                  </a>
                </span>
        </div>




</div> 
<!-- Akhir DIV ROW -->




        <div class="table-responsive">
          <table id="incomeTable" class="table table-sm table-ssr nowrap">
            <tfoot style="display: table-row-group">
              <th>Id</th>
              <th>Tanggal</th>
              <th>NIK</th>
              <th>Nama</th>
              <th>Kas</th>
              <th>Jumlah Transaksi</th>
              <th>Note</th>
            </tfoot>
           
            <tbody></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>


  <!-- Modal Import Data -->

  <div class="modal fade text-left" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel160" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
      <div class="modal-content">
        <div class="modal-header bg-primary">
          <h5 class="modal-title white" id="myModalLabel160">Import Data Virtual Account</h5>
          <button type="button" class="close btn-close" data-dismiss="modal" aria-label="Close">
            <i class="bx bx-x"></i>
          </button>
        </div>
        <div class="modal-body">
          <form method="post" id="form" enctype="multipart/form-data">

            <div class="custom-file">
              <input type="file" name="file" class="custom-file-input" id="fileExcel">
              <label class="custom-file-label" for="fileExcel">Unggah Dokumen Excel</label>
            </div>

            <div class="text-center mt-1" id="spinner" style="display: none">
              <div class="spinner-border spinner-border-lg text-primary" role="status">
                <span class="sr-only"> ...</span>
              </div>
            </div>

            <div class="progress progress-bar-primary mt-1" id="progress" style="height: 15px; display: none">
              <div class="progress-bar progress-bar-striped progress-bar-animated" id="progressbar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%;">0%</div>
            </div>

          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-sm btn-light-secondary mr-auto btn-close" data-dismiss="modal">
            <i class="bx bx-x d-block d-sm-none"></i>
            <span class="d-none d-sm-block">Batal</span>
          </button>
          <a href="{{ url('/keuangan/virtuals/va/download-template') }}" id="btnDownload" class="btn btn-sm btn-success">
            Unduh Template
          </a>
          <button class="btn btn-sm btn-danger ml-1" id="btnUpload" type="button">
            <span id="spanUpload">Unggah</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</section>
  <!-- Akhir Modal Import Data -->

@endsection

{{-- vendor scripts --}}
@section('vendor-scripts')
<script src="{{asset('vendors/js/extensions/sweetalert2.all.min.js')}}"></script>
<script src="{{asset('vendors/js/extensions/toastr.min.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>

<script src="{{asset('vendors/js/forms/select/select2.full.min.js')}}"></script>

<script src="{{asset('vendors/js/pickers/pickadate/picker.js')}}"></script>
<script src="{{asset('vendors/js/pickers/pickadate/picker.date.js')}}"></script>
@endsection

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

<script>
  @if (Session::get('status') == 200)
    $(document).ready(function(){
      toastr.success('Data has been saved', 'Success', { "progressBar": true, "showDuration": 500, "closeButton": true })
    });
  @endif


  // Confirmation Delete
  $(document).on('click', '.btn-delete', function (e) {
    e.preventDefault();

    const params = {
      "url": "{{ url('/keuangan/virtuals/') }}",
      "id": $(this).attr('data-id'),
      "tr": $(this).parent("td").parent('tr')
    }

    confirmDelete(params)
  })

</script>

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

    $('.pickadate').pickadate({
        format: 'yyyy-mm-dd',
        selectYears: true,
        selectMonths: true
      });


    $('#school').select2({
      data: @php echo json_encode($school) @endphp,
      placeholder: 'Pilih Sekolah'
    });


    $('#jenis_payment').select2({
      data: @php echo json_encode($jenis_payment) @endphp,
      placeholder: 'Pilih Jenis Pembayaran'
    });

});
</script>


<script>
document.addEventListener("DOMContentLoaded", function() {
  const startDateInput = document.getElementById("start_date");
  const endDateInput = document.getElementById("end_date");
  const cariButton = document.getElementById("btn-cari");
  const rekapButton = document.getElementById("rekap");
  const detailButton = document.getElementById("detail");
  const unitButton = document.getElementById("unit");

  let table = null; 


  // Inisialisasi DataTable pertama kali
  table = $('#incomeTable').DataTable({
    data: [], // Data awal kosong
    columns: [
      { data: "id", visible: false },
      { 
        data: "date_transaction", 
       
      },
      { data: "nik" },
      { data: "name_student" },
      { data: "kas_code" },

      { 
        data: "jumlah_pay", 
        render: function(data, type, row) {
          return `Rp. ${data.toLocaleString('id-ID')}`;
        },
        className: "text-center" // Menggunakan Bootstrap class 'text-right' untuk rata kanan
      },

      { data: "note" }
    ],
    order: [[1, 'ASC']], 
  });

  cariButton.addEventListener("click", function() {
    const startDateValue = startDateInput.value;
    const endDateValue = endDateInput.value;

    document.getElementById('school').classList.remove('hidden');
    document.getElementById('jenis_payment').classList.remove('hidden');

    if (startDateValue === "" || endDateValue === "") {
      alert("Rentang tanggal tidak boleh kosong");
      return;
    }

    const searchURL = `/keuangan/incomes/data/search?start_date=${startDateValue}&end_date=${endDateValue}`;

    fetch(searchURL)
      .then(response => response.json())
      .then(data => {
        // Hapus data tabel sebelum memasukkan data baru
        table.clear().rows.add(data).draw();
      })
      .catch(error => {
        console.error("Error:", error);
      });

    // Tampilkan tombol rekap setelah pencarian
    rekapButton.classList.remove("hidden");
    unitButton.classList.remove("hidden");
    detailButton.classList.remove("hidden");
    pilihDataElement.classList.remove("hidden");

    

  });
});

</script>



<!-- SENDING DATA TO EXCELL -->
<script>
    // Data Tanggal
    const startDateInput = document.getElementById('start_date');
    const endDateInput = document.getElementById('end_date');

    // Data Jenis dan Unit
    const JenisInput = document.getElementById('jenis_payment');
    const UnitInput = document.getElementById('school');

    //Tombol BTN- Export Rekap dan Link
    const exportLink = document.getElementById('export-link');
    const exportDetailLink = document.getElementById('export-detail-link');
    const exportJenisUnitLink = document.getElementById('export-unit');

    // Attach a click event listener to the export link
    function handleExportClick(event, exportType) {
    event.preventDefault();

    const startDate = startDateInput.value;
    const endDate = endDateInput.value;

    const jenisIncome = JenisInput.value;
    const unitIncome = UnitInput.value;    


    // Check if jenisIncome and unitIncome are empty
    if (exportType === 'unit' && (jenisIncome === '' || unitIncome === '')) {

            alert('Jenis Pembayaran dan Sekolah harus terisi sebelum melakukan export Data Per Unit !!');
            return;
    }

    let url;
    if (exportType === 'rekap') {
        url = '{{ url('/keuangan/incomes/rekap/export') }}';
    } else if (exportType === 'detail') {
        url = '{{ url('/keuangan/incomes/detail/export') }}';
    } else if (exportType === 'unit') {
            url = '{{ url('/keuangan/incomes/data/unit/export') }}';

            // Construct the fullUrl with jenis_payment and school for 'unit' export
            const fullUrl = `${url}?start_date=${startDate}&end_date=${endDate}&jenis_payment=${jenisIncome}&school=${unitIncome}`;
            window.location.href = fullUrl;
            return; // Exit the function here to prevent further execution
    }

    const fullUrl = `${url}?start_date=${startDate}&end_date=${endDate}`;
    window.location.href = fullUrl;
    }

    exportLink.addEventListener('click', function (event) {
        handleExportClick(event, 'rekap');
    });

    exportDetailLink.addEventListener('click', function (event) {
        handleExportClick(event, 'detail');
    });

    exportJenisUnitLink.addEventListener('click', function (event) {
        handleExportClick(event, 'unit');
    });


</script>


@endsection