@extends('layouts.mainlayout')
@section('title', 'Setting')
@section('main')
<style>
 
 #myDropdown1 {
     position: absolute;
     top: 30px;
     left: 0;
     border: 1px solid #ccc;
     background-color: #fff;
     padding: 10px;
   }
  
  #myDropdown2 {
    position: absolute;
    top: 30px;
    left: 0;
    border: 1px solid #ccc;
    background-color: #fff;
    padding: 10px;
  }
  

</style>
 <!-- for attendance request -->
<div class='card'>
  <div class='card-body row '>
        <div class="form-group col-lg-6">
            <label class="col-form-label font-weight-semibold pt-0 mt-3 ml-5"><h3>Attendance Request:</h3> 
            </label>
        </div>
        
     <div class="col-lg-5 form-group mr-7">
     <div class="card-header flex items-center">
       <input type="checkbox" name="allow_attendance_request" id="checkbox1">
       <label class="col-form-label col-lg-6 font-weight-bold"><h5 class="font-weight-semibold">Allow Attendance Request</h5></label><br>
      <span class="ml-4">In case user wants to request attendance for a certain date.</span>
     </div>

   
     <div class="card-header flex items-center mr-2">
      <input type="checkbox" name="attendance_request_period" id="checkbox2" disabled> <label class="col-form-label col-lg-6 font-weight-bold"><h5 class ="font-weight-semibold">Attendance Request Period</h5></label><br><span class="ml-4">Number of days upto which a user can request for attendance.<br> <p class = "ml-4">Current Days: <span id = "currentDays">{{$currentSelectedDays}}</span></p></span>
      </div>
      <div class='card-body'>
     <div class="form-group row" id='dropdown1'  style="display: none;">
         <label class="col-form-label col-lg-3 font-weight-semibold ml-4">Days:
            </label>
            <div class="col-lg-9 form-group-row ml-4">
               <form method="POST" class="form-horizontal">
                  @csrf

               <select data-placeholder="select" class="form-control" name="week_starts" id='week_value'>
                  <option  disabled selected>--Select No. of Days--</option>
                  <option value = "0"> 00</option>
                  <option 
                     value="7"
                                          
                  >07</option >
                  <option 
                     value="10"
                                       
                  >10</option>
                  <option 
                     value="12" 
                                        
                  >12</option>
                  <option 
                     value="15" 
                                          
                  >15</option>
                  <option 
                     value="20" 
                                         
                  >20</option>
                  <option 
                     value="30" 
                                       
                  >30</option>
                  
               </select>
               <br><br>
               <div class="submitButton col-lg-9">
                  <label class="form-check-label">
                    
               <button type="submit" class="btn btn-primary rounded save-button1" onclick="handleClick()">Save</button>
           
            </label>
            
         </form>
            </div>
            </div>
     </div> 
    
     <div class="card-title flex items-center">
      <input type="checkbox" name="attendance_request_frequency" id="checkbox3" disabled> <label class="col-form-label col-lg-6 "><h5 class ="font-weight-semibold">  Attendance Request Frequency</h5></label><br>
      <span class="ml-4">Number of times upto which a user can request for attendance in a month.<br> <p class = "ml-4">Current Times: <span id = "currentTimes">{{$currentSelectedTimes}}</span></p></span>
     </div>
     <div class='card-body'>
      <div class="form-group row" id="dropdown2"  style="display: none;">
          <label class="col-form-label col-lg-3 font-weight-semibold ml-2">Time:
              </label>
              <div class="col-lg-9 form-group-row ml-2">
                 <form method="POST" class="form-horizontal" >
                    @csrf
  
                 <select data-placeholder="select" class="form-control" name="times_value" id='time_value'>
                    <option disabled selected>--Select No. of Times--</option>
                    <option value = "0">
                      00
                    </option>
                    <option 
                       value="2"
                                            
                    >02</option >
                    <option 
                       value="3"
                                         
                    >03</option>
                    <option 
                       value="4" 
                                          
                    >04</option>
                    <option 
                       value="5" 
                                            
                    >05</option>
                    <option 
                       value="6" 
                                           
                    >06</option>
                    <option 
                       value="7" 
                                         
                    >07</option>
                    
                 </select>
                 <br><br>
                 <div class="submitButton col-lg-9">
                    <label class="form-check-label">
                       
                 <button type="submit" class="btn btn-primary rounded save-button2" onclick="thisHandleClick()">Save</button>
             
              </label>
              
           </form>
               </div>
              </div>
          </div> 
      </div>   
   </div>
</div>
<script>
   

const checkbox1 = document.getElementById("checkbox1");
const checkbox2 = document.getElementById("checkbox2");
const checkbox3 = document.getElementById("checkbox3");
const dropdown1 = document.getElementById("dropdown1");
const dropdown2 = document.getElementById("dropdown2");

checkbox1.addEventListener("click", function() {
  if (checkbox1.checked) {
    localStorage.setItem("checkbox1Checked", true);
    checkbox2.disabled = false;
    checkbox3.disabled = false;
  } else {
    localStorage.setItem("checkbox1Checked", false);
    checkbox2.disabled = true;
    checkbox3.disabled = true;
    dropdown1.style.display = "none";
    dropdown2.style.display = "none";
    localStorage.setItem("checkbox2Checked", false);
    localStorage.setItem("checkbox3Checked", false);
    checkbox2.checked = false;
    checkbox3.checked = false;
  }
});

checkbox2.addEventListener("click", function() {
  if (checkbox2.checked) {
    localStorage.setItem("checkbox2Checked", true);
    dropdown1.style.display = "block";
  } else {
    localStorage.setItem("checkbox2Checked", false);
    dropdown1.style.display = "none";
  }
});

checkbox3.addEventListener("click", function() {
  if (checkbox3.checked) {
    localStorage.setItem("checkbox3Checked", true);
    dropdown2.style.display = "block";
  } else {
    localStorage.setItem("checkbox3Checked", false);
    dropdown2.style.display = "none";
  }
});

window.onload = function() {
  const checkbox1Checked = localStorage.getItem("checkbox1Checked");
  if (checkbox1Checked === "true") {
    checkbox1.checked = true;
    checkbox2.disabled = false;
    checkbox3.disabled = false;
    const checkbox2Checked = localStorage.getItem("checkbox2Checked");
    if (checkbox2Checked === "true") {
      checkbox2.checked = true;
      dropdown1.style.display = "block";
    }
    const checkbox3Checked = localStorage.getItem("checkbox3Checked");
    if (checkbox3Checked === "true") {
      checkbox3.checked = true;
      dropdown2.style.display = "block";
    }
  } else {
    checkbox2.disabled = true;
    checkbox3.disabled = true;
    dropdown1.style.display = "none";
    dropdown2.style.display = "none";
    localStorage.setItem("checkbox2Checked", false);
    localStorage.setItem("checkbox3Checked", false);
    checkbox2.checked = false;
    checkbox3.checked = false;
  }
};


//for attendance period

$(document).ready(function() {
  // Bind click event to save buttons
  $(".save-button1").click(function(event) {
    event.preventDefault(); // prevent default form submission
    // Get the form data
    var baseurl = document.getElementById('baseurl').value;
    var formData = $(this).closest("form").serialize();
    // Submit the form data using AJAX
    $.ajax({
      type: "POST",
      url: baseurl + '/save-attendance-period',
      data: formData,
      success: function(response) {
        // Handle the response
       // alert("Data saved successfully!");
        if (response.success) {
                new PNotify({
                    title: 'Success',
                    text: response.success,
                    delay:1500,
                    type: 'success'
                });
        } else if (response.warning) {
                new PNotify({
                    title: 'Warning',
                    text: response.warning,
                    delay:1500,
                    type: 'warning'
                });
        }
                   
      },
      error: function(jqXHR, textStatus, errorThrown) {
        alert("Error saving data: " + textStatus);
      }
    });
  });
});


//for attendance freq

$(document).ready(function() {
  // Bind click event to save buttons
  $(".save-button2").click(function(event) {
    event.preventDefault(); // prevent default form submission

    // Get the form data
    var baseurl = document.getElementById('baseurl').value;
    var formData = $(this).closest("form").serialize();

    // Submit the form data using AJAX
    $.ajax({
      type: "POST",
      url: baseurl + '/save-attendance-frequency',
      data: formData,
      success: function(response) {
        // Handle the response
        if (response.success) {
                new PNotify({
                    title: 'Success',
                    text: response.success,
                    delay:1500,
                    type: 'success'
                });
        }else if (response.warning) {
                new PNotify({
                    title: 'Warning',
                    text: response.warning,
                    type: 'warning'
                });
        }
      },
      error: function(jqXHR, textStatus, errorThrown) {
        alert("Error saving data: " + textStatus);
      }
    });
  });
});
// get references to the checkbox and attendance fields
const allowRequestCheckbox = document.getElementById('checkbox1');
const attendanceRequestInput = document.getElementById('checkbox2');
const attendancePeriodInput = document.getElementById('checkbox3');

// set default values for attendance fields
const defaultAttendanceRequest = "null";
const defaultAttendancePeriod = "null";

// add event listener to checkbox
allowRequestCheckbox.addEventListener('change', function() {
  // if checkbox is unchecked, set attendance fields to default values
  if (!this.checked) {
    attendanceRequestInput.value = defaultAttendanceRequest;
    attendancePeriodInput.value = defaultAttendancePeriod;

    // Get the form data
    var baseurl = document.getElementById('baseurl').value;
    var formData = $(this).closest("form").serialize();

    // Submit the form data using AJAX
    $.ajax({
      type: "POST",
      url: baseurl + '/save-attendance-frequency',
      data: formData,
      success: function(response) {
        // Handle the response
       // alert("Data saved successfully!");
      },
      error: function(jqXHR, textStatus, errorThrown) {
        //alert("Error saving data: " + textStatus);
      }
    });
    const pTag = document.getElementById('currentDays');
      pTag.textContent = "";

      

    $.ajax({
      type: "POST",
      url: baseurl + '/save-attendance-period',
      data: formData,
      success: function(response) {
        // Handle the response
        //alert("Data saved successfully!");
      },
      error: function(jqXHR, textStatus, errorThrown) {
       // alert("Error saving data: " + textStatus);
      }
    });
    const pTag1 = document.getElementById('currentTimes');
      pTag1.textContent = "";

}

});

//to make the value of attendance request to zero when unchecked
attendanceRequestInput.addEventListener('change', function() {
  // if checkbox is unchecked, set attendance fields to default values
  if (!this.checked) {
    attendanceRequestInput.value = defaultAttendanceRequest;
    const pTag = document.getElementById('currentDays');
      pTag.textContent = "";
    // Get the form data
    var baseurl = document.getElementById('baseurl').value;
    var formData = $(this).closest("form").serialize();

    // Submit the form data using AJAX
    $.ajax({
      type: "POST",
      url: baseurl + '/save-attendance-period',
      data: formData,
      success: function(response) {
        // Handle the response
        //alert("Data saved successfully!");
      },
      error: function(jqXHR, textStatus, errorThrown) {
        //alert("Error saving data: " + textStatus);
      }
    });

}

});

//to make the value of attendance period to zero when unchecked
attendancePeriodInput.addEventListener('change', function() {
  // if checkbox is unchecked, set attendance fields to default values
  if (!this.checked) {
    attendancePeriodInput.value = defaultAttendancePeriod;
    const pTag = document.getElementById('currentTimes');
      pTag.textContent = "";
    // Get the form data
    var baseurl = document.getElementById('baseurl').value;
    var formData = $(this).closest("form").serialize();

    // Submit the form data using AJAX
    $.ajax({
      type: "POST",
      url: baseurl + '/save-attendance-frequency',
      data: formData,
      success: function(response) {
        // Handle the response
       // alert("Data saved successfully!");
      },
      error: function(jqXHR, textStatus, errorThrown) {
        //alert("Error saving data: " + textStatus);
      }
    });

}

});

//to display the values dynamically 
function handleClick() {
      const dayValue = document.getElementById('week_value');
      const attFreqValue = dayValue.options[dayValue.selectedIndex].value;
      const pTag = document.getElementById('currentDays');
      pTag.textContent = attFreqValue;
   }

   function thisHandleClick(){
    const timeValue = document.getElementById('time_value');
      const attPeriodValue = timeValue.options[timeValue.selectedIndex].value;
      const pTag = document.getElementById('currentTimes');
      pTag.textContent = attPeriodValue;
   }

</script>


@endsection