@extends('layouts.dashboard')

@section('content')
<style>
  /* LEGEND */
  .legend-wrapper .legend-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 14px;
  }

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

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


  /* CALENDAR */
  .calendar-wrapper {
    min-height: 330px;
    position: sticky;
    top: 5px;
  }

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

  .calendar-body {
    padding: 10px;
  }

  .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;
  }

   .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;
  }

  /* STATUS CLASSES */


  .day.empty {
    visibility: hidden;
  }

  /* ARROWS */
  .arrow {
    cursor: pointer;
  }

  /* TOOLTIPS */
  .tooltip-box {
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #343a40;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    display: none;
    z-index: 1;
    white-space: nowrap;
  }

  .day:hover .tooltip-box {
    display: block;
  }

  /* WRAPPER FOR OTHER CONTENT */
  .recent-box {
    max-height: 440px;
    overflow-y: auto;
  }

  .leave-item {
    margin-bottom: 5px;
  }

  .bg-warning.text-white>div span {
    color: #fff !important;
  }

  .bg-warning.text-white>div span.badge.badge-light {
    color: #000 !important;
  }

  .fade-in {
    animation: fadeIn 0.8s ease-in;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }

    to {
      opacity: 1;
    }
  }

  /* form css */
  .applying-leave-form label {
    font-size: 12px;
  }

  .day.personal-time-off {
    background-color: #69727a7a;
    border: 2px solid #69727a;
  }

  .day.sick-leave {
    background-color: #0078f9;
    border: 2px solid #0078f9;
  }

  .day.casual-leave {
    background-color: #ffc1076e;
    border: 2px solid #ffc107;
  }

  .custom-file-upload {
    position: relative;
    display: inline-block;
    float: right;
  }

  .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;
    transition: background 0.3s ease;
  }

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

  .loader {
    margin-top: 10px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    position: relative;
    top: 10px;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  .preview-container {
    margin-top: 15px;
  }

  .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;
  }

  /* end of form css */
</style>

<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>Apply Leave</h1>
      </div>
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="/">Home</a></li>
          <li class="breadcrumb-item active">Employees</li>
        </ol>
      </div>
    </div>
  </div><!-- /.container-fluid -->
</section>


<section class="container-fluid legend-wrapper">
  <div class="row">
    <div class="col-12">
      <div class="legend-container mb-4">
          <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>

    <div class="col-md-4">
      <div class="calendar-wrapper card m-0">
        <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>
    <div class="col-md-4">
      <div class="calendar-wrapper card m-0">
        <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>
    <div class="col-md-4">
      <div class="card card-primary">
        <div class="card-header">
          <h3 class="card-title">Apply for Leave</h3>
        </div>

        <form class="applying-leave-form" id="leaveForm" enctype="multipart/form-data">
          <input type="hidden" name="employee_id" value="{{ optional(auth()->guard('employee')->user())->id }}">

          @csrf

          {{-- ✅ SUCCESS MESSAGE HERE --}}
          @if (session('success'))
          <div class="alert alert-success alert-dismissible fade show mt-2" role="alert">
            {{ session('success') }}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>
          @endif

          <div class="card-body pb-0">
            <!-- Time Type -->
            <div class="form-group">
              <label for="timeType">Time Type <span class="text-danger">*</span></label>
              <select class="form-control select2 is-invalid" id="timeType" name="status">
                <option selected disabled>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</option>
                <option value="LWP">Leave Without Pay (LWP)</option>
                <!--<option value="FH">First Half</option>
                <option value="SH">Second Half</option>-->
              </select>
              <div id="deductionMessage" style="display: none;" class="alert alert-info mt-2"></div>

              <div id="leaveErrorMsg" class="text-danger mt-2"></div>

            </div>

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

            </div>





            <!-- Dates -->
            <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 is-invalid" min="">
              </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 is-invalid">
              </div>
            </div>

            <!-- Requesting & Returning -->
            <div class="form-row">
              <div class="form-group col-md-6">
                <label>Requesting</label>
                <input type="text" class="form-control is-invalid" id="leaveCount" name="requesting_days" value="0 days" readonly>
              </div>
              <div class="form-group col-md-6">
                <label>Returning to Work On</label>
                <input type="text" class="form-control is-invalid" id="returnDate" value="Jun 30, 2025" readonly>
              </div>
            </div>

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

            <!-- Approver Selected -->
            <div class="form-group">
              <label>Approver Selected</label>
              <input type="text" class="form-control is-invalid" value="{{ $name }}" readonly>
              <input name="approver_id" value="{{ $leader_id }}" hidden>
            </div>

            <!-- Attachment -->
            <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/*" class="is-invalid">
              </div>
              <div id="loader" class="loader" style="display: none;"></div>
              <div id="previewContainer" class="preview-container"></div>
            </div>
          </div>

          <!-- Buttons -->
          <div class="text-right py-2 px-4">
            <button type="submit" class="btn btn-primary">Submit</button>
            <button type="reset" class="btn btn-secondary">Cancel</button>
          </div>
        </form>

      </div>

      @endsection

      @push('scripts')

      <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

      <script>
        const today = new Date();
        //const formatDate = (y, m, d) => `${String(d).padStart(2, '0')}-${String(m + 1).padStart(2, '0')}-${y}`;
        const formatDate = (y, m, d) => `${y}-${String(m + 1).padStart(2, '0')}-${String(d).padStart(2, '0')}`;

        let approvedDates = {};

        let [currentMonth1, currentYear1] = [today.getMonth(), today.getFullYear()];
        let currentMonth2 = (currentMonth1 + 1) % 12;
        let currentYear2 = (currentMonth1 === 11) ? currentYear1 + 1 : currentYear1;

        function renderCalendar(month, year, containerId, titleId) {
          const title = document.getElementById(titleId);
          const daysContainer = document.getElementById(containerId);
          const firstDay = new Date(year, month, 1).getDay();
          const totalDays = new Date(year, month + 1, 0).getDate();

          title.textContent = new Date(year, month).toLocaleString('default', {
            month: 'long',
            year: 'numeric'
          });
          daysContainer.innerHTML = '';

          for (let i = 0; i < firstDay; i++) {
            const e = document.createElement('div');
            e.className = 'day empty';
            daysContainer.appendChild(e);
          }

          for (let d = 1; d <= totalDays; d++) {
            const div = document.createElement('div');
            div.className = 'day';
            div.textContent = d;
            const dateKey = formatDate(year, month, d);
            if (approvedDates[dateKey]) {
              div.classList.add(approvedDates[dateKey].className);
              div.title = approvedDates[dateKey].label;
            }
            daysContainer.appendChild(div);
          }

          const totalCells = 42;
          for (let i = 0; i < totalCells - (firstDay + totalDays); i++) {
            const e = document.createElement('div');
            e.className = 'day empty';
            daysContainer.appendChild(e);
          }
        }

        function renderAllCalendars() {
          renderCalendar(currentMonth1, currentYear1, 'calendar-days1', 'calendar-title1');
          renderCalendar(currentMonth2, currentYear2, 'calendar-days2', 'calendar-title2');
        }

        function changeMonth(delta, cal = 1) {
          if (cal === 1) {
            currentMonth1 += delta;
            if (currentMonth1 > 11) currentMonth1 = 0, currentYear1++;
            if (currentMonth1 < 0) currentMonth1 = 11, currentYear1--;
            currentMonth2 = (currentMonth1 + 1) % 12;
            currentYear2 = (currentMonth1 === 11) ? currentYear1 + 1 : currentYear1;
          } else {
            currentMonth2 += delta;
            if (currentMonth2 > 11) currentMonth2 = 0, currentYear2++;
            if (currentMonth2 < 0) currentMonth2 = 11, currentYear2--;
            currentMonth1 = (currentMonth2 - 1 + 12) % 12;
            currentYear1 = (currentMonth2 === 0) ? currentYear2 - 1 : currentYear2;
          }
          renderAllCalendars();
        }

        function applyLeaveFromForm() {

          const leaveType = document.getElementById('timeType').value;
          const start = document.getElementById('startDate').value;
          const end = document.getElementById('endDate').value;

          if (!leaveType || !start || !end) {
            document.getElementById('leaveCount').value = "0 days";
            return;
          }

          const leaveClass = leaveType.toLowerCase().replace(/\s+/g, '-');
          const startDate = new Date(start);
          const endDate = new Date(end);

          if (startDate > endDate) {
            document.getElementById('leaveCount').value = "Invalid range";
            return;
          }

          let current = new Date(startDate);
          let count = 0;
          approvedDates = {}; // Reset old highlights

          while (current <= endDate) {
            const key = formatDate(current.getFullYear(), current.getMonth(), current.getDate());
            approvedDates[key] = {
              label: leaveType,
              className: leaveClass
            };
            count++;
            current.setDate(current.getDate() + 1);
          }



          // Update number of days and return date
          document.getElementById('leaveCount').value = `${count} day${count > 1 ? 's' : ''}`;

          const returnToWork = new Date(endDate);
          returnToWork.setDate(returnToWork.getDate() + 1);
          document.getElementById('returnDate').value = returnToWork.toLocaleDateString('en-US', {
            year: 'numeric',
            month: 'short',
            day: 'numeric'
          });

          renderAllCalendars();
        }

        // function applyLeaveFromForm() {
        //   const leaveType = document.getElementById('timeType').value;
        //   const start = document.getElementById('startDate').value;
        //   const end = document.getElementById('endDate').value;
        //   if (!leaveType || !start || !end) return;

        //   const leaveClass = leaveType.toLowerCase().replace(/\s+/g, '-');

        //   let current = new Date(start);
        //   const endDate = new Date(end);
        //   while (current <= endDate) {
        //     const key = formatDate(current.getFullYear(), current.getMonth(), current.getDate());
        //     approvedDates[key] = {
        //       label: leaveType,
        //       className: leaveClass
        //     };
        //     current.setDate(current.getDate() + 1);
        //   }
        //   renderAllCalendars();
        // }

        function resetLeaveCalendar() {
          approvedDates = {};
          renderAllCalendars();
        }

        document.addEventListener('DOMContentLoaded', () => {


          renderAllCalendars();

          document.querySelector('.applying-leave-form')?.addEventListener('submit', e => {
            e.preventDefault();
            applyLeaveFromForm();
          });

          document.querySelector('.applying-leave-form')?.addEventListener('reset', () => {
            resetLeaveCalendar();
          });

          document.getElementById('startDate').addEventListener('change', applyLeaveFromForm);
          document.getElementById('endDate').addEventListener('change', applyLeaveFromForm);
        });
      </script>
      <script>
        $(document).ready(function() {

          // When leave type is changed
          $('#timeType').on('change', function() {
            const selectedType = $(this).val().split('-')[0]; // PL from "PL - Paid Leave"
            const selectedText = $(this).find('option:selected').text(); // "PL - Paid Leave"

            if (!selectedType) return;

            // Show selected leave type
            $('#selectedTimeType').text(selectedText);
            $('#leaveErrorMsg').empty();

            $.ajax({
              url: "{{ route('employee.available.leave') }}",
              type: "GET",
              data: {
                type: selectedType
              },
              success: function(response) {
                $('#availableBalance').val(`${response.available} days`);

                // Show note if available
                if (response.deduction_message) {
                  $('#leaveNote').text(`Note: ${response.deduction_message}`);
                } else {
                  $('#leaveNote').text('');
                }
              },
              error: function() {
                $('#availableBalance').val("N/A");
                $('#leaveNote').text('');
              }
            });
          });

          // Handle form submission
          // Handle form submission
          $('#leaveForm').on('submit', function(e) {
            e.preventDefault();

            const selectedType = $('#timeType').val().split('-')[0]; // e.g. "PL"
            let balanceText = $('#availableBalance').val(); // e.g. "0 days" or "Unlimited"
            let balance = balanceText.includes("Unlimited") ? Infinity : parseInt(balanceText);

            // 🔍 Validation
            if ((selectedType === 'CL' || selectedType === 'PL' || selectedType === 'CO') && balance === 0) {
              Swal.fire({
                icon: 'warning',
                text: `You cannot apply for ${selectedType} leave because your balance is 0.`
              });
              return; // 🚫 stop submission
            }

            // ✅ Continue if valid
            let formData = new FormData(this);

            $.ajax({
              url: "{{ route('employee.leave.save') }}",
              type: "POST",
              data: formData,
              contentType: false,
              processData: false,
              beforeSend: function() {
                $('#loader').show();
              },
              success: function(response) {
                $('#loader').hide();

                let swalText = 'Leave applied successfully!';
                if (response.deduction_message) {
                  swalText += `\n\n: ${response.deduction_message}`;
                }

                Swal.fire({
                  icon: 'success',
                  title: 'Success',
                  text: swalText
                }).then(() => {
                  location.reload();
                });
              },
              error: function(xhr) {
                $('#loader').hide();
                $('.is-invalid').removeClass('is-invalid');
                $('.invalid-feedback').remove();
                $('#leaveErrorMsg').text(xhr.responseJSON?.error || '');

                if (xhr.status === 422) {
                  let errors = xhr.responseJSON.errors;
                  $.each(errors, function(key, value) {
                    let input = $('[name="' + key + '"]');
                    input.addClass('is-invalid');
                    if (input.parent('.form-group').length) {
                      input.after('<div class="invalid-feedback d-block">' + value[0] + '</div>');
                    }
                  });
                } else if (xhr.responseJSON?.error) {
                  Swal.fire({
                    icon: 'error',
                    title: 'Error',
                    text: xhr.responseJSON.error
                  });
                } else {
                  Swal.fire({
                    icon: 'error',
                    title: 'Unknown Error',
                    text: 'Something went wrong. Please try again.'
                  });
                }
              }
            });
          });


        });
      </script>
      <script>
        $(document).ready(function() {
          const today = new Date().toISOString().split('T')[0];
          $('#startDate').attr('min', today);
          $('#endDate').attr('min', today); // also restrict past end date
        });
      </script>
      @endpush