@extends('layouts.app')

@section('title', 'Dashboard - Sistem Distribusi Qurban')

@section('header_title', 'Ringkasan Distribusi')
@section('header_subtitle', 'Pantau status penyaluran daging qurban secara real-time')

@section('content')
<!-- KPI Stat Grid -->
<div class="kpi-grid">
    <div class="kpi-card" style="border-bottom: 4px solid var(--primary);">
        <div class="kpi-card-icon">👥</div>
        <div class="kpi-card-info">
            <span class="kpi-card-value">{{ number_format($totalParticipants) }}</span>
            <span class="kpi-card-label">Total Penerima</span>
        </div>
    </div>

    <div class="kpi-card" style="border-bottom: 4px solid var(--success);">
        <div class="kpi-card-icon" style="background-color: var(--success-bg); color: var(--success);">✅</div>
        <div class="kpi-card-info">
            <span class="kpi-card-value">{{ number_format($totalDistributed) }}</span>
            <span class="kpi-card-label">Sudah Diambil</span>
        </div>
    </div>

    <div class="kpi-card" style="border-bottom: 4px solid var(--info);">
        <div class="kpi-card-icon" style="background-color: var(--info-bg); color: var(--info);">📦</div>
        <div class="kpi-card-info">
            <span class="kpi-card-value">{{ number_format($totalEntrusted) }}</span>
            <span class="kpi-card-label">Paket Dititipkan</span>
        </div>
    </div>

    <div class="kpi-card" style="border-bottom: 4px solid var(--danger);">
        <div class="kpi-card-icon" style="background-color: var(--danger-bg); color: var(--danger);">⏳</div>
        <div class="kpi-card-info">
            <span class="kpi-card-value">{{ number_format($totalBelum) }}</span>
            <span class="kpi-card-label">Belum Diambil</span>
        </div>
    </div>
</div>

<!-- Secondary Widgets Row -->
<div class="dashboard-row">
    <!-- Recent Activity -->
    <div class="panel">
        <div class="panel-header">
            <h2 class="panel-title"><span>🕒</span> Aktivitas Distribusi Terbaru</h2>
            <a href="{{ route('distribution.index') }}" class="btn btn-secondary btn-sm">Lihat Semua</a>
        </div>

        @if ($recentDistributions->isEmpty())
            <div style="text-align: center; padding: 3rem 0; color: var(--text-muted);">
                <span style="font-size: 3rem; display: block; margin-bottom: 1rem;">🐏</span>
                Belum ada transaksi distribusi saat ini.
            </div>
        @else
            <div class="table-wrapper">
                <table class="table-custom">
                    <thead>
                        <tr>
                            <th>No. Kupon</th>
                            <th>Nama Penerima</th>
                            <th>Status</th>
                            <th>Waktu Distribusi</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($recentDistributions as $dist)
                            <tr>
                                <td style="font-weight: 700; color: var(--primary-dark);">{{ $dist->participant->no_kupon }}</td>
                                <td>{{ $dist->participant->nama }}</td>
                                <td>
                                    @if ($dist->status === 'Sudah')
                                        <span class="badge badge-success">Sudah Diambil</span>
                                    @elseif ($dist->status === 'Titip')
                                        <span class="badge badge-info">Dititipkan</span>
                                    @else
                                        <span class="badge badge-warning">Belum</span>
                                    @endif
                                </td>
                                <td>
                                    <span style="font-size: 0.85rem; color: var(--text-muted);">
                                        {{ $dist->updated_at->diffForHumans() }}
                                    </span>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>

    <!-- Right Sidebar Widgets -->
    <div style="display: flex; flex-direction: column; gap: 1.5rem;">
        <!-- Titipan workflow progress -->
        <div class="panel" style="flex-grow: 1;">
            <h2 class="panel-title" style="margin-bottom: 1.25rem;"><span>📦</span> Alur Titipan Paket</h2>
            <div style="display: flex; flex-direction: column; gap: 1rem;">
                <div>
                    <div style="display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem;">
                        <span>Pending (Baru)</span>
                        <span style="color: var(--warning);">{{ $titipPending }} Paket</span>
                    </div>
                    <div style="height: 8px; background-color: var(--border); border-radius: 4px; overflow: hidden;">
                        <div style="height: 100%; background-color: var(--warning); width: {{ $totalEntrusted > 0 ? ($titipPending / $totalEntrusted) * 100 : 0 }}%;"></div>
                    </div>
                </div>

                <div>
                    <div style="display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem;">
                        <span>Sedang Diproses</span>
                        <span style="color: var(--info);">{{ $titipDiproses }} Paket</span>
                    </div>
                    <div style="height: 8px; background-color: var(--border); border-radius: 4px; overflow: hidden;">
                        <div style="height: 100%; background-color: var(--info); width: {{ $totalEntrusted > 0 ? ($titipDiproses / $totalEntrusted) * 100 : 0 }}%;"></div>
                    </div>
                </div>

                <div>
                    <div style="display: flex; justify-content: space-between; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem;">
                        <span>Sudah Diambil (Selesai)</span>
                        <span style="color: var(--success);">{{ $titipSelesai }} Paket</span>
                    </div>
                    <div style="height: 8px; background-color: var(--border); border-radius: 4px; overflow: hidden;">
                        <div style="height: 100%; background-color: var(--success); width: {{ $totalEntrusted > 0 ? ($titipSelesai / $totalEntrusted) * 100 : 0 }}%;"></div>
                    </div>
                </div>
            </div>
            
            <a href="{{ route('titip.index') }}" class="btn btn-secondary btn-sm" style="margin-top: 1.5rem; justify-content: center;">
                Kelola Titipan ➔
            </a>
        </div>

        <!-- Jatah RT Status -->
        <div class="panel">
            <h2 class="panel-title" style="margin-bottom: 1rem;"><span>👥</span> Jatah RT / Kelompok</h2>
            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem;">
                <div style="text-align: center; flex: 1; border-right: 1px solid var(--border);">
                    <span style="font-size: 1.5rem; font-weight: 700; color: var(--success);">{{ $jatahDiambil }}</span>
                    <span style="display: block; font-size: 0.75rem; color: var(--text-muted); font-weight: 600;">DIAMBIL</span>
                </div>
                <div style="text-align: center; flex: 1;">
                    <span style="font-size: 1.5rem; font-weight: 700; color: var(--danger);">{{ $jatahBelum }}</span>
                    <span style="display: block; font-size: 0.75rem; color: var(--text-muted); font-weight: 600;">BELUM</span>
                </div>
            </div>
            <div style="font-size: 0.85rem; color: var(--text-muted); text-align: center; margin-bottom: 1rem;">
                Total ada <strong>{{ $totalJatah }} kelompok/RT</strong> terdaftar.
            </div>
            <a href="{{ route('jatah.index') }}" class="btn btn-primary btn-sm" style="justify-content: center;">
                Rincian Jatah Kelompok
            </a>
        </div>
    </div>
</div>
@endsection