@extends('admin.layouts.dashboard')

@section('title', 'Dashboard')

@section('content')
    @php
        $peak = max(1, $trend->max('total'));
    @endphp

    <x-page-header
        title="Dashboard"
        :description="'Overview for '.date('l, j F Y')"
    >
        <x-slot:actions>
            <a href="{{ url('/members/create') }}" class="btn btn--primary">
                <i class="fa-solid fa-user-plus" aria-hidden="true"></i>
                Add member
            </a>
            <a href="{{ url('/zklist') }}" class="btn btn--secondary">
                <i class="fa-solid fa-fingerprint" aria-hidden="true"></i>
                Sync device
            </a>
        </x-slot:actions>
    </x-page-header>

    @if ($lapsedAwaitingSweep > 0)
        <x-alert type="warning" title="Subscriptions past their end date">
            {{ $lapsedAwaitingSweep }} {{ Str::plural('subscription', $lapsedAwaitingSweep) }}
            {{ $lapsedAwaitingSweep === 1 ? 'is' : 'are' }} still marked as running.
            They are closed out automatically once the fingerprint terminal is reachable.
        </x-alert>
    @endif

    <div class="grid grid--4 u-mb-6">
        <x-stat
            label="Active members"
            :value="number_format($activeMembers)"
            meta="{{ number_format($totalMembers) }} on the register"
            icon="fa-user-check"
            tone="success"
        />
        <x-stat
            label="Collected today"
            :value="number_format($collectedToday, 2)"
            meta="{{ number_format($collectedMonth, 2) }} this month"
            icon="fa-money-bill-wave"
            tone="primary"
        />
        <x-stat
            label="Outstanding due"
            :value="number_format($outstandingDue, 2)"
            meta="across {{ number_format($outstandingMembers) }} {{ Str::plural('member', $outstandingMembers) }}"
            icon="fa-hand-holding-dollar"
            tone="{{ $outstandingDue > 0 ? 'warning' : 'success' }}"
        />
        <x-stat
            label="Check-ins today"
            :value="number_format($attendanceToday)"
            meta="from the fingerprint terminal"
            icon="fa-fingerprint"
            tone="info"
        />
    </div>

    <div class="grid grid--3 u-mb-6">
        <x-card
            title="Collections, last 14 days"
            subtitle="Payments recorded against member subscriptions"
            style="grid-column: span 2;"
        >
            @if ($trend->sum('total') > 0)
                <div style="display:flex; align-items:flex-end; gap:6px; height:180px;">
                    @foreach ($trend as $point)
                        @php $height = max(2, round(($point['total'] / $peak) * 100)); @endphp
                        <div
                            style="flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%;"
                            title="{{ date('j M Y', strtotime($point['day'])) }} — {{ number_format($point['total'], 2) }}"
                        >
                            <div style="
                                height:{{ $height }}%;
                                border-radius:var(--radius-sm) var(--radius-sm) 0 0;
                                background:{{ $point['total'] > 0 ? 'var(--color-primary)' : 'var(--color-border)' }};
                                opacity:{{ $point['total'] > 0 ? 1 : 0.6 }};
                            "></div>
                        </div>
                    @endforeach
                </div>
                <div class="u-flex u-justify-between u-mt-4" style="font-size:var(--text-xs); color:var(--color-text-muted);">
                    <span>{{ date('j M', strtotime($trend->first()['day'])) }}</span>
                    <span>Peak {{ number_format($peak, 2) }}</span>
                    <span>{{ date('j M', strtotime($trend->last()['day'])) }}</span>
                </div>
            @else
                <x-empty
                    icon="fa-chart-column"
                    title="No payments in the last 14 days"
                    text="Collections will appear here as soon as payments are recorded."
                />
            @endif
        </x-card>

        <x-card title="Membership status">
            <ul style="list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--space-4);">
                <li class="u-flex u-items-center u-justify-between">
                    <span class="u-flex u-items-center u-gap-3">
                        <x-badge tone="success">Active</x-badge>
                        <span class="u-text-secondary">Subscription running</span>
                    </span>
                    <strong class="u-numeric">{{ number_format($activeMembers) }}</strong>
                </li>
                <li class="u-flex u-items-center u-justify-between">
                    <span class="u-flex u-items-center u-gap-3">
                        <x-badge tone="neutral">Inactive</x-badge>
                        <span class="u-text-secondary">Subscription lapsed</span>
                    </span>
                    <strong class="u-numeric">{{ number_format($inactiveMembers) }}</strong>
                </li>
                <li class="u-flex u-items-center u-justify-between">
                    <span class="u-flex u-items-center u-gap-3">
                        <x-badge tone="warning">Expiring</x-badge>
                        <span class="u-text-secondary">Within 7 days</span>
                    </span>
                    <strong class="u-numeric">{{ number_format($expiringSoon) }}</strong>
                </li>
            </ul>

            <x-slot:footer>
                <a href="{{ url('/members/1/activity') }}" class="btn btn--secondary btn--sm">View active members</a>
            </x-slot:footer>
        </x-card>
    </div>

    <x-card title="Recent payments" subtitle="Latest entries in the payment ledger" :flush="true">
        <x-slot:actions>
            <a href="{{ url('/dailytransactionreport') }}" class="btn btn--secondary btn--sm">Daily transactions</a>
        </x-slot:actions>

        @if ($recentPayments->isEmpty())
            <x-empty icon="fa-receipt" title="No payments recorded yet" />
        @else
            <div class="table-wrap">
                <table class="table">
                    <thead>
                        <tr>
                            <th scope="col">Member</th>
                            <th scope="col">Package</th>
                            <th scope="col">Date</th>
                            <th scope="col" class="u-text-right">Paid</th>
                            <th scope="col" class="u-text-right">Due</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($recentPayments as $payment)
                            <tr>
                                <td class="table__primary">
                                    <a href="{{ route('members.subcription.history', $payment->profile_id) }}">
                                        {{ ucwords($payment->fullname) }}
                                    </a>
                                </td>
                                <td class="u-text-secondary u-capitalize">{{ $payment->package_name ?? '—' }}</td>
                                <td class="u-nowrap u-text-secondary">{{ date('d M Y', strtotime($payment->payment_date)) }}</td>
                                <td class="u-numeric">{{ number_format($payment->paid, 2) }}</td>
                                <td class="u-numeric">
                                    @if ((float) $payment->due > 0)
                                        <x-badge tone="warning">{{ number_format($payment->due, 2) }}</x-badge>
                                    @else
                                        <span class="u-text-muted">0.00</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </x-card>
@endsection