{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: index.blade.php
------------------------------------------------------
Use: The admin reports page: finance / users / shops
     analytics over a selectable window, with KPIs, a
     twelve-month chart, a detail table and an Excel export.
=====================================================
--}}

@extends('layouts.admin')

@section('title', __('admin.reports.title'))

@php
    use App\Support\Format;

    // Columns rendered as money vs as a plain integer; anything else is text.
    $moneyCols = ['fees', 'allocated', 'repaid', 'overdue', 'sales', 'fee', 'share'];
    $countCols = ['new', 'merchants', 'cumulative', 'orders'];
@endphp

@section('breadcrumb')
    <x-ui.breadcrumb :items="[
        ['label' => __('admin.breadcrumb.home'), 'url' => route('admin.users.index')],
        ['label' => __('admin.reports.breadcrumb')],
    ]" />
@endsection

@section('page')
    <div class="mb-5 flex flex-wrap items-end justify-between gap-4">
        <div>
            <h1 class="mb-1 text-2xl font-bold tracking-tight">{{ __('admin.reports.title') }}</h1>
            <p class="text-sm text-ink-muted">{{ __('admin.reports.subtitle') }}</p>
        </div>
        <a href="{{ route('admin.reports.index', ['tab' => $tab, 'range' => $range, 'export' => 1]) }}"
           class="inline-flex items-center gap-2 rounded-xl bg-green-600 px-5 py-2.5 text-sm font-bold text-white shadow-lg shadow-green-600/20 transition hover:bg-green-700">
            <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v12M8 11l4 4 4-4"/><path d="M4 17v2a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-2"/></svg>
            {{ __('admin.reports.export') }}
        </a>
    </div>

    <x-ui.info-box class="mb-5">{{ __('admin.reports.info') }}</x-ui.info-box>

    {{-- Tabs (report family), preserving the selected range --}}
    <div class="mb-4 inline-flex flex-wrap gap-0.5 rounded-xl bg-[#f2f0fa] p-1">
        @foreach (__('admin.reports.tabs') as $key => $label)
            <a href="{{ route('admin.reports.index', ['tab' => $key, 'range' => $range]) }}"
               @class([
                   'rounded-[9px] px-5 py-2 text-[13px] font-bold transition',
                   'bg-white text-primary-600 shadow-sm' => $tab === $key,
                   'text-ink-muted hover:text-primary-600' => $tab !== $key,
               ])>{{ $label }}</a>
        @endforeach
    </div>

    {{-- Range selector, preserving the selected tab --}}
    <div class="mb-5 flex flex-wrap items-center gap-2">
        @foreach (__('admin.reports.ranges') as $key => $label)
            <a href="{{ route('admin.reports.index', ['tab' => $tab, 'range' => $key]) }}"
               @class([
                   'rounded-[10px] border px-3.5 py-2 text-[12.5px] font-bold transition',
                   'border-primary-600 bg-primary-50 text-primary-700' => $range === $key,
                   'border-[#e3e1ec] bg-white text-ink-muted hover:border-primary-300' => $range !== $key,
               ])>{{ $label }}</a>
        @endforeach
    </div>

    {{-- KPI cards --}}
    <div class="mb-5 grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
        @foreach ($report['kpis'] as $kpi)
            @php $danger = ($kpi['tone'] ?? '') === 'danger'; @endphp
            <div @class([
                'rounded-2xl border px-5 py-4.5',
                'border-[#f6ccd1] bg-secondary-50' => $danger,
                'border-line bg-white' => ! $danger,
            ])>
                <div class="text-[12.5px] font-medium text-ink-muted">{{ __("admin.reports.{$tab}.kpi_{$kpi['key']}") }}</div>
                <div class="mt-2 flex items-baseline gap-1.5">
                    @isset($kpi['amount'])
                        <span @class(['text-[22px] font-black leading-none tracking-tight', 'text-secondary-600' => $danger, 'text-ink' => ! $danger]) dir="ltr">@toman($kpi['amount'])</span>
                        <span class="text-[12px] font-bold text-ink-faint">{{ __('admin.reports.toman') }}</span>
                    @else
                        <span class="text-[22px] font-black leading-none tracking-tight text-ink" dir="ltr">@fa($kpi['count'])</span>
                    @endisset
                </div>
            </div>
        @endforeach
    </div>

    {{-- Twelve-month chart --}}
    @php $isMoneyTrend = $tab !== 'users'; @endphp
    <div class="mb-5 rounded-2xl border border-line bg-white p-5.5">
        <div class="mb-5 flex items-center justify-between">
            <h2 class="text-[15px] font-bold">{{ __('admin.reports.chart_title') }}</h2>
        </div>
        <div class="flex h-44 items-end gap-1.5 sm:gap-2">
            @foreach ($report['trend']['points'] as $point)
                @php $pct = $report['trend']['max'] > 0 ? max(2, (int) round($point['amount'] * 100 / $report['trend']['max'])) : 2; @endphp
                <div class="group flex h-full flex-1 flex-col justify-end" title="{{ $point['label'] }} — {{ $isMoneyTrend ? Format::persianDigits(Format::toman($point['amount'])) : Format::persianDigits((string) $point['amount']) }}">
                    <div class="rounded-t-md bg-gradient-to-b from-[#7a5de0] to-primary-600 transition group-hover:from-[#8b70e8] group-hover:to-[#6b4ec9]" style="height: {{ $pct }}%"></div>
                    <div class="mt-2 truncate text-center text-[10px] text-ink-faint">{{ $point['label'] }}</div>
                </div>
            @endforeach
        </div>
    </div>

    {{-- Detail table --}}
    <div class="rounded-2xl border border-line bg-white p-5.5">
        <h2 class="mb-4 text-[15px] font-bold">{{ __('admin.reports.table_title') }}</h2>
        <div class="overflow-x-auto rounded-[14px] border border-[#f0eff5]">
            <table class="w-full min-w-[640px] border-collapse text-right text-[13.5px]">
                <thead>
                    <tr class="bg-[#faf9fd] text-ink-muted">
                        @foreach ($report['columns'] as $col)
                            <th class="px-4 py-3.5 font-bold">{{ __("admin.reports.{$tab}.col_{$col}") }}</th>
                        @endforeach
                    </tr>
                </thead>
                <tbody>
                    @forelse ($report['rows'] as $row)
                        <tr class="border-t border-[#f0eff5]">
                            @foreach ($report['columns'] as $col)
                                <td @class([
                                    'px-4 py-3.5',
                                    'font-bold' => in_array($col, ['month', 'name'], true),
                                    'font-bold text-secondary-600' => $col === 'overdue',
                                ]) @if (in_array($col, $moneyCols, true) || in_array($col, $countCols, true)) dir="ltr" @endif>
                                    @if (in_array($col, $moneyCols, true))
                                        @toman((int) $row[$col])
                                    @elseif (in_array($col, $countCols, true))
                                        @fa($row[$col])
                                    @else
                                        {{ $row[$col] }}
                                    @endif
                                </td>
                            @endforeach
                        </tr>
                    @empty
                        <tr>
                            <td colspan="{{ count($report['columns']) }}" class="px-4 py-12 text-center text-sm text-ink-muted">{{ __('admin.reports.empty') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection