@extends('super-admin.layouts.main')
@section('content')
<main>
  <div class="content-wrapper">
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-8">
            <h1 class="m-0">VWEP Tracking</h1>
          </div>
        </div>
      </div>
    </div>

    <div id="certificate_message" style="display:none;" class="alert alert-success">Certificate Issued</div>
    <div id="reject_message" style="display:none;" class="alert alert-success">Certificate Rejected</div>
    <div id="reminder_message" style="display:none;" class="alert alert-success">Reminder Sent</div>
    <div id="action_error" style="display:none;" class="alert alert-warning">Action failed</div>

    <div class="card">
      <div class="row mb-2 ml-2 mt-4">
        <div class="col-md-12">
          <button class="btn btn-addbtn mb-3" type="button" onclick="sendSelectedReminders()">Send Reminder</button>
          <button class="btn btn-addbtn mb-3" type="button" onclick="exportTracking()">Export Excel</button>

          <div class="vwep-calender">
            <label>Company:
              <select id="companyFilter" class="ml-2">
                <option value="">All Companies</option>
                @foreach($companies as $company)
                  <option value="{{ $company->id }}">{{ $company->company_name }}</option>
                @endforeach
              </select>
            </label>

            <label class="ml-2">VWEP:
              <select id="vwepFilter" class="ml-2">
                <option value="">All VWEPs</option>
                @foreach($virtualExperiences as $virtualExperience)
                  <option value="{{ $virtualExperience->id }}" data-company-id="{{ $virtualExperience->company_id }}">{{ $virtualExperience->title }}</option>
                @endforeach
              </select>
            </label>

            <label class="ml-2">Completion:
              <select id="completionFilter" class="ml-2">
                <option value="">All</option>
                <option value="1">Completed</option>
                <option value="0">In Progress / Rejected</option>
              </select>
            </label>

            <label class="ml-2">Certificate:
              <select id="certificateFilter" class="ml-2">
                <option value="">All</option>
                <option value="1">Issued</option>
                <option value="0">Not Issued</option>
              </select>
            </label>
          </div>
        </div>
      </div>

      <div class="card-body table-responsive">
        <table id="datatable" class="display table table-responsive">
          <thead>
            <tr align="left">
              <th>ID</th>
              <th></th>
              <th>Company</th>
              <th>VWEP</th>
              <th>Student</th>
              <th>Email</th>
              <th>Phone</th>
              <th>Location</th>
              <th>Submitted</th>
              <th>Completion</th>
              <th>Certificate</th>
              <th>Enrolled At</th>
              <th>Last Submission</th>
              <th>Survey</th>
              <th>Submission</th>
              <th>Feedback</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
  </div>
</main>
@endsection

@section('script')
$(function () {
  var table = $('#datatable').DataTable({
    processing: true,
    serverSide: true,
    responsive: true,
    order: ['0', 'desc'],
    ajax: {
      url: "{{ route('superAdmin.vwepTracking.data') }}",
      type: "GET",
      data: function (d) {
        d.companyFilter = $('#companyFilter').val();
        d.vwepFilter = $('#vwepFilter').val();
        d.completionFilter = $('#completionFilter').val();
        d.certificateFilter = $('#certificateFilter').val();
      }
    },
    columnDefs: [
      {
        targets: [0],
        visible: false,
        searchable: true
      }
    ],
    columns: [
      { data: 'user_id' },
      { data: 'checkbox', name: 'checkbox', orderable: false, searchable: false },
      { data: 'company_name', name: 'company_name' },
      { data: 'vwep_title', name: 'vwep_title' },
      { data: 'student_name', name: 'student_name' },
      { data: 'email', name: 'email' },
      { data: 'phone_number', name: 'phone_number' },
      { data: 'city', name: 'city' },
      { data: 'submitted', name: 'submitted', orderable: false, searchable: false },
      { data: 'completion_status', name: 'completion_status', orderable: false, searchable: false },
      { data: 'certificate_status', name: 'certificate_status', orderable: false, searchable: false },
      { data: 'enrolled_at', name: 'enrolled_at' },
      { data: 'last_submission', name: 'last_submission' },
      { data: 'survey', name: 'survey', orderable: false, searchable: false },
      { data: 'submission', name: 'submission', orderable: false, searchable: false },
      { data: 'feedback', name: 'feedback', orderable: false, searchable: false },
      { data: 'action', name: 'action', orderable: false, searchable: false }
    ]
  });

  $('#companyFilter, #vwepFilter, #completionFilter, #certificateFilter').on('change', function () {
    table.ajax.reload();
  });
});
@endsection

<script>
  function showMessage(id) {
    var element = document.getElementById(id);
    element.style.display = 'block';
    setTimeout(function () {
      element.style.display = 'none';
    }, 3000);
  }

  function postCertificateAction(url, virtualExperienceId, userId, successMessageId) {
    fetch(url, {
      method: "POST",
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-Token': '{{ csrf_token() }}'
      },
      body: JSON.stringify({
        virtual_experience_program_id: virtualExperienceId,
        users: [userId]
      })
    })
    .then(response => response.json())
    .then(data => {
      if (data.status === 200) {
        showMessage(successMessageId);
        $('#datatable').DataTable().ajax.reload();
      } else {
        showMessage('action_error');
      }
    })
    .catch(() => {
      showMessage('action_error');
    });
  }

  function issueCertificate(virtualExperienceId, userId) {
    postCertificateAction("{{ route('approveVwepCertificate') }}", virtualExperienceId, userId, 'certificate_message');
  }

  function rejectCertificate(virtualExperienceId, userId) {
    if (!confirm('Are you sure?')) {
      return;
    }

    postCertificateAction("{{ route('rejectCertificate') }}", virtualExperienceId, userId, 'reject_message');
  }

  function sendSelectedReminders() {
    var checkedBoxes = document.querySelectorAll('input[name="vwep_user"]:checked');
    var reminders = [];

    checkedBoxes.forEach(function(checkbox) {
      reminders.push({
        user_id: checkbox.value,
        virtual_experience_program_id: checkbox.getAttribute('data-vwep-id')
      });
    });

    if (reminders.length === 0) {
      alert('Please select at least one student.');
      return;
    }

    fetch("{{ route('superAdmin.vwepTracking.sendReminders') }}", {
      method: "POST",
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-Token': '{{ csrf_token() }}'
      },
      body: JSON.stringify({
        reminders: reminders
      })
    })
    .then(response => response.json())
    .then(data => {
      if (data.status === 200 && data.sent > 0) {
        document.getElementById('reminder_message').innerText = data.message;
        showMessage('reminder_message');
        $('#datatable').DataTable().ajax.reload();
      } else {
        showMessage('action_error');
      }
    })
    .catch(() => {
      showMessage('action_error');
    });
  }

  function exportTracking() {
    fetch("{{ route('superAdmin.vwepTracking.export') }}", {
      method: "POST",
      headers: {
        'Content-Type': 'application/json',
        'X-CSRF-Token': '{{ csrf_token() }}'
      },
      body: JSON.stringify({
        companyFilter: document.getElementById('companyFilter').value,
        vwepFilter: document.getElementById('vwepFilter').value,
        completionFilter: document.getElementById('completionFilter').value,
        certificateFilter: document.getElementById('certificateFilter').value
      })
    })
    .then(response => {
      if (!response.ok) {
        throw new Error('Export failed');
      }
      return response.blob();
    })
    .then(blob => {
      var url = window.URL.createObjectURL(blob);
      var link = document.createElement('a');
      link.href = url;
      link.download = 'vwep-tracking.xlsx';
      document.body.appendChild(link);
      link.click();
      window.URL.revokeObjectURL(url);
      document.body.removeChild(link);
    })
    .catch(() => {
      showMessage('action_error');
    });
  }
</script>