@extends('layouts.admin.master')

@section('content')
    <div class="stunting-dashboard">
        <input type="hidden" id="dashboard-data-route" value="{{ route('admin.stunting.dashboard.data') }}">
        <!-- Header Dashboard Stunting -->
        <div class="dashboard-header mb-4">
            <h2 class="dashboard-title">Dashboard Stunting</h2>
            <p class="dashboard-subtitle">Monitoring dan evaluasi program penanganan stunting</p>
        </div>

        <!-- Kartu Statistik Utama -->
        <div class="row stats-cards mb-4">
            <!-- Total Kasus -->
            <div class="col-xl-3 col-md-6 mb-3">
                <div class="stat-card card-danger">
                    <div class="stat-icon">
                        <i class="fas fa-child"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-title">Total Kasus Stunting</div>
                        <div class="stat-value">{{ $stats['total_stunting'] }}</div>
                        <div class="stat-change {{ $stats['trend_stunting'] > 0 ? 'text-danger' : 'text-success' }}">
                            <i class="fas {{ $stats['trend_stunting'] > 0 ? 'fa-arrow-up' : 'fa-arrow-down' }}"></i>
                            {{ abs($stats['trend_stunting']) }}%
                        </div>
                    </div>
                </div>
            </div>

            <!-- Kasus Baru -->
            <div class="col-xl-3 col-md-6 mb-3">
                <div class="stat-card card-warning">
                    <div class="stat-icon">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-title">Kasus Baru (30 Hari)</div>
                        <div class="stat-value">{{ $stats['new_cases'] }}</div>
                        <div class="stat-detail">Dari {{ $stats['total_examined'] }} pemeriksaan</div>
                    </div>
                </div>
            </div>

            <!-- Intervensi Aktif -->
            <div class="col-xl-3 col-md-6 mb-3">
                <a href="{{ route('admin.stunting.intervensi') }}" class="stat-card-link">
                    <div class="stat-card card-info">
                        <div class="stat-icon">
                            <i class="fas fa-hand-holding-medical"></i>
                        </div>
                        <div class="stat-content">
                            <div class="stat-title">Intervensi Aktif</div>
                            <div class="stat-value">{{ $stats['active_interventions'] }}</div>
                            <div class="stat-detail">{{ $stats['completed_interventions'] }} selesai</div>
                        </div>
                    </div>
                </a>
            </div>

            <!-- Cakupan Wilayah -->
            <div class="col-xl-3 col-md-6 mb-3">
                <div class="stat-card card-success">
                    <div class="stat-icon">
                        <i class="fas fa-map-marked-alt"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-title">Cakupan Wilayah</div>
                        <div class="stat-value">{{ $stats['covered_villages'] }}/{{ $stats['total_villages'] }}</div>
                        <div class="stat-detail">{{ number_format($stats['coverage_percentage'], 1) }}% tercover</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Filter Periode -->
        <div class="dashboard-filter mb-4">
            <div class="row">
                <div class="col-md-4">
                    <label class="form-label">Periode Program</label>
                    <select class="form-select" id="periode-filter">
                        @foreach($periodes as $periode)
                            <option value="{{ $periode->id }}" {{ $periode->status == 'Aktif' ? 'selected' : '' }}>
                                {{ $periode->nama }} ({{ $periode->tanggal_mulai->format('d M Y') }} - {{ $periode->tanggal_selesai->format('d M Y') }})
                            </option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4">
                    <label class="form-label">Wilayah</label>
                    <select class="form-select" id="wilayah-filter">
                        <option value="">Semua Wilayah</option>
                        @foreach($villages as $village)
                            <option value="{{ $village->id }}">{{ $village->name }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-4 d-flex align-items-end">
                    <button type="button" id="refresh-btn" class="btn btn-primary">
                        <i class="fas fa-sync-alt me-2"></i> Terapkan Filter
                    </button>
                </div>
            </div>
        </div>

        <!-- Grafik Utama -->
        <div class="row mb-4">
            <div class="col-lg-8 mb-3">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Trend Kasus Stunting</h5>
                    </div>
                    <div class="card-body">
                        <div id="stunting-trend-chart" style="height: 350px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 mb-3">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title">Distribusi Usia</h5>
                    </div>
                    <div class="card-body">
                        <div id="age-distribution-chart" style="height: 350px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tabel dan Info Penting -->
        <div class="row">
            <div class="col-lg-6 mb-3">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Kasus Terbaru</h5>
                        <a href="{{ route('admin.stunting.penduduk') }}" class="btn btn-sm btn-outline-primary">Lihat Semua</a>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-hover table-striped mb-0">
                                <thead>
                                    <tr>
                                        <th width="10px">No</th>
                                        <th>Nama</th>
                                        <th>Usia</th>
                                        <th>Status</th>
                                        <th>Aksi</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($recent_cases as $key => $case)
                                        <tr>
                                            <td>{{ $key + 1 }}</td>
                                            <td>{{ $case->penduduk?->nama ?? '-' }}</td>
                                            <td>{{ $case->penduduk?->umur ?? 0 }} Thn</td>
                                            <td>
                                                <span class="badge bg-{{ $case->status_stunting == 'Stunting' ? 'danger' : ($case->status_stunting == 'Risiko' ? 'warning' : 'success') }}">
                                                    {{ $case->status_stunting }}
                                                </span>
                                            </td>
                                            <td>
                                                <a href="{{ route('admin.stunting.penduduk.show', $case->id) }}" class="btn btn-sm btn-icon btn-info" title="Detail">
                                                    <i class="fas fa-eye"></i>
                                                </a>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="5" class="text-center text-muted py-4">Belum ada kasus terbaru.</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-6 mb-3">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">Intervensi Mendatang</h5>
                        <a href="{{ route('admin.stunting.intervensi') }}" class="btn btn-sm btn-outline-primary">Lihat Semua</a>
                    </div>
                    <div class="card-body p-0">
                        <div class="upcoming-interventions">
                            @forelse($upcoming_interventions as $intervention)
                            <div class="intervention-item">
                                <div class="intervention-date">
                                    <div class="date-day">{{ optional($intervention->tanggal)->format('d') ?? '-' }}</div>
                                    <div class="date-month">{{ optional($intervention->tanggal)->format('M') ?? '-' }}</div>
                                </div>
                                <div class="intervention-detail">
                                    <h6>{{ $intervention->jenis }}</h6>
                                    <p class="mb-1">
                                        <i class="fas fa-user me-2"></i>
                                        {{ $intervention->stuntingPenduduk?->penduduk?->nama ?? '-' }}
                                    </p>
                                    <p class="mb-0 text-muted small">
                                        <i class="fas fa-map-marker-alt me-2"></i>
                                        {{ $intervention->stuntingPenduduk?->penduduk?->village?->name ?? '-' }}
                                    </p>
                                </div>
                                <div class="intervention-status">
                                    <span class="badge bg-{{ $intervention->status == 'Selesai' ? 'success' : ($intervention->status == 'Batal' ? 'danger' : 'warning') }}">
                                        {{ $intervention->status }}
                                    </span>
                                </div>
                            </div>
                            @empty
                                <div class="p-4 text-center text-muted">Belum ada intervensi mendatang.</div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@section('stylesheet')
    <style>
        /* Dashboard Container */
        .stunting-dashboard {
            padding: 20px;
            background-color: #f8fafc;
        }

        /* Header */
        .dashboard-header {
            padding: 15px 0;
        }
        .dashboard-title {
            font-size: 24px;
            font-weight: 600;
            color: #2c3e50;
            margin-bottom: 5px;
        }
        .dashboard-subtitle {
            color: #6c757d;
            font-size: 14px;
        }

        /* Stat Cards */
        .stat-card {
            border-radius: 10px;
            padding: 20px;
            height: 100%;
            display: flex;
            align-items: center;
            transition: all 0.3s ease;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            background: white;
            border-left: 4px solid;
        }
        .stat-card-link {
            text-decoration: none;
        }
        .stat-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        .stat-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            color: white;
            margin-right: 15px;
        }
        .stat-content {
            flex: 1;
        }
        .stat-title {
            font-size: 14px;
            color: #6c757d;
            margin-bottom: 5px;
        }
        .stat-value {
            font-size: 24px;
            font-weight: 600;
            color: #2c3e50;
            line-height: 1;
        }
        .stat-change {
            font-size: 12px;
            margin-top: 5px;
        }
        .stat-detail {
            font-size: 12px;
            color: #6c757d;
            margin-top: 2px;
        }
        .card-danger {
            border-left-color: #e74c3c;
        }
        .card-danger .stat-icon {
            background: linear-gradient(135deg, #e74c3c, #c0392b);
        }
        .card-warning {
            border-left-color: #f39c12;
        }
        .card-warning .stat-icon {
            background: linear-gradient(135deg, #f39c12, #e67e22);
        }
        .card-info {
            border-left-color: #3498db;
        }
        .card-info .stat-icon {
            background: linear-gradient(135deg, #3498db, #2980b9);
        }
        .card-success {
            border-left-color: #2ecc71;
        }
        .card-success .stat-icon {
            background: linear-gradient(135deg, #2ecc71, #27ae60);
        }

        /* Filter */
        .dashboard-filter {
            background: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.05);
            margin-bottom: 20px;
        }

        /* Table */
        .table-responsive {
            border-radius: 8px;
            overflow: hidden;
        }
        .table {
            margin-bottom: 0;
        }
        .table th {
            background-color: #f8f9fa;
            border-bottom-width: 1px;
        }

        /* Upcoming Interventions */
        .upcoming-interventions {
            padding: 0;
        }
        .intervention-item {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            border-bottom: 1px solid #f1f1f1;
            transition: background-color 0.2s;
        }
        .intervention-item:last-child {
            border-bottom: none;
        }
        .intervention-item:hover {
            background-color: #f8f9fa;
        }
        .intervention-date {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            background-color: #f1f5f9;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            flex-shrink: 0;
        }
        .date-day {
            font-size: 18px;
            font-weight: 600;
            line-height: 1;
        }
        .date-month {
            font-size: 12px;
            text-transform: uppercase;
            margin-top: 2px;
            color: #64748b;
        }
        .intervention-detail {
            flex: 1;
            min-width: 0;
        }
        .intervention-detail h6 {
            font-size: 15px;
            margin-bottom: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .intervention-detail p {
            font-size: 13px;
            margin-bottom: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .intervention-status {
            margin-left: 10px;
        }

        /* Responsive */
        @media (max-width: 992px) {
            .stat-card {
                flex-direction: column;
                text-align: center;
                padding: 15px;
            }
            .stat-icon {
                margin-right: 0;
                margin-bottom: 10px;
            }
        }
    </style>
@endsection

@section('javascript')
    <script src="{{ asset('assets/templates/admin/js/jquery.sparkline.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/js/circle-progress.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/charts-c3/d3.v5.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/charts-c3/c3-chart.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/input-mask/jquery.mask.min.js') }}"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-loading-overlay/2.1.7/loadingoverlay.min.js" integrity="sha512-hktawXAt9BdIaDoaO9DlLp6LYhbHMi5A36LcXQeHgVKUH6kJMOQsAtIw2kmQ9RERDpnSTlafajo6USh9JUXckw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="{{ asset('assets/templates/admin/plugins/daterangepicker/moment.min.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/daterangepicker/daterangepicker.js') }}"></script>
    <script src="{{ asset('assets/templates/admin/plugins/apexcharts-bundle/js/apexcharts.min.js') }}"></script>
    @php
        $resource = resource_loader(
            blade_path: $view,
            params: [
                'page_title' => $page_attr['title'],
            ],
        );
    @endphp
    <script src="{{ $resource }}"></script>
@endsection