@extends('layouts.app')

@section('content')
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">Usage & Analytics</h1>
</div>

<div class="row">
    <div class="col-md-8">
        <!-- Usage Stats -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">Current Usage</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6>Websites</h6>
                        <div class="progress mb-3">
                            <div class="progress-bar" role="progressbar"
                                 style="width: {{ ($usage['websites'] / max($usage['max_websites'], 1)) * 100 }}%">
                                {{ $usage['websites'] }} / {{ $usage['max_websites'] }}
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <h6>Storage</h6>
                        <div class="progress mb-3">
                            <div class="progress-bar" role="progressbar"
                                 style="width: {{ ($usage['storage_used'] / max($usage['storage_limit'], 1)) * 100 }}%">
                                {{ round($usage['storage_used'] / 1024 / 1024, 2) }} MB / {{ round($usage['storage_limit'] / 1024 / 1024) }} MB
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <!-- Subscription Info -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Subscription</h5>
            </div>
            <div class="card-body">
                @if(auth()->user()->subscription)
                    <h6>{{ ucfirst(auth()->user()->subscription->plan_name) }} Plan</h6>
                    <p class="text-muted">Status: {{ ucfirst(auth()->user()->subscription->status) }}</p>
                    <p class="text-muted">Expires: {{ auth()->user()->subscription->expires_at->format('M d, Y') }}</p>
                @else
                    <p>No active subscription</p>
                    <a href="{{ route('subscription.plans') }}" class="btn btn-primary">Choose Plan</a>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection