@extends('layouts.mainlayout')
@section('title', 'Request Attendance')
  @section('main')
  <!-- Form validation -->
  <div class="card">
    <div class="card-body" id="card-body">
      @if(isset($atdnce)) 
        <form class="form-validate-jquery" id="RequestAttendanceForm" action="{{ route('request-attendance.update',$atdnce) }}" method="POST" >
          <input type="hidden" name="_method" value="PATCH"/>
          <input type="hidden" name="attendanceDetailId" id = "attendanceDetailId" value="">
          @else
            <form class="form-validate-jquery" id="RequestAttendanceForm" action="{{ route('request-attendance.store') }}" method="POST" >
          @endif
          @csrf
          <fieldset class="mb-3">
            <legend class="text-uppercase font-size-sm font-weight-bold">Request Attendance</legend>
          </fieldset>
          
          <div class="form-group row">
            <label class="col-form-label col-md-3">Check In Date</label>
            <div class="col-md-9">
              <input type="hidden" name="user" id="userName" value="{{$user->id}}"> 
              <input type="text" name="date" data-date-format="{{ config('settings.date_format') }}" class="form-control required" readonly placeholder="Please Select Date" id="anytime-month-numeric-attendance-update" @if(!empty($absentDate)) value="{{ $absentDate }}" @endif/>
            </div>
        </div>
        <div class="form-group row checkDiv">
          <label class="col-form-label col-md-3">Shift :</label>
          <div class="col-md-9">
            <div class="input-group" id ='shift-div' onchange='onShiftSelected()'>
            
            </div>
          </div>
        </div>
        <div class="form-group row checkDiv" >
          <label class="col-form-label col-md-3">Check In :</label>
          <div class="col-md-9">
            <div class="input-group">
              <input type="text" name="check_in" class="form-control updateCheck date" data-date-format="{{ config('settings.time_format_js') }}"   id="anytime-time" required="required" value ="" />
            </div> 
          </div>
        </div>
        <div class="form-group row checkDiv" >
          <label class="col-form-label col-md-3">Check Out :</label>
          <div class="col-md-9">
            <div class="input-group">
              <input type="text" name="check_out" class="form-control updateCheck" data-date-format="{{ config('settings.time_format_js') }}"  id="anytime-time-endshift" required="required" value=""/>
            </div>
          </div>
        </div>

        <div class="form-group row checkDiv" >
          <label class="col-form-label col-md-3">Comment :</label>
          <div class="col-md-9">
            <div class="input-group">
                <textarea name="comment" id="comment" class="form-control" required="required" maxlength="250" pattern="[0-9!@#$%^&*()_+={}|;:'\<>?,./\[\]\-\\]*"></textarea>
                
            </div>
          </div>
        </div>
        <!-- <div class="d-flex justify-content-end align-items-center">
          <button type="button" id ="fetch" class="btn btn-primary ml-3 fetch" >Fetch<i class="icon-paperplane ml-2"></i></button>
          <a class="btn btn-default btn-close btn-danger ml-3 fetch" href="{{ route('request-attendance.index') }}">Reset</a> 
        </div> -->
        <div class="d-flex justify-content-end align-items-center">
          <a class="btn bg-transparent text-primary border-primary ml-3 checkDiv"  href="{{ route('request-attendance.index') }}">Clear</a> 
          <button type="submit" id ="update" name="update" class="btn btn-primary ml-3 checkDiv" disabled >Request<i class="icon-paperplane ml-2"></i></button>
        </div>
      </form>
    </div>
  </div>
    <!-- /form validation -->
@endsection
@section('js')

<script>
var enterKeyPressCount = 0;
var lastEnterKeyPressTime = 0;
var enterKeyPressThreshold = 3; // Number of enter key presses to trigger validation
var timeThreshold = 2000; // Time threshold in milliseconds

// Function to reset the enter key press count and time
function resetEnterKeyPressCount() {
    enterKeyPressCount = 0;
    lastEnterKeyPressTime = 0;
}

// Function to handle key press events for the comment textarea
function handleCommentKeyPress(event) {
    if (event.keyCode === 13) { // 13 is the keyCode for the enter key
        var currentTime = new Date().getTime();
        if (currentTime - lastEnterKeyPressTime < timeThreshold) {
            enterKeyPressCount++;
            if (enterKeyPressCount >= enterKeyPressThreshold) {
                // Show the validation message for invalid format
                alert('Invalid format: Too many consecutive line breaks in the comment.');
                // Disable the comment textarea
                document.getElementById('comment').disabled = true;
                // Reset the enter key press count and time
                resetEnterKeyPressCount();
            }
        } else {
            resetEnterKeyPressCount();
        }
        lastEnterKeyPressTime = currentTime;
    }
}

// Attach the key press event handler to the comment textarea
document.getElementById('comment').addEventListener('keypress', handleCommentKeyPress);

let attDays = {!! json_encode($attendance_array) !!};
   
 var today = new Date();
 today.setHours(0, 0, 0, 0);
 var initialCheckinAvailable = false;
 var initialCheckoutAvailable = false;
 var dateInput = $('#anytime-month-numeric-attendance-update'); // Our date input has the name "date"
 var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : 'body';
 var shiftTimings = "";
 var shiftNames = "";
 let attendanceRequestId = null;
 dateInput.datepicker({
  //  format: 'dd/mm/yyyy',
   format: '{{ config('settings.date_format') }}',
   container: container,
   todayHighlight: true,
   autoclose: true,
   startDate: newTruncateDate(new Date()), 
   endDate: truncateDate(new Date()), 
   
 });
 
 function formatTime(date) {   // Formatting time into HH:MM:SS and converting from IST to UTC 
   const utcString = date.toUTCString();
   const hours = new Date(utcString).getUTCHours().toString().padStart(2, '0');
   const minutes = new Date(utcString).getUTCMinutes().toString().padStart(2, '0');
   const seconds = new Date(utcString).getUTCSeconds().toString().padStart(2, '0');
   
   return `${hours}:${minutes}:${seconds}`;
 }
 
 function truncateDate(date) {
  let attendanceArray = null;
  let newDate = new Date(date);
  let formattedTime = formatTime(newDate);
  let shiftendtime = null;
  if (newDate && formattedTime >= shiftendtime ) {
    newDate.setDate(newDate.getDate()); 
  }
  else{
    newDate.setDate(newDate.getDate() - 1); // subtract one more day to exclude the current date
  }

  return newDate;
}

function newTruncateDate(date) {
  let attDays = {!! json_encode($attendance_array) !!};
  let newDate = new Date(date);
  newDate.setDate(date.getDate() - attDays);
  if(attDays != null){
     return newDate;
  }
  else{
     return;
  }
 }

 function onShiftSelected() {
    var shiftId = $("#shift").val();
    var startTime = shiftTimings[shiftId]["start_time"];
    var endTime = shiftTimings[shiftId]["end_time"];
    var shiftName = shiftNames[shiftId];
    $("#shiftNameDiv").html(shiftName);
    $("#shiftNameDivv").html(shiftName);
    if($("#anytime-time").val()=="" || attendanceRequestId==null){
      $("#anytime-time").val(startTime);
    }
    if($("#anytime-time-endshift").val()=="" || attendanceRequestId==null || !initialCheckoutAvailable){
      $("#anytime-time-endshift").val(endTime);
    }
}

   $(document).ready(function(){
    $("#RequestAttendanceForm").submit(function(event) {
        // Prevent form submission
        event.preventDefault();

        // Get the comment value
        var comment = $("#comment").val();

        // Define a regular expression pattern for the desired format
        var pattern = /^[0-9!@#$%^&*()_+={}|;:'"<>,./\[\]\-\\]*$/;

        // Check if the comment matches the pattern
        if (!pattern.test(comment)) {
            // If the comment does not match the pattern, show an error message
            alert("Please enter the comment in the correct format.");
            return; // Prevent further execution of the code
        }

        // If the comment format is correct, proceed with form submission
        this.submit();
    });
    //$("#fetch").attr('disabled','true');
    var datehasval = $('#anytime-month-numeric-attendance-update').val();
    if(datehasval){
      $.ajaxSetup({
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
        });
        var userId = $('#userName').val();
        var date = $('#anytime-month-numeric-attendance-update').val();
        //  if(userId !="" && date !="")
        //  {
        //   //$("#userName").attr('disabled','true');
        //   $('#anytime-month-numeric-attendance-update').datepicker("destroy");
        //  }
        if((userId == "" && date == "" )|| (userId != "" && date == "") ||( userId == "" && date != ""))
        {
          $("#fetch").attr('disabled','true');
          return false;
        }
        var baseurl =  document.getElementById('baseurl').value;
        var formData = new FormData();
        formData.append('userId', userId);
        formData.append('date', date);
          $.ajax({
          type: 'POST',
          url: baseurl+'/request-attendance/request-attendance-detail',
          processData:false,
          contentType: false,
          data: formData,
          success: function(data)
          {
            shiftTimings = data["shiftTimings"];
            shiftNames = data["shiftNames"];
            $(data).each(function(key,value)
            {
              //add shift field
              if(value.user_shift_name !="" && value.user_shift_name !=null)
              {
                $("#shift-div").html(value.user_shift_name);
              }
              if(value.attendance_requet != null){
                  $('#card-body').html(value.attendance_requet);
                  $('#card-body').css({"text-align": "center", "color": "red"});
              }
              if(value.check_in !="" && value.check_in !=null)
              {
                  initialCheckinAvailable = true;
                $("#anytime-time").val(value.check_in);
              }else{
                $("#anytime-time").val('');
              }
              if(value.check_out !="" && value.check_out !=null)
              {
                  initialCheckoutAvailable = true;
                $("#anytime-time-endshift").val(value.check_out);
              }else{
                $("#anytime-time-endshift").val('');
              }
              $("#attendanceDetailId").val(value.id);
            });
            $(".checkDiv").removeAttr('style');
            $('#update').removeAttr('disabled');
            $("#fetch").addClass("intro");
              $("#comment").on("keyup", function() {
              var commentLength = $("#comment").val().length;
              if (commentLength <= 10) {
                // $("#msg").html("Reason cannot be less than 10 characters.");
                $("#update").prop("disabled", true);
              } else {
                // $("#msg").html("");
                $("#update").prop("disabled", false);
              }
            });
          },
          error: function (data) {
          }
          });
    }
    $('#anytime-month-numeric-attendance-update').on('change',function(){
      $.ajaxSetup({
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
        });
        var userId = $('#userName').val();
        var date = $('#anytime-month-numeric-attendance-update').val();
        //  if(userId !="" && date !="")
        //  {
        //   //$("#userName").attr('disabled','true');
        //   $('#anytime-month-numeric-attendance-update').datepicker("destroy");
        //  }
        if((userId == "" && date == "" )|| (userId != "" && date == "") ||( userId == "" && date != ""))
        {
          $("#fetch").attr('disabled','true');
          return false;
        }
        var baseurl =  document.getElementById('baseurl').value;
        var formData = new FormData();
        formData.append('userId', userId);
        formData.append('date', date);
          $.ajax({
          type: 'POST',
          url: baseurl+'/request-attendance/request-attendance-detail',
          processData:false,
          contentType: false,
          data: formData,
          success: function(data)
          {  //to check if user present on date selected
            if(!data.canRequest){
              new PNotify({
                   title: 'Error',
                   text: 'Grace Period Ended',
                   hide: true,
               }); 
               $("#shift-div").html("");
               $("#anytime-time").val("");
               $("#anytime-time-endshift").val('');
               return;
            }
            if (data.status == '100') {
               var notice = new PNotify({
                   title: 'Error',
                   text: data.message,
                   hide: true,
               }); 
               $("#shift-div").html("");
               $("#anytime-time").val("");
               $("#anytime-time-endshift").val('');

              }
              else{
              //add shift field
              shiftTimings = data["shiftTimings"];
              shiftNames = data["shiftNames"];
              attendanceRequestId = data["id"];
              if(data.user_shift_name !="" && data.user_shift_name !=null)
              {
                $("#shift-div").html(data.user_shift_name);
              }
              if(data.attendance_requet != null){
                  $('#card-body').html(data.attendance_requet);
                  $('#card-body').css({"text-align": "center", "color": "red"});
              }
              if(data.check_in !="" && data.check_in !=null)
              {
                $("#anytime-time").val(data.check_in);
              }else{
                $("#anytime-time").val('');
              }
              if(data.check_out !="" && data.check_out !=null)
              {
                $("#anytime-time-endshift").val(data.check_out);
              }else{
                $("#anytime-time-endshift").val('');
              }
              $("#attendanceDetailId").val(data.id);
            
            
            $(".checkDiv").removeAttr('style');
            $('#update').removeAttr('disabled');
            $("#fetch").addClass("intro");
              $("#comment").on("keyup", function() {
              var commentLength = $("#comment").val().length;
              if (commentLength <= 10) {
                // $("#msg").html("Reason cannot be less than 10 characters.");
                $("#update").prop("disabled", true);
              } else {
                // $("#msg").html("");
                $("#update").prop("disabled", false);
              }
            });
            //check for already present marked day
          }
          },
          error: function (data) {
          }
          });
        });
        $("#userName, #anytime-month-numeric-attendance-update").on("change",function(){
          if($("#userName") != "" ){
            $("#fetch").removeAttr('disabled','false');
            }
            else
            {
              $("#fetch").attr('disabled','true');
            }
          });
          $("input").prop('required',true);
      })

     
      
      
  </script>
  <style>
    .intro{
      display: none;
    }
    </style>
<script src="{{asset('global_assets/js/demo_pages/custom_ams/validation/request_attendance_validation.js')}}"></script>

@endsection