@extends('layouts.finance')

@section('title', $report['title'])
@section('subtitle', 'Agent point activity from Examism vouchers')

@section('content')
@php
    $filters = $report['filters'];
    $productCards = $report['product_cards'];
    $baseParams = [
        'type' => $report['type'],
        'mode' => $filters['mode'],
        'month' => $filters['month'],
        'year' => $filters['year'],
        'from' => $filters['from'],
        'to' => $filters['to'],
    ];
    $rangeParams = [
        'mode' => $filters['mode'],
        'month' => $filters['month'],
        'year' => $filters['year'],
        'from' => $filters['from'],
        'to' => $filters['to'],
    ];
@endphp

<div class="flex items-center justify-between mb-4">
    <a href="{{ route('dashboard', array_filter(['from' => $filters['from'] ?? null, 'to' => $filters['to'] ?? null])) }}" class="btn">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="15 18 9 12 15 6"/></svg>
        Back to Dashboard
    </a>
</div>

<section class="card mb-4">
    <div class="section-head">
        <div>
            <h2>{{ $report['title'] }}</h2>
            <div class="muted text-xs">{{ $filters['from'] }} to {{ $filters['to'] }}</div>
        </div>
        <span class="pill pill-blue">{{ number_format($report['total']) }} points</span>
    </div>
</section>

<section class="card mb-4">
    <div class="section-head">
        <h2>Filters</h2>
        <span class="pill">{{ ucfirst($filters['mode']) }}</span>
    </div>
    <div class="card-pad">
        <form method="GET" action="{{ route('dashboard.cards.agent-points') }}" class="grid gap-3" style="grid-template-columns:0.9fr 1fr 1fr 1fr 1fr auto auto;align-items:end">
            <input type="hidden" name="type" value="{{ $report['type'] }}">
            <div>
                <label class="label">View</label>
                <select class="field" name="mode">
                    <option value="month" @selected($filters['mode'] === 'month')>Month wise</option>
                    <option value="date" @selected($filters['mode'] === 'date')>Date wise</option>
                    <option value="quarter" @selected($filters['mode'] === 'quarter')>Quarter</option>
                    <option value="year" @selected($filters['mode'] === 'year')>Year</option>
                </select>
            </div>
            <div>
                <label class="label">Month</label>
                <input class="field" type="month" name="month" value="{{ $filters['month'] }}">
            </div>
            <div>
                <label class="label">Year</label>
                <input class="field" type="number" min="2000" max="2100" name="year" value="{{ $filters['year'] }}">
            </div>
            <div>
                <label class="label">From</label>
                <input class="field" type="date" name="from" value="{{ $filters['from'] }}">
            </div>
            <div>
                <label class="label">To</label>
                <input class="field" type="date" name="to" value="{{ $filters['to'] }}">
            </div>
            <button class="btn btn-primary">Apply</button>
            <a href="{{ route('dashboard.cards.agent-points', ['type' => $report['type'], 'mode' => 'month']) }}" class="btn">Reset</a>
        </form>
    </div>
</section>

<section class="grid grid-cols-1 lg:grid-cols-3 gap-3 mb-4">
    <a href="{{ route('dashboard.cards.agent-points', array_merge(['type' => 'quarterly_awarded'], $rangeParams)) }}" class="card kpi-card card-hover" style="display:block;text-decoration:none;color:inherit">
        <div class="kpi-label">Quarterly Points</div>
        <div class="kpi-value">{{ $report['type'] === 'quarterly_awarded' ? number_format($report['total']) : 'View' }}</div>
    </a>
    <a href="{{ route('dashboard.cards.agent-points', array_merge(['type' => 'yearly_awarded'], $rangeParams)) }}" class="card kpi-card card-hover" style="display:block;text-decoration:none;color:inherit">
        <div class="kpi-label">Yearly Points</div>
        <div class="kpi-value">{{ $report['type'] === 'yearly_awarded' ? number_format($report['total']) : 'View' }}</div>
    </a>
    <a href="{{ route('dashboard.cards.agent-points', array_merge(['type' => 'redeemed'], $rangeParams)) }}" class="card kpi-card card-hover" style="display:block;text-decoration:none;color:inherit">
        <div class="kpi-label">Redeemed Points</div>
        <div class="kpi-value">{{ $report['type'] === 'redeemed' ? number_format($report['total']) : 'View' }}</div>
    </a>
</section>

<section class="mb-4">
    <div class="section-head" style="padding:0 0 10px;border:0">
        <div>
            <h2>Items</h2>
            <div class="muted text-xs">Point totals by voucher item</div>
        </div>
    </div>
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-3">
        @forelse($productCards as $product)
            @php
                $productParams = $baseParams;
            @endphp
            @if($product->item_id)
                <a href="{{ route('dashboard.cards.agent-points.item', array_merge(['item' => $product->item_id], $productParams)) }}"
                   class="card kpi-card card-hover"
                   style="display:block;text-decoration:none;color:inherit;min-height:132px">
                    <div class="kpi-label">{{ $product->product_name }}</div>
                    <div class="kpi-value">{{ number_format($product->points) }}</div>
                    <div class="muted text-xs">{{ number_format($product->rows_count) }} rows &middot; {{ number_format($product->agents_count) }} agents</div>
                </a>
            @else
                <div class="card kpi-card" style="display:block;text-decoration:none;color:inherit;min-height:132px">
                    <div class="kpi-label">{{ $product->product_name }}</div>
                    <div class="kpi-value">{{ number_format($product->points) }}</div>
                    <div class="muted text-xs">{{ number_format($product->rows_count) }} rows &middot; {{ number_format($product->agents_count) }} agents</div>
                </div>
            @endif
        @empty
            <div class="card" style="padding:18px;grid-column:1 / -1">
                <div class="muted">{{ $filters['mode'] === 'quarter' ? 'No item points found for the current quarter.' : 'No item points found for this filter.' }}</div>
            </div>
        @endforelse
    </div>
</section>
@endsection