@extends('layouts.dashboard')

@section('content')

<x-dashboard.header
    title="Welcome back, {{ auth()->user()->name ? explode(' ', auth()->user()->name)[0] : '' }}"
    url=""
    shortDesc='See how your platform is doing..' />
<div class="d-md-flex flex-column gap-4 dashboard">
    <div class="row">
        <div class="col-lg-7">
            <div class="card dc">
                <div class="card-body">
                    <div class="d-flex gap-5 flex-column">
                        <div>
                            <div class="d-flex justify-content-between">
                                <span class="text-muted">{{'Total Revenue'}}</span>
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="currentColor" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round">
                                    <path d="M14 2.22179C13.3538 2.09076 12.6849 2.02197 12 2.02197C6.47715 2.02197 2 6.49421 2 12.011C2 17.5277 6.47715 22 12 22C17.5228 22 22 17.5277 22 12.011C22 11.3269 21.9311 10.6587 21.8 10.0132" />
                                    <path d="M12 9.01428C10.8954 9.01428 10 9.68512 10 10.5126C10 11.3401 10.8954 12.011 12 12.011C13.1046 12.011 14 12.6819 14 13.5093C14 14.3368 13.1046 15.0077 12 15.0077M12 9.01428C12.8708 9.01428 13.6116 9.43123 13.8862 10.0132M12 9.01428V8.01538M12 15.0077C11.1292 15.0077 10.3884 14.5908 10.1138 14.0088M12 15.0077V16.0066" />
                                    <path d="M21.9951 2L17.8193 6.17362M16.9951 2.52119L17.1133 5.60928C17.1133 6.33713 17.5484 6.79062 18.3409 6.84782L21.465 6.99451" />
                                </svg>
                            </div>
                            <h1>Kes. {{ number_format($totalRevenue, 0) }}</h1>
                            <p class="text-muted mb-0">{{ 'Collected from completed payments' }}</p>
                        </div>
                        <div id="revenueChart"
                            data-series="{{ json_encode(array_values($monthlyRevenue)) }}"
                            data-categories="{{ json_encode(array_keys($monthlyRevenue)) }}"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-5">
            <div class="row g-3">
                <div class="col-lg-6">
                    <div class="card h-100">
                        <div class="card-body">
                            <p class="text-muted small mb-1">{{ 'Subscribers' }}</p>
                            <h3 class="mb-0">{{ $subscribers }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="card h-100">
                        <div class="card-body">
                            <p class="text-muted small mb-1">{{ 'Active subscriptions' }}</p>
                            <h3 class="mb-0">{{ $activeSubscriptionsCount }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="card h-100">
                        <div class="card-body">
                            <p class="text-muted small mb-1">{{ 'Completed payments' }}</p>
                            <h3 class="mb-0">{{ $completedPaymentsCount }}</h3>
                        </div>
                    </div>
                </div>
                <div class="col-lg-6">
                    <div class="card h-100">
                        <div class="card-body">
                            <p class="text-muted small mb-1">{{ 'Pending payments' }}</p>
                            <h3 class="mb-0">{{ $pendingPaymentsCount }}</h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row g-3 g-md-4">
        <div class="col-lg-4 h-100">
            <div class="d-flex flex-column justify-content-between">
                <div class="card h-100">
                    <div class="card-body h-100">
                        <div class="d-md-flex align-items-center justify-content-between mb-3 gap-5">
                            <div>
                                <h5 class="card-title m-0">{{'Plans & Subscriptions'}}</h5>
                                <p class="small text-muted m-0">{{'A quick snapshot of plan performance and current signups'}}</p>
                            </div>
                            <a class="small text-nowrap" href="{{url('admin/subscriptions/plans')}}">{{'View All'}}</a>
                        </div>

                        @if($plans->isEmpty())
                        <p class="text-muted">{{'No plans available yet.'}}</p>
                        @else
                        <div class="d-flex flex-column gap-3">
                            @foreach($plans as $plan)
                            <div class="border rounded p-3">
                                <div class="d-flex justify-content-between align-items-start gap-3">
                                    <div>
                                        <h6 class="mb-1">{{ $plan->name }}</h6>
                                        <p class="small text-muted mb-0">KES {{ number_format($plan->price, 0) }} • {{ $plan->active_subscriptions_count }} active subscribers</p>
                                    </div>
                                    <span class="plans text-nowrap {{ $plan->slug }}">{{ $plan->active_subscriptions_count }}</span>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-8">
            <div class="card">
                <div class="card-body">
                    <div class="d-md-flex align-items-center justify-content-between mb-2">
                        <h5 class="card-title m-0">{{'Recent Payments'}}</h5>
                        <a class="small" href="{{url('admin/subscriptions/payments')}}">{{'View All'}}</a>
                    </div>
                    @if($recentPayments->isEmpty())
                    <p class="text-muted">{{'No recent payments found.'}}</p>
                    @else
                    <div class="table-responsive">
                        <table class="table align-middle">
                            <thead>
                                <tr>
                                    <th>
                                        <h6 class="m-0">{{'Customer'}}</h6>
                                    </th>
                                    <th>
                                        <h6 class="m-0">{{'Plan'}}</h6>
                                    </th>
                                    <th>
                                        <h6 class="m-0">{{'Amount'}}</h6>
                                    </th>
                                    <th>
                                        <h6 class="m-0">{{'Date'}}</h6>
                                    </th>
                                    <th>
                                        <h6 class="m-0">{{'Status'}}</h6>
                                    </th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($recentPayments as $payment)
                                <tr>
                                    <td>
                                        <a href="#" class="d-flex align-items-center gap-3">
                                            @php
                                            $initials = strtoupper(substr(($payment->user->name ?? 'User'), 0, 1));
                                            @endphp
                                            <div class="initials d-flex justify-content-center bg-light border align-items-center rounded-circle text-uppercase small"
                                                style="height:2rem; width:2rem; font-size:0.75rem">
                                                {{ $initials }}
                                            </div>
                                            <div>
                                                <h6 class="m-0 text-dark">{{ $payment->user->name }}</h6>
                                                <span class="small text-muted">{{ $payment->user->email }}</span>
                                            </div>
                                        </a>
                                    </td>
                                    <td>
                                        @if($payment->subscription)
                                        <span class="plans text-nowrap {{ $payment->subscription->plan->slug }}">{{ $payment->subscription->plan->name }}</span>
                                        @else
                                        <span class="plans text-nowrap bg-dark">{{ 'Resource Purchase' }}</span>
                                        @endif
                                    </td>
                                    <td><span class="text-nowrap">{{ number_format($payment->amount, 2) }}</span></td>
                                    <td><span class="text-muted text-nowrap">{{ $payment->created_at->format('M d, Y')
                                            }}</span></td>
                                    <td>
                                        @if($payment->status == 'completed')
                                        <span class="status success">{{'Success'}}</span>
                                        @elseif($payment->status == 'pending')
                                        <span class="status warning text-dark">{{'Pending'}}</span>
                                        @elseif($payment->status == 'failed')
                                        <span class="status danger">{{'Failed'}}</span>
                                        @endif
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>
@push('scripts')
<script>
    function formatKES(val) {
        if (val >= 1000000) return (val / 1000000).toFixed(1) + 'M';
        if (val >= 1000) return (val / 1000).toFixed(0) + 'K';
        return val;
    }

    var revenueChartEl = document.querySelector('#revenueChart');
    var revenueSeries = JSON.parse(revenueChartEl.dataset.series || '[]');
    var revenueCategories = JSON.parse(revenueChartEl.dataset.categories || '[]');

    var options = {
        series: [{
            name: 'Revenue',
            data: revenueSeries,
        }],
        chart: {
            height: 350,
            type: 'bar',
        },
        plotOptions: {
            bar: {
                borderRadius: 22,
                dataLabels: {
                    position: 'top', // top, center, bottom
                },
            },
        },
        fill: {
            colors: ['#ff3901'],
        },
        dataLabels: {
            enabled: false,
            formatter: function(val) {
                return val + '%'
            },
            offsetY: -20,
            style: {
                fontSize: '12px',
                colors: ['#304758'],
            },
        },

        xaxis: {
            categories: revenueCategories,
            position: 'bottom',
            axisBorder: {
                show: false,
            },
            axisTicks: {
                show: false,
            },
            crosshairs: {
                fill: {
                    type: 'gradient',
                    gradient: {
                        colorFrom: '#D8E3F0',
                        colorTo: '#BED1E6',
                        stops: [0, 100],
                        opacityFrom: 0.4,
                        opacityTo: 0.5,
                    },
                },
            },
            tooltip: {
                enabled: true,
            },
        },
        yaxis: {
            axisBorder: {
                show: false,
            },
            axisTicks: {
                show: false,
            },
            labels: {
                show: true,
                formatter: val => "KES " + formatKES(val)
            },
        },
        title: {
            text: 'Revenue Performance',
            floating: false,
            offsetY: 0,
            align: 'center',
            style: {
                color: '#444',
            },
        },
    }

    const chart = new ApexCharts(document.querySelector("#revenueChart"), options);
    chart.render();
</script>
@endpush
@endsection