@extends('layouts.admin.master')
@section('title', 'Dashboard')

@section('content')
    <div class="content">
        <div class="container-fluid">
            <!-- Info Boxes Row -->
            <div class="row">
                @php
                $totalEarning = 0;
                    $infoBoxes = [
                        ['icon' => 'people.svg', 'text' => 'Total Members', 'number' => isset($memberCount) ? $memberCount : 0],
                        ['icon' => 'money.svg', 'text' => 'Total Earnings', 'number' => $totalEarning],
                        ['icon' => 'due.svg', 'text' => 'Total Due', 'number' => $totalEarning],
                        ['icon' => 'total-expenses.svg', 'text' => 'Total Expenses', 'number' => $totalEarning]
                    ];
                @endphp

                @foreach ($infoBoxes as $box)
                    <div class="col-12 col-sm-6 col-md-3">
                        <a href="#" class="text-decoration-none text-dark">
                            <div class="info-box d-flex flex-column align-items-start">
                                <div class="rounded-circle bg-light p-1 me-1 d-flex justify-content-center align-items-center">
                                    <img src="/frontend/logo/{{ $box['icon'] }}" alt="{{ $box['text'] }} icon" width="50" height="50">
                                </div>
                                <div class="info-box-content d-flex flex-column">
                                    <span class="info-box-text">{{ $box['text'] }}</span>
                                    <span class="info-box-number">{{ $box['number'] }}</span>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach

            </div>

            {{--2nd row--}}
            <div class="row mb-4">
                <div class="col-12 col-sm-6 col-md-9">
                    <div class="row h-100">
                        <div class="col-md-6">
                            <div class="p-3 shadow-sm bg-white h-100">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <h6 class="fw-bold mb-0">Total Members</h6>
                                    <select class="form-select form-select-sm w-auto">
                                        <option>2024</option>
                                    </select>
                                </div>
                                <div style="height: 200px; overflow: hidden;">
                                    <canvas id="genderChart"></canvas>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="p-3 shadow-sm bg-white h-100">
                                <div class="d-flex justify-content-between align-items-center mb-2">
                                    <h6 class="fw-bold mb-0">Total Expenses</h6>
                                    <select class="form-select form-select-sm w-auto">
                                        <option>2024</option>
                                    </select>
                                </div>
                                <div style="height: 200px; overflow: hidden;">
                                    <canvas id="expenseChart"></canvas>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right Section -->
                <div class="col-12 col-sm-6 col-md-3">
                    <div class="p-3 shadow-sm bg-white h-100">
                        <div class="bg-success text-white p-3 rounded mb-3 text-center">
                            <h6 class="mb-1">Total Active Members</h6>
                            <h3>{{isset($memberCount) ? $memberCount : 0}}</h3>
                        </div>
                        <div class="bg-light p-2 rounded mb-2">
                            <small class="text-muted">Current Month's Deposit</small>
                            <h5>{{0}}</h5>
                        </div>
                        <div class="bg-light p-2 rounded">
                            <small class="text-muted">Current Month's Cost</small>
                            <h5>{{0}}</h5>
                        </div>
                    </div>
                </div>
            </div>



            <!-- 3rd row -->
            <div class="row">
                <div class="col-12">
                    <div class="p-3 shadow-sm bg-white">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h6 class="fw-bold mb-0">Total Collection</h6>
                            <select class="form-select form-select-sm w-auto">
                                <option>2024</option>
                            </select>
                        </div>
                        <div style="height: 250px; overflow: hidden;">
                            <canvas id="collectionChart"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection


@push('css')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
    <style>
        .info-box {
            border-radius: 15px;
            padding: 1rem;
            margin-bottom: 1rem;
            background: white;
            box-shadow: 0 1px 3px rgba(0,0,0,0.12);
        }

        .shadow-sm {
            border-radius: 15px !important;
        }

        .bg-success, .bg-light {
            border-radius: 15px !important;
        }
    </style>
@endpush


@push('js')
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const chartOptions = {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: "bottom",
                        labels: {
                            usePointStyle: true,
                            pointStyle: "circle"
                        }
                    }
                },
                scales: {
                    x: {
                        grid: { display: false }
                    },
                    y: {
                        beginAtZero: true,
                        grid: { color: "#E5E7EB" }
                    }
                }
            };

            // Gender Distribution Chart (Doughnut)
            new Chart(document.getElementById("genderChart"), {
                type: "doughnut",
                data: {
                    labels: ["Female", "Male"],
                    datasets: [{
                        data: [50,50],
                        backgroundColor: ["#0d6efd", "#dc3545"]
                    }]
                },
                options: chartOptions
            });

            // Total Expense Chart (Line Chart)
            new Chart(document.getElementById("expenseChart"), {
                type: "line",
                data: {
                    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                    datasets: [{
                        label: "Total Due",
                        data: [0,0,0,0,0,0,0,0,0,0,0,0],
                        backgroundColor: "rgba(40, 167, 69, 0.2)",
                        borderColor: "#28a745",
                        borderWidth: 2,
                        fill: true,
                        tension: 0.4 // Smooth curve
                    }]
                },
                options: chartOptions
            });

            // Collection Chart (Bar Chart)
            new Chart(document.getElementById("collectionChart"), {
                type: "bar",
                data: {
                    labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                    datasets: [
                        {
                            label: "Total Target",
                            data: [0,0,0,0,0,0,0,0,0,0,0,0],
                            backgroundColor: "rgba(102, 102, 255, 0.3)",
                            borderColor: "rgba(102, 102, 255, 1)",
                            borderWidth: 1
                        },
                        {
                            label: "Total Achieved",
                            data: [0,0,0,0,0,0,0,0,0,0,0,0],
                            backgroundColor: "rgba(40, 167, 69, 0.8)",
                            borderColor: "#28a745",
                            borderWidth: 1
                        }
                    ]
                },
                options: chartOptions
            });
        });
    </script>
@endpush