@extends('layouts.dashboard')

@section('title', 'Laporan Distribusi Wilayah')

@section('content')
<div class="container-fluid">
    <div class="row mb-4 no-print">
        <div class="col-md-8">
            <h4 class="fw-bold text-primary">Sebaran Wilayah Keanggotaan</h4>
            <p class="text-muted">Data persebaran anggota berdasarkan Provinsi dan Kabupaten/Kota.</p>
        </div>
        <div class="col-md-4 text-end">
            <button onclick="window.print()" class="btn btn-outline-secondary">
                <i class="bi bi-printer me-1"></i> Cetak Laporan
            </button>
        </div>
    </div>

    <div class="card border-0 shadow-sm">
        <div class="card-header bg-white py-3">
            <h6 class="mb-0 fw-bold"><i class="bi bi-geo-alt me-2"></i>Tabel Distribusi Geografis</h6>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr>
                            <th class="ps-3" width="50">No</th>
                            <th>Provinsi</th>
                            <th>Kabupaten / Kota</th>
                            <th class="text-center">Jumlah Anggota</th>
                            <th width="300">Persentase Sebaran</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($distribusi as $index => $item)
                        @php
                            $persen = $totalNasional > 0 ? ($item->total / $totalNasional) * 100 : 0;
                        @endphp
                        <tr>
                            <td class="ps-3 text-muted">{{ $index + 1 }}</td>
                            <td><span class="badge bg-secondary-subtle text-secondary">{{ $item->nama_provinsi }}</span></td>
                            <td class="fw-bold text-dark">{{ $item->nama_kota }}</td>
                            <td class="text-center">
                                <span class="fw-bold">{{ number_format($item->total) }}</span> <small class="text-muted">Orang</small>
                            </td>
                            <td class="pe-3">
                                <div class="d-flex align-items-center">
                                    <div class="progress flex-grow-1" style="height: 8px;">
                                        <div class="progress-bar bg-primary" role="progressbar" style="width: {{ $persen }}%"></div>
                                    </div>
                                    <span class="ms-3 small fw-bold">{{ round($persen, 1) }}%</span>
                                </div>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="5" class="text-center py-5 text-muted">
                                <i class="bi bi-inbox fs-1 d-block mb-3"></i>
                                Belum ada data wilayah yang terdata.
                            </td>
                        </tr>
                        @endforelse
                    </tbody>
                    @if($distribusi->count() > 0)
                    <tfoot class="table-light fw-bold">
                        <tr>
                            <td colspan="3" class="text-end ps-3">TOTAL KESELURUHAN</td>
                            <td class="text-center">{{ number_format($totalNasional) }}</td>
                            <td class="pe-3 text-primary">100% Data Nasional</td>
                        </tr>
                    </tfoot>
                    @endif
                </table>
            </div>
        </div>
    </div>
</div>

<style>
    @media print {
        .no-print { display: none !important; }
        .card { border: none !important; }
        .table { width: 100% !important; border: 1px solid #dee2e6; }
    }
    .bg-secondary-subtle { background-color: #f0f2f5; }
</style>
@endsection