@extends('layouts.tenant')

@section('title', 'SaaS Subscription Invoice ' . $invoice->invoice_number)
@section('page-title', 'Subscription Invoice')

@section('content')
<style>
  .invoice-card {
    background: #ffffff;
    color: #0f172a;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    max-width: 850px;
    margin: 0 auto;
    border: 1px solid #e2e8f0;
  }
  [data-theme="dark"] .invoice-card {
    background: #1e293b;
    color: #f8fafc;
    border-color: #334155;
  }
  .invoice-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 24px;
    border-bottom: 2px solid #e2e8f0;
    margin-bottom: 24px;
  }
  [data-theme="dark"] .invoice-header {
    border-color: #334155;
  }
  .status-badge-paid {
    background: #d1fae5;
    color: #065f46;
    font-weight: 800;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    letter-spacing: 0.5px;
  }
  .status-badge-unpaid {
    background: #fef3c7;
    color: #92400e;
    font-weight: 800;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    letter-spacing: 0.5px;
  }
  @media print {
    body { background: #ffffff !important; color: #000000 !important; }
    #sidebar, #topbar, #overlay, .no-print, .page-header, nav, header { display: none !important; }
    #main { margin-left: 0 !important; margin: 0 !important; padding: 0 !important; width: 100% !important; }
    .page-content { padding: 0 !important; margin: 0 !important; max-width: 100% !important; width: 100% !important; }
    .invoice-card { box-shadow: none !important; border: none !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; }
  }
</style>

<!-- Top Action Buttons -->
<div class="d-flex justify-content-between align-items-center mb-4 no-print flex-wrap gap-2">
  <a href="{{ route('tenant.billing.index', ['slug' => $slug]) }}" class="btn-outline-custom">
    <i class="bi bi-arrow-left me-1"></i> Back to Subscription &amp; Billing
  </a>
  <button onclick="window.print()" class="btn-primary-custom px-3 py-2 text-nowrap">
    <i class="bi bi-printer-fill me-1"></i> Print / Download Invoice
  </button>
</div>

<div class="invoice-card">
  <!-- Header -->
  <div class="invoice-header">
    <div>
      <div class="d-flex align-items-center gap-2 mb-2">
        <div style="width:36px;height:36px;background:#4f46e5;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:18px;">P</div>
        <h4 class="fw-extrabold mb-0">PhonesClinik SaaS</h4>
      </div>
      <div class="small text-muted">Platform Subscription Invoice</div>
      <div class="small text-muted">billing@phonesclinik.com</div>
    </div>
    <div class="text-end">
      <h3 class="fw-black text-primary mb-1">{{ $invoice->invoice_number }}</h3>
      <div class="mb-2">
        <span class="{{ $invoice->status === 'paid' ? 'status-badge-paid' : 'status-badge-unpaid' }}">
          {{ strtoupper($invoice->status) }}
        </span>
      </div>
      <div class="small text-muted">Invoice Date: <strong>{{ $invoice->invoice_date->format('d M Y') }}</strong></div>
      <div class="small text-muted">Due Date: <strong>{{ $invoice->due_date->format('d M Y') }}</strong></div>
    </div>
  </div>

  <!-- Customer Shop Information -->
  <div class="row mb-4">
    <div class="col-6">
      <div class="text-muted small uppercase fw-bold mb-1">Subscriber Shop Details:</div>
      <h5 class="fw-bold mb-1">{{ $tenant->name }}</h5>
      <div class="small text-muted mb-1"><i class="bi bi-geo-alt me-1"></i> {{ $tenant->address ?? 'Address not specified' }}</div>
      <div class="small text-muted mb-1"><i class="bi bi-envelope me-1"></i> {{ $tenant->email ?? 'No email' }}</div>
      <div class="small text-muted"><i class="bi bi-telephone me-1"></i> {{ $tenant->phone ?? 'No phone' }}</div>
    </div>
    <div class="col-6 text-end">
      <div class="text-muted small uppercase fw-bold mb-1">Subscription Plan:</div>
      <div class="fw-bold fs-6 text-primary">{{ $invoice->subscription->plan->name ?? 'Standard SaaS Plan' }}</div>
      <div class="small text-muted mb-1">Billing Period: <strong>{{ strtoupper($invoice->subscription->plan->billing_cycle ?? 'Monthly') }}</strong></div>
      <div class="small text-muted">Currency: <strong>{{ $invoice->currency }}</strong></div>
    </div>
  </div>

  <!-- Items Table -->
  <div class="table-responsive mb-4">
    <table class="table-custom w-100">
      <thead>
        <tr style="background:var(--body-bg);">
          <th class="py-3 px-3">Plan Item</th>
          <th class="py-3 px-3 text-center">Billing Cycle</th>
          <th class="py-3 px-3 text-end">Price</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="py-3 px-3">
            <div class="fw-bold">{{ $invoice->subscription->plan->name ?? 'SaaS Subscription Plan' }}</div>
            <div class="small text-muted">
              Includes access to POS repair management, inventory, sales analytics, and staff accounts.
            </div>
          </td>
          <td class="py-3 px-3 text-center align-middle">
            <span class="badge bg-secondary">{{ strtoupper($invoice->subscription->plan->billing_cycle ?? 'Monthly') }}</span>
          </td>
          <td class="py-3 px-3 text-end align-middle fw-bold fs-6">
            {{ $invoice->currency }} {{ number_format($invoice->subtotal, 2) }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <!-- Summary Box -->
  <div class="row justify-content-end mb-4">
    <div class="col-md-5">
      <div class="p-3 rounded-3" style="background:var(--body-bg);border:1px solid var(--border);">
        <div class="d-flex justify-content-between mb-2 small">
          <span class="text-muted">Subtotal:</span>
          <span>{{ $invoice->currency }} {{ number_format($invoice->subtotal, 2) }}</span>
        </div>
        <div class="d-flex justify-content-between mb-2 small">
          <span class="text-muted">Tax:</span>
          <span>{{ $invoice->currency }} {{ number_format($invoice->tax, 2) }}</span>
        </div>
        <hr class="my-2">
        <div class="d-flex justify-content-between align-items-center">
          <span class="fw-bold">Total Amount Due:</span>
          <strong class="fs-4 text-primary">{{ $invoice->currency }} {{ number_format($invoice->total, 2) }}</strong>
        </div>
      </div>
    </div>
  </div>

  <!-- Notice -->
  <div class="pt-3 border-top text-muted small">
    <div class="fw-bold mb-1 text-body">Note:</div>
    @if($invoice->status === 'paid')
      <p class="mb-0 text-success fw-bold"><i class="bi bi-check-circle-fill me-1"></i> Thank you! This invoice is paid in full.</p>
    @else
      <p class="mb-0 text-warning-emphasis"><i class="bi bi-exclamation-triangle-fill me-1"></i> Payment Pending. Please remit payment or contact SuperAdmin to confirm your subscription payment.</p>
    @endif
  </div>
</div>
@endsection