@extends('layouts.master')
@section('css')
<!-- <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css"> -->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">



  <style type="text/css">
        /* #sc_inputSignParent, #si_inputSignParent {
            color:darkblue;
            background-color:lightgrey;
            padding: 15px;
            max-size: 824px;
        } */

        #inputSign {
            color:darkblue;
            background-color:lightgrey;
            padding: 0 0 0 0; 
            margin: 0 0 0 0;
            border: 2px dotted #000;
            width: 75%;
        }
        .green {
  color: green ;
  
}

.yellow {
  color: yellow !important
}

.white {
  color: white !important
}

.blue {
  color: blue !important
}

.red {
  color: red !important
}

.bootstrap-select.btn-group:not(.input-group-btn),
.bootstrap-select.btn-group[class*="span"] {
  margin: 0 !important;
}
  .date-pagination-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
  }

  .date-pagination {
    display: flex;
    gap: 10px;
    flex-grow: 1;
    white-space: nowrap;
    overflow-x: auto;
  }

  .date-pagination button {
    padding: 6px 12px;
    border: 1px solid #ccc;
    background-color: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
  }

  .date-pagination button.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
  }

  .date-pagination button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .nav-btn {
    padding: 6px 12px;
    font-weight: bold;
    background-color: #fff;
    border: 1px solid #007bff;
    color: #007bff;
    border-radius: 4px;
    cursor: pointer;
  }

  .nav-btn:disabled {
    visibility: hidden;
  }

    </style>
@endsection
@section('content')
<div class="row page-titles">
	<div class="col-md-5 align-self-center">
	    <h4 class="text-themecolor">Presences</h4>
	</div>
	<div class="col-md-7 align-self-center text-right">
	    <div class="d-flex justify-content-end align-items-center">	        
	        
	    </div>
	</div>
</div>
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
            <div class="row">
            <div class="col-sm-12">
              @if (isset($personal))
                <div class="row">
                <div class="col-sm-2">
                  <div class="avatar">
                    <center>
                        <img style="width: 150px;height: 150px" src="{{ asset('eliteadmin/images/users/user.png') }} " alt="Photo">
                     
                    </center>
                  </div>
                  <center></center>
                  
                </div>
                <div class="col-sm-3">
                  <div class="desc">
                    <div class="title text-muted">Full Name</div>
                    <strong>{{$personal->name}}</strong>
                    <div class="title text-muted">NIK</div>
                    <strong>{{$personal->NIK}}</strong>
                    
                  </div>
                  
                </div>
               
                <div class="col-sm-3">
                  <div class="desc">
                    <div class="title text-muted">Current School Year</div>
                    <strong>{{$current->meta_value}}</strong><br>
                    <div class="title text-muted">Semester</div>
                    <strong>Odd Semester</strong><br>
                    
                    </div>

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

                     
                      <div class="row col-md-12"  id="grp_attendances_in"></div>
                     <br>
                      <div class="row col-md-12" id="grp_attendances_out"></div>
                  </div>
                  
                  
                </div>
              @endif
              
                </div>              
                
            </div>
          </div>
                  
                  <hr>
                <div class="col-12 row">

                  <div class="table-responsive col-12">
                    @if (isset($kelas))
                    <div class="ribbon-wrapper card">
                      <div class="ribbon ribbon-bookmark  ribbon-success">Student Attendance</div>
                      <div class="card-body">
                        <div class="card-title row">

                          <div class="col-sm-4">
                            <div class="desc">
                            <div class="title text-muted">Class</div>
                            <strong>{{$kelas->nama_kelas}}</strong>
                            <div class="title text-muted">Grade</div>
                            <strong>{{$kelas->nama}}</strong>
                            </div>
                          </div>
                          <div class="col-md-4 offset-md-4">
                            <div id="paginator4"></div>
                            <div class="date-pagination-wrapper">
                              <button id="prev-week" class="nav-btn">« Prev</button>
                              <div id="week-pagination" class="date-pagination"></div>
                              <button id="next-week" class="nav-btn">Next »</button>
                            </div>

                            <input type="hidden" id="selected-date">

                          </div>
                          
                        </div>
                        <div id="table_presence">
                            
                        </div>
                      
                    </div>
                      
                    @endif
                      
                  </div>
                </div>
                 
            </div>
        </div>
       </div>
    </div>
    <div class="modal fade" id="modalAddSign" tabindex="-1" role="dialog" aria-labelledby="modalAddSignLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    
                    <Span class="modal-title" id="modalAddSignTitle">Add Signature | <i><b id="jqclock-local" class="jqclock"></b></i></span>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form role="form" action="" id="AddSignForm" enctype="multipart/form-data">
                    <div class="modal-body">
                        <div class="form-group col-xs-12">
                            <label id="inputSignLabel" for="inputSign">Signature</label>
                            <div id="inputSignParent" align="center">
                                <a class="btn btn-app" onclick="resetttd()" id="inputSignReset">
                                    <i class="fa fa-undo"></i> Clear
                                </a>
                                <div id="inputSign">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Cancel</button>
                        <button type="button" id="doAddSign" class="btn btn-primary" >Add</button>
                        {{-- <input type="submit" id="doAddSignClient" value="Add" class="btn btn-primary"> --}}
                    </div>
                </form>
            </div>
        </div>
    </div>

@endsection

@section('js')


<!-- <script type="text/javascript" src="//gitcdn.link/repo/Lwangaman/jQuery-Clock-Plugin/master/jqClock.min.js"></script> -->
<!-- <script src="//cdnjs.cloudflare.com/ajax/libs/jSignature/2.1.3/jSignature.min.js"></script> -->
<!-- <script src="//cdnjs.cloudflare.com/ajax/libs/mouse0270-bootstrap-notify/3.1.7/bootstrap-notify.min.js"></script> -->
<!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.js"></script> -->
    
<script>
  var kelas = {{$kelas->id_kelas}}
  const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

  const today = new Date();
  const weekPagination = document.getElementById('week-pagination');
  const selectedDateInput = document.getElementById('selected-date');
  const prevBtn = document.getElementById('prev-week');
  const nextBtn = document.getElementById('next-week');
  let currentStart = getStartOfWeek(today);

  function formatDate(date) {
    return date.toISOString().split('T')[0];
  }

  function formatDateLabel(date) {
    return `${days[date.getDay()]} ${months[date.getMonth()]} ${date.getDate()}`;
  }

  function getStartOfWeek(date) {
    const d = new Date(date);
    const day = d.getDay();
    d.setDate(d.getDate() - day + 1); // Monday
    return d;
  }

  function renderWeek(startDate) {
    weekPagination.innerHTML = '';
    let selectedDate = selectedDateInput.value || formatDate(today);

    for (let i = 0; i < 7; i++) {
      const date = new Date(startDate);
      date.setDate(date.getDate() + i);

      const btn = document.createElement('button');
      btn.innerText = formatDateLabel(date);
      btn.dataset.date = formatDate(date);

      if (btn.dataset.date === selectedDate) {
        btn.classList.add('active');
      }

      if (date > today) {
        btn.disabled = true;
      }

      btn.onclick = () => {
        document.querySelectorAll('#week-pagination button').forEach(b => b.classList.remove('active'));
        btn.classList.add('active');
        selectedDateInput.value = btn.dataset.date;

        searchPresence(kelas,btn.dataset.date);
      };

      weekPagination.appendChild(btn);
    }

    // Disable "Next" if this week's end includes today
    const endOfWeek = new Date(startDate);
    endOfWeek.setDate(endOfWeek.getDate() + 6);
    nextBtn.disabled = endOfWeek >= today;
  }

  prevBtn.addEventListener('click', () => {
    currentStart.setDate(currentStart.getDate() - 7);
    renderWeek(currentStart);
  });

  nextBtn.addEventListener('click', () => {
    const nextStart = new Date(currentStart);
    nextStart.setDate(currentStart.getDate() + 7);

    if (nextStart <= today) {
      currentStart = nextStart;
      renderWeek(currentStart);
    }
  });

  renderWeek(currentStart);
</script>

    <script>
    //   $.notifyDefaults({
    //     // offset: {
    //     //     x: 10,
    //     //     y: 70
    //     // },
    //     animate: {
    //         enter: 'animated bounceInRight',
    //         exit: 'animated bounceOutRight'
    //     },
    //     placement: {
    //         from: 'bottom',
    //         align: 'right'
    //     },
    //     z_index: 2000
    // });

        // var token = $("meta[name='csrf-token']").attr("content");
        // selected id
        // var curId;
        // var attendanceInDiv = $('#grp_attendances_in');
        // var attendanceOutDiv = $('#grp_attendances_out');
        // var signer = '';
        // var category;
        // $('#dp-calendar').replaceWith('<div id="dp-calendar"></div>');
        //  $(document).ready(function () {
        //     var today = moment().format('YYYY-MM-DD');
        //     var kelas = {{$kelas->id_kelas}}
        //     searchPresence(kelas,today);
        //     $('select').selectpicker();
        //     // $('#inputSign').jSignature();
        //     // $("#jqclock-local").clock({"timeFormat":" H:i:s"}); 
        //     // $("#jqclock-local-header").clock({"timeFormat":" H:i:s"}); 
        //     // $('.loadingOverlay').toggleClass('hidden', true);

        //     // loadAttendances();
        //     // setInterval(function() {
        //     //     loadAttendances();
        //     // }, 15 * 1000);
        // });
        // function resetttd(){
        //     sign = $('#inputSign');
        //     sign.jSignature('reset');
        //     sign.resize();
        // }
        // function generateAttendanceBoxDOMIn(addSignatureFunction, NIK, timein) {
        //     bgColorClass = (timein) ? 'btn-success' : 'btn-info';
        //     boxIcon = (timein) ? 'fa-check-circle-o' : 'fa-clock-o';
        //     status = (timein)? '' : addSignatureFunction ;
        //     return '<div class="col-md-12">' +
        //         '<button type="button" class="btn btn-xs info-box ' + bgColorClass +'" onclick="' + status + '">' +
        //         '<div class="col-md-12">'+
        //         '<span class="info-box-icon"><i class="fa ' + boxIcon + '"></i></span>'+
        //         '<div class="info-box-content">' +
                
        //         '<span class="info-box-number" style="font-size: 10pt">Sign In: </span>' +
        //         '<span class="info-box-number" style="font-size: 14pt">'+timein+ '<i style="font-size: 9pt">'+(timein ? ' (<i class="fa fa-check"></i> Signed)' : ' (<i class="fa fa-times"></i> Not Signed)') + '</i>'+
        //         '</span>'+
        //         '</div>' +
        //         '</div>'+
        //         '</button>' +
        //         '</div>';
        // }
        // function generateAttendanceBoxDOMOut(addSignatureFunction, NIK, signin) {
        //     bgColorClass = (signin) ? 'btn-success' : 'btn-info';
        //     boxIcon = (signin) ? 'fa-check-circle-o' : 'fa-clock-o';
        //     status = (signin)? '' : addSignatureFunction ;
        //     return '<div class="col-md-12">' +
        //         '<button type="button" class="btn btn-xs info-box ' + bgColorClass +'" onclick="' + status + '">' +
        //         '<div class="col-md-12">'+
        //         '<span class="info-box-icon"><i class="fa ' + boxIcon + '"></i></span>'+
        //         '<div class="info-box-content">' +
               
        //         '<span class="info-box-number" style="font-size: 10pt">Sign Out: </span>' +
        //         '<span class="info-box-number" style="font-size: 14pt">'+signin+ '<i style="font-size: 9pt">'+(signin ? ' (<i class="fa fa-check"></i> Signed)' : ' (<i class="fa fa-times"></i> Not Signed)') + '</i>'+
        //         '</span>'+
        //         '</div>' +
        //         '</div>'+
        //         '</button>' +
        //         '</div>';
        // }
        
       
        // function loadAttendances(startOffset = 15) {
        //     var getSessionsAjax = $.ajax({
        //         // ---------------------------------------
        //         // url : "get-today-attendance"
        //         url: "get-today-attn-teacher",
        //         // ---------------------------------------
        //         type: 'GET',
        //         dataType: 'json',
        //         data: {
        //             "_token": token,
        //             "startoffset": startOffset
        //         },
        //         success: function (response) {
        //             console.log(response);
                   
        //             attendanceInDiv.html('');
        //             attendanceOutDiv.html('');

        //             for (const k in response) {
                        
                            
        //                     attendanceInDiv.append(
        //                         generateAttendanceBoxDOMIn(
        //                             'addSignatureIn(' +response[k].NIK + ');',
        //                             response[k].NIK,
        //                             response[k].time_in,
                                    
        //                         )
        //                     );
        //                     attendanceOutDiv.append(
        //                         generateAttendanceBoxDOMOut(
        //                             'addSignatureOut(' +response[k].NIK + ');',
        //                             response[k].NIK,
        //                             response[k].time_out,
                                    
        //                         )
        //                     );
        //             }                   
                    
        //         },
        //         error: function(xhr) {
        //             console.log(xhr.responseJSON);
        //             show_notif('Error!', xhr.responseJSON['message'], 'danger', 'times-circle', xhr.responseJSON['errors'], 4000);
        //         }
        //     });
        // }

        
        // // delete handler
        // function addSignatureIn(id) {
        //     // window.location = '/';
        //    curId = id;

        //     $('.loadingOverlay').toggleClass('hidden', false);

        //     var getSignerAjax = $.ajax({
        //         // ---------------------------------------
        //         url: "presence-teacher/" + curId + "/in",
        //         // ---------------------------------------
        //         type: 'GET',
        //         dataType: 'json',
        //         data: {
        //             "_token": token
        //         },
        //         success: function (response) {
        //             console.log(response);
        //             // show_notif('Success', response['success'], 'success', 'check-circle', null, 1500);

        //             signer = response.time_in;

        //             $('.loadingOverlay').toggleClass('hidden', true);

        //             if (signer != null) {
        //                 show_notif('Information', "This attendance has already signed.", 'info', 'info-circle', null, 1500);
        //                 return;

        //             }
        //             else{
        //                 sign = $('#inputSign');
        //                 sign.jSignature('reset');
        //                 sign.resize();
        //                 $('#modalAddSign').modal('show');
        //                 category = "in";
        //             }
                   
        //         },
        //         error: function(xhr) {
        //             console.log(xhr.responseJSON);
        //             show_notif('Error!', xhr.responseJSON['message'], 'danger', 'times-circle', xhr.responseJSON['errors'], 4000);
        //             $('.loadingOverlay').toggleClass('hidden', true);
        //         }
        //     });            
        // };
        // function addSignatureOut(id) {
        //     // window.location = '/';
        //    curId = id;

        //     $('.loadingOverlay').toggleClass('hidden', false);

        //     var getSignerAjax = $.ajax({
        //         // ---------------------------------------
        //         url: "presence-teacher/" + curId + "/out",
        //         // ---------------------------------------
        //         type: 'GET',
        //         dataType: 'json',
        //         data: {
        //             "_token": token
        //         },
        //         success: function (response) {
        //             console.log(response);
        //             // show_notif('Success', response['success'], 'success', 'check-circle', null, 1500);
        //               signIn = null;
        //               signOut = null;
        //             if(response != ''){
        //               signIn = response[0].time_in;
        //               signOut = response[0].time_out;
        //             }
                    

        //             $('.loadingOverlay').toggleClass('hidden', true);

        //             if (signIn == null) {
        //                 show_notif('Information', "You're not sign-in yet !", 'success', 'info-circle', null, 1500);
        //                 return;
        //             }
        //             else if (signIn != null && signOut != null ) {
        //                 show_notif('Information', "This attendance has already signed", 'info', 'info-circle', null, 1500);
        //                 return;
        //             }
        //             else{
        //                 sign = $('#inputSign');
        //                 sign.jSignature('reset');
        //                 sign.resize();
        //                 $('#modalAddSign').modal('show');
        //                 category = "out";
        //             }
                    
        //         },
        //         error: function(xhr) {
        //             console.log(xhr.responseJSON);
        //             show_notif('Error!', xhr.responseJSON['message'], 'danger', 'times-circle', xhr.responseJSON['errors'], 4000);
        //             $('.loadingOverlay').toggleClass('hidden', true);
        //         }
        //     });            
        // };
        
        // $('#doAddSign').click(function () {
        //     $(this).html('Please Wait...');
        //     $(this).prop('disabled', true);
        //     var data = $('#inputSign').jSignature('getData', 'svgbase64');
        //     // alert(data);
        //     var submitSignAjax = $.ajax({
        //         type: "POST",
        //         url: "presence/" + curId + "/store-sign",
        //         dataType: "json",
        //         data: {
        //             "_token": token,
        //             // ---------------------------------------
        //             // "signer": signer,
        //             "category" : category,
        //             "data": data
        //             // ---------------------------------------
        //         },
        //         success: function (response) {
        //             console.log(response);
        //             show_notif('Success', response['success'], 'success', 'check-circle', null, 1500);

        //             // if (response.extradata.signer != 'c' && response.extradata.signer != 'i') {
        //                 $('#modalAddSign').modal('hide');
        //                 loadAttendances();
        //                 return;
        //             // }

        //             // $('#doAddSign').html('Add');
        //             // $('#doAddSign').prop('disabled', false);
        //             // loadAttendances();
        //             // addSignature(curId);
        //         },
        //         error: function (xhr) {
        //             console.log(xhr.responseJSON);
        //             show_notif('Error!', xhr.responseJSON['message'], 'danger', 'times-circle', xhr.responseJSON['errors'], 4000);
        //         }                
        //     });
        //     $.when(submitSignAjax).done(function () {
                
        //     });
        //     $.when(submitSignClientAjax).fail(function () {
        //         $('#doAddSign').html('Add');
        //         $('#doAddSign').prop('disabled', false);
        //     });
        // });
        // $('#modalAddSign').on('hidden.bs.modal', function (e) {
        //     $('#doAddSign').html('Add');
        //     $('#doAddSign').prop('disabled', false);
        // });
        // function show_notif(title, message, type, icon, list, delay_ms, closeable = true) {
        //     var msg = '<strong>' + message + '</strong><br>';

        //     $.each(list, function (i, item) {
        //         msg += '- ' + item + '<br>';
        //     });

        //     return $.notify({
        //         icon: 'fa fa-' + icon,
        //         title: '<strong>' + title + '</strong><br>',
        //         message: msg
        //     }, {
        //         type: type,
        //         delay: delay_ms,
        //         allow_dismiss: closeable
        //     });
        // }
        // var datepaginator = function() {
        //     return {
        //         init: function() {
        //                 $("#paginator4").datepaginator({
        //                      endDate:  moment().format('YYYY-MM-DD'),
        //                     onSelectedDateChanged: function(a, t) {
        //                         console.log("hello")
        //                         var tgl = moment(t).format("YYYY-MM-DD");
        //                         var id_kelas = {{$kelas->id_kelas}};
        //                         searchPresence(id_kelas,tgl);
                                
                            
        //                     }
        //                 })
        //         }
        //     }
        // }();
        // jQuery(document).ready(function() {
        //     datepaginator.init()
        // });
        function searchPresence(id_kelas,tgl){
            $.ajax({
                url : 'presence/search'+'/'+id_kelas+'/'+tgl,
                type : 'get',
                // dataType : 'json',
                success:function(response){
                  console.log(response);
                  $('#table_presence').empty();
                  $('#table_presence').append(response);
                  $('select').selectpicker();
                },
                error:function(xhr){
                  console.log(xhr);
                }
            });

        }
        function saveAttn(){
            swal({
            title: "Are you sure?",
            text: "You will save this presence?",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes!",
            closeOnConfirm: true,
            showLoaderOnConfirm: true
            },
            function(isConfirm){
            if(isConfirm){
                console.log('confirm');
            $.ajax({
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                url : 'presence/save',
                data : $('#formAbsensi').serialize(),
                type : 'post',
                dataType : 'json',
                success:function(response){
                console.log(response)
                // table.ajax.reload();
                localStorage.setItem("swal",
                            swal({
                                title: 'success',
                                text:  'data successfully saved',
                                type: 'success',
                                timer: 3500,
                                showConfirmButton: false
                            })
                    );
            
                },
                
                error:function(xhr){
                console.log(xhr)
                // table.ajax.reload();
                localStorage.setItem("swal",
                            swal({
                                title: 'Error',
                                text:  'data was not successfully saved',
                                type: 'error',
                                timer: 3500,
                                showConfirmButton: false
                            })
                    );

                }

            });
            
            }
            }); 
        }
    
    </script>
@endsection