@extends('portal.layouts.app')

@section('title', 'Administrator Dashboard')
@section('subtitle', 'Whole-of-system view across the BankIslami takaful programme')

@section('content')

    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <x-stat label="Customers" icon="users" tone="brand"
                :value="number_format($headline['customers'])" hint="Recognised from the BankIslami link" />
        <x-stat label="Leads today" icon="trend" tone="aqua"
                :value="number_format($headline['leads_today'])" hint="Consent captured on the journey" />
        <x-stat label="Active policies" icon="shield" tone="leaf"
                :value="number_format($headline['active_policies'])"
                hint="PKR {{ number_format($headline['gross_contribution']) }} in force" />
        <x-stat label="Needs attention" icon="alert" tone="rose"
                :value="number_format($headline['rejected'])" hint="CBC rejected or deduction failed" />
    </div>

    <x-card title="Subscription pipeline" subtitle="Consent through to policy issuance" icon="trend">
        @include('portal.partials.pipeline')
    </x-card>

    <div class="grid gap-5 lg:grid-cols-2">
        <x-card title="Conversion funnel" icon="trend">
            @if ($funnel === [])
                <p class="text-sm text-slate-500">No subscriptions have been captured yet.</p>
            @else
                <div class="space-y-3">
                    @foreach ($funnel as $stage => $data)
                        <div>
                            <div class="flex items-baseline justify-between text-sm">
                                <span class="text-slate-700">{{ $stage }}</span>
                                <span class="font-medium tabular-nums">{{ number_format($data['count']) }}
                                    <span class="text-xs text-slate-400">({{ $data['share'] }}%)</span></span>
                            </div>
                            <div class="mt-1.5 h-2 overflow-hidden rounded-full bg-slate-100">
                                <div class="h-full rounded-full bg-brand-600" style="width: {{ $data['share'] }}%"></div>
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </x-card>

        <x-card title="Daily leads" subtitle="Last 14 days" icon="calendar">
            @php $max = max(1, max($dailyLeads)); @endphp
            <div class="flex h-32 items-end gap-1">
                @foreach ($dailyLeads as $day => $count)
                    <div class="group flex flex-1 flex-col items-center justify-end" title="{{ $day }}: {{ $count }}">
                        <div class="w-full rounded-t bg-brand-500 transition group-hover:bg-brand-600"
                             style="height: {{ max(2, round(($count / $max) * 100)) }}%"></div>
                    </div>
                @endforeach
            </div>
            <div class="mt-2 flex justify-between text-[11px] text-slate-400">
                <span>{{ \Carbon\Carbon::parse(array_key_first($dailyLeads))->format('d M') }}</span>
                <span>{{ \Carbon\Carbon::parse(array_key_last($dailyLeads))->format('d M') }}</span>
            </div>
        </x-card>
    </div>

    <x-card title="Performance by product" icon="shield" :padded="false">
        <div class="overflow-x-auto">
            <table class="data-table">
                <thead>
                <tr>
                    <th>Product</th>
                    <th class="text-right">Applications</th>
                    <th class="text-right">Active</th>
                    <th class="text-right">Contribution in force</th>
                </tr>
                </thead>
                <tbody>
                @foreach ($byProduct as $row)
                    <tr>
                        <td>
                            <span class="font-mono text-xs text-slate-400">{{ $row['code'] }}</span>
                            <span class="ml-2">{{ $row['name'] }}</span>
                        </td>
                        <td class="text-right tabular-nums">{{ number_format($row['leads']) }}</td>
                        <td class="text-right tabular-nums">{{ number_format($row['active']) }}</td>
                        <td class="text-right tabular-nums">PKR {{ number_format($row['contribution']) }}</td>
                    </tr>
                @endforeach
                </tbody>
            </table>
        </div>
    </x-card>

    <div class="grid gap-5 lg:grid-cols-2">
        <x-card title="Recent file batches" icon="folder" :padded="false">
            @include('portal.partials.batch-list', ['batches' => $batches])
        </x-card>

        <x-card title="Recent row failures" subtitle="Rows rejected from inbound files" icon="alert" :padded="false">
            @if ($failures->isEmpty())
                <p class="empty-state">No failed rows. Every uploaded record has been applied.</p>
            @else
                <ul class="divide-y divide-slate-100">
                    @foreach ($failures as $failure)
                        <li class="px-5 py-3">
                            <div class="flex items-start justify-between gap-3">
                                <div class="min-w-0">
                                    <p class="truncate text-sm text-slate-800">{{ $failure->message }}</p>
                                    <p class="mt-0.5 text-xs text-slate-400">
                                        {{ $failure->batch_no }} &middot; row {{ $failure->row_no }}
                                        @if ($failure->reference) &middot; {{ $failure->reference }} @endif
                                    </p>
                                </div>
                                <span class="shrink-0 text-xs text-slate-400">
                                    {{ \Carbon\Carbon::parse($failure->created_at)->diffForHumans(short: true) }}
                                </span>
                            </div>
                        </li>
                    @endforeach
                </ul>
            @endif
        </x-card>
    </div>

@endsection