@extends('superadmin.layout')

@section('title', 'Kelola SPPG')
@section('subtitle', 'Daftar semua cabang SPPG yang terdaftar')

@section('content')
<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="p-6 border-b border-gray-100 flex items-center justify-between">
        <h2 class="text-lg font-bold text-gray-800">Daftar Cabang SPPG</h2>
        <button onclick="document.getElementById('modalTambahSppg').classList.remove('hidden')" class="px-4 py-2 bg-indigo-500 hover:bg-indigo-600 text-white text-sm font-medium rounded-lg shadow-md transition-colors">
            + Tambah SPPG
        </button>
    </div>
    
    <div class="overflow-x-auto">
        <table class="w-full text-left text-sm text-gray-600">
            <thead class="bg-gray-50/50 text-gray-500 text-xs uppercase font-semibold">
                <tr>
                    <th class="px-6 py-4">Nama SPPG</th>
                    <th class="px-6 py-4">Link Login Relawan</th>
                    <th class="px-6 py-4">Alamat</th>
                    <th class="px-6 py-4 text-center">Jumlah Admin</th>
                    <th class="px-6 py-4 text-center">Jumlah Relawan</th>
                    <th class="px-6 py-4 text-center">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @forelse($sppgs as $sppg)
                <tr class="hover:bg-gray-50/50 transition-colors">
                    <td class="px-6 py-4 font-bold text-gray-800">{{ $sppg->name }}</td>
                    <td class="px-6 py-4">
                        <a href="{{ route('login', $sppg->slug) }}" target="_blank" class="text-indigo-500 hover:underline">
                            /{{ $sppg->slug }}/login
                        </a>
                    </td>
                    <td class="px-6 py-4">{{ $sppg->address ?? '-' }}</td>
                    <td class="px-6 py-4 text-center">
                        <span class="px-2.5 py-1 bg-sky-100 text-sky-700 rounded-full font-semibold">{{ $sppg->admin_count }}</span>
                    </td>
                    <td class="px-6 py-4 text-center">
                        <span class="px-2.5 py-1 bg-emerald-100 text-emerald-700 rounded-full font-semibold">{{ $sppg->volunteer_count }}</span>
                    </td>
                    <td class="px-6 py-4 text-center">
                        <form action="{{ route('superadmin.sppgs.destroy', $sppg) }}" method="POST" onsubmit="return confirm('Yakin ingin menghapus SPPG ini? SEMUA DATA admin, relawan, shift, dan absen cabang ini akan ikut terhapus permanen!');">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="text-rose-500 hover:text-rose-700 font-medium text-xs">Hapus</button>
                        </form>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="6" class="px-6 py-8 text-center text-gray-400">Belum ada data SPPG.</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>

{{-- Modal Tambah --}}
<div id="modalTambahSppg" class="fixed inset-0 z-50 hidden bg-gray-900/50 flex items-center justify-center backdrop-blur-sm">
    <div class="bg-white rounded-2xl shadow-xl w-full max-w-md overflow-hidden animate-fade-in-up">
        <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center">
            <h3 class="font-bold text-lg text-gray-800">Tambah Cabang SPPG</h3>
            <button type="button" onclick="document.getElementById('modalTambahSppg').classList.add('hidden')" class="text-gray-400 hover:text-gray-600 text-2xl">&times;</button>
        </div>
        <form action="{{ route('superadmin.sppgs.store') }}" method="POST" class="p-6 space-y-4">
            @csrf
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1">Nama SPPG</label>
                <input type="text" name="name" class="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500" placeholder="Misal: SPPG Lhokseumawe" required>
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1">Kode Link <span class="text-rose-400">*</span></label>
                <input type="text" name="slug" id="slugInput" class="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500" placeholder="Misal: lhokseumawe" required pattern="[a-z0-9\-]+" oninput="this.value = this.value.toLowerCase().replace(/[^a-z0-9\-]/g, ''); document.getElementById('slugPreview').textContent = this.value || '...';">
                <p class="mt-1.5 text-xs text-gray-400">Link login relawan: <span class="text-indigo-500 font-medium">{{ url('/') }}/<span id="slugPreview">...</span>/login</span></p>
                <p class="mt-0.5 text-xs text-gray-400">Hanya huruf kecil, angka, dan strip (-)</p>
            </div>
            <div>
                <label class="block text-sm font-semibold text-gray-700 mb-1">Alamat (Opsional)</label>
                <textarea name="address" rows="3" class="w-full px-4 py-2 border border-gray-200 rounded-xl focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500" placeholder="Detail lokasi..."></textarea>
            </div>
            <div class="pt-4 flex justify-end gap-2">
                <button type="button" onclick="document.getElementById('modalTambahSppg').classList.add('hidden')" class="px-4 py-2 text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-xl font-medium text-sm transition-colors">Batal</button>
                <button type="submit" class="px-4 py-2 bg-indigo-500 hover:bg-indigo-600 text-white rounded-xl font-medium text-sm shadow-md transition-colors">Simpan SPPG</button>
            </div>
        </form>
    </div>
</div>
@endsection