@extends('layouts.superadmin')

@section('title', 'Daftar Pengajuan Masjid')

@section('header_title')
    <h1 class="text-2xl font-bold text-primary">Daftar Pengajuan Masjid</h1>
@endsection

@section('header_actions')
    <!-- Dropdown from screenshot 3 that was in the topbar -->
    <select class="bg-white border border-gray-300 text-sm rounded-lg focus:ring-primary focus:border-primary block px-3 py-1.5 w-40">
        <option>-- Pilih Masjid --</option>
    </select>
@endsection

@section('content')

    <!-- Filter Card -->
    <div class="bg-white p-5 rounded-2xl shadow-sm border border-gray-200 mb-6 flex flex-col md:flex-row justify-between gap-4">
        <form method="GET" action="{{ url('/superadmin/kelola-pengajuan') }}" class="w-full flex flex-col md:flex-row justify-between gap-4">
            <div class="w-full md:w-64">
                <label class="block text-[11px] font-bold text-gray-500 uppercase tracking-wider mb-2">Status Pengajuan</label>
                <select name="status" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary focus:border-primary block w-full p-2.5" onchange="this.form.submit()">
                    <option value="Semua Status" {{ request('status') == 'Semua Status' ? 'selected' : '' }}>Semua Status</option>
                    <option value="pending" {{ request('status') == 'pending' ? 'selected' : '' }}>Pending</option>
                    <option value="approved" {{ request('status') == 'approved' ? 'selected' : '' }}>Disetujui</option>
                    <option value="ditolak" {{ request('status') == 'ditolak' ? 'selected' : '' }}>Ditolak</option>
                </select>
            </div>
            
            <div class="w-full md:w-80 flex items-end">
                <div class="w-full relative">
                    <label class="block text-[11px] font-bold text-gray-500 uppercase tracking-wider mb-2">Cari</label>
                    <div class="relative">
                        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                            <i class="bi bi-search text-gray-400"></i>
                        </div>
                        <input type="text" name="search" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary focus:border-primary block w-full pl-10 p-2.5" placeholder="Cari Nama Masjid..." value="{{ request('search') }}">
                        <button type="submit" class="hidden"></button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <!-- Table -->
    <div class="bg-white border border-gray-200 rounded-2xl overflow-hidden shadow-sm">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-gray-50 text-gray-600 text-xs font-bold uppercase tracking-wider border-b border-gray-200">
                        <th class="px-6 py-4 font-bold">No</th>
                        <th class="px-6 py-4 font-bold">Nama Masjid</th>
                        <th class="px-6 py-4 font-bold">Alamat</th>
                        <th class="px-6 py-4 font-bold">Nama Admin</th>
                        <th class="px-6 py-4 font-bold">No WA</th>
                        <th class="px-6 py-4 font-bold">Tanggal</th>
                        <th class="px-6 py-4 font-bold">Status</th>
                        <th class="px-6 py-4 font-bold text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody class="text-sm text-gray-700 divide-y divide-gray-100 bg-white">
                    @forelse($pengajuan as $index => $item)
                        <tr class="hover:bg-gray-50/50 transition-colors">
                            <td class="px-6 py-4 whitespace-nowrap">{{ $pengajuan->firstItem() + $index }}</td>
                            <td class="px-6 py-4 font-semibold text-gray-900">{{ $item->nama_masjid }}</td>
                            <td class="px-6 py-4 text-gray-500">
                                <span class="truncate block w-40">{{ $item->alamat_masjid }}</span>
                            </td>
                            <td class="px-6 py-4">{{ $item->nama_admin_masjid }}</td>
                            <td class="px-6 py-4 font-medium">{{ $item->no_wa_admin }}</td>
                            <td class="px-6 py-4 whitespace-nowrap text-gray-500">
                                {{ \Carbon\Carbon::parse($item->tanggal_pengajuan)->format('d M Y') }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap">
                                @if($item->status_pengajuan == 'pending')
                                    <span class="bg-amber-100 text-amber-700 text-[10px] font-bold px-3 py-1 rounded-full uppercase tracking-wider">Pending</span>
                                @elseif($item->status_pengajuan == 'approved' || $item->status_pengajuan == 'disetujui')
                                    <span class="bg-emerald-100 text-emerald-700 text-[10px] font-bold px-3 py-1 rounded-full uppercase tracking-wider">Disetujui</span>
                                @else
                                    <span class="bg-red-100 text-red-700 text-[10px] font-bold px-3 py-1 rounded-full uppercase tracking-wider">Ditolak</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-center">
                                <div class="flex items-center justify-center gap-2">
                                    <button class="bg-[#e4e7ed] hover:bg-gray-300 text-gray-700 px-3 py-1.5 rounded-md text-xs font-semibold flex items-center gap-1.5 transition-colors">
                                        <i class="bi bi-eye"></i> Lihat
                                    </button>
                                    @if($item->status_pengajuan == 'pending')
                                        <form action="{{ url('/superadmin/masjid/approve/' . $item->id_pengajuan) }}" method="POST" class="inline">
                                            @csrf
                                            <button type="submit" class="bg-primary hover:bg-[#0c331f] text-white px-3 py-1.5 rounded-md text-xs font-semibold flex items-center gap-1.5 transition-colors" onclick="return confirm('Approve pengajuan ini?')">
                                                <i class="bi bi-check-circle"></i> Approve
                                            </button>
                                        </form>
                                        <form action="{{ url('/superadmin/masjid/reject/' . $item->id_pengajuan) }}" method="POST" class="inline">
                                            @csrf
                                            <button type="submit" class="bg-red-500 hover:bg-red-600 text-white px-3 py-1.5 rounded-md text-xs font-semibold flex items-center gap-1.5 transition-colors" onclick="return confirm('Tolak pengajuan ini?')">
                                                <i class="bi bi-x-circle"></i> Reject
                                            </button>
                                        </form>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-6 py-12 text-center text-gray-500">
                                <i class="bi bi-folder2-open text-4xl mb-3 block text-gray-300"></i>
                                Belum ada pengajuan masjid.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        
        <!-- Pagination footer -->
        <div class="px-6 py-4 bg-gray-50/50 border-t border-gray-200 flex items-center justify-between">
            <span class="text-xs text-gray-500">Menampilkan {{ $pengajuan->firstItem() ?? 0 }}-{{ $pengajuan->lastItem() ?? 0 }} dari {{ $pengajuan->total() }} data</span>
            <div class="flex gap-1">
                {{ $pengajuan->links('pagination::bootstrap-5') }}
            </div>
        </div>
    </div>
    
    <!-- Hide default bootstrap pagination extra styling if needed, Tailwind is primary -->
    <style>
        .pagination { display: flex; gap: 0.25rem; margin: 0; padding: 0; list-style: none; }
        .page-item .page-link { border-radius: 0.375rem; padding: 0.25rem 0.75rem; font-size: 0.75rem; color: #4b5563; background: white; border: 1px solid #e5e7eb; }
        .page-item.active .page-link { background: #154b32; color: white; border-color: #154b32; }

        /* ===== Modal WA ===== */
        #modalWA {
            display: none;
            position: fixed; inset: 0; z-index: 9999;
            background: rgba(0,0,0,0.55);
            align-items: center; justify-content: center;
        }
        #modalWA.show { display: flex; }
        #modalWA .modal-box {
            background: white;
            border-radius: 20px;
            padding: 32px;
            width: 100%; max-width: 480px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
            animation: popIn .25s ease;
        }
        @keyframes popIn {
            from { transform: scale(.9); opacity: 0; }
            to   { transform: scale(1);  opacity: 1; }
        }
        .wa-preview {
            background: #dcfce7;
            border-radius: 12px;
            padding: 14px 16px;
            font-size: 13px;
            color: #166534;
            white-space: pre-wrap;
            line-height: 1.6;
            max-height: 180px;
            overflow-y: auto;
            border: 1px solid #bbf7d0;
            margin: 16px 0;
        }
    </style>

    {{-- ===== MODAL NOTIFIKASI WHATSAPP ===== --}}
    @if(session('wa_notif'))
    @php $wa = session('wa_notif'); @endphp
    <div id="modalWA" class="show">
        <div class="modal-box">
            {{-- Header --}}
            <div class="flex items-center gap-3 mb-2">
                <div class="w-11 h-11 rounded-full flex items-center justify-center"
                     style="background: {{ $wa['status'] === 'disetujui' ? '#dcfce7' : '#fee2e2' }}">
                    <span style="font-size: 22px;">{{ $wa['status'] === 'disetujui' ? '✅' : '❌' }}</span>
                </div>
                <div>
                    <h3 class="font-bold text-gray-900 text-base">Kirim Notifikasi WhatsApp</h3>
                    <p class="text-xs text-gray-500">
                        Ke: <strong>{{ $wa['nama'] }}</strong>
                        ({{ $wa['no_wa'] }})
                    </p>
                </div>
            </div>

            <p class="text-xs text-gray-500 mb-1">Preview pesan yang akan dikirim:</p>
            <div class="wa-preview">{{ $wa['pesan'] }}</div>

            <p class="text-xs text-gray-400 mb-4">
                <i class="bi bi-info-circle"></i>
                WhatsApp Web akan terbuka dengan pesan yang sudah terisi. Klik <strong>Kirim</strong> di WhatsApp untuk mengirim.
            </p>

            {{-- Tombol --}}
            <div class="flex gap-3">
                <a href="{{ $wa['wa_link'] }}" target="_blank"
                   class="flex-1 flex items-center justify-center gap-2 py-2.5 rounded-xl text-white font-bold text-sm transition-all"
                   style="background: #25D366;"
                   onclick="document.getElementById('modalWA').classList.remove('show')">
                    <svg viewBox="0 0 24 24" width="18" fill="white"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
                    Buka WhatsApp & Kirim
                </a>
                <button onclick="document.getElementById('modalWA').classList.remove('show')"
                        class="px-5 py-2.5 rounded-xl border border-gray-300 text-gray-600 font-semibold text-sm hover:bg-gray-50 transition-all">
                    Lewati
                </button>
            </div>
        </div>
    </div>
    @endif

@endsection