{% extends 'base.html' %}
{% load static %}


{% block content %}
<style>
  th {
    background-color: #f2f2f2;
    font-weight: bold;
    font-size: 14px;
}
</style>
<link rel="stylesheet" hreft="sc.css">
<div class="schedule-wrapper">
  <div class="schedule-management">
    <div class="header4">
      <h1>Schedule</h1>
      <button id="createScheduleBtn" class="btn btn-primary" style="background-color: rgb(10,107,74)">
        <i class="fas fa-plus"></i> Create Schedule
      </button>
    </div>
    
    <div class="tab-container">
      <button class="tab-btn active" data-tab="all">All</button>
      <button class="tab-btn" data-tab="weekdays">Weekdays</button>
      <button class="tab-btn" data-tab="weekend">Weekend</button>
      <button class="tab-btn" data-tab="holidays">Holidays</button>
    </div>
    
    <div id="scheduleTab" class="tab-content active">
      <div class="action-buttons">
        <button class="btn btn-secondary">
          <i class="fas fa-file-export"></i> Export
        </button>
        <button class="btn btn-secondary">
          <i class="fas fa-filter"></i> Filter
        </button>
      </div>
      
      <table id="scheduleTable">
        <thead>
          <tr>
            <th>SCHEDULE ID</th>
            <th>SCHEDULE</th>
            <th>SESSION</th>
            <th>SCHEDULE STARTING DATE</th>
            <th>SCHEDULE ENDING DATE</th>
            <th>SCHEDULE TYPE</th>
            <th>STATUS</th>
            <th>ACTION</th>
          </tr>
        </thead>
        <tbody>
          <!-- Schedule table rows will be dynamically populated -->
        </tbody>
      </table>
    </div>
    
    <div class="pagination">
      <button class="pagination-btn" id="prevPage">&lt;</button>
      <button class="pagination-btn active">1</button>
      <button class="pagination-btn">2</button>
      <button class="pagination-btn">3</button>
      <button class="pagination-btn">4</button>
      <button class="pagination-btn">5</button>
      <button class="pagination-btn" id="nextPage">&gt;</button>
    </div>
  </div>

  <div id="createScheduleModal" class="modal">
    <div class="modal-content">
      <h2>Create Schedule</h2>
      <form id="createScheduleForm">
        <div class="modal-tabs">
          <button type="button" class="modal-tab-btn active" data-tab="weekdays">Weekdays</button>
          <button type="button" class="modal-tab-btn" data-tab="weekend">Weekend</button>
          <button type="button" class="modal-tab-btn" data-tab="holidays">Holidays</button>
        </div>
        <input type="date" id="fromDate" placeholder="From Date" required>
        <input type="date" id="toDate" placeholder="To Date" required>
        <input type="text" id="session" placeholder="Session" required>
        <input type="number" id="numberOfVehicle" placeholder="Number of Vehicle" required>
        <input type="time" id="startingTime" placeholder="Starting Time" required>
        <input type="time" id="endingTime" placeholder="Ending Time" required>
        <div class="form-actions">
          <button type="button" id="cancelCreate" class="btn btn-secondary">Cancel</button>
          <button type="submit" class="btn btn-primary">Create Schedule</button>
        </div>
      </form>
    </div>
  </div>
</div>
<script>
  
  // Select DOM elements
  const createScheduleBtn = document.getElementById('createScheduleBtn');
  const scheduleModal = document.getElementById('createScheduleModal');
  const cancelBtn = document.getElementById('cancelCreate');
  const scheduleForm = document.getElementById('createScheduleForm');

  const tabButtons = document.querySelectorAll('.tab-btn');
  const modalTabButtons = document.querySelectorAll('.schedule-modal-tab-btn');

  // Event listeners
  createScheduleBtn.addEventListener('click', () => {
    scheduleModal.style.display = 'block';
  });

  cancelBtn.addEventListener('click', () => {
    scheduleModal.style.display = 'none';
  });

  window.addEventListener('click', (event) => {
    if (event.target === scheduleModal) {
      scheduleModal.style.display = 'none';
    }
  });

  scheduleForm.addEventListener('submit', (e) => {
    e.preventDefault();
    console.log('Schedule form submitted');
    // Add logic to handle schedule creation
    scheduleModal.style.display = 'none';
  });

  // Tab functionality
  tabButtons.forEach(button => {
    button.addEventListener('click', () => {
      const tabName = button.getAttribute('data-tab');
      tabButtons.forEach(btn => btn.classList.remove('active'));
      button.classList.add('active');
      filterSchedules(tabName);
    });
  });

  // Modal tab functionality
  modalTabButtons.forEach(button => {
    button.addEventListener('click', () => {
      modalTabButtons.forEach(btn => btn.classList.remove('active'));
      button.classList.add('active');
    });
  });

  // Dummy data for schedules
  const schedules = [
    { id: '#12343', schedule: '6:00 AM - 9:00 AM', session: 'Morning', startDate: '12/01/2024', endDate: '22/01/2024', type: 'Daily', status: 'Ongoing' },
    { id: '#12344', schedule: '10:00 AM - 1:00 PM', session: 'Morning', startDate: '12/01/2024', endDate: '22/01/2024', type: 'Weekdays', status: 'Ongoing' },
    { id: '#12345', schedule: '2:00 PM - 5:00 PM', session: 'Afternoon', startDate: '12/01/2024', endDate: '22/01/2024', type: 'Weekend', status: 'Ongoing' },
  ];

  const scheduleTable = document.getElementById('scheduleTable').getElementsByTagName('tbody')[0];

  function populateScheduleTable(filteredSchedules) {
    scheduleTable.innerHTML = '';
    filteredSchedules.forEach(schedule => {
      const row = scheduleTable.insertRow();
      row.innerHTML = `
        <td>${schedule.id}</td>
        <td>${schedule.schedule}</td>
        <td>${schedule.session}</td>
        <td>${schedule.startDate}</td>
        <td>${schedule.endDate}</td>
        <td>${schedule.type}</td>
        <td><span class="schedule-status-ongoing">${schedule.status}</span></td>
        <td>
          <button class="action-btn edit"><img src="{% static 'images/edit.png' %}" alt="Edit"></button>
          <button class="action-btn delete"><img src="{% static 'images/del.png' %}" alt="Delete"></button>
        </td>
      `;
    });
  }

  function filterSchedules(tabName) {
    if (tabName === 'all') {
      populateScheduleTable(schedules);
    } else {
      const filteredSchedules = schedules.filter(schedule => schedule.type.toLowerCase().includes(tabName));
      populateScheduleTable(filteredSchedules);
    }
  }

  // Initial population
  populateScheduleTable(schedules);
</script>
{% endblock %}