@extends('layouts/layoutMaster')

@section('title', 'Attendance Report')
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Vendor Styles -->
    @section('vendor-style')
    @vite([
        'resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss',
        'resources/assets/vendor/libs/datatables-responsive-bs5/responsive.bootstrap5.scss',
        'resources/assets/vendor/libs/datatables-buttons-bs5/buttons.bootstrap5.scss',
        'resources/assets/vendor/libs/select2/select2.scss',
        'resources/assets/vendor/libs/@form-validation/form-validation.scss',
        'resources/assets/vendor/libs/animate-css/animate.scss',
        'resources/assets/vendor/libs/sweetalert2/sweetalert2.scss',
        'resources/assets/vendor/libs/flatpickr/flatpickr.scss',
        'resources/assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.scss',
        'resources/assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.scss',
        'resources/assets/vendor/libs/jquery-timepicker/jquery-timepicker.scss',
        'resources/assets/vendor/libs/pickr/pickr-themes.scss'
    ])
@endsection

<!-- Vendor Scripts -->
@section('vendor-script')
    @vite([
        'resources/assets/vendor/libs/moment/moment.js',
        'resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js',
        'resources/assets/vendor/libs/select2/select2.js',
        'resources/assets/vendor/libs/@form-validation/popular.js',
        'resources/assets/vendor/libs/@form-validation/bootstrap5.js',
        'resources/assets/vendor/libs/@form-validation/auto-focus.js',
        'resources/assets/vendor/libs/cleavejs/cleave.js',
        'resources/assets/vendor/libs/cleavejs/cleave-phone.js',
        'resources/assets/vendor/libs/sweetalert2/sweetalert2.js',
        'resources/assets/vendor/libs/moment/moment.js',
        'resources/assets/vendor/libs/flatpickr/flatpickr.js',
        'resources/assets/vendor/libs/bootstrap-datepicker/bootstrap-datepicker.js',
        'resources/assets/vendor/libs/bootstrap-daterangepicker/bootstrap-daterangepicker.js',
        'resources/assets/vendor/libs/jquery-timepicker/jquery-timepicker.js',
        'resources/assets/vendor/libs/pickr/pickr.js'
    ])
@endsection

@section('page-script')
@vite(['resources/assets/js/forms-pickers.js'])
@endsection

@section('content')
<style>
    .newTable th, .newTable td {
        padding: 5px !important;
    }
    .newTable thead tr th { text-align: center; vertical-align: middle; padding-block: 10px; }
    .newTable tbody tr td { font-size: 14px; vertical-align: middle; }
    .newTable tbody tr td.attendance-td { text-align: center; }
    .select2-container { width: 25% !important; }
    .light-style .select2-container--default .select2-selection--single,
    .light-style .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px !important; }
    .light-style .select2-container--default .select2-selection--single .select2-selection__rendered,
    .light-style .select2-container--default.select2-container--focus .select2-selection--single .select2-selection__rendered,
    .light-style .select2-container--default.select2-container--open .select2-selection--single .select2-selection__rendered { line-height: calc(25px + 10px - 2px) !important; }
</style>

  <!-- Site List Table -->
  <div class="card">
    <div class="card-header">
        <h5>Attendance Report</h5>
    </div>
    <div class="card-body">
        <div class="row mb-4">
            <div class="col-md-12 d-flex align-items-center justify-content-between">
                <div>
                    <label><strong>Note :</strong>
                      <span class="text-success">P</span> - Present <strong>|</strong>
                      <span class="text-danger">A</span> - Absent <strong>|</strong>
                      <span class="text-warning">H/D</span> - Half day <strong>|</strong>
                      <span class="text-primary">H</span> - National/Official Holiday <strong>|</strong>
                      <span class="text-black">W</span> - Week off
                    </label>
                </div>
                @if(auth()->user()->hasRole('Employee'))
                    <div class="d-flex align-items-center">
                        <label><strong>Total Leave :</strong>
                            <span class="absent-days-count">0</span>
                        </label>
                    </div>
                @endif
            </div>
        </div>
        <div class="row mb-4">
            <div class="col-md-9 d-flex align-items-center gap-2">
                <select id="year" class="form-select form-control form-select-sm select2">
                    @foreach($years as $year)
                        <option value="{{ $year }}" {{ date('Y') == $year ? 'selected' : '' }}>
                            {{ $year }}
                        </option>
                    @endforeach
                </select>
                <select id="month" class="form-select form-control form-select-sm select2">
                    @foreach($months as $key => $month)
                        <option value="{{ $key }}" {{ date('m') == $key ? 'selected' : '' }}>
                            {{ $month }}
                        </option>
                    @endforeach
                </select>
                <button id="generateReport" class="btn btn-primary">Generate Report</button>
            </div>
            <div class="col-md-3 d-flex align-items-center justify-content-end">
                <button id="exportToExcel" class="btn btn-success">Export to Excel</button>
            </div>
        </div>

        <div id="reportContent" class="table-responsive">
            <table class="table table-bordered newTable">
                <thead>
                    <tr id="dateHeaders">
                        <th>No.</th>
                        <th>Employee Name</th>
                        <th>Summary<br/>(P/A/H-D/H)</th>
                        <!-- Days will be added dynamically -->
                    </tr>
                </thead>
                <tbody id="attendanceData">
                    <!-- Data will be populated via Ajax -->
                </tbody>
            </table>
        </div>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
  <script>
      $(document).ready(function() {
          $('.select2').select2();
      });

      $(document).ready(function() {
          $('#generateReport').click(function() {
              const year = $('#year').val();
              const month = $('#month').val();

              $.ajax({
                  url: '/generate-attendance-report',
                  method: 'POST',
                  data: {
                      year: year,
                      month: month,
                      _token: $('meta[name="csrf-token"]').attr('content')
                  },
                  success: function(response) {
                      $('#dateHeaders').html('<th>No.</th><th>Employee Name</th><th>Summary<br/>(P/A/H-D/H)</th>');
                      $('#attendanceData').empty();
                      $('.absent-days-count').text();
                      const daysInMonth = new Date(year, month, 0).getDate();
                      for (let i = 1; i <= daysInMonth; i++) {
                          const date = new Date(year, month - 1, i);
                          const isWeekend = date.getDay() === 0 || date.getDay() === 6;
                          const headerClass = isWeekend ? 'text-primary' : '';
                          $('#dateHeaders').append(`<th class="${headerClass}">${i}</th>`);
                      }
                      $('#dateHeaders').append(`<th>Total<br/>Leaves</th>`);
                      console.log(response.data);
                      response.data.forEach((employee, index) => {
                          let row = `<tr>
                              <td class="attendance-td">${index + 1}</td>
                              <td>${employee.name}</td>
                              <td>${employee.present_count}/${employee.absent_count}/${employee.halfday_count}/${employee.holiday_count}</td>`;
                          for (let i = 1; i <= daysInMonth; i++) {
                              const status = employee.attendance[i] || '';
                              let statusHtml = '';

                              switch (status) {
                                  case 'P':
                                  case 'present':
                                      statusHtml = '<span class="text-success">P</span>';
                                      break;
                                  case 'A':
                                  case 'absent':
                                      statusHtml = '<span class="text-danger">A</span>';
                                      break;
                                  case 'H/D':
                                  case 'halfday':
                                      statusHtml = '<span class="text-warning">H/D</span>';
                                      break;
                                  case 'W':
                                  case 'weekoff':
                                      statusHtml = '<span class="text-black">W</span>';
                                      break;
                                  case 'H':
                                  case 'holiday':
                                      statusHtml = '<span class="text-primary">H</span>';
                                      break;
                                  default:
                                      statusHtml = '<span class="text-muted">-</span>';
                              }

                              row += `<td class="attendance-td">${statusHtml}</td>`;
                          }
                          // Calculate total working days (customize as needed)
                          const totalAbsentDays = employee.absent_count + (employee.halfday_count * 0.5);
                          row += `
                              <td class="attendance-td">${totalAbsentDays}</td>
                          </tr>`;
                          $('#attendanceData').append(row);
                          $('.absent-days-count').text(totalAbsentDays);
                      });
                  },
                  error: function(xhr, status, error) {
                      console.error('Error generating report:', error);
                      alert('Error generating attendance report. Please try again.');
                  }
              });
          });

          $('#exportToExcel').click(function() {
              const table = document.getElementById('reportContent').getElementsByTagName('table')[0];
              const workbook = XLSX.utils.table_to_book(table, { sheet: "Attendance Report" });
              const currentYear = $('#year').val();
              const currentMonth = $('#month option:selected').text();
              XLSX.writeFile(workbook, `Attendance_Report_${currentYear}_${currentMonth}.xlsx`);
          });
      });
  </script>

@endsection