@extends('layouts.public')

@section('title', 'Billing — Boss Of AI')

@section('content')
@php
    $assetOptions = collect($cryptoAssets)->map(fn ($asset, $key) => [
        'key' => $key,
        'label' => $asset['label'],
        'symbol' => $asset['symbol'],
        'networks' => collect($asset['networks'])->map(fn ($network, $networkKey) => [
            'key' => $networkKey,
            'label' => $network['label'],
        ])->values(),
    ])->values();
@endphp

<section class="border-b border-graphite-200 py-12 md:py-16">
    <div class="shell">
        <h1 class="text-4xl leading-[1.05]">Billing</h1>

        <div class="mt-8 grid gap-5 sm:grid-cols-3">
            <div class="rounded-xl border border-graphite-200 p-6">
                <p class="text-sm text-graphite-500">Credits available</p>
                <p class="mt-2 font-mono text-3xl">{{ number_format($balance) }}</p>
            </div>
            <div class="rounded-xl border border-graphite-200 p-6">
                <p class="text-sm text-graphite-500">Held for running jobs</p>
                <p class="mt-2 font-mono text-3xl">{{ number_format($account->reserved) }}</p>
            </div>
            <div class="rounded-xl border border-graphite-200 p-6">
                <p class="text-sm text-graphite-500">Spent all time</p>
                <p class="mt-2 font-mono text-3xl">{{ number_format($account->lifetime_spent) }}</p>
            </div>
        </div>
    </div>
</section>

@if ($cryptoEnabled)
    <section class="border-b border-graphite-200 py-12 md:py-16">
        <div class="shell grid gap-12 lg:grid-cols-[minmax(0,26rem)_1fr] lg:gap-16">
            <div>
                <h2 class="text-3xl leading-tight">Top up with crypto</h2>
                <p class="mt-4 leading-relaxed text-graphite-600">
                    Pay once in Bitcoin, Ethereum or Tether and the credits land as soon as the
                    payment confirms on-chain.
                </p>
                <p class="mt-4 rounded-lg border border-graphite-200 bg-graphite-50 p-4 text-[15px] leading-relaxed text-graphite-600">
                    Crypto payments do not renew. Nothing is stored against your account and no
                    future charge is authorised, so top up again whenever you need to.
                </p>
            </div>

            <form method="POST" action="{{ route('billing.crypto.checkout') }}"
                  x-data="{
                      assets: @js($assetOptions),
                      pack: '{{ $packs[1]['key'] ?? $packs[0]['key'] }}',
                      asset: 'usdt',
                      network: 'tron',
                      get networks() {
                          return this.assets.find(a => a.key === this.asset)?.networks ?? [];
                      },
                      pickAsset(key) {
                          this.asset = key;
                          this.network = this.networks[0]?.key ?? '';
                      },
                  }"
                  class="rounded-xl border border-graphite-200 p-6 md:p-8">
                @csrf
                <input type="hidden" name="type" value="credit_pack">
                <input type="hidden" name="key" :value="pack">
                <input type="hidden" name="asset" :value="asset">
                <input type="hidden" name="network" :value="network">

                <fieldset>
                    <legend class="text-sm font-medium">How many credits</legend>
                    <div class="mt-3 grid gap-2.5 sm:grid-cols-3">
                        @foreach ($packs as $option)
                            <button type="button" @click="pack = '{{ $option['key'] }}'"
                                    class="rounded-lg border p-4 text-left transition-colors"
                                    :class="pack === '{{ $option['key'] }}' ? 'border-ink bg-ink text-paper' : 'border-graphite-200 hover:border-ink'">
                                <span class="block font-mono text-lg">{{ number_format($option['credits']) }}</span>
                                <span class="mt-1 block text-sm opacity-70">${{ number_format($option['price_cents'] / 100, 0) }}</span>
                            </button>
                        @endforeach
                    </div>
                </fieldset>

                <fieldset class="mt-7">
                    <legend class="text-sm font-medium">Pay with</legend>
                    <div class="mt-3 grid gap-2.5 sm:grid-cols-3">
                        <template x-for="option in assets" :key="option.key">
                            <button type="button" @click="pickAsset(option.key)"
                                    class="rounded-lg border p-4 text-left transition-colors"
                                    :class="asset === option.key ? 'border-ink bg-ink text-paper' : 'border-graphite-200 hover:border-ink'">
                                <span class="block font-mono text-lg" x-text="option.symbol"></span>
                                <span class="mt-1 block text-sm opacity-70" x-text="option.label"></span>
                            </button>
                        </template>
                    </div>
                </fieldset>

                <div class="mt-7" x-show="networks.length > 1" x-cloak>
                    <label for="network" class="mb-1.5 block text-sm font-medium">Network</label>
                    <select id="network" x-model="network" class="field">
                        <template x-for="option in networks" :key="option.key">
                            <option :value="option.key" x-text="option.label"></option>
                        </template>
                    </select>
                    <p class="mt-2 text-sm leading-relaxed text-graphite-600">
                        Networks are not interchangeable. Send on the chain you pick here, or the
                        funds cannot be recovered. TRC-20 usually has the lowest fee.
                    </p>
                </div>

                @error('asset')<p class="mt-4 text-sm text-red-600">{{ $message }}</p>@enderror
                @error('network')<p class="mt-4 text-sm text-red-600">{{ $message }}</p>@enderror

                <button type="submit" class="btn btn-primary mt-8 w-full">Continue to payment</button>
                <p class="mt-3 text-center text-[13px] text-graphite-500">
                    You will be shown the exact coin amount and a wallet address before paying.
                </p>
            </form>
        </div>
    </section>
@endif

@if ($charges->isNotEmpty())
    <section class="border-b border-graphite-200 py-12 md:py-16">
        <div class="shell">
            <h2 class="text-2xl">Crypto payments</h2>
            <div class="mt-6 overflow-x-auto">
                <table class="w-full min-w-[40rem] text-left text-[15px]">
                    <thead>
                        <tr class="border-b border-graphite-200 text-sm text-graphite-500">
                            <th class="pb-3 font-medium">Date</th>
                            <th class="pb-3 font-medium">Credits</th>
                            <th class="pb-3 font-medium">Paid with</th>
                            <th class="pb-3 font-medium">Status</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-graphite-200">
                        @foreach ($charges as $charge)
                            <tr>
                                <td class="py-4">{{ $charge->created_at->format('j M Y') }}</td>
                                <td class="py-4 font-mono">{{ number_format($charge->credits) }}</td>
                                <td class="py-4">{{ $charge->assetLabel() }}</td>
                                <td class="py-4">
                                    <a href="{{ route('billing.crypto.return', ['order' => $charge->meta['order_id'] ?? '']) }}"
                                       class="underline underline-offset-4">{{ str($charge->status)->headline() }}</a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </section>
@endif

@if ($transactions->isNotEmpty())
    <section class="py-12 md:py-16">
        <div class="shell">
            <h2 class="text-2xl">Credit history</h2>
            <div class="mt-6 overflow-x-auto">
                <table class="w-full min-w-[40rem] text-left text-[15px]">
                    <thead>
                        <tr class="border-b border-graphite-200 text-sm text-graphite-500">
                            <th class="pb-3 font-medium">Date</th>
                            <th class="pb-3 font-medium">Activity</th>
                            <th class="pb-3 font-medium">Status</th>
                            <th class="pb-3 text-right font-medium">Credits</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-graphite-200">
                        @foreach ($transactions as $transaction)
                            <tr>
                                <td class="py-4">{{ $transaction->created_at->format('j M Y') }}</td>
                                <td class="py-4">{{ $transaction->description ?? str($transaction->action ?? $transaction->type)->headline() }}</td>
                                <td class="py-4 text-graphite-600">{{ str($transaction->status)->headline() }}</td>
                                <td class="py-4 text-right font-mono">{{ $transaction->amount > 0 ? '+' : '' }}{{ $transaction->amount }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </section>
@endif
@endsection