@extends('layouts.dashboard')

@section('title', 'Profil Nelayan - HNSI')

@section('content')
<div class="container-fluid py-4">
    <div class="row">
        <div class="col-12">
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center mb-4 no-print">
                <div class="mb-3 mb-md-0">
                    <h4 class="fw-bold text-primary mb-1">Laporan Profil Nelayan</h4>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb mb-0">
                            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                            <li class="breadcrumb-item active">Profil Nelayan</li>
                        </ol>
                    </nav>
                </div>
                <div class="d-flex gap-2">
                    <button onclick="window.print()" class="btn btn-outline-secondary">
                        <i class="bi bi-printer me-2"></i>Cetak Laporan
                    </button>
                    <a href="#" class="btn btn-success">
                        <i class="bi bi-file-earmark-excel me-2"></i>Export Excel
                    </a>
                </div>
            </div>

            <div class="row g-3 mb-4">
                <div class="col-6 col-lg-3">
                    <div class="card border-0 shadow-sm h-100 bg-primary text-white">
                        <div class="card-body p-3">
                            <small class="opacity-75 d-block mb-1">Total Anggota</small>
                            <h3 class="fw-bold mb-0">{{ number_format($stats['total_nelayan']) }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-lg-3">
                    <div class="card border-0 shadow-sm h-100 bg-success text-white">
                        <div class="card-body p-3">
                            <small class="opacity-75 d-block mb-1">Puskonera</small>
                            <h3 class="fw-bold mb-0">{{ number_format($stats['puskonera']) }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-lg-3">
                    <div class="card border-0 shadow-sm h-100 bg-info text-white">
                        <div class="card-body p-3">
                            <small class="opacity-75 d-block mb-1">Kopris</small>
                            <h3 class="fw-bold mb-0">{{ number_format($stats['kopris']) }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-6 col-lg-3">
                    <div class="card border-0 shadow-sm h-100 bg-warning text-dark">
                        <div class="card-body p-3">
                            <small class="opacity-75 d-block mb-1">Asuransi (Y)</small>
                            <h3 class="fw-bold mb-0">{{ number_format($stats['asuransi_nelayan_y']) }}</h3>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-xl-8">
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-white py-3 border-0">
                            <h6 class="mb-0 fw-bold"><i class="bi bi-table me-2"></i>Distribusi per Kecamatan</h6>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-hover align-middle mb-0">
                                    <thead class="bg-light">
                                        <tr>
                                            <th class="ps-3 border-0">Provinsi</th>
                                            <th class="border-0">Kota/Kabupaten</th>
                                            <th class="border-0">Kecamatan</th>
                                            <th class="text-end pe-3 border-0">Total</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @forelse($profilNelayan as $item)
                                        <tr>
                                            <td class="ps-3 small">{{ $item->nama_provinsi }}</td>
                                            <td class="fw-bold">{{ $item->nama_kota }}</td>
                                            <td>{{ $item->nama_kecamatan }}</td>
                                            <td class="text-end pe-3">
                                                <span class="badge bg-primary-subtle text-primary px-3 py-2 rounded-pill">
                                                    {{ number_format($item->total_nelayan) }}
                                                </span>
                                            </td>
                                        </tr>
                                        @empty
                                        <tr>
                                            <td colspan="4" class="text-center py-5 text-muted small">Belum ada data tersedia.</td>
                                        </tr>
                                        @endforelse
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-xl-4 no-print">
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-white py-3 border-0">
                            <h6 class="mb-0 fw-bold"><i class="bi bi-pie-chart me-2"></i>Visualisasi Kota</h6>
                        </div>
                        <div class="card-body">
                            <div style="height: 300px;">
                                <canvas id="chartWilayah"></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('chartWilayah').getContext('2d');
    
    // Data dari Laravel
    const labels = [
        @foreach($profilNelayan->take(5) as $item)
            "{!! addslashes($item->nama_kota) !!}",
        @endforeach
    ];

    const values = [
        @foreach($profilNelayan->take(5) as $item)
            {{ $item->total_nelayan }},
        @endforeach
    ];

    new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: labels,
            datasets: [{
                data: values,
                backgroundColor: ['#0d6efd', '#198754', '#0dcaf0', '#ffc107', '#6c757d'],
                borderWidth: 0
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { position: 'bottom', labels: { usePointStyle: true, padding: 20 } }
            }
        }
    });
});
</script>

<style>
    /* Mengatasi Konten Menabrak Sidebar */
    .bg-primary-subtle { background-color: #cfe2ff !important; }
    
    @media print {
        .no-print, .sidebar, .navbar { display: none !important; }
        .card { border: none !important; }
        body { padding: 0 !important; background: white !important; }
    }
</style>
@endsection