@extends('super-admin.layouts.main')
@section('content')
<style>
  .vwep-tracking-page {
    padding-bottom: 24px;
  }

  .vwep-page-title {
    color: #29337e;
    font-weight: 700;
  }

  .vwep-subtitle {
    color: #667085;
    font-size: 14px;
    margin-top: 6px;
  }

  .vwep-stats-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    margin: 10px 0 20px;
  }

  .vwep-stat-card {
    background: #fff;
    border: 1px solid #e6e8f0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(41, 51, 126, 0.06);
    cursor: pointer;
    min-height: 112px;
    padding: 16px;
    text-align: left;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    width: 100%;
  }

  .vwep-stat-card:hover,
  .vwep-stat-card.is-active {
    border-color: #29337e;
    box-shadow: 0 12px 30px rgba(41, 51, 126, 0.14);
    transform: translateY(-1px);
  }

  .vwep-stat-card:focus {
    outline: 3px solid rgba(49, 73, 245, 0.18);
    outline-offset: 2px;
  }

  .vwep-stat-label {
    color: #667085;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    margin-bottom: 8px;
    text-transform: uppercase;
  }

  .vwep-stat-value {
    color: #1d2939;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
  }

  .vwep-stat-hint {
    color: #667085;
    font-size: 12px;
    margin-top: 8px;
  }

  .vwep-stat-card.is-warning { border-top: 4px solid #f6bc40; }
  .vwep-stat-card.is-success { border-top: 4px solid #00917c; }
  .vwep-stat-card.is-danger { border-top: 4px solid #d92d20; }
  .vwep-stat-card.is-info { border-top: 4px solid #3149f5; }

  .vwep-panel {
    border: 0;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, 0.08);
  }

  .vwep-toolbar {
    align-items: center;
    border-bottom: 1px solid #edf0f5;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    padding: 18px;
  }

  .vwep-actions,
  .vwep-filters {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }

  .vwep-filter {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 0;
  }

  .vwep-filter span {
    color: #667085;
    font-size: 12px;
    font-weight: 700;
  }

  .vwep-filter select {
    border: 1px solid #d0d5dd;
    border-radius: 6px;
    color: #344054;
    min-height: 36px;
    min-width: 140px;
    padding: 6px 10px;
  }

  .vwep-table-wrap {
    padding: 18px;
  }

  .vwep-table-wrap table {
    min-width: 1500px;
  }

  .vwep-table-wrap .badge {
    border-radius: 999px;
    font-weight: 700;
    padding: 6px 9px;
  }

  .vwep-empty-text {
    color: #98a2b3;
    font-weight: 600;
  }

  .vwep-row-actions {
    display: flex;
    gap: 6px;
    white-space: nowrap;
  }

  .vwep-student-link {
    color: #29337e;
    font-weight: 700;
    text-decoration: underline;
  }

  .vwep-select-all-wrap {
    align-items: center;
    display: flex;
    justify-content: center;
  }

  @media (max-width: 767px) {
    .vwep-toolbar {
      align-items: stretch;
    }

    .vwep-actions,
    .vwep-filters,
    .vwep-filter,
    .vwep-filter select {
      width: 100%;
    }
  }
</style>
<main>
  <div class="content-wrapper vwep-tracking-page">
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
          <div class="col-sm-8">
            <h1 class="m-0 vwep-page-title">VWEP Tracking</h1>
            <p class="vwep-subtitle">Track enrollments, task progress, certificate actions, reminders, and feedback from one place.</p>
          </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="container-fluid">
      <div class="vwep-stats-grid">
        <button class="vwep-stat-card is-info is-active" type="button" data-stat-filter="started">
          <div class="vwep-stat-label">Started VWEPs</div>
          <div class="vwep-stat-value">{{ number_format($stats['total']) }}</div>
          <div class="vwep-stat-hint">Students with onboarding survey</div>
        </button>
        <button class="vwep-stat-card is-success" type="button" data-stat-filter="completed">
          <div class="vwep-stat-label">Completed</div>
          <div class="vwep-stat-value">{{ number_format($stats['completed']) }}</div>
          <div class="vwep-stat-hint">All tasks submitted and accepted</div>
        </button>
        <button class="vwep-stat-card is-warning" type="button" data-stat-filter="completed_without_certificate">
          <div class="vwep-stat-label">Completed, No Certificate</div>
          <div class="vwep-stat-value">{{ number_format($stats['completed_without_certificate']) }}</div>
          <div class="vwep-stat-hint">Ready for certificate review</div>
        </button>
        <button class="vwep-stat-card is-success" type="button" data-stat-filter="certificates_issued">
          <div class="vwep-stat-label">Certificates Issued</div>
          <div class="vwep-stat-value">{{ number_format($stats['certificates_issued']) }}</div>
          <div class="vwep-stat-hint">Certificate records created</div>
        </button>
        <button class="vwep-stat-card is-danger" type="button" data-stat-filter="rejected">
          <div class="vwep-stat-label">Rejected</div>
          <div class="vwep-stat-value">{{ number_format($stats['rejected']) }}</div>
          <div class="vwep-stat-hint">Needs redo or review</div>
        </button>
        <button class="vwep-stat-card is-warning" type="button" data-stat-filter="redo_in_progress">
          <div class="vwep-stat-label">Redo In Progress</div>
          <div class="vwep-stat-value">{{ number_format($stats['redo_in_progress']) }}</div>
          <div class="vwep-stat-hint">Rejected students resubmitting</div>
        </button>
        <button class="vwep-stat-card" type="button" data-stat-filter="in_progress">
          <div class="vwep-stat-label">In Progress</div>
          <div class="vwep-stat-value">{{ number_format($stats['in_progress']) }}</div>
          <div class="vwep-stat-hint">Started but not complete</div>
        </button>
        <button class="vwep-stat-card" type="button" data-stat-filter="feedback_received">
          <div class="vwep-stat-label">Feedback Received</div>
          <div class="vwep-stat-value">{{ number_format($stats['feedback_received']) }}</div>
          <div class="vwep-stat-hint">{{ number_format($stats['survey_responses']) }} survey responses</div>
        </button>
        <button class="vwep-stat-card" type="button" data-stat-filter="reminders_sent">
          <div class="vwep-stat-label">Reminders Sent</div>
          <div class="vwep-stat-value">{{ number_format($stats['reminders_sent']) }}</div>
          <div class="vwep-stat-hint">Manual and scheduled nudges</div>
        </button>
      </div>

      <div class="card vwep-panel">
        <div class="vwep-toolbar">
          <div class="vwep-actions">
            <button class="btn btn-addbtn" type="button" onclick="sendSelectedReminders()">Send Reminder</button>
            <button class="btn btn-addbtn" type="button" onclick="exportTracking()">Export Excel</button>
          </div>

          <div class="vwep-filters">
            <label class="vwep-filter">
              <span>Rows</span>
              <select id="pageLengthFilter">
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
                <option value="300">300</option>
                <option value="500">500</option>
              </select>
            </label>

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

            <label class="vwep-filter">
              <span>VWEP</span>
              <select id="vwepFilter">
                <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="vwep-filter">
              <span>Completion</span>
              <select id="completionFilter">
                <option value="">All</option>
                <option value="1">Completed</option>
                <option value="0">In Progress / Rejected</option>
              </select>
            </label>

            <label class="vwep-filter">
              <span>Certificate</span>
              <select id="certificateFilter">
                <option value="">All</option>
                <option value="1">Issued</option>
                <option value="0">Not Issued</option>
              </select>
            </label>
          </div>
        </div>

        <div class="card-body table-responsive vwep-table-wrap">
        <table id="datatable" class="display table table-striped table-hover">
          <thead>
            <tr align="left">
              <th>ID</th>
              <th><span class="vwep-select-all-wrap"><input type="checkbox" id="selectAllVwepUsers" title="Select all visible rows"></span></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>Redo Status</th>
              <th>Last Reminder</th>
              <th>Reminder Count</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>
  </div>
</main>
@endsection

@section('script')
$(function () {
  var table = $('#datatable').DataTable({
    processing: true,
    serverSide: true,
    responsive: true,
    lengthChange: true,
    pageLength: 10,
    lengthMenu: [[10, 25, 50, 100, 300, 500], [10, 25, 50, 100, 300, 500]],
    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();
        d.statFilter = $('.vwep-stat-card.is-active').data('stat-filter') || '';
      }
    },
    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: 'redo_status', name: 'redo_status', orderable: false, searchable: false },
      { data: 'last_reminder_sent_at', name: 'last_reminder_sent_at' },
      { data: 'reminder_count', name: 'reminder_count', 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 }
    ],
    drawCallback: function () {
      updateSelectAllState();
    }
  });

  $('#companyFilter, #vwepFilter, #completionFilter, #certificateFilter').on('change', function () {
    $('.vwep-stat-card').removeClass('is-active');
    $('.vwep-stat-card[data-stat-filter="started"]').addClass('is-active');
    table.ajax.reload();
  });

  $('#pageLengthFilter').on('change', function () {
    table.page.len(parseInt(this.value, 10)).draw();
  });

  $('.vwep-stat-card').on('click', function () {
    $('.vwep-stat-card').removeClass('is-active');
    $(this).addClass('is-active');

    $('#completionFilter').val('');
    $('#certificateFilter').val('');
    table.ajax.reload();
  });

  $('#selectAllVwepUsers').on('change', function () {
    var isChecked = this.checked;
    $('#datatable tbody input[name="vwep_user"]').prop('checked', isChecked);
    updateSelectAllState();
  });

  $('#datatable tbody').on('change', 'input[name="vwep_user"]', function () {
    updateSelectAllState();
  });

  function updateSelectAllState() {
    var rows = $('#datatable tbody input[name="vwep_user"]');
    var checkedRows = $('#datatable tbody input[name="vwep_user"]:checked');
    var selectAll = document.getElementById('selectAllVwepUsers');

    if (!selectAll) {
      return;
    }

    selectAll.checked = rows.length > 0 && rows.length === checkedRows.length;
    selectAll.indeterminate = checkedRows.length > 0 && checkedRows.length < rows.length;
  }
});
@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 {
        document.getElementById('action_error').innerText = data.message || 'Action failed';
        showMessage('action_error');
      }
    })
    .catch(() => {
      document.getElementById('action_error').innerText = 'Action failed';
      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) {
        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,
        statFilter: $('.vwep-stat-card.is-active').data('stat-filter') || ''
      })
    })
    .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>