@extends('layouts.app')
@section('title', __('Billing'))

@section('content')
<h1 class="h4 fw-bold mb-3">💳 {{ __('Billing') }}</h1>

{{-- Subscription status --}}
@php($status = $subscription?->status ?? 'trialing')
<div class="mb-card p-4 mb-3">
    <div class="d-flex flex-wrap justify-content-between align-items-start gap-3">
        <div>
            <div class="mb-muted small">{{ __('Current plan') }}</div>
            <div class="h5 fw-bold mb-1">{{ $plan->name }}</div>
            <div dir="ltr">{{ $plan->priceIqd() }} <span class="mb-muted">/ {{ __('month') }}</span></div>
        </div>
        <div class="text-end">
            <span class="badge text-bg-{{ match($status) {
                'active' => 'success', 'trialing' => 'info',
                'grace' => 'warning', 'suspended','cancelled' => 'danger', default => 'secondary' } }}">
                {{ __(ucfirst($status)) }}
            </span>
            @if($subscription?->current_period_ends_at)
                <div class="mb-muted small mt-1">
                    {{ $status === 'trialing' ? __('Trial ends') : __('Renews') }}:
                    {{ $subscription->current_period_ends_at->format('d M Y') }}
                    ({{ $subscription->current_period_ends_at->diffForHumans() }})
                </div>
            @endif
            @if(! is_null($trialDaysLeft))
                <div class="h5 fw-bold mt-1" dir="ltr">{{ $trialDaysLeft }} <span class="fs-6 mb-muted">{{ __('trial days left') }}</span></div>
            @endif
        </div>
    </div>

    @if($status === 'trialing')
        <div class="alert alert-info mt-3 mb-0">
            🎁 {{ __('You are on a :days-day free trial — no payment method required. Subscribe any time before it ends.', ['days' => $plan->trial_days]) }}
        </div>
    @elseif($status === 'grace')
        <div class="alert alert-warning mt-3 mb-0">
            ⚠ {{ __('Your subscription has expired. You have a short grace period before access is suspended — please renew.') }}
        </div>
    @elseif($status === 'suspended')
        <div class="alert alert-danger mt-3 mb-0">
            🔒 {{ __('Access is suspended. Submit a payment below to reactivate your clinic immediately.') }}
        </div>
    @endif
</div>

{{-- Usage overview: WhatsApp (month), storage, staff, dentists --}}
<div class="mb-card p-4 mb-3">
    <h2 class="h6 fw-semibold mb-3">📊 {{ __('Plan usage') }}</h2>
    <div class="row g-3">
        @php($meters = [
            ['label' => __('WhatsApp this month'), 'u' => $usage, 'fmt' => fn ($v) => number_format($v), 'suffix' => ''],
            ['label' => __('Storage'), 'u' => $storageUsage, 'fmt' => fn ($v) => number_format($v), 'suffix' => ' MB'],
            ['label' => __('Staff seats'), 'u' => $staffUsage, 'fmt' => fn ($v) => $v, 'suffix' => ''],
            ['label' => __('Dentists'), 'u' => $dentistUsage, 'fmt' => fn ($v) => $v, 'suffix' => ''],
        ])
        @foreach($meters as $m)
            @php($u = $m['u'])
            <div class="col-6 col-lg-3">
                <div class="d-flex justify-content-between small">
                    <span class="fw-semibold">{{ $m['label'] }}</span>
                </div>
                <div dir="ltr" class="small mb-1">
                    {{ ($m['fmt'])($u['used']) }}{{ $m['suffix'] }}
                    @if(! is_null($u['limit']))
                        / {{ ($m['fmt'])($u['limit']) }}{{ $m['suffix'] }}
                    @else
                        <span class="mb-muted">/ ∞</span>
                    @endif
                </div>
                <div class="progress" style="height:.5rem">
                    <div class="progress-bar bg-{{ $u['level'] === 'over' ? 'danger' : ($u['level'] === 'warn' ? 'warning' : 'success') }}"
                         style="width: {{ is_null($u['limit']) ? 5 : min(100, $u['ratio'] * 100) }}%"></div>
                </div>
            </div>
        @endforeach
    </div>
    <div class="small mt-3 mb-muted">{{ __('Limits are soft — your clinic keeps working past them; we’ll nudge you to upgrade.') }}</div>
</div>

<div class="row g-3">
    {{-- Card payment (Paddle) --}}
    <div class="col-md-6">
        <div class="mb-card p-4 h-100">
            <h2 class="h6 fw-semibold mb-2">💳 {{ __('Pay by card') }}</h2>
            <p class="mb-muted small">{{ __('Instant activation via our secure card processor.') }}</p>
            @if($paddleLink)
                <a class="btn mb-btn-primary w-100" target="_blank" rel="noopener"
                   href="{{ $paddleLink }}?clinic={{ $tenant->slug }}">{{ __('Subscribe by card') }}</a>
            @else
                <button class="btn mb-btn-primary w-100" disabled>{{ __('Card payment coming soon') }}</button>
            @endif
        </div>
    </div>

    {{-- Manual proof (Zain Cash / SuperQi) --}}
    <div class="col-md-6">
        <div class="mb-card p-4 h-100">
            <h2 class="h6 fw-semibold mb-2">📱 {{ __('Pay with Zain Cash / SuperQi') }}</h2>
            <p class="mb-muted small">{{ __('Transfer the amount, then upload your receipt. We verify and activate within hours.') }}</p>
            <form method="POST" action="{{ route('tenant.billing.proof') }}" enctype="multipart/form-data" class="row g-2">
                @csrf
                <div class="col-6">
                    <label class="form-label small">{{ __('Method') }}</label>
                    <select name="gateway" class="form-select form-select-sm" required>
                        <option value="zaincash">{{ __('Zain Cash') }}</option>
                        <option value="superqi">{{ __('SuperQi') }}</option>
                    </select>
                </div>
                <div class="col-6">
                    <label class="form-label small">{{ __('Months') }}</label>
                    <input type="number" name="period_months" value="1" min="1" max="12" class="form-control form-control-sm" dir="ltr">
                </div>
                <div class="col-12">
                    <label class="form-label small">{{ __('Transaction reference') }}</label>
                    <input name="proof_reference" class="form-control form-control-sm" dir="ltr" required>
                </div>
                <div class="col-12">
                    <label class="form-label small">{{ __('Receipt (image or PDF)') }}</label>
                    <input type="file" name="proof" accept=".jpg,.jpeg,.png,.pdf" class="form-control form-control-sm" required>
                </div>
                @error('proof')<div class="col-12 text-danger small">{{ $message }}</div>@enderror
                <div class="col-12">
                    <button class="btn mb-btn-primary btn-sm w-100">{{ __('Submit payment proof') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Payment history --}}
<div class="mb-card p-3 mt-3">
    <h2 class="h6 fw-semibold px-2 pt-2">{{ __('Payment history') }}</h2>
    <table class="table mb-table align-middle mb-0">
        <thead><tr><th>{{ __('Date') }}</th><th>{{ __('Method') }}</th><th>{{ __('Amount') }}</th><th>{{ __('Status') }}</th><th></th></tr></thead>
        <tbody>
        @forelse($payments as $p)
            <tr>
                <td class="mb-muted small">{{ $p->created_at->format('d M Y') }}</td>
                <td>{{ $p->gateway->label() }}</td>
                <td dir="ltr">{{ $p->amountFormatted() }}</td>
                <td><span class="status-chip" style="background: {{ $p->status->color() }}">{{ $p->status->label() }}</span></td>
                <td class="text-end">
                    @if($p->proof_path)
                        <a class="btn btn-sm mb-btn-ghost" target="_blank" href="{{ route('tenant.billing.proof.show', $p) }}">{{ __('View proof') }}</a>
                    @endif
                </td>
            </tr>
        @empty
            <tr><td colspan="5" class="mb-muted py-4 text-center">{{ __('No payments yet.') }}</td></tr>
        @endforelse
        </tbody>
    </table>
</div>
@endsection