{% extends 'base.html' %}
{% block content %}

<!-- ✅ Bootstrap + DataTables CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">

<!-- ✅ jQuery + DataTables JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

<style>
  body {
    background: #f0f2f5;
    font-family: Arial, sans-serif;
  }

  .dashboard-header,
  .filters-section,
  .datatable-section {
    background: white;
    padding: 20px;
    border-radius: 10px;
    margin: 20px auto;
    max-width: 1600px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .filter-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
  }

  .filter-group {
    flex: 1;
  }

  .filter-label {
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
  }

  .custom-select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: white;
  }

  .table-header {
    font-size: 18px;
    color: #333;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
  }

  .dataTables_wrapper .dataTables_filter input,
  .dataTables_wrapper .dataTables_length select {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 5px 10px;
  }

  .table thead th {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
  }

  .status-active {
    color: #28a745;
    font-weight: 600;
  }

  .status-inactive {
    color: #dc3545;
    font-weight: 600;
  }

        .legend {
            display: flex;
            padding: 15px 20px;
            background-color: #f0f0f0;
            border-bottom: 2px solid #ccc;
        }
        .legend-item {
            display: flex;
            align-items: center;
            margin-right: 30px;
            font-size: 16px;
        }
        .legend-color {
            width: 25px;
            height: 25px;
            margin-right: 10px;
            border-radius: 3px;
        }
        .green { background-color: #4CAF50; }
        .red { background-color: #F44336; }
        .yellow { background-color: #FFC107; }
        .blue { background-color: #2196F3; }
        
        .table-container {
            flex: 1;
            overflow: auto;
            padding: 10px;
        }
        
        .attendance-table {
            width: 100%;
            border-collapse: collapse;
            table-layout: fixed;
        }
        .attendance-table th, .attendance-table td {
            border: 1px solid #ccc;
            text-align: center;
            padding: 10px 5px;
        }
        .attendance-table th {
            background-color: #f5f5f5;
            position: sticky;
            top: 0;
            z-index: 10;
        }
        .participant-col {
            width: 150px;
            text-align: left;
            padding-left: 15px;
            background-color: #f5f5f5;
            font-weight: bold;
            font-size: 16px;
            position: sticky;
            left: 0;
            z-index: 5;
        }
        .date-header {
            font-size: 14px;
            font-weight: bold;
        }
        .sticky-corner {
            position: sticky;
            left: 0;
            top: 0;
            z-index: 20;
            width: 10%;
            background-color: #e0e0e0;
        }
        .status-cell {
            position: relative;
            height: 40px;
        }
        .status-indicator {
            width: 30px;
            height: 30px;
            margin: 0 auto;
            border-radius: 3px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.2);
        }
        
        /* Month selector */
        .month-selector {
            background-color: #e9e9e9;
            padding: 10px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #ccc;
        }
        .month-title {
            font-size: 18px;
            font-weight: bold;
        }
        .month-nav {
            display: flex;
            gap: 10px;
        }
        .month-btn {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 5px 15px;
            border-radius: 3px;
            cursor: pointer;
        }
        
</style>

<!-- ✅ Header -->
<div class="dashboard-header">
  <h4>Employee Monthly Sheet</h4>
</div>

<!-- ✅ Filters Section -->


<div class="filters-section">
  <div class="filter-row">
    <div class="filter-group">
      <div class="filter-label">Company</div>
      <select class="custom-select" id="company">
        {% for i in comp_data %}
          <option value="{{ i.id }}">{{ i.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="filter-group">
      <div class="filter-label">Branch</div>
      <select class="custom-select" id="branch">
        <option value="">Select a Branch</option>
      </select>
    </div>
    <div class="filter-group">
      <div class="filter-label">Months</div>
      <select class="custom-select" id="month">
        <option value="">Select Month</option>
  <option value="1">January</option>
  <option value="2">February</option>
  <option value="3">March</option>
  <option value="4">April</option>
  <option value="5">May</option>
  <option value="6">June</option>
  <option value="7">July</option>
  <option value="8">August</option>
  <option value="9">September</option>
  <option value="10">October</option>
  <option value="11">November</option>
  <option value="12">December</option>
      </select>
    </div>
    
<div class="filter-group">
  <div class="filter-label">Years</div>
  <select class="custom-select" id="year" name="year">
    <option value="">Select Year</option>
    <option value="2020">2020</option>
    <option value="2021">2021</option>
    <option value="2022">2022</option>
    <option value="2023">2023</option>
    <option value="2024">2024</option>
    <option value="2025">2025</option>
    <option value="2026">2026</option>
    <option value="2027">2027</option>
    <option value="2028">2028</option>
    <option value="2029">2029</option>
    <option value="2030">2030</option>
  </select>
</div>

  </div>
</div>

<!-- ✅ Data Table Section -->
    <div class="datatable-section">
     
    
        
        <div class="legend">
            <div class="legend-item">
                <div class="legend-color green"></div>
                <span>Present</span>
            </div>
            <div class="legend-item">
                <div class="legend-color red"></div>
                <span>Absent</span>
            </div>
            <div class="legend-item">
                <div class="legend-color yellow"></div>
                <span>Sunday</span>
            </div>
            <div class="legend-item">
                <div class="legend-color blue"></div>
                <span>Present on Sunday</span>
            </div>
            
        </div>
        
        <div class="table-container">
            <table class="attendance-table" id="employee-table">
                <thead>
                    <tr>
                        <th class="sticky-corner" rowspan="2">Employee Names</th>
                        <th colspan="31">April</th>
                    </tr>
                    <tr>
                        <!-- Date headers -->
                        <th class="date-header">1</th>
                        <th class="date-header">2</th>
                        <th class="date-header">3</th>
                        <th class="date-header">4</th>
                        <th class="date-header">5</th>
                        <th class="date-header">6</th>
                        <th class="date-header">7</th>
                        <th class="date-header">8</th>
                        <th class="date-header">9</th>
                        <th class="date-header">10</th>
                        <th class="date-header">11</th>
                        <th class="date-header">12</th>
                        <th class="date-header">13</th>
                        <th class="date-header">14</th>
                        <th class="date-header">15</th>
                        <th class="date-header">16</th>
                        <th class="date-header">17</th>
                        <th class="date-header">18</th>
                        <th class="date-header">19</th>
                        <th class="date-header">20</th>
                        <th class="date-header">21</th>
                        <th class="date-header">22</th>
                        <th class="date-header">23</th>
                        <th class="date-header">24</th>
                        <th class="date-header">25</th>
                        <th class="date-header">26</th>
                        <th class="date-header">27</th>
                        <th class="date-header">28</th>
                        <th class="date-header">29</th>
                        <th class="date-header">30</th>
                        <th class="date-header">31</th>
                    </tr>
                </thead>
                <tbody>
                   
                    </tbody>
                  </table>
                </div>
              </div>
<!-- ✅ JavaScript -->
<script>
  // Global variable for DataTable
  let dataTable;
  let isTableInitialized = false;
  
  // Load branches based on selected company
  document.getElementById('company').addEventListener('change', function() {
    const companyId = this.value;
    if (companyId) {
      fetch('/get_all_branch_details/', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': '{{ csrf_token }}'
        },
        body: JSON.stringify({ companyId })
      })
      .then(response => response.json())
      .then(data => {
        const branchSelect = document.getElementById('branch');
        branchSelect.innerHTML = '<option value="">Select a Branch</option>';
        data.forEach(branch => {
          const option = document.createElement('option');
          option.value = branch.id;
          option.text = branch.name;
          branchSelect.appendChild(option);
        });
      })
      .catch(error => console.error('Error fetching branches:', error));
    }
  });

  // Load employees based on selected branch and status
  document.getElementById('year').addEventListener('change', function() {
    const branchId = document.getElementById('branch').value;
    const month = document.getElementById('month').value;
    const year = this.value;

    if (branchId !== "") {
      loadEmployeeData(branchId,month,year);
    }
  });

// Function to load employee data and create/update the table
function loadEmployeeData(branchId, month, year) {
  fetch('/get_all_employee_data/', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRFToken': '{{ csrf_token }}'
    },
    body: JSON.stringify({ branchId, month, year })
  })
  .then(response => response.json())
  .then(data => {
    if (isTableInitialized) {
      dataTable.destroy();
    }

    const tbody = document.querySelector('#employee-table tbody');
    tbody.innerHTML = '';

    const days = data.days;  // [1, 2, 3, ..., 30 or 31]

    data.employees.forEach(emp => {
      const row = document.createElement('tr');

      // Start with employee name
      let html = `<td class="participant-col">${emp.name}</td>`;

      // Loop through attendance array
      emp.attendance.forEach(status => {
        let statusClass = '';
        let tooltip = '';

        switch (status) {
          case 'present':
            statusClass = 'green';
            tooltip = 'Present';
            break;
          case 'absent':
            statusClass = 'red';
            tooltip = 'Absent';
            break;
          case 'off':
            statusClass = 'gray';
            tooltip = 'Sunday (Off)';
            break;
          case 'present_sunday':
            statusClass = 'blue';
            tooltip = 'Present on Sunday';
            break;
          default:
            statusClass = 'empty';
            tooltip = 'No Data';
        }

        html += `
          <td class="status-cell">
            <div class="status-indicator ${statusClass}" title="${tooltip}"></div>
          </td>`;
      });

      // Fill remaining empty days if less than 31
      for (let i = emp.attendance.length + 1; i <= 31; i++) {
        html += `
          <td class="status-cell">
            <div class="status-indicator empty" title="No Data"></div>
          </td>`;
      }

      row.innerHTML = html;
      tbody.appendChild(row);
    });

    // Re-initialize DataTable
    dataTable = $('#employee-table').DataTable({
      pageLength: 10,
      lengthMenu: [5, 10, 25, 50, 100],
      responsive: true
    });

    isTableInitialized = true;
  })
  .catch(error => console.error('Error fetching employees:', error));
}



  // Toggle employee active/inactive
  function showUserId(id, name, status) {
    const confirmAction = confirm(`Do you want to ${name} this employee?`);
    if (confirmAction) {
      fetch('/update_employee_status/', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRFToken': getCSRFToken(),
        },
        body: JSON.stringify({ id: id, status: status })
      })
      .then(response => response.json())
      .then(data => {
        if (data.success) {
          alert(`Successfully ${name}`);
          // Refresh data by triggering current selection
          const branchId = document.getElementById('branch').value;
          const active = document.getElementById('active').value;
          if (branchId && active !== "") {
            loadEmployeeData(branchId, active);
          }
        } else {
          alert(`Failed to ${name}`);
        }
      })
      .catch(error => {
        console.error('Error:', error);
        alert("Something went wrong.");
      });
    }
  }

  // Get CSRF Token from cookies
  function getCSRFToken() {
    const cookie = document.cookie.match('(^|;)\\s*csrftoken\\s*=\\s*([^;]+)');
    return cookie ? cookie.pop() : '';
  }
</script>

{% endblock %}