@extends('layouts.full')
{{-- title --}}
@section('title','Login Student')
{{-- vendor scripts --}}
@section('vendor-styles')
<link rel="stylesheet" type="text/css" href="{{asset('vendors/css/forms/select/select2.min.css')}}">
@endsection
@php
    $today = \Carbon\Carbon::now('Asia/Jakarta');
    $isThursday = $today->dayOfWeek == \Carbon\Carbon::THURSDAY;

@endphp

{{-- page scripts --}}
@section('page-styles')
<link rel="stylesheet" type="text/css" href="{{asset('css/pages/authentication.css')}}">

<style>

#loading-spinner {
    position: fixed;
    top: 65%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1; /* Ubah nilai ini untuk mengatur tingkat transparansi */
    width: 600px; /* Ubah nilai ini untuk mengatur lebar spinner */
    height: 600px; /* Ubah nilai ini untuk mengatur tinggi spinner */
}
#loading-spinner img {
    display: block;
    margin: 0 auto;
    width: 100%; /* Sesuaikan lebar gambar agar sesuai dengan kotak spinner */
    height: auto; /* Sesuaikan tinggi gambar agar sesuai dengan kotak spinner */
}

</style>
@endsection

@section('content')
<!-- login page start -->
<section id="auth-login" class="row flexbox-container">
  <div class="col-xl-8 col-11">
    <div class="card bg-authentication mb-0">
      <div class="row m-0">
        <!-- left section-login -->
        <div class="col-md-6 col-12 px-0">
          <div class="card disable-rounded-right mb-0 p-2 h-100 d-flex justify-content-center">
            <div class="card-header pb-1">
              <div class="card-title">
                <img class="text-justifyrounded mx-auto d-block" src="{{ asset('images/gohome.png') }}" width="50%">
                <br>

                <h3 class="text-center" style="font-weight: bolder; color: #009C9F;">SQDF - PRESENSI</h3>

              </div>
            </div>
            <div class="card-content">
              <div class="card-body">
                <form>
<div class="row">

<div class="col-sm-12">
    
                    <div class="form-group mb-50">
                        <label class="text-bold-600" for="nik">NIK</label>
                        <input id="nik" type="number" class="form-control @error('nip') is-invalid @enderror" value="{{ $nik }}" autocomplete="off" readonly>
                    </div>
</div>

<div class="col-sm-4">

                    <div class="form-group mb-50">
                        <label class="text-bold-600" for="nik">JAM SD</label>
                        <input id="jam_sd" type="number" class="form-control @error('nip') is-invalid @enderror" autocomplete="off" >
                    </div>

</div>

<div class="col-sm-4">

                    <div class="form-group mb-50">
                        <label class="text-bold-600" for="nik">JAM SMP</label>
                        <input id="jam_smp" type="number" class="form-control @error('nip') is-invalid @enderror" autocomplete="off" >
                    </div>

</div>
<div class="col-sm-4">
                    <div class="form-group mb-50">
                        <label class="text-bold-600" for="nik">JAM SMA</label>
                        <input id="jam_sma" type="number" class="form-control @error('nip') is-invalid @enderror" autocomplete="off" >
                    </div>

</div>
<div class="col-sm-4">

                    <div class="form-group mb-50">
                        <label class="text-bold-600" for="nik">HQ SD</label>
                        <input id="hq_sd" type="number" class="form-control @error('nip') is-invalid @enderror" autocomplete="off" >
                    </div>

</div>
<div class="col-sm-4">


                    <div class="form-group mb-50">
                        <label class="text-bold-600" for="nik">HQ SMP</label>
                        <input id="hq_smp" type="number" class="form-control @error('nip') is-invalid @enderror" autocomplete="off" >
                    </div>

</div>
<div class="col-sm-4">


                    <div class="form-group mb-50">
                        <label class="text-bold-600" for="nik">HQ SMA</label>
                        <input id="hq_sma" type="number" class="form-control @error('nip') is-invalid @enderror" autocomplete="off" >
                    </div>

</div>



                  <div class="col-sm-12">
                    <div class="form-group mb-50">
                        <label class="text-bold-600" for="nik">Note</label>
                        <input id="note" type="text" class="form-control @error('nip') is-invalid @enderror" autocomplete="off" >
                    </div>
                  </div>



@if ($isThursday)

<div class="col-sm-12 text-center">
  <hr class="mt-0">
  <h5 class="mb-3 pb-2 border-bottom" style="font-weight: bolder; color: #009C9F;">Kajian Pekanan</h5>
</div>

    <div class="col-sm-4">
        <div class="form-group mb-50">
            <label class="text-bold-600" for="kajian">Kajian</label>
            <select id="kajian" class="form-control @error('nip') is-invalid @enderror" name="kajian">
                <option value="">Pilih</option>
                <option value="Ya">Ya</option>
                <option value="Tidak">Tidak</option>
            </select>
        </div>
    </div>

    <div class="col-sm-8">
        <div class="form-group mb-50">
            <label class="text-bold-600" for="materi">Materi</label>
            <input id="materi" type="text" class="form-control @error('nip') is-invalid @enderror" autocomplete="off">
        </div>
    </div>


@endif


<div class="col-sm-12 text-center">
  <hr class="mt-0">
  <h5 class="mb-3 pb-2 border-bottom" style="font-weight: bolder; color: #009C9F;">Mutaba'ah</h5>
</div>



    <div class="col-sm-6">
        <div class="form-group mb-50">
            <label class="text-bold-600" for="materi">Tidak Berjama'ah</label>
            <input id="jamaah" type="number" class="form-control @error('nip') is-invalid @enderror" autocomplete="off">
        </div>
    </div>


    <div class="col-sm-6">
        <div class="form-group mb-50">
            <label class="text-bold-600" for="materi">Tidak Duha</label>
            <input id="duha" type="number" class="form-control @error('nip') is-invalid @enderror" autocomplete="off">
        </div>
    </div>


    <div class="col-sm-6">
        <div class="form-group mb-50">
            <label class="text-bold-600" for="materi">Tidak Tahajud</label>
            <input id="tahajud" type="number" class="form-control @error('nip') is-invalid @enderror" autocomplete="off">
        </div>
    </div>


    <div class="col-sm-6">
        <div class="form-group mb-50">
            <label class="text-bold-600" for="materi">Tidak Witir</label>
            <input id="witir" type="number" class="form-control @error('nip') is-invalid @enderror" autocomplete="off">
        </div>
    </div>


    <div class="col-sm-6">
        <div class="form-group mb-50">
            <label class="text-bold-600" for="materi">Tidak Istigfar</label>
            <input id="istigfar" type="number" class="form-control @error('nip') is-invalid @enderror" autocomplete="off">
        </div>
    </div>

    <div class="col-sm-6">
        <div class="form-group mb-50">
            <label class="text-bold-600" for="materi">Tidak Tilawah 1/2 Juz</label>
            <input id="tilawah" type="number" class="form-control @error('nip') is-invalid @enderror" autocomplete="off">
        </div>
    </div>


    <div class="col-sm-6">
        <div class="form-group mb-50">
            <label class="text-bold-600" for="materi">Apakah Anda Halaqah Hari ini ?</label>
            <input id="halaqah" type="number" class="form-control @error('nip') is-invalid @enderror" autocomplete="off">
        </div>
    </div>


    <div class="col-sm-6">
        <div class="form-group mb-50">
            <label class="text-bold-600" for="materi">Tidak Mendoakan Ortu, Anak Murid, Guru, SQ</label>
            <input id="doa" type="number" class="form-control @error('nip') is-invalid @enderror" autocomplete="off">
        </div>
    </div>

    <div class="col-sm-12">
    <label class="text-bold-600" for="materi">Melakukan Pelanggaran Hari ini ?</label>
    <select id="akumulasi" name="project_type" class="select2 form-control filter-change">
            <option >Silahkan Pilih</option>
            <option value="0">Tidak</option>
            <option value="1">Ya</option>
          </select>
    </div>

    <div class="col-sm-12">
        <div class="form-group mb-50">
            <label class="text-bold-600" for="materi">Alasan</label>
            <input id="alasanmutabaah" type="text" class="form-control @error('nip') is-invalid @enderror" autocomplete="off">
        </div>
    </div>
    
</div> <!--Akhir ROW-->  

<br><br>
        <label for="ceklist">
            <input type="checkbox" id="ceklist" onchange="toggleButton()"> Saya yakin sudah mengisi dengan benar.
        </label><br><br>


                  <button type="btn" id="finish" class="btn btn-primary glow w-100 position-relative" disabled>Finish ! 
                    <i id="icon-arrow" class="bx bx-right-arrow-alt"></i>
                  </button>
                </form>
              </div>
            </div>
          </div>
        </div>
        <!-- right section image -->
        <div class="col-md-6 d-md-block d-none text-center align-self-center p-3">
          <div class="card-content">
            <h6 class="text-center">System of Quality Development for the Future</h6>
            <h3 class="text-center mb-5">{{env('APP_NAME')}}</h3>
            <img class="img-fluid" src="{{asset('images/idea.png')}}" alt="branding logo">
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- login page ends -->


<!-- Loading Spinner    -->
<div id="loading-spinner" style="display: none;">
<img src="{{ asset('images/absen.gif') }}" alt="Loading..." />
</div>

@endsection

{{-- vendor scripts --}}
@section('vendor-scripts')
<script src="{{asset('vendors/js/forms/select/select2.full.min.js')}}"></script>
@endsection

{{-- page scripts --}}
@section('page-scripts')
<script>
  $(".select2").select2({
    dropdownAutoWidth: true,
    width: '100%'
  });

</script>

<script>
   $('#finish').on('click', function () {
        var nik = $('#nik').val();
        var jam_sd = $('#jam_sd').val();
        var jam_smp = $('#jam_smp').val();
        var jam_sma = $('#jam_sma').val();
        var hq_sd = $('#hq_sd').val();
        var hq_smp = $('#hq_smp').val();
        var hq_sma = $('#hq_sma').val();
        var kajian = $('#kajian').val();

        //Tiap Hari Kamis
        var materi = $('#materi').val();
        var note = $('#note').val();

        //Tiap Hari Jumat
        var jamaah = $('#jamaah').val();
        var duha = $('#duha').val();
        var tahajud = $('#tahajud').val();
        var witir = $('#witir').val();
        var istigfar = $('#istigfar').val();
        var tilawah = $('#tilawah').val();
        var halaqah = $('#halaqah').val();
        var doa = $('#doa').val();
        var akumulasi = $('#akumulasi').val();
        var alasanmutabaah = $('#alasanmutabaah').val();


          // Data yang akan dikirimkan dalam bentuk objek
          var dataToSend = {
            nik: nik,
            jam_sd: jam_sd,
            jam_smp: jam_smp,
            jam_sma: jam_sma,
            hq_sd: hq_sd,
            hq_smp: hq_smp,
            hq_sma: hq_sma,
            kajian: kajian,

            //Kamis
            materi: materi,
            note: note,

            //Jumat
            jamaah: jamaah,
            duha: duha,
            tahajud: tahajud,
            witir: witir,
            istigfar: istigfar,
            tilawah: tilawah,
            halaqah: halaqah,
            doa: doa,
            akumulasi: akumulasi,
            alasanmutabaah: alasanmutabaah,

          };

          $('#loading-spinner').show();

          $.ajax({
            type: 'PATCH',
            url: '/updating/presensi',
            data: dataToSend,
                    headers: {
                      "X-CSRF-TOKEN": $("meta[name='csrf-token']").attr("content"),
                    },
            success: function (response) {
              // Anda dapat menambahkan tindakan lanjutan di sini

              
              alert('Selamat Anda Sudah Menyelesaikan Absen');
              
              var nik = $('#nik').val();
              var url = '/presensi';
              window.location.href = url;              

            },
              error: function (error) {
                // Tangani kesalahan jika POST gagal
                alert('Mohon isi Semua DATA !!');
              },
          });

    });
</script>

<script>
        function toggleButton() {
            var checkBox = document.getElementById("ceklist");
            var finishButton = document.getElementById("finish");

            if (checkBox.checked == true) {
                finishButton.disabled = false;
            } else {
                finishButton.disabled = true;
            }
        }
    </script>
@endsection