@extends('layouts.dashboard')

@section('content')
<style>
  /* ---- TABLE ---- */
  .day.disabled {
    background: #f1f1f1;
    color: #aaa;
    cursor: not-allowed;
  }

  /* .day.today {
    background: #007bff;
    color: #fff;
    font-weight: bold;
    border-radius: 50%;
  } */

  .day.selected {
    background: #007bff;
    color: #fff;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .table thead th {
    background: orange;
    color: black;
    text-align: center;
  }

  .table tbody td {
    text-align: center;
  }

  /* -------- LEGEND -------- */
  .legend-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 14px;
    margin-bottom: 10px;
  }

  .legend-item {
    display: flex;
    align-items: center;
  }

  .legend-color {
    width: 14px;
    height: 14px;
    margin-right: 6px;
    border-radius: 2px;
  }

  /* -------- CALENDAR -------- */
  .calendar-wrapper {
    min-height: 330px;
    margin-bottom: 15px;
  }

  .calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    font-size: 18px;
    padding: 10px;
    background: #007bff;
    color: white;
  }

  .day-names,
  .calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
  }

  .day-name {
    font-weight: bold;
    padding: 5px 0;
  }

  .day {
    padding: 5px 0;
    border-radius: 6px;
    margin: 2px;
    cursor: pointer;
    position: relative;
  }

  .day.empty {
    visibility: hidden;
  }

  .bg-pl {
    background-color: #00ac42ff !important;
  }

  .bg-cl {
    background-color: #ffc107 !important;
  }

  .bg-sl {
    background-color: #ff0018 !important;
  }

  .bg-co {
    background-color: #26f1ffff !important;
  }

  .bg-lwp {
    background-color: #a109e6 !important;
  }

  .pl {
    background-color: #00ac42ff !important;
    color: white;
    border-radius: 4px;
  }

  .sl {
    background-color: #ff0018 !important;
    color: white;
    border-radius: 4px;
  }

  .cl {
    background-color: #ffc107 !important;
    color: white;
    border-radius: 4px;
  }

  .co {
    background-color: #26f1ffff !important;
    color: white;
    border-radius: 4px;
  }

  .lwp {
    background-color: #a109e6 !important;
    color: white;
    border-radius: 4px;
  }
.day.pl { background-color: #4caf50; }   /* green */
.day.sl { background-color: #2196f3; }  /* blue */
.day.cl { background-color: #ff9800; }  /* orange */
.day.co { background-color: #9c27b0; }  /* purple */
.day.lwp { background-color: #f44336; } /* red */
  /* -------- FORM -------- */
  .applying-leave-form label {
    font-size: 12px;
  }

  .custom-file-upload input[type="file"] {
    display: none;
  }

  .custom-file-upload label {
    background-color: #007bff;
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .custom-file-upload label:hover {
    background-color: #0056b3;
  }

  .preview-container {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .preview-container img {
    max-width: 200px;
    border-radius: 6px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    height: 100px;
    object-fit: cover;
  }

  .close {
    opacity: 1 !important;
  }

  .width-40 {
    width: 40px;
  }
</style>

<div class="container-fluid">
  <h1>Leave</h1>
  <div class="table-responsive" style="max-height: 432px; overflow-y: auto;">
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th class="width-40">Sr.No</th>
          <th>Name</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        @foreach($employees as $index => $emp)
        <tr>
          <td class="width-40">{{ $index+1 }}</td>
          <td>{{ $emp->name }}</td>
          <td>
            <button type="button" class="btn btn-primary btn-sm applyLeaveBtn"
              data-id="{{ $emp->id }}"
              data-name="{{ $emp->name }}">
              Apply Leave
            </button>

            <a href="{{ route('admin.leaveReport', ['employee_id' => $emp->id]) }}"
              class="btn btn-info btn-sm">
              View Report
            </a>
          </td>
        </tr>
        @endforeach
      </tbody>
    </table>
  </div>
</div>

<!-- ===== LEAVE APPLY MODAL ===== -->
<div class="modal fade" id="leaveModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-xl" role="document">
    <div class="modal-content">
      <div class="modal-header bg-primary text-white pt-2 pb-1">
        <h5 class="modal-title">Apply for Leave - <span id="empName"></span></h5>
        <button type="button" class="close text-white btnCloseModal" aria-label="Close">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">

        <!-- LEGEND -->
        <div class="legend-container">
          <div class="legend-item">
            <div class="legend-color bg-pl"></div>PL-&nbsp;Paid Leave
          </div>
          <div class="legend-item">
            <div class="legend-color bg-sl"></div>SL-&nbsp;Sick Leave
          </div>
          <div class="legend-item">
            <div class="legend-color bg-cl"></div>CL-&nbsp;Casual Leave
          </div>
          <div class="legend-item">
            <div class="legend-color bg-co"></div>CO-&nbsp;Comp-Off Leave
          </div>
          <div class="legend-item">
            <div class="legend-color bg-lwp"></div>LWP-&nbsp;Leave Without Pay
          </div>
        </div>

        <div class="row">
          <!-- CALENDAR LEFT -->
          <div class="col-md-4">
            <div class="calendar-wrapper card">
              <div class="calendar-header">
                <span class="arrow" onclick="changeMonth(-1,1)">&#8592;</span>
                <span id="calendar-title1"></span>
                <span class="arrow" onclick="changeMonth(1,1)">&#8594;</span>
              </div>
              <div class="calendar-body">
                <div class="day-names">
                  <div class="day-name">Sun</div>
                  <div class="day-name">Mon</div>
                  <div class="day-name">Tue</div>
                  <div class="day-name">Wed</div>
                  <div class="day-name">Thu</div>
                  <div class="day-name">Fri</div>
                  <div class="day-name">Sat</div>
                </div>
                <div class="calendar-days" id="calendar-days1"></div>
              </div>
            </div>
          </div>

          <!-- CALENDAR RIGHT -->
          <div class="col-md-4">
            <div class="calendar-wrapper card">
              <div class="calendar-header">
                <span class="arrow" onclick="changeMonth(-1,2)">&#8592;</span>
                <span id="calendar-title2"></span>
                <span class="arrow" onclick="changeMonth(1,2)">&#8594;</span>
              </div>
              <div class="calendar-body">
                <div class="day-names">
                  <div class="day-name">Sun</div>
                  <div class="day-name">Mon</div>
                  <div class="day-name">Tue</div>
                  <div class="day-name">Wed</div>
                  <div class="day-name">Thu</div>
                  <div class="day-name">Fri</div>
                  <div class="day-name">Sat</div>
                </div>
                <div class="calendar-days" id="calendar-days2"></div>
              </div>
            </div>
          </div>

          <!-- LEAVE FORM -->
          <div class="col-md-4">
            <div class="card card-primary">
              <div class="card-header">
                <h3 class="card-title">Apply Leave</h3>
              </div>
              <form class="applying-leave-form" id="leaveForm" enctype="multipart/form-data">
                @csrf
                <input type="hidden" name="employee_id" id="empId">
                <div class="card-body pb-0 py-1">

                  <div class="form-group">
                    <label>Time Type <span class="text-danger">*</span></label>
                    <select class="form-control" name="status" required id="timeType">
                      <option value="" selected>Select Time Type</option>
                      <option value="PL">PL-Paid Leave</option>
                      <option value="SL">SL-Sick Leave</option>
                      <option value="CL">CL-Casual Leave</option>
                      <option value="CO">CO-Comp-Off Leave</option>
                      <option value="LWP">Leave Without Pay</option>
                    </select>
                  </div>

                  <div class="form-group">
                    <label>Available Balance</label>
                    <input type="text" class="form-control" id="availableBalance" value="0 days" readonly>
                  </div>

                  <div class="form-row">
                    <div class="form-group col-md-6">
                      <label>Start Date <span class="text-danger">*</span></label>
                      <input type="date" name="start_date" id="startDate" class="form-control" required>
                    </div>
                    <div class="form-group col-md-6">
                      <label>End Date <span class="text-danger">*</span></label>
                      <input type="date" name="end_date" id="endDate" class="form-control" required>
                    </div>
                  </div>

                  <div class="form-row">
                    <div class="form-group col-md-6">
                      <label>Requesting</label>
                      <input type="text" name="requesting_days" id="leaveCount" class="form-control" readonly>
                    </div>
                    <div class="form-group col-md-6">
                      <label>Returning to Work On</label>
                      <input type="text" name="return_date" id="returnDate" class="form-control" readonly>
                    </div>
                  </div>

                  <div class="form-group">
                    <label>Comment</label>
                    <textarea class="form-control" name="reason" rows="2" placeholder="Enter comment"></textarea>
                  </div>

                  <div class="form-group">
                    <div class="custom-file-upload">
                      <label for="fileUpload"><i class="fas fa-upload"></i> Upload File</label>
                      <input type="file" id="fileUpload" name="attachment[]" accept="image/*" multiple>
                    </div>
                    <div id="previewContainer" class="preview-container"></div>
                  </div>
                </div>

                <div class="text-right py-2 px-4">
                  <button type="submit" class="btn btn-primary">Submit</button>
                  <button type="button" class="btn btn-secondary btnCloseModal">Cancel</button>
                </div>
              </form>
            </div>
          </div>
        </div> <!-- row end -->
      </div>
    </div>
  </div>
</div>
<!-- Bootstrap Modal -->
<!-- Bootstrap 4.6 Modal -->
<div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="alertModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header bg-danger text-dark py-1">
        <h5 class="modal-title" id="alertModalLabel">Invalid Selection</h5>
        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="alertModalBody">
        <!-- Message will be injected here -->
      </div>
    </div>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
  let leaveModal;

  // Modal open
  $(document).on("click", ".applyLeaveBtn", function() {
    let empName = $(this).data("name");
    let empId = $(this).data("id");
    $("#empName").text(empName);
    $("#empId").val(empId);

    $('#timeType').val('');
    $('#availableBalance').val('0 day(s)');
    $('#startDate').val('');
    $('#endDate').val('');
    $('#leaveCount').val('');
    $('#returnDate').val('');
    $('#previewContainer').html('');

    selectedStart = null;
    selectedEnd = null;

    leaveModal = new bootstrap.Modal(document.getElementById("leaveModal"));
    leaveModal.show();
  });

  // Modal close
  $(document).on("click", ".btnCloseModal", function() {
    if (leaveModal) {
      leaveModal.hide();
    }
  });

  // Fetch available leave dynamically
// Fetch available leave dynamically + update calendar colors
$('#timeType').on('change', function() {
  let type = $(this).val();
  let employeeId = $('#empId').val();

  // 🔥 Re-apply correct color based on new leave type
  highlightSelectedDates();

  if (type && employeeId) {
    $.ajax({
      url: "{{ route('leave.getAvailable') }}",
      type: "GET",
      data: {
        employee_id: employeeId,
        type: type
      },
      success: function(res) {
        let balance = res.available;
        $('#availableBalance').val(balance !== 'Unlimited' ? balance + " day(s)" : "Unlimited");
      },
      error: function(err) {
        $('#availableBalance').val("Unlimited");
        console.error(err);
      }
    });
  }
});


  // Calendar
  const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
  let today = new Date();
  let currentMonth1 = today.getMonth(),
    currentYear1 = today.getFullYear();
  let currentMonth2 = today.getMonth() + 1,
    currentYear2 = today.getFullYear();

  // Calculate leave days
  const startDate = document.getElementById("startDate"),
    endDate = document.getElementById("endDate"),
    leaveCount = document.getElementById("leaveCount"),
    returnDate = document.getElementById("returnDate");

  // ✅ Disable past dates in #startDate and #endDate
  document.addEventListener("DOMContentLoaded", function() {
    let today = new Date();
    let yyyy = today.getFullYear();
    let mm = String(today.getMonth() + 1).padStart(2, "0");
    let dd = String(today.getDate()).padStart(2, "0");
    let currentDate = yyyy + "-" + mm + "-" + dd;

    if (startDate) {
      startDate.setAttribute("min", currentDate);

      startDate.addEventListener("input", function() {
        if (this.value < currentDate) {
          showAlert("Start Date must be today or future date!");
          this.value = "";
        }

        // ✅ If startDate changes, adjust endDate min accordingly
        if (endDate) {
          endDate.setAttribute("min", this.value || currentDate);
        }
      });
    }

    if (endDate) {
      endDate.setAttribute("min", currentDate);

      endDate.addEventListener("input", function() {
        if (this.value < currentDate) {
          showAlert("End Date must be today or future date!");
          this.value = "";
        }

        // ✅ Ensure End Date is not before Start Date
        if (startDate && this.value && this.value < startDate.value) {
          showAlert("End Date must be after or equal to Start Date!");
          this.value = "";
        }
      });
    }
  });

  function renderCalendar(month, year, calendarId, titleId) {
    let firstDay = new Date(year, month).getDay();
    let daysInMonth = 32 - new Date(year, month, 32).getDate();
    let tbl = document.getElementById(calendarId);
    tbl.innerHTML = "";
    document.getElementById(titleId).innerText = monthNames[month] + " " + year;

    let today = new Date();
    today.setHours(0, 0, 0, 0);

    let date = 1;
    for (let i = 0; i < 6; i++) {
      for (let j = 0; j < 7; j++) {
        if (i === 0 && j < firstDay) {
          let cell = document.createElement("div");
          cell.classList.add("day", "empty");
          tbl.appendChild(cell);
        } else if (date > daysInMonth) {
          break;
        } else {
          let cell = document.createElement("div");
          cell.classList.add("day");
          cell.innerText = date;

          let cellDate = new Date(year, month, date);

          // Disable past dates
          if (cellDate < today) {
            cell.classList.add("disabled");
            cell.style.pointerEvents = "none";
            cell.style.opacity = "0.5";
          } else {
            cell.addEventListener("click", function() {
              selectDate(cell, cellDate);
            });
          }

          // Highlight today
          if (cellDate.getTime() === today.getTime()) {
            cell.classList.add("today");
          }

          tbl.appendChild(cell);
          date++;
        }
      }
    }
    highlightSelectedDates();
  }

  let selectedStart = null;
  let selectedEnd = null;

  function showAlert(message) {
    document.getElementById("alertModalBody").innerText = message;
    let alertModal = new bootstrap.Modal(document.getElementById("alertModal"));
    alertModal.show();
  }

  function selectDate(cell, dateObj) {
    let today = new Date();
    today.setHours(0, 0, 0, 0);

    if (dateObj < today) {
      showAlert("Date must be today or future date!");
      return;
    }

    if (!selectedStart || (selectedStart && selectedEnd)) {
      document.querySelectorAll(".day.selected").forEach((el) =>
        el.classList.remove("selected")
      );
      selectedStart = dateObj;
      selectedEnd = null;
      cell.classList.add(getLeaveClass());
      document.getElementById("startDate").value =
        dateObj.toISOString().split("T")[0];
      document.getElementById("endDate").value = "";
      document.getElementById("leaveCount").value = "";
      document.getElementById("returnDate").value = "";

      // ✅ Adjust endDate min dynamically
      if (endDate) {
        endDate.setAttribute("min", selectedStart.toISOString().split("T")[0]);
      }

    } else if (selectedStart && !selectedEnd) {
      if (dateObj >= selectedStart) {
        selectedEnd = dateObj;
        cell.classList.add(getLeaveClass());
        document.getElementById("endDate").value =
          dateObj.toISOString().split("T")[0];
        calculateDays();
      } else {
        showAlert("End date must be after Start Date!");
      }
    }
  }

  function changeMonth(n, cal) {
    if (cal === 1) {
      currentMonth1 += n;
      if (currentMonth1 < 0) {
        currentMonth1 = 11;
        currentYear1--;
      }
      if (currentMonth1 > 11) {
        currentMonth1 = 0;
        currentYear1++;
      }
      renderCalendar(currentMonth1, currentYear1, "calendar-days1", "calendar-title1");
    } else {
      currentMonth2 += n;
      if (currentMonth2 < 0) {
        currentMonth2 = 11;
        currentYear2--;
      }
      if (currentMonth2 > 11) {
        currentMonth2 = 0;
        currentYear2++;
      }
      renderCalendar(currentMonth2, currentYear2, "calendar-days2", "calendar-title2");
    }
  }
  renderCalendar(currentMonth1, currentYear1, "calendar-days1", "calendar-title1");
  renderCalendar(currentMonth2, currentYear2, "calendar-days2", "calendar-title2");



  function calculateDays() {
    if (startDate.value && endDate.value) {
      let s = new Date(startDate.value),
        e = new Date(endDate.value);

      if (e < s) {
        showAlert("End date must be after start date!");
        endDate.value = ""; // reset invalid end date
        leaveCount.value = "";
        returnDate.value = "";
        selectedEnd = null;
        highlightSelectedDates();
        return;
      }

      let count = 0;
      for (let d = new Date(s); d <= e; d.setDate(d.getDate() + 1)) {
        if (d.getDay() !== 0) count++; // ✅ only skip Sundays
      }

      leaveCount.value = count + " day(s)";
      let r = new Date(e);
      r.setDate(r.getDate() + 1);
      returnDate.value = r.toDateString();
    }
  }

  // startDate.addEventListener("change", calculateDays);
  // endDate.addEventListener("change", calculateDays);

startDate.addEventListener("change", () => {
  if (!startDate.value) {
    leaveCount.value = "";
    returnDate.value = "";
    selectedStart = null;
    selectedEnd = null;
    highlightSelectedDates();
    return;
  }

  selectedStart = new Date(startDate.value);
  calculateDays();
  highlightSelectedDates();
});

endDate.addEventListener("change", () => {
  if (!endDate.value) {
    leaveCount.value = "";
    returnDate.value = "";
    selectedEnd = null;
    highlightSelectedDates();
    return;
  }

  selectedEnd = new Date(endDate.value);
  calculateDays();
  highlightSelectedDates();
});

  // File preview
  document.getElementById("fileUpload").addEventListener("change", function(event) {
    let files = event.target.files;
    let preview = document.getElementById("previewContainer");
    preview.innerHTML = "";
    for (let i = 0; i < files.length; i++) {
      let reader = new FileReader();
      reader.onload = function(e) {
        let img = document.createElement('img');
        img.src = e.target.result;
        preview.appendChild(img);
      }
      reader.readAsDataURL(files[i]);
    }
  });

  // Submit leave form
 // Submit leave form
document.getElementById('leaveForm').addEventListener('submit', function(e) {
  e.preventDefault();

  let type = document.getElementById("timeType").value;
  let balanceText = document.getElementById("availableBalance").value;
  let balance = balanceText.includes("Unlimited") ? Infinity : parseInt(balanceText);

  // ✅ Validation for CL, PL, CO
  if ((type === "CL" || type === "PL" || type === "CO") && balance === 0) {
    Swal.fire({
      icon: 'error',
      title: 'Not Allowed',
      text: 'You have 0 balance for this leave type!',
      confirmButtonColor: '#007bff'
    });
    return; // stop submission
  }

  let formData = new FormData(this);
  const submitBtn = document.querySelector('#leaveForm button[type="submit"]');
  submitBtn.disabled = true;

  fetch("{{ route('leave.save') }}", {
      method: "POST",
      body: formData,
      headers: {
        'X-CSRF-TOKEN': '{{ csrf_token() }}'
      }
    })
    .then(res => res.json())
    .then(data => {
      if (data.success) {
        Swal.fire({
          icon: 'success',
          title: 'Success',
          text: data.message,
          confirmButtonColor: '#007bff'
        }).then(() => location.reload());
      } else if (data.error) {
        Swal.fire({
          icon: 'error',
          title: 'Oops!',
          text: data.error,
          confirmButtonColor: '#007bff'
        });
      }
    })
    .catch(err => {
      Swal.fire({
        icon: 'error',
        title: 'Something went wrong',
        text: 'Please try again later!',
        confirmButtonColor: '#007bff'
      });
      console.error(err);
    })
    .finally(() => submitBtn.disabled = false);
});


  function formatDateLocal(date) {
    let y = date.getFullYear();
    let m = String(date.getMonth() + 1).padStart(2, '0');
    let d = String(date.getDate()).padStart(2, '0');
    return `${y}-${m}-${d}`;
  }

  function getLeaveClass() {
    let type = document.getElementById("timeType").value;
    if (type === "PL") return "pl";
    if (type === "SL") return "sl";
    if (type === "CL") return "cl";
    if (type === "CO") return "co";
    if (type === "LWP") return "lwp";
    return "selected"; // fallback if none selected
  }

  function highlightSelectedDates() {
    document.querySelectorAll('.day').forEach(el => {
      el.classList.remove('selected', 'pl', 'sl', 'cl', 'co', 'lwp');
    });

    if (!startDate.value) return;

    let sVal = new Date(startDate.value);
    let eVal = endDate.value ? new Date(endDate.value) : null;
    let leaveClass = getLeaveClass();

    document.querySelectorAll('.day').forEach(el => {
      if (el.classList.contains("empty")) return;

      let parentId = el.parentElement.id;
      let titleId = parentId === "calendar-days1" ? "calendar-title1" : "calendar-title2";
      let [monthName, year] = document.getElementById(titleId).innerText.split(" ");
      let month = monthNames.indexOf(monthName);
      let cellDate = new Date(year, month, parseInt(el.innerText));

      let cellStr = formatDateLocal(cellDate);
      let startStr = formatDateLocal(sVal);
      let endStr = eVal ? formatDateLocal(eVal) : null;

      if (!endStr && cellStr === startStr) {
        el.classList.add(leaveClass);
      }
      if (endStr && cellStr >= startStr && cellStr <= endStr) {
        el.classList.add(leaveClass);
      }
    });
  }
</script>
@endsection