@extends('layouts.app')
@section('title', 'Billing')
@section('page-title', 'Billing & Subscription')
@section('content')
<div class="row g-3 mb-4">
    <div class="col-md-4">
        <div class="card stat-card p-3">
            <div class="text-muted small">Current Plan</div>
            <div class="fs-4 fw-bold">{{ $currentSubscription?->plan?->name ?? 'No Plan' }}</div>
            @if($currentSubscription)
                <div class="text-muted small">Expires: {{ $currentSubscription->expires_at?->format('M d, Y') ?? 'Never' }}</div>
            @endif
        </div>
    </div>
    <div class="col-md-4">
        <div class="card stat-card p-3">
            <div class="text-muted small">Status</div>
            <div class="fs-4 fw-bold text-{{ $currentSubscription?->isActive() ? 'success' : 'danger' }}">
                {{ $currentSubscription?->status ?? 'Inactive' }}
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card stat-card p-3">
            <div class="text-muted small">Usage</div>
            <div class="fs-4 fw-bold">{{ auth()->user()->monthlyMessageCount() }}</div>
            <div class="text-muted small">messages this month</div>
        </div>
    </div>
</div>

<h6 class="mb-3">Available Plans</h6>
<div class="row g-3 mb-4">
    @foreach($plans as $plan)
    <div class="col-md-4">
        <div class="card h-100 {{ $currentSubscription?->plan_id == $plan->id ? 'border-success' : '' }}">
            <div class="card-body text-center">
                <h5>{{ $plan->name }}</h5>
                <div class="fs-2 fw-bold my-2">${{ number_format($plan->price, 2) }}</div>
                <div class="text-muted small mb-3">/{{ $plan->billing_cycle }}</div>
                <ul class="list-unstyled small text-start">
                    <li class="mb-1"><i class="bi bi-check-circle text-success"></i> {{ $plan->device_limit }} Devices</li>
                    <li class="mb-1"><i class="bi bi-check-circle text-success"></i> {{ number_format($plan->message_limit) }} Messages/month</li>
                    <li class="mb-1"><i class="bi bi-check-circle text-success"></i> {{ number_format($plan->api_limit) }} API calls/month</li>
                </ul>
                @if($currentSubscription?->plan_id == $plan->id)
                    <button class="btn btn-outline-success w-100" disabled>Current Plan</button>
                @else
                    <form method="POST" action="{{ route('dashboard.billing.subscribe') }}">
                        @csrf
                        <input type="hidden" name="plan_id" value="{{ $plan->id }}">
                        <button type="submit" class="btn btn-whatsapp w-100">Subscribe</button>
                    </form>
                @endif
            </div>
        </div>
    </div>
    @endforeach
</div>

@if($currentSubscription)
<div class="text-center mb-4">
    <form method="POST" action="{{ route('dashboard.billing.cancel') }}" onsubmit="return confirm('Cancel subscription?')">
        @csrf
        <button type="submit" class="btn btn-outline-danger">Cancel Subscription</button>
    </form>
</div>
@endif

@if($payments->isNotEmpty())
<h6 class="mb-3">Payment History</h6>
<div class="card">
    <div class="card-body p-0">
        <table class="table table-sm mb-0">
            <thead class="table-light"><tr><th>Date</th><th>Plan</th><th>Amount</th><th>Method</th><th>Status</th></tr></thead>
            <tbody>
                @foreach($payments as $payment)
                <tr>
                    <td>{{ $payment->created_at->format('M d, Y') }}</td>
                    <td>{{ $payment->plan?->name ?? '-' }}</td>
                    <td>${{ number_format($payment->amount, 2) }}</td>
                    <td>{{ $payment->payment_method ?? '-' }}</td>
                    <td><span class="badge bg-{{ $payment->status === 'completed' ? 'success' : 'warning' }}">{{ $payment->status }}</span></td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@endif
@endsection