@extends('layouts.dashboard')

@section('content')

<section class="content">
  <div class="container-fluid pt-2">
    <div class="row">
      <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 toggle="tooltip" data-toggle="tooltip" data-placement="top"
              title="Click to Update Time">{{ 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 toggle="tooltip" data-toggle="tooltip" data-placement="top"
              title="Click to Update Time">{{ 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 toggle="tooltip" data-toggle="tooltip" data-placement="top"
              title="Click to Update Time">{{ 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 toggle="tooltip" data-toggle="tooltip" data-placement="top"
              title="Click to Update Time">{{ 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-3 col-lg-3 col-md-6 col-12">
      <div class="shift-wrapper">
        <h4 class="mb-0 text-center">L - Leave</h4>
      </div>
    </div>
    <div class="col-xl-3 col-lg-3 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-3 col-lg-3 col-md-6 col-12">
      <div class="shift-wrapper">
        <h4 class="mb-0 text-center">CO - Com. Off </h4>
      </div>
    </div>
    <div class="col-xl-3 col-lg-3 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', ['desks' => $desks, '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 text-white" data-dismiss="modal" aria-label="Close" style="opacity: 1;">
            <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(`/turantams/get-attendance?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: "{{ route('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: "{{ route('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);
    //   $.ajax({
    //     url: "{{ route('team.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");
    // });
    $(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: "{{ route('team.get-employees') }}",
    data: {
      'desk_id': deskId,
      'year': curYear,
      'month': curMonth,
    },
    type: "GET",
    success: function(data) {
      // 1. Empty and append the placeholder
      $("#employeeSelect").empty().append('<option value="">Select Employee</option>');
      
      // 2. Append new employee options
      $.each(data, function(index, employee) {
        $("#employeeSelect").append(`<option value="${employee.id}">${employee.name}</option>`);
      });
      
      // 3. **CRITICAL FIX: Initialize Select2 here**
      // Destroy any previous Select2 instance before initializing a new one
      if ($("#employeeSelect").data('select2')) {
          $("#employeeSelect").select2('destroy');
      }
      
      $("#employeeSelect").select2({
          placeholder: "Select an Employee",
          dropdownParent: $('#teamModal'), // Added: Helps Select2 position correctly inside modals
          allowClear: true,
      });

      // 4. Show the modal *after* Select2 is initialized
      $("#teamModal").modal("show");
    }
  });

  // Remove the old line: $("#teamModal").modal("show"); if it was outside the success block.
});

    // 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: "{{ route('team.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(curYear, curMonth, 0).getDate(); // Correct month/year used here

          let attendanceCells = "";
          for (let i = 1; i <= daysInMonth; i++) {
            let currentDate = new Date(curYear, curMonth - 1, i);
            let year = currentDate.getFullYear();
            let month = String(currentDate.getMonth() + 1).padStart(2, "0");
            let day = String(currentDate.getDate()).padStart(2, "0");
            let formattedDate = `${year}-${month}-${day}`;

            attendanceCells += `
                    <td>
                        <select class="status-dropdown" data-desk="${deskId}" data-employee="${response.id}" data-date="${formattedDate}">
                            <option value="">-</option>
                            <option value="A">A</option>
                            <option value="W">W</option>
                            <option value="L">L</option>
                            <option value="B">B</option>
                            <option value="C">C</option>
                            <option value="G">G</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: "{{ route('team.remove-team-member') }}",
        type: "POST",
        data: {
          id: memberId,
          _token: "{{ csrf_token() }}"
        }
      });
    });

  });
</script>

@endpush