@extends('platform.layout')
@section('title', 'Payment accounts')

@section('content')
<div class="mb-4">
    <h1 class="h3 fw-bold mb-1">Payment accounts</h1>
    <p class="text-muted small mb-0">Where shops pay their subscription. They see these on their Billing page, in this order.</p>
</div>

@if($errors->any())
    <div class="alert alert-danger">{{ $errors->first() }}</div>
@endif

<div class="row g-3">
    <div class="col-lg-7">
        @foreach($accounts as $key => $account)
            @php
                $type = $account['type'] ?? (str_contains($key, 'airtel') ? 'airtel' : (str_contains($key, 'bank') ? 'bank' : 'mobile'));
                $color = $account['color'] ?? $types[$type][2];
            @endphp
            <div class="card mb-3" style="border-left: 4px solid {{ $color }};">
                <div class="card-body p-3">
                    <div class="d-flex justify-content-between align-items-start gap-2">
                        <div class="d-flex gap-3 align-items-center">
                            <span class="pa-icon" style="background: {{ $color }};"><i class="bi {{ $account['icon'] ?? $types[$type][1] }}"></i></span>
                            <div>
                                <div class="fw-bold">{{ $account['label'] }}</div>
                                <div class="fs-5 fw-semibold">{{ $account['number'] }}</div>
                                <div class="small text-muted">{{ $account['name'] ?? '' }}{{ !empty($account['note']) ? ' · ' . $account['note'] : '' }}</div>
                                @if($used[$key] ?? 0)<div class="small text-muted">{{ $used[$key] }} {{ $used[$key] == 1 ? 'proof' : 'proofs' }} of payment sent to it</div>@endif
                            </div>
                        </div>
                        <form method="POST" action="{{ route('platform.accounts.destroy', $key) }}"
                              onsubmit="return confirm('Remove {{ addslashes($account['label']) }}? Shops will no longer see it.');">
                            @csrf
                            @method('DELETE')
                            <button class="btn btn-sm btn-outline-danger" @disabled(count($accounts) === 1) title="Remove"><i class="bi bi-trash"></i></button>
                        </form>
                    </div>
                    <details class="mt-2">
                        <summary class="small text-primary" style="cursor: pointer;"><i class="bi bi-pencil me-1"></i>Edit</summary>
                        <form method="POST" action="{{ route('platform.accounts.update', $key) }}" class="mt-2">
                            @csrf
                            @method('PUT')
                            @include('platform._account_fields', ['account' => $account + ['type' => $type], 'id' => $key])
                            <button class="btn btn-sm btn-primary mt-2">Save</button>
                        </form>
                    </details>
                </div>
            </div>
        @endforeach
    </div>

    <div class="col-lg-5">
        <div class="card">
            <div class="card-body p-4">
                <h2 class="h6 fw-bold mb-3"><i class="bi bi-plus-circle me-1"></i>Add an account</h2>
                <form method="POST" action="{{ route('platform.accounts.store') }}">
                    @csrf
                    @include('platform._account_fields', ['account' => ['type' => old('type', 'mobile'), 'label' => old('label'), 'number' => old('number'), 'name' => old('name'), 'note' => old('note')], 'id' => 'new'])
                    <button class="btn btn-success mt-3"><i class="bi bi-plus-lg me-1"></i>Add account</button>
                </form>
            </div>
        </div>
    </div>
</div>

<style>
    .pa-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 1.2rem; flex-shrink: 0; }
</style>
@endsection