@extends('layouts.dashboard')

@section('title', 'Peta Sebaran Anggota')

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-12">
            <h4 class="fw-bold text-primary">Peta Sebaran Geografis</h4>
            <p class="text-muted">Visualisasi konsentrasi anggota HNSI di seluruh wilayah Indonesia.</p>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-8 mb-4">
            <div class="card border-0 shadow-sm">
                <div class="card-body p-5 text-center bg-light rounded">
                    <i class="bi bi-map-fill text-primary opacity-25" style="font-size: 5rem;"></i>
                    <h5 class="mt-3 fw-bold">Peta Tematik Nasional</h5>
                    <p class="text-muted">Integrasi modul peta (GIS) memerlukan API Key atau GeoJSON Indonesia.</p>
                    
                    <div class="d-flex justify-content-center gap-3 mt-4">
                        <div class="small"><span class="badge bg-danger">Padat</span> > 1000</div>
                        <div class="small"><span class="badge bg-warning text-dark">Sedang</span> 100 - 1000</div>
                        <div class="small"><span class="badge bg-info">Rendah</span> < 100</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-header bg-white py-3">
                    <h6 class="mb-0 fw-bold">Ranking Wilayah</h6>
                </div>
                <div class="card-body p-0">
                    <div class="list-group list-group-flush">
                        @forelse($petaData as $data)
                        <div class="list-group-item d-flex justify-content-between align-items-center">
                            <div>
                                <span class="d-block fw-bold small">{{ $data->provinsi }}</span>
                                <div class="progress mt-1" style="height: 4px; width: 100px;">
                                    <div class="progress-bar bg-primary" style="width: {{ min($data->total / 10, 100) }}%"></div>
                                </div>
                            </div>
                            <span class="badge bg-primary-subtle text-primary rounded-pill">{{ number_format($data->total) }}</span>
                        </div>
                        @empty
                        <div class="p-4 text-center text-muted small">Data wilayah belum tersedia.</div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .bg-primary-subtle { background-color: #cfe2ff; }
</style>
@endsection