@extends('layouts.tenant')

@section('title', 'Subscription & Billing')
@section('page-title', 'Subscription & Usage Limits')

@section('content')
<div class="row g-4 mb-4">
  <!-- Current Plan & Status -->
  <div class="col-lg-5">
    <div class="card-custom h-100">
      <div class="d-flex align-items-center justify-content-between mb-3 border-bottom pb-2">
        <h6 class="fw-bold mb-0"><i class="bi bi-credit-card-fill text-primary me-2"></i> Current Subscription Plan</h6>
        <span class="badge bg-success-subtle text-success fs-6 px-3 py-1 rounded-pill">{{ strtoupper($subscription->status ?? 'Active') }}</span>
      </div>

      <div class="mb-4">
        <h3 class="fw-extrabold text-primary mb-1">{{ $subscription->plan->name ?? 'Trial Plan' }}</h3>
        <div class="text-muted small">
          Price: <strong>{{ $subscription->plan->currency ?? 'GBP' }} {{ number_format($subscription->plan->price ?? 0, 2) }} / {{ $subscription->plan->billing_cycle ?? 'monthly' }}</strong>
        </div>
        @if($subscription && $subscription->trial_end)
          <div class="alert alert-info py-2 px-3 small mt-3 mb-0">
            <i class="bi bi-clock-history me-1"></i> Trial Period End Date: <strong>{{ $subscription->trial_end->format('d M Y') }}</strong>
          </div>
        @endif
      </div>

      <h6 class="fw-bold mb-3 border-bottom pb-2">Plan Usage &amp; Limits</h6>

      <!-- Usage Meters -->
      <div class="space-y-3">
        <div class="mb-3">
          <div class="d-flex justify-content-between small mb-1">
            <span>Staff Users</span>
            <strong>{{ $usage['users']['current'] }} / {{ $usage['users']['max'] == 0 ? 'Unlimited' : $usage['users']['max'] }}</strong>
          </div>
          <div class="progress" style="height: 6px;">
            <div class="progress-bar bg-primary" style="width: {{ $usage['users']['max'] > 0 ? min(100, ($usage['users']['current'] / $usage['users']['max'])*100) : 10 }}%;"></div>
          </div>
        </div>

        <div class="mb-3">
          <div class="d-flex justify-content-between small mb-1">
            <span>Products &amp; Inventory</span>
            <strong>{{ $usage['products']['current'] }} / {{ $usage['products']['max'] == 0 ? 'Unlimited' : $usage['products']['max'] }}</strong>
          </div>
          <div class="progress" style="height: 6px;">
            <div class="progress-bar bg-success" style="width: {{ $usage['products']['max'] > 0 ? min(100, ($usage['products']['current'] / $usage['products']['max'])*100) : 10 }}%;"></div>
          </div>
        </div>

        <div class="mb-3">
          <div class="d-flex justify-content-between small mb-1">
            <span>Customers</span>
            <strong>{{ $usage['customers']['current'] }} / {{ $usage['customers']['max'] == 0 ? 'Unlimited' : $usage['customers']['max'] }}</strong>
          </div>
          <div class="progress" style="height: 6px;">
            <div class="progress-bar bg-info" style="width: {{ $usage['customers']['max'] > 0 ? min(100, ($usage['customers']['current'] / $usage['customers']['max'])*100) : 10 }}%;"></div>
          </div>
        </div>

        <div class="mb-3">
          <div class="d-flex justify-content-between small mb-1">
            <span>Monthly Repairs (This Month)</span>
            <strong>{{ $usage['repairs']['current'] }} / {{ $usage['repairs']['max'] == 0 ? 'Unlimited' : $usage['repairs']['max'] }}</strong>
          </div>
          <div class="progress" style="height: 6px;">
            <div class="progress-bar bg-warning" style="width: {{ $usage['repairs']['max'] > 0 ? min(100, ($usage['repairs']['current'] / $usage['repairs']['max'])*100) : 10 }}%;"></div>
          </div>
        </div>

        <div class="mb-3">
          <div class="d-flex justify-content-between small mb-1">
            <span>Monthly Sales (This Month)</span>
            <strong>{{ $usage['sales']['current'] }} / {{ $usage['sales']['max'] == 0 ? 'Unlimited' : $usage['sales']['max'] }}</strong>
          </div>
          <div class="progress" style="height: 6px;">
            <div class="progress-bar bg-danger" style="width: {{ $usage['sales']['max'] > 0 ? min(100, ($usage['sales']['current'] / $usage['sales']['max'])*100) : 10 }}%;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Available Subscription Plans for Upgrade -->
  <div class="col-lg-7">
    <div class="card-custom h-100">
      <h6 class="fw-bold mb-3 border-bottom pb-2"><i class="bi bi-rocket-takeoff text-success me-2"></i> Upgrade / Change Subscription Plan</h6>

      <div class="row g-3">
        @foreach($plans as $plan)
          <div class="col-md-6">
            <div class="border rounded-3 p-3 h-100 d-flex flex-column justify-content-between {{ ($subscription && $subscription->plan_id == $plan->id) ? 'border-primary bg-primary-subtle' : 'bg-body-tertiary' }}">
              <div>
                <div class="d-flex justify-content-between align-items-center mb-2">
                  <h6 class="fw-bold mb-0 text-primary">{{ $plan->name }}</h6>
                  <span class="badge bg-secondary">{{ strtoupper($plan->billing_cycle) }}</span>
                </div>
                <div class="fs-4 fw-extrabold mb-2">{{ $plan->currency }} {{ number_format($plan->price, 2) }}</div>
                <ul class="list-unstyled small text-muted mb-3 space-y-1">
                  <li><i class="bi bi-check2 text-success me-1"></i> Up to {{ $plan->max_users == 0 ? 'Unlimited' : $plan->max_users }} Users</li>
                  <li><i class="bi bi-check2 text-success me-1"></i> {{ $plan->max_products == 0 ? 'Unlimited' : number_format($plan->max_products) }} Products</li>
                  <li><i class="bi bi-check2 text-success me-1"></i> {{ $plan->max_repairs_per_month == 0 ? 'Unlimited' : number_format($plan->max_repairs_per_month) }} Repairs/mo</li>
                  <li><i class="bi bi-check2 text-success me-1"></i> {{ $plan->max_sales_per_month == 0 ? 'Unlimited' : number_format($plan->max_sales_per_month) }} Sales/mo</li>
                </ul>
              </div>

              <form method="POST" action="{{ route('tenant.billing.upgrade', ['slug' => $slug]) }}">
                @csrf
                <input type="hidden" name="plan_id" value="{{ $plan->id }}">
                @if($subscription && $subscription->plan_id == $plan->id)
                  <button type="button" class="btn btn-outline-secondary w-100 disabled" disabled>Current Active Plan</button>
                @else
                  <button type="submit" class="btn-primary-custom w-100 justify-content-center py-2">Select {{ $plan->name }} Plan</button>
                @endif
              </form>
            </div>
          </div>
        @endforeach
      </div>
    </div>
  </div>
</div>

<!-- SaaS Billing Invoices -->
<div class="card-custom">
  <h6 class="fw-bold mb-3"><i class="bi bi-file-earmark-text-fill text-indigo me-2"></i> SaaS Subscription Invoices</h6>
  <div class="table-responsive">
    <table class="table-custom">
      <thead>
        <tr>
          <th>Invoice #</th>
          <th>Invoice Date</th>
          <th>Due Date</th>
          <th>Amount</th>
          <th>Status</th>
          <th class="text-end">Action</th>
        </tr>
      </thead>
      <tbody>
        @forelse($invoices as $inv)
          <tr>
            <td class="fw-bold text-primary">{{ $inv->invoice_number }}</td>
            <td>{{ $inv->invoice_date->format('d M Y') }}</td>
            <td>{{ $inv->due_date->format('d M Y') }}</td>
            <td class="fw-bold">{{ $inv->currency }} {{ number_format($inv->total, 2) }}</td>
            <td>
              <span class="badge {{ $inv->status === 'paid' ? 'bg-success' : 'bg-warning text-dark' }}">{{ strtoupper($inv->status) }}</span>
            </td>
            <td class="text-end">
              <a href="{{ route('tenant.billing.invoices.show', ['slug' => $slug, 'invoice' => $inv->id]) }}" class="btn-outline-custom py-1 px-2" style="font-size:12px;">
                <i class="bi bi-eye-fill me-1"></i> View / Print
              </a>
            </td>
          </tr>
        @empty
          <tr><td colspan="6" class="text-center text-muted py-4">No billing invoices found.</td></tr>
        @endforelse
      </tbody>
    </table>
  </div>
</div>
@endsection