@extends('layouts.support_member')

@section('breadcrumb')
<div class="main-breadcrumb d-flex flex-wrap align-items-center my-4 position-relative gap-3">
    <h2 class="breadcrumb-title mb-0 flex-grow-1 fs-16">{{ tr('dashboard') }}</h2>
    <div class="flex-shrink-0">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb justify-content-end mb-0">
                <li><i class="ri-home-4-line fs-16 me-2 lh-sm text-primary"></i></li>
                <li class="breadcrumb-item"><a href="{{ route('support_member.dashboard') }}">Home</a></li>
            </ol>
        </nav>
    </div>
</div>
@endsection

@section('content')
@if(!support_can('reports'))
<div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body text-center py-5">
                    <i class="uil uil-lock-alt fs-1 text-danger mb-3"></i>
                    <h4 class="mb-2">Unauthorized Access</h4>
                </div>
            </div>
        </div>
    </div>
@else
<div class="row">
    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <div class="px-5 py-6 bg-light bg-opacity-30 rounded-3 d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="mb-3 text-muted">{{tr('total_beneficiary_transactions')}}</p>
                        <h5 class="mb-0 fw-bold">{{ $transactions->total_beneficiary_transactions ?: 0 }}</h5>
                    </div>
                    <div class="avatar-item avatar-lg rounded-2 avatar-title text-primary bg-primary-subtle border-0 shadow-inset-primary">
                        <i class="uil uil-receipt fs-3"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <div class="px-5 py-6 bg-light bg-opacity-30 rounded-3 d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="mb-3 text-muted">{{tr('total_completed_transactions')}}</p>
                        <h5 class="mb-0 fw-bold">{{ $transactions->total_completed_transactions ?: 0 }}</h5>
                    </div>
                    <div class="avatar-item avatar-lg rounded-2 avatar-title text-success bg-success-subtle border-0 shadow-inset-success">
                        <i class="uil uil-check-circle fs-3"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <div class="px-5 py-6 bg-light bg-opacity-30 rounded-3 d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="mb-3 text-muted">{{tr('total_processing_transactions')}}</p>
                        <h5 class="mb-0 fw-bold">{{ $transactions->total_processing_transactions ?: 0 }}</h5>
                    </div>
                    <div class="avatar-item avatar-lg rounded-2 avatar-title text-warning bg-warning-subtle border-0 shadow-inset-warning">
                        <i class="uil uil-sync fs-3"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <div class="px-5 py-6 bg-light bg-opacity-30 rounded-3 d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="mb-3 text-muted">{{tr('total_failed_transactions')}}</p>
                        <h5 class="mb-0 fw-bold">{{ $transactions->total_failed_transactions ?: 0 }}</h5>
                    </div>
                    <div class="avatar-item avatar-lg rounded-2 avatar-title text-danger bg-danger-subtle border-0 shadow-inset-danger">
                        <i class="uil uil-times-circle fs-3"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>   
<div class="row">
    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <div class="px-5 py-6 bg-light bg-opacity-30 rounded-3 d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="mb-3 text-muted">{{tr('today_beneficiary_transactions')}}</p>
                        <h5 class="mb-0 fw-bold">{{ $transactions->today_total_beneficiary_transactions ?: 0 }}</h5>
                    </div>
                    <div class="avatar-item avatar-lg rounded-2 avatar-title text-primary bg-primary-subtle border-0 shadow-inset-primary">
                        <i class="uil uil-calendar-alt fs-3"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <div class="px-5 py-6 bg-light bg-opacity-30 rounded-3 d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="mb-3 text-muted">{{tr('today_completed_transactions')}}</p>
                        <h5 class="mb-0 fw-bold">{{ $transactions->today_completed_beneficiary_transactions ?: 0 }}</h5>
                    </div>
                    <div class="avatar-item avatar-lg rounded-2 avatar-title text-success bg-success-subtle border-0 shadow-inset-success">
                        <i class="uil uil-check-circle fs-3"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <div class="px-5 py-6 bg-light bg-opacity-30 rounded-3 d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="mb-3 text-muted">{{tr('today_processing_transactions')}}</p>
                        <h5 class="mb-0 fw-bold">{{ $transactions->today_processing_beneficiary_transactions ?: 0 }}</h5>
                    </div>
                    <div class="avatar-item avatar-lg rounded-2 avatar-title text-warning bg-warning-subtle border-0 shadow-inset-warning">
                        <i class="uil uil-sync fs-3"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card">
            <div class="card-body">
                <div class="px-5 py-6 bg-light bg-opacity-30 rounded-3 d-flex align-items-center">
                    <div class="flex-grow-1">
                        <p class="mb-3 text-muted">{{tr('today_failed_transactions')}}</p>
                        <h5 class="mb-0 fw-bold">{{ $transactions->today_failed_beneficiary_transactions ?: 0 }}</h5>
                    </div>
                    <div class="avatar-item avatar-lg rounded-2 avatar-title text-danger bg-danger-subtle border-0 shadow-inset-danger">
                        <i class="uil uil-times-circle fs-3"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> 
<div class="row">

    <div class="col-md-6 col-xl-6 col-xxl-6">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="card-title mb-0">{{ tr('last_x_days_transactions', 7) }}</h5>
            </div>
            <div class="card-body">
                <div id="revenueChart" class="min-h-224px"></div>
            </div>
        </div>
    </div>

    <div class="col-md-6 col-xl-6 col-xxl-6">
        <div class="card card-h-100">
            <div class="card-header">
                <h6 class="card-title">{{tr('transaction_status_counts')}}</h6>
            </div>

            <div class="card-body">
                <canvas id="myPieChart" style="height:300px;"></canvas>
            </div>
        </div>
    </div>

</div>
@endif

@endsection



@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>

<script>
    const last7Dates = @json($last7Dates);
    const last7Counts = @json($last7Counts);

    let revenueChart;

    function renderRevenueChart() {
        const options = {
            chart: {
                type: 'line',
                height: 230,
                toolbar: { show: false }
            },
            series: [{
                name: "Transactions",
                data: last7Counts
            }],
            stroke: {
                width: 3,
                curve: "smooth"
            },
            xaxis: {
                categories: last7Dates,
                labels: { rotate: -45 }
            },
            colors: ["#1e90ff"],
            tooltip: {
                y: {
                    formatter: (val) => val.toLocaleString()
                }
            }
        };

        if (revenueChart) revenueChart.destroy();

        revenueChart = new ApexCharts(document.querySelector("#revenueChart"), options);
        revenueChart.render();

        document.getElementById("rev-amount").innerText =
            last7Counts.reduce((a, b) => a + b, 0).toLocaleString();
    }

    document.addEventListener("DOMContentLoaded", function () {
        renderRevenueChart();
    });
</script>


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


<script>
document.addEventListener("DOMContentLoaded", function () {

    const ctx = document.getElementById('myPieChart').getContext('2d');

    const totalCompleted = @json($transactions->total_completed_transactions);
    const totalProcessing = @json($transactions->total_processing_transactions);
    const totalFailed = @json($transactions->total_failed_transactions);

    new Chart(ctx, {
        type: 'pie',
        data: {
            labels: [
                "Completed",
                "Processing",
                "Failed"
            ],
            datasets: [{
                data: [
                    totalCompleted,
                    totalProcessing,
                    totalFailed
                ],
                backgroundColor: [
                    'rgba(54, 162, 235, 0.7)',
                    'rgba(255, 206, 86, 0.7)',
                    'rgba(75, 192, 192, 0.7)'
                ]
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false
        }
    });

});
</script>
@endsection