@extends('layouts.main')

@section('content')
<div class="bg-gray-50 min-h-screen py-6">
  <div class="container mx-auto px-4">
    <h2 class="text-gray-900 text-2xl font-semibold mb-4">Aktivitas Saya</h2>

    @php
      $user = auth()->user();
      $canUpgrade = !$user->isAdmin() && !$user->isSuperAdmin();
      $keanggotaan = $user->keanggotaan;
      $hasKeanggotaan = $keanggotaan !== null;
      $isPending = $hasKeanggotaan && $keanggotaan->status === 'pending';
      $isAktif = $hasKeanggotaan && $keanggotaan->status === 'aktif';
    @endphp
    @if($canUpgrade)
      @if(!$hasKeanggotaan || $isPending)
        <div class="bg-indigo-50 border border-indigo-200 rounded-lg p-4 mb-4 flex items-center justify-between">
          <div class="flex items-start">
            <span class="inline-flex items-center justify-center h-10 w-10 rounded-full bg-indigo-100 text-indigo-700 mr-3"><i class="fas fa-users"></i></span>
            <div>
              <div class="text-sm font-semibold text-indigo-800">Upgrade jadi Anggota KOGTIK</div>
              <div class="text-sm text-indigo-900">
                @if($isPending)
                  Permohonan keanggotaan Anda sedang menunggu persetujuan administrator.
                @else
                  Ajukan permohonan untuk menjadi Anggota KOGTIK dan dapatkan akses ke berbagai manfaat keanggotaan.
                @endif
              </div>
            </div>
          </div>
          @if(!$isPending)
            <form method="POST" action="{{ route('profile.upgrade-to-anggota') }}" id="formAjukanKeanggotaanDashboard">
              @csrf
              <button type="button" 
                      id="btnAjukanKeanggotaanDashboard"
                      class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white rounded-md shadow hover:bg-indigo-700 transition">
                <i class="fas fa-user-plus mr-2"></i> Ajukan Keanggotaan
              </button>
            </form>
          @else
            <span class="inline-flex items-center px-4 py-2 bg-yellow-100 text-yellow-800 rounded-md">
              <i class="fas fa-clock mr-2"></i> Menunggu Persetujuan
            </span>
          @endif
        </div>
      @elseif($isAktif)
        <div class="bg-green-50 border border-green-200 rounded-lg p-4 mb-4 flex items-center justify-between">
          <div class="flex items-start">
            <span class="inline-flex items-center justify-center h-10 w-10 rounded-full bg-green-100 text-green-700 mr-3"><i class="fas fa-check-circle"></i></span>
            <div>
              <div class="text-sm font-semibold text-green-800">Anggota KOGTIK Aktif</div>
              <div class="text-sm text-green-900">
                Nomor Anggota: <strong>{{ $keanggotaan->nomor_anggota }}</strong>
                @if($keanggotaan->tanggal_bergabung)
                  <br>Bergabung sejak: {{ $keanggotaan->tanggal_bergabung->format('d F Y') }}
                @endif
              </div>
            </div>
          </div>
          <span class="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-md">
            <i class="fas fa-check mr-2"></i> Aktif
          </span>
        </div>
      @endif
    @endif

    <!-- Stat cards (lebih simpel & warna berbeda) -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-3 mb-6">
      <div class="bg-sky-50 rounded-lg p-4 shadow-sm border border-sky-200">
        <div class="text-xs font-medium text-sky-700 mb-1">Total Ikut Kegiatan</div>
        <div class="text-2xl font-bold text-sky-900">{{ $stats['totalActivitiesJoined'] ?? 0 }}</div>
      </div>
      <div class="bg-emerald-50 rounded-lg p-4 shadow-sm border border-emerald-200">
        <div class="text-xs font-medium text-emerald-700 mb-1">Status Aktif</div>
        <div class="text-2xl font-bold text-emerald-900">{{ $stats['active'] ?? 0 }}</div>
      </div>
      <div class="bg-amber-50 rounded-lg p-4 shadow-sm border border-amber-200">
        <div class="text-xs font-medium text-amber-700 mb-1">Sedang Verifikasi</div>
        <div class="text-2xl font-bold text-amber-900">{{ $stats['verification'] ?? 0 }}</div>
      </div>
      <div class="bg-rose-50 rounded-lg p-4 shadow-sm border border-rose-200">
        <div class="text-xs font-medium text-rose-700 mb-1">Ditolak</div>
        <div class="text-2xl font-bold text-rose-900">{{ $stats['rejected'] ?? 0 }}</div>
      </div>
    </div>

    <!-- Info langganan dipindahkan ke halaman Profil -->

    <!-- Tabel: Kegiatan yang Diikuti -->
    <div class="grid grid-cols-1">
      <div class="bg-white rounded-xl shadow-sm border border-gray-200">
        <div class="px-4 py-3 border-b border-gray-200">
          <h3 class="text-sm font-semibold text-gray-700">Kegiatan yang Diikuti</h3>
        </div>
        <div class="p-4">
          <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
              <thead class="bg-gray-100">
                <tr>
                  <th class="px-4 py-2 text-left text-xs font-semibold text-gray-700">Nama Kegiatan</th>
                  <th class="px-4 py-2 text-left text-xs font-semibold text-gray-700">Kategori</th>
                  <th class="px-4 py-2 text-left text-xs font-semibold text-gray-700">Tanggal</th>
                  <th class="px-4 py-2 text-left text-xs font-semibold text-gray-700">Status</th>
                  <th class="px-4 py-2 text-right text-xs font-semibold text-gray-700">Aksi</th>
                </tr>
              </thead>
              <tbody class="bg-white divide-y divide-gray-100">
                @forelse(($joinedActivities ?? []) as $act)
                  @php
                    $au = ($activityUserMap ?? collect())->get($act->id);
                    $statusText = $au ? $au->getStatusText() : '-';
                    $statusClass = 'badge-secondary';
                    if ($au && $au->status === \App\Models\ActivityUser::STATUS_ACTIVE) { $statusClass = 'badge-success'; }
                    elseif ($au && $au->status === \App\Models\ActivityUser::STATUS_VERIFICATION) { $statusClass = 'badge-warning'; }
                    elseif ($au && $au->status === \App\Models\ActivityUser::STATUS_REJECTED) { $statusClass = 'badge-danger'; }
                  @endphp
                  <tr class="hover:bg-gray-50">
                    <td class="px-4 py-2 text-gray-800 font-medium">{{ $act->name }}</td>
                    <td class="px-4 py-2 text-gray-600">{{ optional($act->category)->name ?? '-' }}</td>
                    <td class="px-4 py-2 text-gray-600">{{ optional($act->date)->format('d M Y') ?? '-' }}</td>
                    <td class="px-4 py-2">
                      @php
                        $badgeClasses = 'inline-flex items-center px-2 py-1 rounded-md text-xs font-medium';
                        if ($statusClass === 'badge-success') {
                          $badgeClasses .= ' bg-emerald-100 text-emerald-700';
                        } elseif ($statusClass === 'badge-warning') {
                          $badgeClasses .= ' bg-amber-100 text-amber-700';
                        } elseif ($statusClass === 'badge-danger') {
                          $badgeClasses .= ' bg-rose-100 text-rose-700';
                        } else {
                          $badgeClasses .= ' bg-gray-100 text-gray-700';
                        }
                      @endphp
                      <span class="{{ $badgeClasses }}">{{ $statusText }}</span>
                    </td>
                    <td class="px-4 py-2 text-right">
                      <a href="{{ route('activity.show', $act->id) }}" class="inline-flex items-center px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-xs rounded">Detail</a>
                    </td>
                  </tr>
                @empty
                  <tr>
                    <td colspan="5" class="px-4 py-6 text-center text-gray-600">Belum ada kegiatan diikuti</td>
                  </tr>
                @endforelse
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Modal Profile Belum Lengkap -->
<div id="profileIncompleteModal" class="hidden fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center">
    <div class="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
        <div class="p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                    <i class="fas fa-exclamation-triangle text-yellow-500 mr-2"></i>
                    Profile Belum Lengkap
                </h3>
                <button type="button" id="closeProfileModal" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="mb-4">
                <p class="text-sm text-gray-700 mb-3">
                    Untuk mengajukan keanggotaan KOGTIK, Anda perlu melengkapi data profile berikut:
                </p>
                <div id="missingFieldsList" class="space-y-2">
                    <!-- Field yang belum lengkap akan ditampilkan di sini -->
                </div>
            </div>
            <div class="flex gap-3">
                <button type="button" id="dismissProfileModal" class="flex-1 px-4 py-2 bg-gray-200 text-gray-700 rounded-md hover:bg-gray-300 transition">
                    Tutup
                </button>
                <a href="{{ route('profile.edit', auth()->id()) }}" class="flex-1 px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition text-center">
                    <i class="fas fa-edit mr-2"></i> Lengkapi Profile
                </a>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const btnAjukan = document.getElementById('btnAjukanKeanggotaanDashboard');
    const formAjukan = document.getElementById('formAjukanKeanggotaanDashboard');
    const modal = document.getElementById('profileIncompleteModal');
    const closeBtn = document.getElementById('closeProfileModal');
    const dismissBtn = document.getElementById('dismissProfileModal');
    const missingFieldsList = document.getElementById('missingFieldsList');

    if (btnAjukan && formAjukan) {
        btnAjukan.addEventListener('click', function(e) {
            e.preventDefault();
            
            // Cek kelengkapan profile
            fetch('{{ route("profile.check-completeness") }}', {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                },
                credentials: 'same-origin'
            })
            .then(response => response.json())
            .then(data => {
                if (data.complete) {
                    // Profile sudah lengkap, submit form
                    if (confirm('Apakah Anda yakin ingin mengajukan keanggotaan KOGTIK?')) {
                        formAjukan.submit();
                    }
                } else {
                    // Profile belum lengkap, tampilkan modal
                    missingFieldsList.innerHTML = '';
                    if (data.missing_fields && data.missing_fields.length > 0) {
                        data.missing_fields.forEach(function(field) {
                            const item = document.createElement('div');
                            item.className = 'flex items-center p-2 bg-yellow-50 border border-yellow-200 rounded';
                            item.innerHTML = `
                                <i class="fas fa-exclamation-circle text-yellow-600 mr-2"></i>
                                <span class="text-sm text-gray-700">${field}</span>
                            `;
                            missingFieldsList.appendChild(item);
                        });
                    }
                    modal.classList.remove('hidden');
                    modal.classList.add('flex');
                }
            })
            .catch(error => {
                console.error('Error checking profile:', error);
                alert('Terjadi kesalahan saat mengecek kelengkapan profile. Silakan coba lagi.');
            });
        });
    }

    // Close modal handlers
    if (closeBtn) {
        closeBtn.addEventListener('click', function() {
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        });
    }

    if (dismissBtn) {
        dismissBtn.addEventListener('click', function() {
            modal.classList.add('hidden');
            modal.classList.remove('flex');
        });
    }

    // Close modal when clicking outside
    if (modal) {
        modal.addEventListener('click', function(e) {
            if (e.target === modal) {
                modal.classList.add('hidden');
                modal.classList.remove('flex');
            }
        });
    }
});
</script>
@endpush

@push('styles')
{{-- Menggunakan utilitas Tailwind; tidak ada style tambahan khusus halaman ini --}}
@endpush
@endsection