@extends('layouts.dashboard')

@section('content')


<div class="container">
  <div class="month-navigation d-flex align-items-center justify-content-between my-3">
    <button id="prevMonth" class="btn btn-light">&laquo;</button>
    <div id="monthsContainer" class="d-flex flex-wrap justify-content-center">
      <!-- Months will be dynamically generated here -->
    </div>
    <button id="nextMonth" class="btn btn-light">&raquo;</button>
  </div>

  <div id="monthData" class="mt-4 text-center">
    <!-- <h3 id="selectedMonth"></h3>
    <p id="monthContent">Select a month to view data.</p> -->
  </div>
</div>

<div class="container-fluid pt-2">
  <div class="row">
    <div class="col-xl-2 col-lg-2 col-md-6 col-12">
      <div class="shift-wrapper">
        <h4 class="mb-0 text-center">CL-Casual Leave</h4>
      </div>
    </div>
    <div class="col-xl-2 col-lg-2 col-md-6 col-12">
      <div class="shift-wrapper">
        <h4 class="mb-0 text-center">PL-Paid Leave </h4>
      </div>
    </div>
    <div class="col-xl-2 col-lg-2 col-md-6 col-12">
      <div class="shift-wrapper">
        <h4 class="mb-0 text-center">CO-Comp. Off</h4>
      </div>
    </div>

     <div class="col-xl-2 col-lg-2 col-md-6 col-12">
      <div class="shift-wrapper">
        <h4 class="mb-0 text-center">RH-Restricated Holiday</h4>
      </div>
    </div>

     <div class="col-xl-2 col-lg-2 col-md-6 col-12">
      <div class="shift-wrapper">
        <h4 class="mb-0 text-center">NH-National Holiday</h4>
      </div>
    </div>

     <div class="col-xl-2 col-lg-2 col-md-6 col-12">
      <div class="shift-wrapper">
        <h4 class="mb-0 text-center">P-Present</h4>
      </div>
    </div>
  </div>
</div>

<section class="container-fluid">

  <!-- Container where the data will be loaded -->
  <div id="attendanceData">
    @include('leave.employee', ['employees' => $employees, 'year' => $year, 'month' => $month])
  </div>


  <!-- Shifts Modal -->
  <div class="modal fade" id="shiftModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title fs-5" id="exampleModalLabel"><span id="shiftName"></span> Shift Timing Update</h5>
          <button type="button" class="close ml-0" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <form id="shiftTimeForm">
            @csrf
            <div class="row">
              <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                <div class="form-group">
                  <input type="text" name="shift_name" id="shift_name" hidden>

                  <label for="exampleInputDesignation">Start Time</label>
                  <div class="input-group time" id="in-time-picker" data-target-input="nearest">
                    <input type="text" id="in-time" class="form-control datetimepicker-input" data-target="#in-time-picker" name="start_time" value="" placeholder="Start Time" />
                    <div class="input-group-append" data-target="#in-time-picker" data-toggle="datetimepicker">
                      <div class="input-group-text"><i class="fa fa-clock"></i></div>
                    </div>
                  </div>
                  <span class="error-message text-danger" id="start_time_error"></span>
                </div>
              </div>
              <div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
                <div class="form-group">
                  <label for="exampleInputDesignation">End Time</label>
                  <div class="input-group time" id="out-time-picker" data-target-input="nearest">
                    <input type="text" id="out-time" class="form-control datetimepicker-input" data-target="#out-time-picker" name="end_time" value="" placeholder="End Time" />
                    <div class="input-group-append" data-target="#out-time-picker" data-toggle="datetimepicker">
                      <div class="input-group-text"><i class="fa fa-clock"></i></div>
                    </div>
                  </div>
                  <span class="error-message text-danger" id="end_time_error"></span>

                </div>
              </div>
            </div>
            <div class="modal-footer-wrap float-right">
              <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
              <button type="submit" class="btn btn-warning">Save changes</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>



  <!-- Add Team Member Modal -->
  <div class="modal fade" id="teamModal" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Add Team Member to <span id="deskName"></span></h5>
          <button type="button" class="close ml-0" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div class="modal-body">
          <input type="hidden" id="desk_id">
          <label>Select Employee:</label>
          <select class="select2  form-control " id="employeeSelect" style="width: 100%;">
            <option value="">Select Employee</option>
          </select>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-primary" id="saveTeamMember">Save</button>
        </div>
      </div>
    </div>
  </div>

</section>

@endsection

@push('scripts')

<script>
  var curMonth;
  var curYear;
  // let date;

  document.addEventListener("DOMContentLoaded", function() {
    const monthsContainer = document.getElementById("monthsContainer");
    //    const selectedMonthEl = document.getElementById("selectedMonth");
    const attendanceDataContainer = document.getElementById("attendanceData");
    const prevMonthBtn = document.getElementById("prevMonth");
    const nextMonthBtn = document.getElementById("nextMonth");

    let currentDate = new Date();
    let currentYear = currentDate.getFullYear();
    let currentMonth = currentDate.getMonth() + 1; // JS months are 0-based
    curMonth = currentMonth;
    curYear = currentYear;
    // console.log(currentMonth);

    //   date = `${currentYear}-${String(currentMonth).padStart(2, '0')}`;

    function getFormattedMonth(year, month) {
      let shortMonth = new Date(year, month - 1).toLocaleString("en-US", {
        month: "short"
      });
      let shortYear = year.toString().slice(-2);
      return `${shortMonth}'${shortYear}`;
    }

    function renderMonths() {
      monthsContainer.innerHTML = "";
      for (let i = 1; i <= 12; i++) {
        let formattedMonth = getFormattedMonth(currentYear, i);
        let btn = document.createElement("button");
        btn.textContent = formattedMonth;
        btn.classList.add("btn", "btn-outline-primary", "m-1");
        btn.dataset.month = i;

        if (i === currentMonth) {
          btn.classList.add("active");
        }

        btn.addEventListener("click", function() {
          currentMonth = i;
          curMonth = currentMonth;
          curYear = currentYear;

          loadMonthData(currentYear, currentMonth);
          renderMonths();
        });

        monthsContainer.appendChild(btn);
      }
    }

    function loadMonthData(year, month) {
      //    selectedMonthEl.textContent = getFormattedMonth(year, month);
      fetch(`/get-leave?year=${year}&month=${month}`)
        .then(response => response.text())
        .then(html => {
          attendanceDataContainer.innerHTML = html;
        })
        .catch(error => console.error("Error loading data:", error));
    }

    prevMonthBtn.addEventListener("click", function() {
      if (currentMonth === 1) {
        currentMonth = 12;
        currentYear--;
      } else {
        currentMonth--;
      }

      loadMonthData(currentYear, currentMonth);
      renderMonths();
    });

    nextMonthBtn.addEventListener("click", function() {
      if (currentMonth === 12) {
        currentMonth = 1;
        currentYear++;
      } else {
        currentMonth++;
      }

      loadMonthData(currentYear, currentMonth);
      renderMonths();
    });

    renderMonths();
    loadMonthData(currentYear, currentMonth);
  });


  $(document).on('change', '.status-dropdown', function() {
    let status = $(this).val();
    let deskId = $(this).data('desk');
    let employeeId = $(this).data('employee');
    let date = $(this).data('date');
    // Using the global `date` variable here
    // var date1 = date;
    //   let date1 = `${date}-${selectedDay}`;

    $.ajax({
      url: '/save-desk-employee-attendance',
      type: 'POST',
      data: {
        _token: '{{ csrf_token() }}',
        desk_id: deskId,
        employee_id: employeeId,
        date: date, // Pass the `date` variable here
        status: status
      },
      success: function(response) {
        console.log(response.message);
      },
      error: function(xhr) {
        console.log(xhr.responseText);
      }
    });
  });

  $(document).ready(function() {

    $('#in-time-picker,#out-time-picker').datetimepicker({
      format: 'hh:mm A', // Set the format to only time (24-hour format)
      showClear: true, // Optional: allows clearing the input
      showClose: true, // Optional: allows closing the picker with a button
      datepicker: false, // Disable the calendar (date selection)
      useCurrent: true // Optional: prevent showing the current time when the field is clicked
    });

    $(".openShiftModal").click(function() {
      let name = $(this).data("name");

      $("#shift_name").val(name);
      $("#shiftName").text(name);

      $.ajax({
        url: "/get-shift-data",
        type: "GET",
        data: {
          name: name
        },
        success: function(response) {
          if (response) {
            $("#in-time").val(response.start_time);
            $("#out-time").val(response.end_time);
          } else {
            $("#in-time").val('');
            $("#out-time").val('');
          }
          $("#shiftModal").modal("show");
        },
        error: function() {
          console.log("Error fetching shift data");
        }
      });

    });


    // Clear errors when user clicks on input fields
    $("input").on("click", function() {
      $(this).siblings(".error-message").text("");
    });

    $("#shiftTimeForm").submit(function(e) {
      e.preventDefault(); // Prevent normal form submission

      // Clear previous error messages
      $(".error-message").text("");

      let formData = {
        _token: "{{ csrf_token() }}",
        shift_name: $("#shift_name").val(),
        start_time: $("#in-time").val(),
        end_time: $("#out-time").val()
      };

      $.ajax({
        url: "{{ route('roaster.update-time') }}",
        type: "POST",
        data: formData,
        success: function(response) {
          //     alert("Shift time updated successfully!");
          location.reload();
          $("#shiftModal").modal("hide");
        },
        error: function(xhr) {
          if (xhr.status === 422) {
            let errors = xhr.responseJSON.errors;

            if (errors.start_time) {
              $("#start_time_error").text(errors.start_time[0]);
            }
            if (errors.end_time) {
              $("#end_time_error").text(errors.end_time[0]);
            }
            if (errors.shift_name) {
              $("#shift_name_error").text(errors.shift_name[0]);
            }
          }
        }
      });
    });


    $(".select2").select2({
      placeholder: "Select an Employee",
      allowClear: true,

    });

    // Open Modal with Desk Info
    $(document).on('click', ".openTeamModal", function() {
      let deskId = $(this).data("id");
      let deskName = $(this).data("name");

      $("#desk_id").val(deskId);
      $("#deskName").text(deskName);
      console.log('heredd', curMonth, curYear);
      // Fetch Employees List
      $.ajax({
        url: "/get-employees",
        data: {
          'desk_id': deskId,
          'year': curYear,
          'month': curMonth,
        },
        type: "GET",
        success: function(data) {
          $("#employeeSelect").empty().append('<option value="">Select Employee</option>');
          $.each(data, function(index, employee) {
            $("#employeeSelect").append(`<option value="${employee.id}">${employee.name}</option>`);
          });
        }
      });

      $("#teamModal").modal("show");
    });

    // Save Team Member
    $("#saveTeamMember").click(function() {
      let deskId = $("#desk_id").val();
      let employeeId = $("#employeeSelect").val();

      if (!employeeId) {
        alert("Please select an employee.");
        return;
      }
      $.ajax({
        url: "/add-team-member",
        type: "POST",
        data: {
          desk_id: deskId,
          employee_id: employeeId,
          year: curYear,
          month: curMonth,
          _token: "{{ csrf_token() }}"
        },
        success: function(response) {
          let teamMembersTable = $(`#teamMembers-${deskId}`);
          let lastRow = teamMembersTable.find("tr:last-child");
          let lastIndex = parseInt(lastRow.find("td:first").text()) || 0; // Fix SL.No issue

          //   let daysInMonth = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getDate();
          let daysInMonth = new Date(curYear, curMonth, 0).getDate(); // Correct month/year used here

          let attendanceCells = "";
          for (let i = 1; i <= daysInMonth; i++) {
            //    let currentDate = new Date();
            //    currentDate.setDate(i);
            //     let formattedDate = currentDate.toISOString().split("T")[0]; // Format as YYYY-MM-DD
            //   let formattedDate = i; // Format as YYYY-MM-DD


            let currentDate = new Date(curYear, curMonth - 1, i);
            let formattedDate = currentDate.toISOString().split("T")[0];
            console.log(formattedDate);
            attendanceCells += `
                    <td>
                        <select class="status-dropdown" data-desk="${deskId}" data-employee="${response.id}" data-date="${formattedDate}">
                            <option value="">-</option>
                            <option value="CL">CL-Casual Leave</option>
                            <option value="PL">PL-Paid Leave</option> 
                            <option value="CO">CO-Comp. Off</option>
                            <option value="RH">RH-Restricted Holiday</option>
                            <option value="NH">NH-National Holiday</option>
                            <option value="P">P-Present</option>
                        </select>

                    </td>
                `;
          }

          // Check if the employee has attendance data (sent from backend)
          let deleteButton = response.has_attendance ? "" : `<td><i class="fa fa-trash text-danger remove-member" data-id="${response.id}"></i></td>`;


          let newRow = `
                    <tr>
                        <td>${lastIndex + 1}</td>
                        <td>${response.name}</td>
                        <td>${response.phone}</td>
                        ${attendanceCells}
                        ${deleteButton}
                    </tr>
                `;
          $(`#teamMembers-${deskId}`).append(newRow);
          $("#teamModal").modal("hide");
        }
      });
    });

    // Remove Member
    $(document).on("click", ".remove-member", function() {
      let memberId = $(this).data("id");
      $(this).closest("tr").remove();

      $.ajax({
        url: "/remove-team-member",
        type: "POST",
        data: {
          id: memberId,
          _token: "{{ csrf_token() }}"
        }
      });
    });


    $(document).on('change', '.status-dropdown', function() {
      let status = $(this).val();
      let deskId = $(this).data('desk');
      let employeeId = $(this).data('employee');
      let date = $(this).data('date');

      $.ajax({
        url: '/save-desk-employee-attendance',
        type: 'POST',
        data: {
          _token: '{{ csrf_token() }}',
          desk_id: deskId,
          employee_id: employeeId,
          date: date,
          status: status
        },
        success: function(response) {
          console.log(response.message);
        },
        error: function(xhr) {
          console.log(xhr.responseText);
        }
      });
    });

  });
</script>

@endpush