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

@section('content')
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
    <div class="rounded-3xl border border-slate-200 p-6">
        <div class="text-slate-500 text-sm">Current Plan</div>
        <div class="text-3xl font-bold mt-2">{{ $subscription?->plan?->name ?? 'No plan' }}</div>
        <div class="mt-3 text-slate-500">Status: {{ strtoupper($subscription?->status ?? 'N/A') }}</div>
        <div class="mt-1 text-slate-500">Router Limit: {{ $subscription?->router_limit ?? 0 }}</div>
        <div class="mt-1 text-slate-500">Ends: {{ $subscription?->ends_at }}</div>
    </div>
    <div class="rounded-3xl border border-slate-200 p-6">
        <div class="text-slate-500 text-sm">Company</div>
        <div class="text-2xl font-bold mt-2">{{ $company->name }}</div>
        <div class="mt-3 text-slate-500">{{ $company->email }}</div>
        <div class="mt-1 text-slate-500">{{ $company->phone }}</div>
        <div class="mt-1 text-slate-500">{{ $company->country }}</div>
    </div>
</div>
<div class="flex gap-3 mt-6">
    <a href="{{ route('billing.invoices') }}" class="rounded-2xl bg-slate-900 text-white px-5 py-3">Invoices</a>
    <a href="{{ route('billing.payments') }}" class="rounded-2xl bg-sky-600 text-white px-5 py-3">Payments</a>
</div>
@endsection