@extends('layouts.admin')
@section('styles')
<style>
#map {
    height: 380px;
}
.dashboard-card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    color: #fff;
    margin-bottom: 1.5rem;
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
    transition: transform 0.2s;
}
.dashboard-card:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 8px 32px rgba(0,0,0,0.15);
}
.dashboard-card .icon-bg {
    position: absolute;
    top: -20px;
    right: -20px;
    font-size: 5rem;
    opacity: 0.15;
}
.dashboard-card .card-body {
    z-index: 2;
    position: relative;
}
.dashboard-card .text-value {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}
.dashboard-card .card-title {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.dashboard-section-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: #2575fc;
    margin-bottom: 1rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.dashboard-chart-card {
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 2px 12px rgba(37,117,252,0.08);
    padding: 1.5rem;
    margin-bottom: 2rem;
}
.dashboard-chart-card h3, .dashboard-chart-card .card-title {
    color: #2575fc;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
@endsection
@section('content')
<div class="content">
    <div class="row mb-4">
        <!-- Summary Cards -->
        <div class="col-md-3">
            <div class="dashboard-card" style="background: linear-gradient(135deg, #ff9966 0%, #ff5e62 100%);">
                <span class="icon-bg"><i class="fas fa-users"></i></span>
                <div class="card-body text-center">
                    <div class="text-value">{{ $summary['members'] ?? 0 }}</div>
                    <div class="card-title">Petani / Nelayan</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="dashboard-card" style="background: linear-gradient(135deg, #36d1c4 0%, #1e90ff 100%);">
                <span class="icon-bg"><i class="fas fa-truck"></i></span>
                <div class="card-body text-center">
                    <div class="text-value">{{ $summary['vehicles'] ?? 0 }}</div>
                    <div class="card-title">Kapal</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="dashboard-card" style="background: linear-gradient(135deg, #f7971e 0%, #ffd200 100%); color: #333;">
                <span class="icon-bg"><i class="fas fa-water"></i></span>
                <div class="card-body text-center">
                    <div class="text-value">{{ $summary['ponds'] ?? 0 }}</div>
                    <div class="card-title">Kolam</div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="dashboard-card" style="background: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);">
                <span class="icon-bg"><i class="fas fa-robot"></i></span>
                <div class="card-body text-center">
                    <div class="text-value">{{ $summary['feeders'] ?? 0 }}</div>
                    <div class="card-title">Feeder</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <!-- Monthly Statistics -->
        <div class="col-md-4">
            <div class="dashboard-chart-card">
                <h5 class="card-title"><i class="fas fa-seedling"></i> Pemberian Pakan (Bulanan)</h5>
                <canvas id="feedingChart"></canvas>
                <div class="mt-2">
                    <span class="h4">{{ $stats['feeding']['total'] ?? 0 }}</span>
                    <span class="text-{{ ($stats['feeding']['trend'] ?? 0) >= 0 ? 'success' : 'danger' }}">
                        <i class="fa fa-arrow-{{ ($stats['feeding']['trend'] ?? 0) >= 0 ? 'up' : 'down' }}"></i>
                        {{ abs($stats['feeding']['trend'] ?? 0) }}%
                    </span>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="dashboard-chart-card">
                <h5 class="card-title"><i class="fas fa-fish"></i> Panen Ikan (Bulanan)</h5>
                <canvas id="harvestChart"></canvas>
                <div class="mt-2">
                    <span class="h4">{{ $stats['harvest']['total'] ?? 0 }}</span>
                    <span class="text-{{ ($stats['harvest']['trend'] ?? 0) >= 0 ? 'success' : 'danger' }}">
                        <i class="fa fa-arrow-{{ ($stats['harvest']['trend'] ?? 0) >= 0 ? 'up' : 'down' }}"></i>
                        {{ abs($stats['harvest']['trend'] ?? 0) }}%
                    </span>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="dashboard-chart-card">
                <h5 class="card-title"><i class="fas fa-coins"></i> Penjualan (Bulanan)</h5>
                <canvas id="sellingChart"></canvas>
                <div class="mt-2">
                    <span class="h4">{{ $stats['selling']['total'] ?? 0 }}</span>
                    <span class="text-{{ ($stats['selling']['trend'] ?? 0) >= 0 ? 'success' : 'danger' }}">
                        <i class="fa fa-arrow-{{ ($stats['selling']['trend'] ?? 0) >= 0 ? 'up' : 'down' }}"></i>
                        {{ abs($stats['selling']['trend'] ?? 0) }}%
                    </span>
                </div>
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <!-- Monthly Active Users, Vehicles, Feeders + Top 10 Lists -->
        <div class="col-md-4">
            <div class="dashboard-card mb-3" style="background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);">
                <span class="icon-bg"><i class="fas fa-user-check"></i></span>
                <div class="card-body text-center">
                    <div class="text-value">{{ $active['users'] ?? 0 }}</div>
                    <div class="card-title">Monthly Active Users</div>
                </div>
            </div>
            <div class="dashboard-chart-card p-2">
                <div class="card-title text-center" style="font-size:1rem; color:#1e3c72;">Top 10 Most Active Users</div>
                <ol class="pl-3 mb-0" style="font-size:0.95rem;">
                    @foreach(($active['top_users'] ?? []) as $user)
                        <li>{{ $user['name'] ?? '-' }} <span class="badge badge-primary">{{ $user['activity'] ?? '' }}</span></li>
                    @endforeach
                </ol>
            </div>
        </div>
        <div class="col-md-4">
            <div class="dashboard-card mb-3" style="background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);">
                <span class="icon-bg"><i class="fas fa-shuttle-van"></i></span>
                <div class="card-body text-center">
                    <div class="text-value">{{ $active['vehicles'] ?? 0 }}</div>
                    <div class="card-title">Monthly Active Vehicles</div>
                </div>
            </div>
            <div class="dashboard-chart-card p-2">
                <div class="card-title text-center" style="font-size:1rem; color:#11998e;">Top 10 Most Active Vehicles</div>
                <ol class="pl-3 mb-0" style="font-size:0.95rem;">
                    @foreach(($active['top_vehicles'] ?? []) as $vehicle)
                        <li>{{ $vehicle['name'] ?? '-' }} <span class="badge badge-success">{{ $vehicle['activity'] ?? '' }}</span></li>
                    @endforeach
                </ol>
            </div>
        </div>
        <div class="col-md-4">
            <div class="dashboard-card mb-3" style="background: linear-gradient(135deg, #fc4a1a 0%, #f7b733 100%);">
                <span class="icon-bg"><i class="fas fa-robot"></i></span>
                <div class="card-body text-center">
                    <div class="text-value">{{ $active['feeders'] ?? 0 }}</div>
                    <div class="card-title">Monthly Active Feeders</div>
                </div>
            </div>
            <div class="dashboard-chart-card p-2">
                <div class="card-title text-center" style="font-size:1rem; color:#fc4a1a;">Top 10 Most Active Feeders</div>
                <ol class="pl-3 mb-0" style="font-size:0.95rem;">
                    @foreach(($active['top_feeders'] ?? []) as $feeder)
                        <li>{{ $feeder['name'] ?? '-' }} <span class="badge badge-warning">{{ $feeder['activity'] ?? '' }}</span></li>
                    @endforeach
                </ol>
            </div>
        </div>
    </div>

    <div class="row mb-4">
        <!-- Map -->
        <div class="col-12">
            <div class="dashboard-chart-card">
                <h5 class="card-title"><i class="fas fa-map-marked-alt"></i> Peta Kapal, Kolam, dan Feeder</h5>
                <div id="map" style="height: 400px;"></div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
@parent
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" crossorigin=""></script>
<script>
    // Chart Data
    const feedingData = @json($stats['feeding']['monthly'] ?? []);
    const harvestData = @json($stats['harvest']['monthly'] ?? []);
    const sellingData = @json($stats['selling']['monthly'] ?? []);
    const months = @json($stats['months'] ?? []);

    const feedingChart = new Chart(document.getElementById('feedingChart'), {
        type: 'line',
        data: {
            labels: months,
            datasets: [{
                label: 'Feeding',
                data: feedingData,
                borderColor: '#007bff',
                fill: false
            }]
        },
        options: {responsive: true, plugins: {legend: {display: false}}}
    });
    const harvestChart = new Chart(document.getElementById('harvestChart'), {
        type: 'line',
        data: {
            labels: months,
            datasets: [{
                label: 'Harvest',
                data: harvestData,
                borderColor: '#28a745',
                fill: false
            }]
        },
        options: {responsive: true, plugins: {legend: {display: false}}}
    });
    const sellingChart = new Chart(document.getElementById('sellingChart'), {
        type: 'line',
        data: {
            labels: months,
            datasets: [{
                label: 'Selling',
                data: sellingData,
                borderColor: '#ffc107',
                fill: false
            }]
        },
        options: {responsive: true, plugins: {legend: {display: false}}}
    });

    // Leaflet Map
    const vehicles = @json($map['vehicles'] ?? []);
    const ponds = @json($map['ponds'] ?? []);
    const feeders = @json($map['feeders'] ?? []);
    const map = L.map('map').setView([-1.5, 120.3], 5);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    const vehicleIcon = new L.Icon({
        iconUrl: 'https://nelayan.fusi.id/img/ship_icon.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
        shadowSize: [41, 41]
    });
    const pondIcon = new L.Icon({
        iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-green.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
        shadowSize: [41, 41]
    });
    const feederIcon = new L.Icon({
        iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png',
        iconSize: [25, 41],
        iconAnchor: [12, 41],
        popupAnchor: [1, -34],
        shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
        shadowSize: [41, 41]
    });

    vehicles.forEach(v => {
        if(v.lat && v.lon) {
            L.marker([v.lat, v.lon], {icon: vehicleIcon})
                .addTo(map)
                .bindPopup(`<b>Kapal: </b> ${v.name}`);
        }
    });
    ponds.forEach(p => {
        if(p.lat && p.lon) {
            L.marker([p.lat, p.lon], {icon: pondIcon})
                .addTo(map)
                .bindPopup(`<b>Kolam: </b> ${p.name}`);
        }
    });
    feeders.forEach(f => {
        if(f.lat && f.lon) {
            L.marker([f.lat, f.lon], {icon: feederIcon})
                .addTo(map)
                .bindPopup(`<b>Feeder: </b> ${f.name}`);
        }
    });
</script>
@endsection