@extends('layouts.app')

@push('page-css')
    @vite(['resources/css/tools/dashboard.css'])
@endpush

@section('content')
<div class="dashboard">
    <div class="dashboard-header">
        <h1>Billing</h1>
        <p class="dashboard-subtitle">Manage your subscription and payment details</p>
    </div>

    @if(session('error'))
        <div style="padding: 12px 16px; background: #fef2f2; border: 1px solid #fca5a5; border-radius: 6px; color: #991b1b; margin-bottom: 20px;">
            {{ session('error') }}
        </div>
    @endif

    <div class="stats-row">
        <div class="stat-card">
            <div class="stat-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
            </div>
            <div class="stat-content">
                <span class="stat-value">{{ ucfirst($tenant->subscription_status ?? 'Active') }}</span>
                <span class="stat-label">Subscription Status</span>
            </div>
        </div>
        <div class="stat-card">
            <div class="stat-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
            </div>
            <div class="stat-content">
                <span class="stat-value">{{ $tenant->subscription_ends_at ? $tenant->subscription_ends_at->format('d M Y') : 'N/A' }}</span>
                <span class="stat-label">Renewal Date</span>
            </div>
        </div>
    </div>

    @if($tenant->stripe_id)
        <div style="margin-top: 20px;">
            <a href="{{ route('billing.portal') }}" class="dashboard-action-btn">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
                Manage in Stripe Portal
            </a>
        </div>
    @else
        <div class="empty-state">
            <div class="empty-state-icon">
                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
            </div>
            <h3>No billing account</h3>
            <p>Billing is not yet configured for this account. Contact support for assistance.</p>
        </div>
    @endif
</div>
@endsection