@extends('layouts.roster')

@section('content')

<section class="content">
  <div class="container-fluid pt-2">
    <div class="row">
    <input hidden id="user_id" value={{ $id }}>
      <div class="col-xl-3 col-lg-3 col-md-6 col-12">
        <div class="shift-wrapper">
          <h3 class="mb-0 text-center">A</h3>
          <h4 class="mb-0 text-center">Shift Timing</h4>
          <button type="button" class="btn btn-warning p-0 bg-transparent border-0 text-white openShiftModal" data-name="A">
            <span>{{ isset($a_shift_time)?$a_shift_time->start_time:'Select Time'}}</span><span>{{ isset($a_shift_time)?' - ' .$a_shift_time->end_time:''}}</span>
          </button>
        </div>
      </div>
      <div class="col-xl-3 col-lg-3 col-md-6 col-12">
        <div class="shift-wrapper">
          <h3 class="mb-0 text-center">B </h3>
          <h4 class="mb-0 text-center">Shift Timing</h4>
          <button type="button" class="btn btn-warning p-0 bg-transparent border-0 text-white openShiftModal" data-name="B">
            <span>{{ isset($b_shift_time)?$b_shift_time->start_time:'Select Time'}}</span><span>{{ isset($b_shift_time)?' - ' .$b_shift_time->end_time:''}}</span>
          </button>
        </div>
      </div>
      <div class="col-xl-3 col-lg-3 col-md-6 col-12">
        <div class="shift-wrapper">
          <h3 class="mb-0 text-center">C </h3>
          <h4 class="mb-0 text-center">Shift Timing</h4>
          <button type="button" class="btn btn-warning p-0 bg-transparent border-0 text-white openShiftModal" data-name="C">
            <span>{{ isset($c_shift_time)?$c_shift_time->start_time:'Select Time'}}</span><span>{{ isset($c_shift_time)?' - ' .$c_shift_time->end_time:''}}</span>
          </button>
        </div>
      </div>
      <div class="col-xl-3 col-lg-3 col-md-6 col-12">
        <div class="shift-wrapper">
          <h3 class="mb-0 text-center">G </h3>
          <h4 class="mb-0 text-center">Shift Timing</h4>
          <button type="button" class="btn btn-warning p-0 bg-transparent border-0 text-white openShiftModal" data-name="G">
            <span>{{ isset($g_shift_time)?$g_shift_time->start_time:'Select Time'}}</span><span>{{ isset($g_shift_time)?' - ' .$g_shift_time->end_time:''}}</span>
          </button>
        </div>
      </div>
    </div>
</section>

<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-4 col-lg-4 col-md-6 col-12">
      <div class="shift-wrapper">
        <h4 class="mb-0 text-center">L - Leave</h4>
      </div>
    </div>
    <div class="col-xl-4 col-lg-4 col-md-6 col-12">
      <div class="shift-wrapper">
        <h4 class="mb-0 text-center">W - Weekly Off </h4>
      </div>
    </div>
    <div class="col-xl-4 col-lg-4 col-md-6 col-12">
      <div class="shift-wrapper">
        <h4 class="mb-0 text-center">A,B,C,G - Shifts</h4>
      </div>
    </div>
  </div>
</div>

<section class="container-fluid">

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

</section>

@endsection

@push('scripts')

<script>
  var curMonth;
  var curYear;

  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);

    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) {
      var id = $("#user_id").val();
      //    selectedMonthEl.textContent = getFormattedMonth(year, month);
      fetch(`/show-attendance/${id}?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);
  });

</script>
@endpush