@extends('layouts.vpm-dashboard', ['active' => 'card-tiers', 'area' => 'admin'])

@section('title', 'Card tiers')
@section('page_title', 'Card tiers')
@section('page_subtitle', 'Configure debit card tiers, fees, and benefits')

@section('content')
<div class="vpm-list-page">
    <x-vpm.action-hero
        title="Manage card tiers"
        text="Users apply for a tier. Issuance fees are charged after you approve their application."
    >
        <x-slot:action>
            <x-vpm.button variant="primary" class="vpm-btn--sm" href="{{ route('admin.card-tiers.create') }}">Create tier</x-vpm.button>
            <x-vpm.button variant="secondary" class="vpm-btn--sm" href="{{ route('admin.card-applications') }}">Applications</x-vpm.button>
        </x-slot:action>
    </x-vpm.action-hero>

    <section class="vpm-panel">
        <div class="vpm-panel__head">
            <h2 class="vpm-panel__title">Tiers</h2>
        </div>
        @if ($tiers->isEmpty())
            <p class="vpm-empty-hint">No card tiers yet. <a href="{{ route('admin.card-tiers.create') }}">Create the first tier</a>.</p>
        @else
            <div class="vpm-table-wrap">
                <table class="vpm-table vpm-table--terminal vpm-table--layout-6">
                    <colgroup>
                        <col><col class="vpm-col-num"><col class="vpm-col-num"><col class="vpm-col-num"><col class="vpm-col-status"><col class="vpm-col-action">
                    </colgroup>
                    <thead>
                        <tr>
                            <th scope="col">Tier</th>
                            <th scope="col" class="num">Issuance</th>
                            <th scope="col" class="num">Applications</th>
                            <th scope="col" class="num">Cards</th>
                            <th scope="col">Status</th>
                            <th scope="col" class="vpm-table__actions"><span class="sr-only">Actions</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($tiers as $tier)
                            <tr>
                                <td colspan="6" class="vpm-table-expand-cell">
                                    <details class="vpm-wallet-row">
                                        <summary>
                                            <span class="vpm-table-summary__cell vpm-table-summary__cell--truncate">
                                                <span class="vpm-tier-swatch" style="background:{{ $tier->accent_color }}"></span>{{ $tier->name }}
                                            </span>
                                            <span class="vpm-table-summary__cell vpm-table-summary__cell--num">${{ number_format($tier->issuance_fee, 2) }}</span>
                                            <span class="vpm-table-summary__cell vpm-table-summary__cell--num">{{ $tier->applications_count }}</span>
                                            <span class="vpm-table-summary__cell vpm-table-summary__cell--num">{{ $tier->cards_count }}</span>
                                            <span class="vpm-table-summary__cell">
                                                <span class="vpm-badge vpm-badge--{{ $tier->is_active ? 'up' : 'down' }}">{{ $tier->is_active ? 'Active' : 'Inactive' }}</span>
                                            </span>
                                            <span class="vpm-table-summary__cell vpm-table-summary__cell--action" aria-hidden="true"></span>
                                        </summary>
                                        @include('admin.card-tiers._form', ['tier' => $tier, 'action' => route('admin.card-tiers.update', $tier), 'method' => 'PUT'])
                                        @if ($tier->cards_count === 0)
                                            <form method="POST" action="{{ route('admin.card-tiers.destroy', $tier) }}" class="vpm-inline-expand-form" data-vpm-confirm="Delete this tier?">
                                                @csrf
                                                @method('DELETE')
                                                <x-vpm.button type="submit" variant="ghost" class="vpm-btn--sm">Delete</x-vpm.button>
                                            </form>
                                        @endif
                                    </details>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </section>
</div>
@endsection