@extends('layouts.dashboard')
<style>
   .calendar-wrapper {
    overflow-x:hidden;
  }

.calendar-grid {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  width: 100%; /* force full width */
}

 .calendar-row {
  display: flex;
  flex-wrap: nowrap;
}

.cell {
  border: 1px solid #dee2e6;
  padding: 2px;
  text-align: center;
  flex: 1; /* equally divide width */
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.name-cell {
  width: 150px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding-left: 6px;
  font-weight: 500;
  border: 1px solid #dee2e6;
  background: #f8f9fa;
}

 .profile-img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-right: 4px;
  object-fit: cover;
}

.calendar-grid .badge-leave {
  font-size: 10px;
  padding: 1px 3px;
  white-space: nowrap;
  line-height: 1.2;
}

  .header-row {
    background: #ffc107;
    font-weight: 600;
  }

  .calendar-row.header-row .cell,
  .calendar-row.header-row .name-cell {
    background-color: #ffc107;
    font-weight: bold;
  }

  .calendar-controls {
    gap: 10px;
    flex-wrap: wrap;
  }

  .calendar-controls .btn {
    font-weight: 500;
    text-transform: lowercase;
  }

  .calendar-controls .btn-group .btn.active {
    background-color: #0056b3;
    border-color: #0056b3;
  }
</style>
@section('content')


<section class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1>Employees</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="content">
  <div class="container-fluid">
    <div class="card">
      <div class="card-body calendar-wrapper">
        <div class="calendar-grid">

          <!-- Calendar Controls UI -->
          <div class="calendar-controls d-flex justify-content-between align-items-center mb-3">
            <div class="btn-group me-2">
              <button id="prev-month" class="btn btn-primary"><i class="fas fa-chevron-left"></i></button>
              <button id="next-month" class="btn btn-primary"><i class="fas fa-chevron-right"></i></button>
              <button id="today-btn" class="btn btn-primary">today</button>
            </div>

            <h4 id="current-month-year" class="m-0 text-center flex-grow-1"></h4>

            <div class="btn-group" id="view-tabs">
              <button class="btn btn-primary active" data-view="month">month</button>
              <button class="btn btn-primary" data-view="week">week</button>
              <button class="btn btn-primary" data-view="day">day</button>
            </div>
          </div>

          <div class="mb-2">
            <span class="badge badge-warning">CL</span> Casual Leave &nbsp;
            <span class="badge badge-success">PL</span> Paid Leave &nbsp;
            <span class="badge badge-danger">SL</span> Sick Leave &nbsp;
            <span class="badge badge-info">RH</span> Restricted Holiday
          </div>

          <div class="calendar-row header-row" id="day-names-row"></div>
          <div class="calendar-row" id="date-row"></div>
          <div id="employee-rows"></div>
        </div>
      </div>
    </div>
  </div>
</section>

@endsection



@push('scripts')
<script>
 let currentDate = new Date();
  let activeView = 'month';

  const dayNames = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  const leaveTypeBadgeMap = {
    'CL': 'badge-warning',
    'PL': 'badge-success',
    'SL': 'badge-danger',
    'RH': 'badge-info'
  };

  const employees = [
    {
      name: 'Vinay Kumar',
      img: 'https://placehold.co/30x30?text=V',
      leave: { 2: 'CL', 3: 'SL', 5: 'PL' }
    },
    {
      name: 'Nimesh Lad',
      img: 'https://placehold.co/30x30?text=N',
      leave: { 4: 'RH', 5: 'CL', 7: 'PL' }
    },
    {
      name: 'Omkar Patil',
      img: 'https://placehold.co/30x30?text=O',
      leave: { 10: 'SL', 11: 'PL' }
    },
    {
      name: 'Prakash Pawar',
      img: 'https://placehold.co/30x30?text=P',
      leave: { 1: 'CL', 2: 'CL', 3: 'RH', 4: 'PL' }
    }
  ];

  const dayRow = document.getElementById('day-names-row');
  const dateRow = document.getElementById('date-row');
  const employeeRows = document.getElementById('employee-rows');
  const currentMonthText = document.getElementById('current-month-year');

  const createDiv = (className, content = '') => {
    const div = document.createElement('div');
    div.className = className;
    div.innerHTML = content;
    return div;
  };

  function renderCalendar(view = 'month') {
    dayRow.innerHTML = '';
    dateRow.innerHTML = '';
    employeeRows.innerHTML = '';

    const year = currentDate.getFullYear();
    const month = currentDate.getMonth();
    const daysInMonth = new Date(year, month + 1, 0).getDate();

    currentMonthText.textContent = `${currentDate.toLocaleString('default', { month: 'long' })} ${year}`;

    let visibleDays = [];

    if (view === 'day') {
      const today = new Date();
      visibleDays = [today.getDate(), today.getDate() + 1].filter(d => d <= daysInMonth);
    } else if (view === 'week') {
      const weeks = [];
      for (let i = 1; i <= daysInMonth; i += 7) {
        weeks.push(Array.from({ length: 7 }, (_, j) => i + j).filter(d => d <= daysInMonth));
      }

      weeks.forEach((weekDays, weekIndex) => {
        const weekLabel = createDiv('calendar-row header-row');
        weekLabel.appendChild(createDiv('name-cell', `Week ${weekIndex + 1}`));
        weekDays.forEach(day => {
          const dayName = dayNames[new Date(year, month, day).getDay()];
          weekLabel.appendChild(createDiv('cell', dayName));
        });
        employeeRows.appendChild(weekLabel);

        const weekDateRow = createDiv('calendar-row');
        weekDateRow.appendChild(createDiv('name-cell', '&nbsp;'));
        weekDays.forEach(day => {
          weekDateRow.appendChild(createDiv('cell', day));
        });
        employeeRows.appendChild(weekDateRow);

        employees.forEach(({ name, img, leave }) => {
          const row = createDiv('calendar-row');
          row.appendChild(createDiv('name-cell', `<img src="${img}" class="profile-img"> ${name}`));
          weekDays.forEach(day => {
            const cell = createDiv('cell');
            const type = leave[day];
            if (type) {
              const badge = leaveTypeBadgeMap[type] || 'badge-secondary';
              cell.innerHTML = `<span class="badge ${badge} badge-leave">${type}</span>`;
            }
            row.appendChild(cell);
          });
          employeeRows.appendChild(row);
        });
      });
      return;
    } else {
      for (let day = 1; day <= daysInMonth; day++) visibleDays.push(day);
    }

    const dayFragment = document.createDocumentFragment();
    const dateFragment = document.createDocumentFragment();
    const employeeFragment = document.createDocumentFragment();

    dayFragment.appendChild(createDiv('name-cell', 'Member'));
    dateFragment.appendChild(createDiv('name-cell', '&nbsp;'));

    visibleDays.forEach(day => {
      const date = new Date(year, month, day);
      const weekday = dayNames[date.getDay()];
      dayFragment.appendChild(createDiv('cell', weekday));
      dateFragment.appendChild(createDiv('cell', day));
    });

    dayRow.appendChild(dayFragment);
    dateRow.appendChild(dateFragment);

    employees.forEach(({ name, img, leave }) => {
      const row = createDiv('calendar-row');
      row.appendChild(createDiv('name-cell', `<img src="${img}" class="profile-img"> ${name}`));

      visibleDays.forEach(day => {
        const cell = createDiv('cell');
        const type = leave[day];
        if (type) {
          const badge = leaveTypeBadgeMap[type] || 'badge-secondary';
          cell.innerHTML = `<span class="badge ${badge} badge-leave">${type}</span>`;
        }
        row.appendChild(cell);
      });

      employeeFragment.appendChild(row);
    });

    employeeRows.appendChild(employeeFragment);
  }

  // Navigation + View logic
  document.getElementById('prev-month').addEventListener('click', () => {
    currentDate.setMonth(currentDate.getMonth() - 1);
    renderCalendar(activeView);
  });

  document.getElementById('next-month').addEventListener('click', () => {
    currentDate.setMonth(currentDate.getMonth() + 1);
    renderCalendar(activeView);
  });

  document.getElementById('today-btn').addEventListener('click', () => {
    currentDate = new Date();
    renderCalendar(activeView);
  });

  document.querySelectorAll('#view-tabs .btn').forEach(tab => {
    tab.addEventListener('click', function () {
      document.querySelectorAll('#view-tabs .btn').forEach(t => t.classList.remove('active'));
      this.classList.add('active');
      activeView = this.getAttribute('data-view');
      renderCalendar(activeView);
    });
  });

  renderCalendar();
</script>

@endpush