@extends('admin.layouts.app')

@section('title', 'Dashboard')

@section('breadcrumb')
    <span>/</span> Dashboard
@endsection

@push('styles')
<style>
.stat-card { transition: transform 0.2s, box-shadow 0.2s; }
.stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.1) !important; }
.today-card { border-left: 4px solid transparent; }
</style>
@endpush

@section('content')

<!-- Page Header -->
<div class="page-header">
    <div>
        <h1>Dashboard</h1>
        <p class="page-subtitle">Welcome back, {{ auth()->user()->name }}! Here's what's happening today.</p>
    </div>
    <div class="d-flex gap-2">
        <span class="badge bg-light text-dark border" style="font-size:12px;padding:8px 12px;">
            <i class="fas fa-calendar me-1 text-primary"></i>{{ now()->format('d M Y') }}
        </span>
        <button class="btn btn-sm btn-outline-primary" onclick="refreshStats()">
            <i class="fas fa-sync-alt me-1"></i>Refresh
        </button>
    </div>
</div>

<!-- ===== STAT CARDS ROW 1 ===== -->
<div class="row g-3 mb-4">
    <div class="col-6 col-lg-3">
        <div class="stat-card card bg-white p-3">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <p class="text-muted mb-1" style="font-size:12px;font-weight:600;text-transform:uppercase;">Total Donations</p>
                    <h3 class="mb-0 fw-700" style="font-size:22px;">₹{{ number_format($stats['total_donations'],2) }}</h3>
                    <small class="text-success"><i class="fas fa-arrow-up me-1"></i>All time</small>
                </div>
                <div class="stat-icon bg-primary bg-opacity-10 text-primary">
                    <i class="fas fa-hand-holding-heart"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card card bg-white p-3">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <p class="text-muted mb-1" style="font-size:12px;font-weight:600;text-transform:uppercase;">Total Donors</p>
                    <h3 class="mb-0 fw-700" style="font-size:22px;">{{ number_format($stats['total_donors']) }}</h3>
                    <small class="text-info">Registered donors</small>
                </div>
                <div class="stat-icon bg-info bg-opacity-10 text-info">
                    <i class="fas fa-users"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card card bg-white p-3">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <p class="text-muted mb-1" style="font-size:12px;font-weight:600;text-transform:uppercase;">Active Projects</p>
                    <h3 class="mb-0 fw-700" style="font-size:22px;">{{ $stats['active_projects'] }}</h3>
                    <small class="text-warning">of {{ $stats['total_projects'] }} total</small>
                </div>
                <div class="stat-icon bg-warning bg-opacity-10 text-warning">
                    <i class="fas fa-project-diagram"></i>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 col-lg-3">
        <div class="stat-card card bg-white p-3">
            <div class="d-flex align-items-center justify-content-between">
                <div>
                    <p class="text-muted mb-1" style="font-size:12px;font-weight:600;text-transform:uppercase;">CSR Companies</p>
                    <h3 class="mb-0 fw-700" style="font-size:22px;">{{ $stats['total_csr_companies'] }}</h3>
                    <small class="text-success">Active partners</small>
                </div>
                <div class="stat-icon bg-success bg-opacity-10 text-success">
                    <i class="fas fa-building"></i>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ===== EXPENSE STAT CARDS ===== -->
<div class="row g-3 mb-4">
    <div class="col-6 col-md-4 col-lg-2">
        <div class="stat-card card text-center p-3" style="background:#eff6ff;">
            <div style="font-size:10px;font-weight:700;color:#3b82f6;text-transform:uppercase;letter-spacing:0.5px;">Admin Expense</div>
            <div style="font-size:16px;font-weight:700;color:#1e3a8a;margin-top:4px;">₹{{ number_format($stats['total_admin_expense']) }}</div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-lg-2">
        <div class="stat-card card text-center p-3" style="background:#fefce8;">
            <div style="font-size:10px;font-weight:700;color:#ca8a04;text-transform:uppercase;letter-spacing:0.5px;">Campaign Expense</div>
            <div style="font-size:16px;font-weight:700;color:#713f12;margin-top:4px;">₹{{ number_format($stats['total_campaign_expense']) }}</div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-lg-2">
        <div class="stat-card card text-center p-3" style="background:#f0fdf4;">
            <div style="font-size:10px;font-weight:700;color:#16a34a;text-transform:uppercase;letter-spacing:0.5px;">Project Expense</div>
            <div style="font-size:16px;font-weight:700;color:#14532d;margin-top:4px;">₹{{ number_format($stats['total_project_expense']) }}</div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-lg-2">
        <div class="stat-card card text-center p-3" style="background:#fdf4ff;">
            <div style="font-size:10px;font-weight:700;color:#9333ea;text-transform:uppercase;letter-spacing:0.5px;">Beneficiary Fund</div>
            <div style="font-size:16px;font-weight:700;color:#581c87;margin-top:4px;">₹{{ number_format($stats['total_beneficiary_fund']) }}</div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-lg-2">
        <div class="stat-card card text-center p-3" style="background:#fff7ed;">
            <div style="font-size:10px;font-weight:700;color:#ea580c;text-transform:uppercase;letter-spacing:0.5px;">CSR Fund Spent</div>
            <div style="font-size:16px;font-weight:700;color:#7c2d12;margin-top:4px;">₹{{ number_format($stats['total_csr_fund']) }}</div>
        </div>
    </div>
    <div class="col-6 col-md-4 col-lg-2">
        <div class="stat-card card text-center p-3" style="background:#f0f9ff;">
            <div style="font-size:10px;font-weight:700;color:#0369a1;text-transform:uppercase;letter-spacing:0.5px;">Beneficiaries</div>
            <div style="font-size:16px;font-weight:700;color:#082f49;margin-top:4px;">{{ number_format($stats['total_beneficiaries']) }}</div>
        </div>
    </div>
</div>

<!-- ===== CHARTS ROW ===== -->
<div class="row g-3 mb-4">
    <!-- Donations Over Time -->
    <div class="col-12 col-lg-8">
        <div class="card h-100">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h6 class="mb-0 fw-700"><i class="fas fa-chart-line text-primary me-2"></i>Donations Over Time</h6>
                <small class="text-muted">Last 12 months</small>
            </div>
            <div class="card-body">
                <canvas id="donationsChart" height="260"></canvas>
            </div>
        </div>
    </div>
    <!-- Donation by Purpose -->
    <div class="col-12 col-lg-4">
        <div class="card h-100">
            <div class="card-header">
                <h6 class="mb-0 fw-700"><i class="fas fa-chart-pie text-success me-2"></i>Donation by Purpose</h6>
            </div>
            <div class="card-body">
                <canvas id="purposeChart" height="260"></canvas>
            </div>
        </div>
    </div>
</div>

<!-- ===== TODAY'S EXPENSE AREA ===== -->
<div class="row g-3 mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h6 class="mb-0 fw-700">
                    <i class="fas fa-calendar-day text-warning me-2"></i>
                    Today's Summary — {{ now()->format('d M Y') }}
                </h6>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-6 col-md-4 col-lg-2">
                        <div class="today-card p-3 rounded" style="background:#f8fafc;border-left-color:#3b82f6;">
                            <div style="font-size:11px;color:#64748b;font-weight:600;">Admin Expense</div>
                            <div style="font-size:18px;font-weight:700;color:#1e293b;">₹{{ number_format($todayStats['admin_expense']) }}</div>
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg-2">
                        <div class="today-card p-3 rounded" style="background:#f8fafc;border-left-color:#f59e0b;">
                            <div style="font-size:11px;color:#64748b;font-weight:600;">Campaign Expense</div>
                            <div style="font-size:18px;font-weight:700;color:#1e293b;">₹{{ number_format($todayStats['campaign_expense']) }}</div>
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg-2">
                        <div class="today-card p-3 rounded" style="background:#f8fafc;border-left-color:#22c55e;">
                            <div style="font-size:11px;color:#64748b;font-weight:600;">Project Expense</div>
                            <div style="font-size:18px;font-weight:700;color:#1e293b;">₹{{ number_format($todayStats['project_expense']) }}</div>
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg-2">
                        <div class="today-card p-3 rounded" style="background:#f8fafc;border-left-color:#a855f7;">
                            <div style="font-size:11px;color:#64748b;font-weight:600;">Beneficiary Expense</div>
                            <div style="font-size:18px;font-weight:700;color:#1e293b;">₹{{ number_format($todayStats['beneficiary_expense']) }}</div>
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg-2">
                        <div class="today-card p-3 rounded" style="background:#f8fafc;border-left-color:#f97316;">
                            <div style="font-size:11px;color:#64748b;font-weight:600;">CSR Expense</div>
                            <div style="font-size:18px;font-weight:700;color:#1e293b;">₹{{ number_format($todayStats['csr_expense']) }}</div>
                        </div>
                    </div>
                    <div class="col-6 col-md-4 col-lg-2">
                        <div class="today-card p-3 rounded" style="background:#f8fafc;border-left-color:#06b6d4;">
                            <div style="font-size:11px;color:#64748b;font-weight:600;">Today's Donations</div>
                            <div style="font-size:18px;font-weight:700;color:#1e293b;">
                                ₹{{ number_format($todayStats['donations']) }}
                                <small style="font-size:11px;color:#64748b;">({{ $todayStats['new_donations'] }})</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- ===== RECENT DONATIONS + PROJECTS ===== -->
<div class="row g-3">
    <!-- Recent Donations -->
    <div class="col-12 col-lg-7">
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h6 class="mb-0 fw-700"><i class="fas fa-hand-holding-heart text-primary me-2"></i>Recent Donations</h6>
                <a href="{{ route('admin.donations.index') }}" class="btn btn-sm btn-outline-primary">View All</a>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover mb-0">
                        <thead style="background:#f8fafc;">
                            <tr>
                                <th class="ps-3">Donor</th>
                                <th>Amount</th>
                                <th>Purpose</th>
                                <th>Status</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($recentDonations as $donation)
                            <tr>
                                <td class="ps-3">
                                    <div style="font-weight:600;font-size:13px;">{{ $donation->donor_name }}</div>
                                    <div style="font-size:11px;color:#94a3b8;">{{ $donation->donation_id }}</div>
                                </td>
                                <td>
                                    <span style="font-weight:700;color:#1e293b;">₹{{ number_format($donation->amount) }}</span>
                                </td>
                                <td><span style="font-size:12px;">{{ Str::limit($donation->purpose, 20) ?? 'General' }}</span></td>
                                <td>
                                    @if($donation->payment_status === 'completed')
                                        <span class="badge bg-success">Completed</span>
                                    @elseif($donation->payment_status === 'pending')
                                        <span class="badge bg-warning text-dark">Pending</span>
                                    @else
                                        <span class="badge bg-danger">{{ ucfirst($donation->payment_status) }}</span>
                                    @endif
                                </td>
                                <td><span style="font-size:12px;color:#64748b;">{{ $donation->donation_date->format('d M Y') }}</span></td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="5" class="text-center py-4 text-muted">
                                    <i class="fas fa-inbox d-block mb-2" style="font-size:24px;color:#cbd5e1;"></i>
                                    No donations yet
                                </td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Active Projects -->
    <div class="col-12 col-lg-5">
        <div class="card">
            <div class="card-header d-flex align-items-center justify-content-between">
                <h6 class="mb-0 fw-700"><i class="fas fa-project-diagram text-warning me-2"></i>Active Projects</h6>
                <a href="{{ route('admin.csr.projects.index') }}" class="btn btn-sm btn-outline-warning">View All</a>
            </div>
            <div class="card-body p-0">
                @forelse($recentProjects as $project)
                <div class="d-flex align-items-start gap-3 p-3 border-bottom">
                    <div class="flex-shrink-0" style="width:36px;height:36px;background:#eff6ff;border-radius:8px;display:flex;align-items:center;justify-content:center;">
                        <i class="fas fa-folder text-primary" style="font-size:14px;"></i>
                    </div>
                    <div class="flex-grow-1 min-width-0">
                        <div style="font-weight:600;font-size:13px;" class="text-truncate">{{ $project->project_title }}</div>
                        <div style="font-size:11px;color:#64748b;">{{ $project->csrCompany->company_name ?? 'N/A' }}</div>
                        @if($project->budget_allocation)
                        <div style="margin-top:4px;">
                            <div class="progress" style="height:4px;border-radius:4px;">
                                @php $pct = $project->budget_allocation > 0 ? min(100, ($project->total_spent/$project->budget_allocation)*100) : 0; @endphp
                                <div class="progress-bar bg-primary" style="width:{{ $pct }}%"></div>
                            </div>
                            <div style="font-size:10px;color:#94a3b8;margin-top:2px;">
                                ₹{{ number_format($project->total_spent) }} of ₹{{ number_format($project->budget_allocation) }}
                            </div>
                        </div>
                        @endif
                    </div>
                    <div class="flex-shrink-0">
                        @php
                        $statusColors = ['draft'=>'secondary','pending'=>'warning','approved'=>'info','active'=>'success','completed'=>'primary','cancelled'=>'danger'];
                        @endphp
                        <span class="badge bg-{{ $statusColors[$project->status] ?? 'secondary' }}">
                            {{ ucfirst($project->status) }}
                        </span>
                    </div>
                </div>
                @empty
                <div class="text-center py-4 text-muted">
                    <i class="fas fa-inbox d-block mb-2" style="font-size:24px;color:#cbd5e1;"></i>
                    No active projects
                </div>
                @endforelse
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script>
// ===== Charts =====
const chartColors = ['#2563eb','#22c55e','#f59e0b','#ef4444','#8b5cf6','#06b6d4','#f97316','#ec4899'];

// Donations Over Time
@php
    $months = $charts['donationsByMonth']->pluck('label')->toArray();
    $donationValues = $charts['donationsByMonth']->pluck('value')->toArray();
@endphp
new Chart(document.getElementById('donationsChart'), {
    type: 'line',
    data: {
        labels: @json($months),
        datasets: [{
            label: 'Donations (₹)',
            data: @json($donationValues),
            borderColor: '#2563eb',
            backgroundColor: 'rgba(37,99,235,0.08)',
            tension: 0.4,
            fill: true,
            pointBackgroundColor: '#2563eb',
            pointRadius: 4,
        }]
    },
    options: {
        responsive: true, maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
            y: { grid: { color: '#f1f5f9' }, ticks: { callback: v => '₹' + (v>=1000?v/1000+'K':v) } },
            x: { grid: { display: false } }
        }
    }
});

// Donation by Purpose Doughnut
@php
    $purposeLabels = $charts['donationsByPurpose']->pluck('label')->toArray();
    $purposeValues = $charts['donationsByPurpose']->pluck('value')->toArray();
@endphp
new Chart(document.getElementById('purposeChart'), {
    type: 'doughnut',
    data: {
        labels: @json($purposeLabels),
        datasets: [{
            data: @json($purposeValues),
            backgroundColor: chartColors,
            borderWidth: 2,
            borderColor: '#fff',
        }]
    },
    options: {
        responsive: true, maintainAspectRatio: false,
        plugins: {
            legend: { position: 'bottom', labels: { font: { size: 11 }, padding: 10 } }
        }
    }
});

// ===== Refresh stats =====
function refreshStats() {
    fetch('{{ route("admin.dashboard.stats") }}')
        .then(r => r.json())
        .then(data => {
            toastr.success('Dashboard refreshed at ' + data.timestamp);
        });
}
</script>
@endpush