@extends('layouts.dashboard')
<style>
  .leave-tabs.list-inline {
  display: flex;
  flex-wrap: wrap; /* Wrap to next line if needed */
  gap: 10px; /* Adjust spacing between items */
  padding-left: 0; /* Optional: reset default UL padding */
  list-style: none; /* Optional: remove bullet */
}

.leave-tabs .shift-wrapper {
  background: #4a5678;
  padding: 5px 10px;
  border-radius: 5px;
  color: white;
}

</style>
@section('content')

<div class="container">
  <div class="month-navigation d-flex align-items-center justify-content-between py-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="text-center">
    <!-- Optional month display here -->
  </div>
</div>

<div class="container-fluid pt-2">
  <ul class="list-inline leave-tabs">
    <li class="list-inline-item">
     <div class="shift-wrapper">
        <h4 class="mb-0 text-center">SL-Sick Leave</h4>
      </div>
    </li>
    <li class="list-inline-item">
      <div class="shift-wrapper">
        <h4 class="mb-0 text-center">CL-Casual Leave</h4>
      </div>
    </li>
    <li class="list-inline-item">
      <div class="shift-wrapper">
        <h4 class="mb-0 text-center">PL-Paid Leave</h4>
      </div>
    </li>
    <li class="list-inline-item">
       <div class="shift-wrapper">
        <h4 class="mb-0 text-center">CO-Comp. Off</h4>
      </div>
    </li>
    <li class="list-inline-item">
     <div class="shift-wrapper">
        <h4 class="mb-0 text-center">RH-Restricted Holiday</h4>
      </div>
    </li>
    <li class="list-inline-item">
      <div class="shift-wrapper">
        <h4 class="mb-0 text-center">NH-National Holiday</h4>
      </div>
    </li>
    <li class="list-inline-item">
      <div class="shift-wrapper">
        <h4 class="mb-0 text-center">P-Present</h4>
      </div>
    </li>
  </ul>
  <div class="row mt-3">
    <div class="col-12">
      <div id="attendance-message" class="text-center" style="display: none;"></div>
    </div>
  </div>
</div>

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

  <!-- Reason Modal -->
  <div class="modal fade" id="reasonModal" tabindex="-1" aria-labelledby="reasonModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="reasonModalLabel">Reason for CL</h5>
        </div>
        <div class="modal-body">
          <form id="reasonForm">
            <div class="mb-3 form-group">
              <label for="reasonDropdown" class="form-label">Reason</label>
              <select class="form-control form-select" id="reasonDropdown" name="reason">
                <option value="">Select Reason</option>
                <option value="Personal">Personal</option>
                <option value="Medical">Medical</option>
                <option value="Family Emergency">Family Emergency</option>
                <option value="Other">Other</option>
              </select>
            </div>
            <input type="hidden" id="selectedLeaveType">
            <input type="hidden" id="selectedEmployeeId">
            <input type="hidden" id="selectedDate">
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary cancel-btn" data-bs-dismiss="modal">Cancel</button>
          <button type="button" class="btn btn-primary" id="saveReasonBtn">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(`/employee/leave/get?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 employeeId = $(this).data('employee');
    let date = $(this).data('date');

    $('#selectedLeaveType').val(status);
    $('#selectedEmployeeId').val(employeeId);
    $('#selectedDate').val(date);

    if (status === 'CL') {
      $('#reasonModal').modal('show');
    } else {
      saveLeaveData(status, employeeId, date, "");
    }
  });

  $('#saveReasonBtn').on('click', function() {
    let reason = $('#reasonDropdown').val();
    let leaveType = $('#selectedLeaveType').val();
    let employeeId = $('#selectedEmployeeId').val();
    let date = $('#selectedDate').val();

    $('#reasonModal').modal('hide');

    saveLeaveData(leaveType, employeeId, date, reason);
  });

  $('.cancel-btn').on('click', function() {
    // Clear the form values
    $('#reasonDropdown').val('');
    $('#selectedLeaveType').val('');
    $('#selectedEmployeeId').val('');
    $('#selectedDate').val('');

    // Close the modal explicitly
    $('#reasonModal').modal('hide');
  });

  function saveLeaveData(status, employeeId, date, reason) {
    $.ajax({
      url: '/employee/leave/save',
      type: 'POST',
      data: {
        _token: '{{ csrf_token() }}',
        employee_id: employeeId,
        date: date,
        status: status,
        reason: reason
      },
      success: function(response) {
        $('#attendance-message').html('<div class="alert alert-success">' + response.message + '</div>').fadeIn();
        setTimeout(function() {
          $('#attendance-message').fadeOut();
        }, 3000);

        // Optional: Update reason text in UI if you have a cell or div for it
        let selector = 'tr[data-employee="' + response.employee_id + '"][data-date="' + response.date + '"]';
        $(selector).find('.reason').text(response.reason || 'N/A');
      },
      error: function(xhr) {
        const response = JSON.parse(xhr.responseText);
        $('#attendance-message').html('<div class="alert alert-danger">' + response.error + '</div>').fadeIn();
        setTimeout(function() {
          $('#attendance-message').fadeOut();
        }, 3000);
        $('select.status-dropdown[data-employee="' + employeeId + '"][data-date="' + date + '"]').val('');
      }
    });
  }
</script>

@endpush