@extends('layouts.main')
@section('title', 'Contribution Statistics')

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="/">Home</a></li>
    <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item active">Contribution Statistics</li>
@endsection

@section('content')

    <!-- Header Message -->
    <div class="row">
        <div class="col-12">
            <div class="card-box">
                <h2 class="text-primary mb-3">Our mosque runs by your donations</h2>
                <p> <h2 style="font-size:200%;"><b>(Sūrat al-Tawbah, Āyat 18) إِنَّمَا يَعْمُرُ مَسَاجِدَ اللَّهِ مَنْ آمَنَ بِاللَّهِ وَالْيَوْمِ الْآخِرِ وَأَقَامَ الصَّلَاةَ وَآتَى الزَّكَاةَ وَلَمْ يَخْشَ إِلَّا اللَّهَ </b></h2></p>
                <p class="text-muted font-16">
                    <strong>The masjid (mosque) is an essential part of the spiritual and social fabric of a believing community. 
                    Those who maintain it and frequent it must possess certain qualities. The main aim of the masjid is to nurture 
                    pure individuals and the maintainers of the mosque must be people who nourish that growth.</strong>
                </p>
            </div>
        </div>
    </div>

    <!-- Overview Cards -->
    <div class="row">
        <div class="col-md-4">
            <div class="widget-rounded-circle card-box">
                <div class="row">
                    <div class="col-6">
                        <div class="avatar-lg rounded-circle bg-soft-success border-success border">
                            <i class="mdi mdi-cash-plus font-22 avatar-title text-success"></i>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-right">
                            <h3 class="text-dark mt-1">{{ number_format($totalContributions ?? 0, 2) }} €</h3>
                            <p class="text-muted mb-1 text-truncate">Total Contributions</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="widget-rounded-circle card-box">
                <div class="row">
                    <div class="col-6">
                        <div class="avatar-lg rounded-circle bg-soft-danger border-danger border">
                            <i class="mdi mdi-cash-minus font-22 avatar-title text-danger"></i>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-right">
                            <h3 class="text-dark mt-1">{{ number_format($totalExpenses ?? 0, 2) }} €</h3>
                            <p class="text-muted mb-1 text-truncate">Total Expenses</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="widget-rounded-circle card-box">
                <div class="row">
                    <div class="col-6">
                        <div class="avatar-lg rounded-circle bg-soft-info border-info border">
                            <i class="mdi mdi-target font-22 avatar-title text-info"></i>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="text-right">
                            <h3 class="text-dark mt-1">{{ number_format($totalTarget ?? 0, 2) }} €</h3>
                            <p class="text-muted mb-1 text-truncate">Total Target</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistics Cards with Charts -->
    <div class="row">
        @foreach($statistics as $key => $stat)
        <div class="col-xl-6 col-lg-6">
            <div class="card-box">
                <h4 class="header-title mb-3">{{ $stat['title'] }} - Target {{ number_format($stat['target']) }} {{ $stat['currency'] }}</h4>
                
                <div class="row">
                    <div class="col-md-6">
                        <div id="piechart_{{ $key }}" style="width: 100%; height: 350px;"></div>
                    </div>
                    <div class="col-md-6">
                        <div class="mt-4">
                            <div class="mb-4">
                                <div class="d-flex justify-content-between mb-1">
                                    <span class="font-weight-bold">Total Spent</span>
                                    <span class="text-danger font-weight-bold">{{ number_format($stat['spent']) }} {{ $stat['currency'] }}</span>
                                </div>
                                <div class="progress" style="height: 10px;">
                                    @php $spentPercent = $stat['target'] > 0 ? min(100, ($stat['spent'] / $stat['target']) * 100) : 0; @endphp
                                    <div class="progress-bar bg-danger" role="progressbar" 
                                         style="width: {{ $spentPercent }}%"></div>
                                </div>
                            </div>
                            
                            <div class="mb-4">
                                <div class="d-flex justify-content-between mb-1">
                                    <span class="font-weight-bold">Remaining Budget</span>
                                    <span class="text-success font-weight-bold">{{ number_format($stat['remaining']) }} {{ $stat['currency'] }}</span>
                                </div>
                                <div class="progress" style="height: 10px;">
                                    @php $remainingPercent = $stat['target'] > 0 ? ($stat['remaining'] / $stat['target']) * 100 : 0; @endphp
                                    <div class="progress-bar bg-success" role="progressbar" 
                                         style="width: {{ $remainingPercent }}%"></div>
                                </div>
                            </div>

                            <div class="mt-4 pt-2">
                                <div class="widget-rounded-circle card-box bg-light">
                                    <div class="row align-items-center">
                                        <div class="col-6">
                                            <div class="avatar-lg rounded-circle bg-soft-primary border-primary border">
                                                <i class="mdi mdi-percent font-22 avatar-title text-primary"></i>
                                            </div>
                                        </div>
                                        <div class="col-6">
                                            <div class="text-right">
                                                <h3 class="text-dark mt-1">{{ number_format($spentPercent, 1) }}%</h3>
                                                <p class="text-muted mb-1 text-truncate">Budget Used</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endforeach
    </div>

    <!-- Summary Table -->
    <div class="row">
        <div class="col-12">
            <div class="card-box">
                <h4 class="header-title mb-4">Expense Summary by Category</h4>
                <div class="table-responsive">
                    <table class="table table-bordered table-striped mb-0">
                        <thead class="thead-light">
                            <tr>
                                <th>Category</th>
                                <th class="text-right">Target Budget</th>
                                <th class="text-right">Total Spent</th>
                                <th class="text-right">Remaining</th>
                                <th class="text-center">Progress</th>
                            </tr>
                        </thead>
                        <tbody>
                            @php $grandTarget = 0; $grandSpent = 0; $grandRemaining = 0; @endphp
                            @foreach($statistics as $key => $stat)
                            @php 
                                $grandTarget += $stat['target'];
                                $grandSpent += $stat['spent'];
                                $grandRemaining += $stat['remaining'];
                                $percentage = $stat['target'] > 0 ? min(100, ($stat['spent'] / $stat['target']) * 100) : 0;
                            @endphp
                            <tr>
                                <td><strong>{{ $stat['title'] }}</strong></td>
                                <td class="text-right">{{ number_format($stat['target']) }} {{ $stat['currency'] }}</td>
                                <td class="text-right text-danger">{{ number_format($stat['spent']) }} {{ $stat['currency'] }}</td>
                                <td class="text-right text-success">{{ number_format($stat['remaining']) }} {{ $stat['currency'] }}</td>
                                <td style="width: 200px;">
                                    <div class="progress" style="height: 20px;">
                                        <div class="progress-bar {{ $percentage >= 90 ? 'bg-danger' : ($percentage >= 70 ? 'bg-warning' : 'bg-success') }}" role="progressbar" 
                                             style="width: {{ $percentage }}%">
                                            {{ number_format($percentage, 1) }}%
                                        </div>
                                    </div>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                        <tfoot class="bg-light">
                            <tr>
                                <th>Grand Total</th>
                                <th class="text-right">{{ number_format($grandTarget) }} €</th>
                                <th class="text-right text-danger">{{ number_format($grandSpent) }} €</th>
                                <th class="text-right text-success">{{ number_format($grandRemaining) }} €</th>
                                <th class="text-center">
                                    @php $grandPercentage = $grandTarget > 0 ? ($grandSpent / $grandTarget) * 100 : 0; @endphp
                                    <span class="badge badge-primary font-14">{{ number_format($grandPercentage, 1) }}% Used</span>
                                </th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
    </div>

@endsection

@push('scripts')
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawCharts);

    function drawCharts() {
        @foreach($statistics as $key => $stat)
        // Chart for {{ $stat['title'] }}
        var data_{{ $key }} = google.visualization.arrayToDataTable([
            ['Category', 'Amount'],
            ['Total Spent', {{ $stat['spent'] }}],
            ['Remaining Budget', {{ $stat['remaining'] }}]
        ]);

        var options_{{ $key }} = {
            title: '{{ $stat['title'] }}',
            is3D: true,
            colors: ['#f1556c', '#1abc9c'],
            backgroundColor: 'transparent',
            legend: { position: 'bottom' },
            chartArea: { width: '90%', height: '70%' },
            titleTextStyle: { fontSize: 14, bold: true }
        };

        var chart_{{ $key }} = new google.visualization.PieChart(document.getElementById('piechart_{{ $key }}'));
        chart_{{ $key }}.draw(data_{{ $key }}, options_{{ $key }});
        @endforeach
    }

    // Redraw charts on window resize
    $(window).resize(function() {
        drawCharts();
    });
</script>
@endpush