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

{{-- 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 Kehadiran Pegawai</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-2 col-lg-2">
                <label></br></label>
                <br>
                <span class="hidden" id="rekap">
                  <a href="{{ url('/kepegawaian/kehadirans/rekap/export') }}" id="export-link" class="btn btn-danger">
                    <i class="bx bx-download"></i> Rekap
                  </a>
                </span>
        </div>
        
        <div class="col-12 col-sm-2 col-lg-2">
                <label></br></label>
                <br>
                <span class="hidden" id="detail">
                  <a href="{{ url('/kepegawaian/kehadirans/detail/export') }}" id="export-detail-link" class="btn btn-warning">
                    <i class="bx bx-download"></i> Detail
                  </a>
                </span>
        </div>

        <div class="col-12 col-sm-2 col-lg-2">
                <label></br></label>
                <br>
                <span class="hidden" id="mutabaah">
                  <a href="{{ url('/kepegawaian/kehadirans/mutabaah/export') }}" id="export-mutabaah-link" class="btn btn-success">
                    <i class="bx bx-download"></i> Mutabaah
                  </a>
                </span>
        </div>






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




        <div class="table-responsive">
          <table id="kehadiranTable" class="table table-sm table-ssr nowrap">
            <tfoot style="display: table-row-group">
              <th>Id</th>
              <th>Tanggal</th>
              <th>NIK</th>
              <th>NIP</th>
              <th>Nama</th>
              <th>Lokasi</th>
              <th>Jarak</th>
              <th>Hadir</th>
              <th>Datang</th>
              <th>In</th>
              <th>Out</th>
              <th>Pulang</th>
              <th>Kembali</th>
              <th>Detail</th>
              <th>Note</th>
            </tfoot>
           
            <tbody></tbody>
          </table>
        </div>
      </div>
    </div>
  </div>



 <!-- Start Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Detail Data : <span id="modalName"></span></h4>

                <tr>
                  <td><span class="hidden" id="modalDataID"></span></td>
                </tr>

        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-md-6">
            <table class="table table-bordered">

              <div class="col-sm-12 text-center">
                <h6>Jam Mapel</h6>
              </div>

              <tbody>
                <tr>
                  <th>Jam SD:</th>
                  <td><span id="modalJamSD"></span></td>
                </tr>
                <tr>
                  <th>Jam SMP:</th>
                  <td><span id="modalJamSMP"></span></td>
                </tr>
                <tr>
                  <th>Jam SMA:</th>
                  <td><span id="modalJamSMA"></span></td>
                </tr>

              </tbody>
            </table>
          </div>
          <div class="col-md-6">
            <table class="table table-bordered">

              <div class="col-sm-12 text-center">
                <h6>Jam Halaqah</h6>
              </div>

              <tbody>
                <tr>
                  <th>HQ SD:</th>
                  <td><span id="modalHQSD"></span></td>
                </tr>
                <tr>
                  <th>HQ SMP:</th>
                  <td><span id="modalHQSMP"></span></td>
                </tr>
                <tr>
                  <th>HQ SMA:</th>
                  <td><span id="modalHQSMA"></span></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div class="row">
          <div class="col-md-12">
            <table class="table table-bordered">
              <tbody>

              <p id="kajianRow" style="display: none;">
                <strong>Kajian:</strong> <span id="modalKajian"></span>
              </p>

              <!-- Add the Materi row (initially hidden) -->
              <p id="materiRow" style="display: none;">
                <strong>Materi:</strong> <span id="modalMateri"></span>
              </p>


              </tbody>
            </table>
          </div>
        </div>


      <span id="mutabahtable">
        <div class="row">
          <div class="col-md-6">
            <table class="table table-bordered">

              <div class="col-sm-12 text-center">
                <h6>Mutabaah Sholat</h6>
              </div>

              <tbody>
                <tr>
                  <th>Jamaah :</th>
                  <td><span id="modalJamaah"></span></td>
                </tr>
                <tr>
                  <th>Duha :</th>
                  <td><span id="modalDuha"></span></td>
                </tr>
                <tr>
                  <th>Tahajud :</th>
                  <td><span id="modalTahajud"></span></td>
                </tr>

                <tr>
                  <th>Witir :</th>
                  <td><span id="modalWitir"></span></td>
                </tr>


              </tbody>
            </table>
          </div>
          <div class="col-md-6">
            <table class="table table-bordered">

              <div class="col-sm-12 text-center">
                <h6>Mutabaah Quran</h6>
              </div>

              <tbody>

                <tr>
                  <th>Istigfar :</th>
                  <td><span id="modalIstigfar"></span></td>
                </tr>
                <tr>
                  <th>Tilawah :</th>
                  <td><span id="modalTilawah"></span></td>
                </tr>
                <tr>
                  <th>Halaqah :</th>
                  <td><span id="modalHalaqah"></span></td>
                </tr>
                <tr>
                  <th>Doa :</th>
                  <td><span id="modalDoa"></span></td>
                </tr>
              </tbody>

              
              
            </table>
          </div>
        </div>
        <!-- Table Mutabaah -->


        <div class="row">
          <div class="col-md-12">
            <table class="table table-bordered">
              <tbody>

              <p id="akumulasi">
              <strong>Akumulasi:</strong> <span id="modalAkumulasi"></span>
              </p>

              <p id="alasan" >
              <strong>Materi:</strong> <span id="modalAlasanmutabaah"></span>
              </p>


              </tbody>
            </table>
          </div>
        </div>

      </span>
      <!-- AKHIR SPAN TABLE MUTABAAH -->



      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Tutup</button>
      </div>
    </div>
  </div>
</div>
<!-- Akhir Modal -->


@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('/kepegawaian/kehadirans/') }}",
      "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
      });



});
</script>


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


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

    
  const rekapButton = document.getElementById("rekap");
  const detailButton = document.getElementById("detail");
  const mutabaahButton = document.getElementById("mutabaah");

  let table = null; 


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

      {
        data: "day", // Nama kolom dengan tanggal
        render: function (data, type, row) {
          if (type === "display") {
            // Mengurai tanggal
            var dateParts = data.split('-'); 
            var year = dateParts[0];
            var month = dateParts[1];
            var day = dateParts[2];

            var dateObj = new Date(year, month - 1, day); 

            var daysOfWeek = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"];
            var dayOfWeek = daysOfWeek[dateObj.getDay()];

            // Membentuk tanggal dalam format "D-M-YYYY"
            var formattedDate = dayOfWeek + ', ' + day + '-' + month + '-' + year;

            return formattedDate;
          }
          return data; 
        }
      },

      { data: "nik" },
      { data: "nip" },
      { data: "name" },
      { data: "location" },
      // Kolom "distance" dengan teks "meter"
      { 
        data: "distance", // Nama kolom dengan nilai jarak
        render: function (data, type, row) {
          if (type === "display") {
            // Menampilkan nilai jarak dengan teks "meter" setelahnya
            return data + ' Meter';
          }
          return data; // Data asli untuk jenis lain (sorting, dll.)
        }
      },
      { data: "come" },
      { data: "status_come" },
      
      //FOTO DATANG
      { 
        data: "in", // Nama kolom dengan data base64
        render: function (data, type, row) {
          if (type === "display") {
            var imageLink = '<a href="' + data + '" target="_blank"><img src="' + data + '" width="100" height="100" style="border-radius: 20%;" /></a>';
            return imageLink;
          }
          return data; // Data asli untuk jenis lain (sorting, dll.)
        }
      },

      //FOTO PULANG
      { 
        data: "out", // Nama kolom dengan data base64
        render: function (data, type, row) {
          if (type === "display") {
            var imageLink = '<a href="' + data + '" target="_blank"><img src="' + data + '" width="100" height="100" style="border-radius: 20%;" /></a>';
            return imageLink;
          }
          return data; // Data asli untuk jenis lain (sorting, dll.)
        }
      },    
      { data: "back" },  
      { data: "status_back" },

      {
        data: "id",
        render: function (data, type, row) {
          if (type === "display") {
            var button = '<button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-id="' + row.id + '" data-name="' + row.name + '" data-jam-sd="' + row.jam_sd + '" data-jam-smp="' + row.jam_smp + '" data-jam-sma="' + row.jam_sma + '" data-hq-sd="' + row.hq_sd + '" data-hq-smp="' + row.hq_smp + '" data-hq-sma="' + row.hq_sma + '" data-kajian="' + row.kajian + '" data-materi="' + row.materi + '" data-day="' + row.day + '" data-jamaah="' + row.jamaah + '" data-duha="' + row.duha + '" data-tahajud="' + row.tahajud + '" data-witir="' + row.witir + '" data-istigfar="' + row.istigfar + '" data-tilawah="' + row.tilawah + '" data-halaqah="' + row.halaqah + '" data-doa="' + row.doa + '" data-akumulasi="' + row.akumulasi + '" data-alasanmutabaah="' + row.alasanmutabaah + '" ><i class="bx bx-detail"></i></button>';
            return button;
          }

          return data; // Data asli untuk jenis lain (sorting, dll.)
        }
      },


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

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


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

    const searchURL = `/kepegawaian/kehadirans/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");
    detailButton.classList.remove("hidden");
    mutabaahButton.classList.remove("hidden");



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

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

    exportMutabaahLink.addEventListener('click', function (event) {
        handleExportClick(event, 'mutabaah');
    });


  });
});

</script>



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

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

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

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

    const rekapHadir = exportLink.value;
    const detailHadir = exportDetailLink.value; 
    const mutabaahHadir = exportMutabaahLink.value;   



    let url;
    if (exportType === 'rekap') {
        url = '{{ url('/kepegawaian/kehadirans/rekap/export') }}';
    } else if (exportType === 'detail') {
        url = '{{ url('/kepegawaian/kehadirans/detail/export') }}';
    } else if (exportType === 'mutabaah') {
        url = '{{ url('/kepegawaian/kehadirans/mutabaah/export') }}';
    }
         

      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');
    });

    exportMutabaahLink.addEventListener('click', function (event) {
        handleExportClick(event, 'mutabaah');
    });



</script>
<script>
  $(document).on("click", "[data-toggle=modal]", function () {

    var dataID = $(this).data("id");
    var name = $(this).data("name");
    var jamSD = $(this).data("jam-sd");
    var jamSMP = $(this).data("jam-smp");
    var jamSMA = $(this).data("jam-sma");
    var hqSD = $(this).data("hq-sd");
    var hqSMP = $(this).data("hq-smp");
    var hqSMA = $(this).data("hq-sma");
    var kajian = $(this).data("kajian");
    var materi = $(this).data("materi");
    var tanggal = $(this).data("day"); 

    var day = new Date(tanggal).toLocaleDateString('en-US', { weekday: 'long' });

    var jamaah = $(this).data("jamaah"); 
    var duha = $(this).data("duha"); 
    var tahajud = $(this).data("tahajud"); 
    var witir = $(this).data("witir"); 
    var istigfar = $(this).data("istigfar"); 
    var tilawah = $(this).data("tilawah"); 
    var halaqah = $(this).data("halaqah"); 
    var doa = $(this).data("doa"); 
    var akumulasi = $(this).data("akumulasi"); 
    var alasanmutabaah = $(this).data("alasanmutabaah"); 

    $("#modalDataID").text(dataID);
    $("#modalName").text(name);
    $("#modalJamSD").text(jamSD);
    $("#modalJamSMP").text(jamSMP);
    $("#modalJamSMA").text(jamSMA);
    $("#modalHQSD").text(hqSD);
    $("#modalHQSMP").text(hqSMP);
    $("#modalHQSMA").text(hqSMA);
    
    //Kajian
    $("#modalKajian").text(kajian);
    $("#modalMateri").text(materi);

    //Mutabaah
    $("#modalJamaah").text(jamaah);
    $("#modalDuha").text(duha);
    $("#modalTahajud").text(tahajud);
    $("#modalWitir").text(witir);
    $("#modalIstigfar").text(istigfar);
    $("#modalTilawah").text(tilawah);
    $("#modalHalaqah").text(halaqah);
    $("#modalDoa").text(doa);
    $("#modalAkumulasi").text(akumulasi);
    $("#modalAlasanmutabaah").text(alasanmutabaah);


    if (day === "Thursday") {
      $("#kajianRow").show();
      $("#materiRow").show();
    } else {
      $("#kajianRow").hide();
      $("#materiRow").hide();
    }


    
    if (day === "Friday") {
      $("#mutabahtable").show();
    } else {
      $("#mutabahtable").hide();
    }

    

    $("#modalDay").text(day);

  });
</script>


@endsection