@extends('layouts.main')

@section('content')
@push('styles')
<style>
    .committee-section { background:#ffffff; border-radius:16px; border:1px solid #eef2f7; box-shadow:0 6px 24px rgba(17,24,39,0.06); padding:1.5rem; margin:1rem 0; }
    .committee-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; padding-bottom:0.75rem; border-bottom:1px solid #eef2f7; }
    .committee-table-container { overflow-x:auto; }
    .participants-table { width:100%; border-collapse:collapse; }
    .participants-table thead { background:#f3f4f6; }
    .participants-table th, .participants-table td { padding:0.75rem; text-align:left; border-bottom:1px solid #e5e7eb; }
    .empty-state { display:flex; align-items:center; justify-content:center; gap:10px; color:#6b7280; padding:20px; }
</style>
@endpush

<div class="mx-auto px-3">
  <div class="committee-section">
    <div class="committee-header">
      <h2 class="text-2xl font-bold text-gray-900">Daftar Peserta</h2>
      <span class="text-gray-600">Total: <span id="participant-count">{{ $participants->count() }}</span> peserta</span>
    </div>

    @php $canManage = auth()->user() && $activity->canManageRegistration(auth()->id()); @endphp
    @if($canManage && (($activity->price ?? 0) <= 0))
      <div class="mb-6 flex flex-wrap items-start justify-between gap-3">
        <form action="{{ route('activity.preparation.import-participants', $activity->id) }}" method="POST" enctype="multipart/form-data" onsubmit="return confirm('Impor peserta dari file Excel ini?');" class="flex items-center gap-3">
          @csrf
          <input type="file" name="file" accept=".xlsx,.xls,.csv" class="block w-80 rounded-lg border border-gray-300 bg-white px-3 py-2 text-sm shadow-sm focus:outline-none focus:ring-2 focus:ring-indigo-500">
          <button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-white font-semibold shadow hover:bg-indigo-700">Upload Excel Peserta</button>
        </form>
        <div class="flex items-center gap-2">
          <a href="{{ route('activity.preparation.download-participants-template', ['activityId' => $activity->id]) }}" class="inline-flex items-center gap-2 rounded-lg bg-gray-100 px-3 py-2 text-gray-700 font-semibold hover:bg-gray-200">
            <i class="fas fa-file-download"></i> Template Excel
          </a>
          <a href="{{ route('activity.preparation.download-import-result-excel', ['activityId' => $activity->id]) }}" class="inline-flex items-center gap-2 rounded-lg bg-gray-100 px-3 py-2 text-gray-700 font-semibold hover:bg-gray-200">
            <i class="fas fa-file-alt"></i> Hasil Impor
          </a>
        </div>
      </div>
    @endif

    <div class="mb-4">
      <input type="text" id="participant-search" class="form-control" placeholder="Cari peserta (nama, email, provinsi)..." style="max-width: 400px;">
    </div>

    <div class="committee-table-container">
      @if($participants->count() > 0)
        <table class="participants-table" id="participant-table">
          <thead>
            <tr>
              <th>No</th>
              <th>Nama</th>
              <th>Email</th>
              <th>Provinsi</th>
              <th>Akun</th>
              <th>Status</th>
              <th>Aksi</th>
            </tr>
          </thead>
          <tbody id="participant-tbody">
            @foreach($participants as $index => $participant)
              @php
                $user = $participant->user;
                $province = optional(optional($user->profile)->province)->name ?? (optional($user->profile)->other_province ?? '-');
                $status = (int) $participant->status;
                $statusText = match($status){
                    \App\Models\ActivityUser::STATUS_ACTIVE => 'Aktif',
                    \App\Models\ActivityUser::STATUS_VERIFICATION => 'Sedang Verifikasi',
                    \App\Models\ActivityUser::STATUS_REJECTED => 'Ditolak',
                    default => 'Tidak Diketahui'
                };
                $statusClass = $status == \App\Models\ActivityUser::STATUS_ACTIVE ? 'badge-success' : ($status == \App\Models\ActivityUser::STATUS_VERIFICATION ? 'badge-warning' : 'badge-danger');
                $isAdmin = auth()->user() && (auth()->user()->isAdmin() || auth()->user()->isSuperAdmin());
                $isAccountVerified = (bool) ($user->email_verified_at ?? false);
                $accountText = $isAccountVerified ? 'Akun Terverifikasi' : 'Akun Belum Verifikasi';
                $accountClass = $isAccountVerified ? 'badge-success' : 'badge-warning';
              @endphp
              <tr data-search="{{ strtolower(($user->name ?? '') . ' ' . ($user->email ?? '') . ' ' . $province) }}">
                <td>{{ $index + 1 }}</td>
                <td>{{ $user->name ?? '-' }}</td>
                <td>{{ $user->email ?? '-' }}</td>
                <td>{{ $province }}</td>
                <td>
                  <span class="badge {{ $accountClass }}" style="padding: 3px 10px; border-radius: 4px; font-size: 0.8125rem; font-weight: 500;">{{ $accountText }}</span>
                </td>
                <td>
                  @if($isAdmin)
                    <span id="status-badge-{{ $user->id }}" data-user-id="{{ $user->id }}" class="badge {{ $statusClass }} status-badge-editable" style="padding: 3px 10px; border-radius: 4px; font-size: 0.8125rem; font-weight: 500; cursor:pointer;" title="Klik untuk ubah status">{{ $statusText }}</span>
                    <select id="status-select-{{ $user->id }}" data-user-id="{{ $user->id }}" class="rounded border border-gray-300 text-sm px-2 py-1 status-select" style="display:none;" onchange="updateParticipantStatus({{ $user->id }}, this.value)" aria-label="Ubah status peserta">
                      <option value="{{ \App\Models\ActivityUser::STATUS_VERIFICATION }}" {{ $status == \App\Models\ActivityUser::STATUS_VERIFICATION ? 'selected' : '' }}>Sedang Verifikasi</option>
                      <option value="{{ \App\Models\ActivityUser::STATUS_ACTIVE }}" {{ $status == \App\Models\ActivityUser::STATUS_ACTIVE ? 'selected' : '' }}>Aktif</option>
                      <option value="{{ \App\Models\ActivityUser::STATUS_REJECTED }}" {{ $status == \App\Models\ActivityUser::STATUS_REJECTED ? 'selected' : '' }}>Ditolak</option>
                    </select>
                  @else
                    <span class="badge {{ $statusClass }}" style="padding: 3px 10px; border-radius: 4px; font-size: 0.8125rem; font-weight: 500;">{{ $statusText }}</span>
                  @endif
                </td>
                <td>
                  @if($isAdmin)
                    <form action="{{ route('activity.preparation.destroy-participant-user', [$activity->id, $user->id]) }}" method="POST" onsubmit="return confirm('Hapus akun peserta ini beserta semua data terkait? Tindakan tidak bisa dibatalkan.');" style="display:inline;">
                      @csrf
                      @method('DELETE')
                      <button type="submit" class="inline-flex items-center gap-2 rounded-lg bg-red-600 px-3 py-1.5 text-white font-semibold shadow hover:bg-red-700" title="Hapus akun peserta">
                        <i class="fas fa-trash-alt"></i>
                        Hapus
                      </button>
                    </form>
                  @else
                    -
                  @endif
                </td>
              </tr>
            @endforeach
          </tbody>
        </table>
      @else
        <div class="empty-state">
          <i class="fas fa-users"></i>
          <p>Belum ada peserta terdaftar</p>
        </div>
      @endif
    </div>
  </div>
</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function(){
  const input = document.getElementById('participant-search');
  const rows = document.querySelectorAll('#participant-tbody tr');
  if (input){
    input.addEventListener('input', function(){
      const term = this.value.toLowerCase();
      let visible = 0;
      rows.forEach(function(row){
        const text = row.getAttribute('data-search') || '';
        const show = text.indexOf(term) !== -1;
        row.style.display = show ? '' : 'none';
        if (show) visible++;
      });
      const cnt = document.getElementById('participant-count');
      if (cnt) cnt.textContent = String(visible);
    });
  }
});

function updateParticipantStatus(userId, status){
  try{
    var token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
    var url = `{{ route('activity.preparation.update-participant-status', [$activity->id, ':userId']) }}`.replace(':userId', userId);
    fetch(url, {
      method: 'POST',
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'X-CSRF-TOKEN': token,
        'Accept': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      body: new URLSearchParams({ status: String(status) })
    }).then(function(res){ return res.json(); })
    .then(function(data){ 
      if(data && data.success){
        var badge = document.getElementById('status-badge-' + userId);
        var select = document.getElementById('status-select-' + userId);
        if (badge && select){
          var s = parseInt(status, 10);
          var cls = s === {{ \App\Models\ActivityUser::STATUS_ACTIVE }} ? 'badge-success' : (s === {{ \App\Models\ActivityUser::STATUS_VERIFICATION }} ? 'badge-warning' : 'badge-danger');
          var txt = s === {{ \App\Models\ActivityUser::STATUS_ACTIVE }} ? 'Aktif' : (s === {{ \App\Models\ActivityUser::STATUS_VERIFICATION }} ? 'Sedang Verifikasi' : 'Ditolak');
          badge.className = 'badge ' + cls + ' status-badge-editable';
          badge.textContent = txt;
          select.style.display = 'none';
          badge.style.display = '';
        }
      } else {
        alert('Gagal memperbarui status peserta');
      }
    }).catch(function(){ alert('Terjadi kesalahan saat memperbarui status peserta'); });
  }catch($e) {}
}

document.addEventListener('click', function(e){
  var badge = e.target.closest('.status-badge-editable');
  if (!badge) return;
  var uid = badge.getAttribute('data-user-id');
  var select = document.getElementById('status-select-' + uid);
  if (select){
    badge.style.display = 'none';
    select.style.display = 'inline-block';
    select.focus();
  }
});

document.addEventListener('keydown', function(e){
  if (e.key !== 'Escape') return;
  var openSelect = document.querySelector('.status-select[style*="display: block"], .status-select:not([style])');
  if (!openSelect) return;
  var uid = openSelect.getAttribute('data-user-id');
  var badge = document.getElementById('status-badge-' + uid);
  openSelect.style.display = 'none';
  if (badge) badge.style.display = '';
});

document.addEventListener('blur', function(e){
  var select = e.target.closest('.status-select');
  if (!select) return;
  setTimeout(function(){
    if (document.activeElement !== select){
      var uid = select.getAttribute('data-user-id');
      var badge = document.getElementById('status-badge-' + uid);
      select.style.display = 'none';
      if (badge) badge.style.display = '';
    }
  }, 100);
}, true);
</script>
@endsection