@extends('layouts.app')
@section('title', 'لوحة التحكم الرئيسية (Dashboard)')
@section('content')

<style>
    /* Premium White KPI Cards */
    .kpi-card {
        border-radius: 16px;
        background: var(--card-bg);
        border: 1px solid var(--card-border);
        color: var(--text-dark);
        padding: 24px;
        position: relative;
        overflow: hidden;
        box-shadow: var(--card-shadow);
        transition: all 0.3s ease;
    }
    
    .kpi-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
        border-color: var(--primary-light);
    }

    .kpi-icon {
        position: absolute;
        left: -15px;
        bottom: -20px;
        font-size: 8rem;
        opacity: 0.05;
        color: var(--primary);
        transform: rotate(-15deg);
        transition: all 0.5s ease;
    }
    
    .kpi-card:hover .kpi-icon {
        transform: rotate(0deg) scale(1.1);
        opacity: 0.1;
    }

    /* Subtle background tints for cards */
    .kpi-card.kpi-primary { border-top: 4px solid var(--primary); }
    .kpi-card.kpi-success { border-top: 4px solid var(--success); }
    .kpi-card.kpi-danger { border-top: 4px solid var(--danger); }
    .kpi-card.kpi-warning { border-top: 4px solid var(--warning); }
</style>

<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<div class="row g-4 mb-4">
    <!-- KPI: Total Value -->
    <div class="col-xl-3 col-md-6 slide-in-right">
        <div class="kpi-card kpi-primary h-100">
            <i class="fa-solid fa-file-signature kpi-icon"></i>
            <h6 class="fw-bold mb-3 text-muted">إجمالي قيمة العقود السارية</h6>
            <h3 class="fw-bold mb-0 text-dark">{{ number_format($total_active_value, 0) }} <span class="fs-6 fw-normal text-muted">درهم</span></h3>
            <div class="mt-3 small text-muted"><i class="fa-solid fa-arrow-trend-up ms-1"></i> حجم الأموال المتوقعة إجمالاً</div>
        </div>
    </div>
    <!-- KPI: Total Collected -->
    <div class="col-xl-3 col-md-6 slide-in-right delay-100">
        <div class="kpi-card kpi-success h-100">
            <i class="fa-solid fa-vault kpi-icon text-success"></i>
            <h6 class="fw-bold mb-3 text-muted">إجمالي التحصيلات (الخزينة)</h6>
            <h3 class="fw-bold mb-0 text-dark">{{ number_format($total_collected, 0) }} <span class="fs-6 fw-normal text-muted">درهم</span></h3>
            <div class="mt-3 small text-muted"><i class="fa-solid fa-money-bill-wave ms-1"></i> كل ما تم استلامه كاش</div>
        </div>
    </div>
    <!-- KPI: Overdue -->
    <div class="col-xl-3 col-md-6 slide-in-right delay-200">
        <a href="{{ route('reports.overdue') }}" style="text-decoration: none;">
            <div class="kpi-card kpi-danger h-100 btn-pulse">
                <i class="fa-solid fa-triangle-exclamation kpi-icon text-danger"></i>
                <h6 class="fw-bold mb-3 text-muted">إجمالي المتأخرات الفورية</h6>
                <h3 class="fw-bold mb-0 text-danger">{{ number_format($total_overdue, 0) }} <span class="fs-6 fw-normal text-muted">درهم</span></h3>
                <div class="mt-3 small text-muted"><i class="fa-solid fa-bell ms-1"></i> اضغط لعرض التفاصيل</div>
            </div>
        </a>
    </div>
    <!-- KPI: Shops Status -->
    <div class="col-xl-3 col-md-6 slide-in-right delay-300">
        <div class="kpi-card kpi-warning h-100">
            <i class="fa-solid fa-store kpi-icon text-warning"></i>
            <h6 class="fw-bold mb-3 text-muted">إشغال المحلات ({{ $total_shops }})</h6>
            <h3 class="fw-bold mb-0 text-dark">
                <span class="text-success" title="مؤجر">{{ $rented_shops }}</span> 
                <span class="text-muted fs-4 mx-1">/</span> 
                <span class="text-secondary" title="متاح">{{ $available_shops }}</span>
            </h3>
            <div class="mt-3 small text-muted"><i class="fa-solid fa-chart-pie ms-1"></i> مؤجر / متاح للتأجير</div>
        </div>
    </div>
</div>

<!-- Charts Row -->
<div class="row g-4 mb-4">
    <!-- Doughnut Chart (Moved to Left like the screenshot) -->
    <div class="col-lg-4">
        <div class="premium-card h-100">
            <div class="card-header border-bottom-0 pb-0">
                <h6 class="fw-bold text-dark"><i class="fa-solid fa-chart-pie text-warning ms-1"></i> نسبة إشغال فستيفال لاند</h6>
            </div>
            <div class="card-body d-flex justify-content-center align-items-center">
                <div style="width: 80%;">
                    <canvas id="occupancyChart"></canvas>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Bar Chart (Moved to Right like the screenshot) -->
    <div class="col-lg-8">
        <div class="premium-card h-100">
            <div class="card-header border-bottom-0 pb-0">
                <h6 class="fw-bold text-dark"><i class="fa-solid fa-chart-column text-primary ms-1"></i> التدفق النقدي والتحصيل لعام {{ $current_year }}</h6>
            </div>
            <div class="card-body">
                <canvas id="monthlyChart" height="100"></canvas>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 1. Monthly Bar Chart
    const ctxMonthly = document.getElementById('monthlyChart').getContext('2d');
    const gradientBar = ctxMonthly.createLinearGradient(0, 0, 0, 400);
    gradientBar.addColorStop(0, 'rgba(79, 70, 229, 0.8)');
    gradientBar.addColorStop(1, 'rgba(79, 70, 229, 0.2)');

    new Chart(ctxMonthly, {
        type: 'bar',
        data: {
            labels: {!! $monthly_labels !!},
            datasets: [{
                label: 'المبالغ المحصلة (درهم)',
                data: {!! $monthly_values !!},
                backgroundColor: gradientBar,
                borderColor: '#4f46e5',
                borderWidth: 1,
                borderRadius: 8,
                barThickness: 30
            }]
        },
        options: {
            responsive: true,
            plugins: {
                legend: { display: false }
            },
            scales: {
                y: { 
                    beginAtZero: true, 
                    grid: { color: 'rgba(255,255,255,0.05)' },
                    ticks: { color: '#94a3b8' }
                },
                x: { 
                    grid: { display: false },
                    ticks: { color: '#94a3b8' }
                }
            }
        }
    });

    // 2. Occupancy Doughnut Chart
    const ctxOccupancy = document.getElementById('occupancyChart').getContext('2d');
    new Chart(ctxOccupancy, {
        type: 'doughnut',
        data: {
            labels: ['مؤجر', 'متاح'],
            datasets: [{
                data: [{{ $rented_shops }}, {{ $available_shops }}],
                backgroundColor: ['#10b981', '#334155'],
                hoverBackgroundColor: ['#059669', '#475569'],
                borderWidth: 0,
                hoverOffset: 4
            }]
        },
        options: {
            responsive: true,
            cutout: '75%',
            plugins: {
                legend: { 
                    position: 'bottom',
                    labels: { color: '#f8fafc' }
                }
            }
        }
    });
});
</script>

@endsection