@extends('layouts.app')

@section('title', 'SMS Packages')
@section('page', 'billing')

@php
  $statusVariant = fn ($s) => match ($s) {
    'Active' => 'success',
    'Pending' => 'warning',
    'Rejected' => 'danger',
    default => 'secondary',
  };
@endphp

@section('content')
  @if (session('success'))
    <x-alert class="mb-3" variant="success" icon="bi-check-circle">{{ session('success') }}</x-alert>
  @endif

  @if ($errors->any())
    <x-alert class="mb-3" variant="danger" icon="bi-exclamation-triangle">{{ $errors->first() }}</x-alert>
  @endif

  <section class="billing-packages" aria-labelledby="billing-packages-title">
    <header class="billing-packages__header">
      <h1 id="billing-packages-title" class="billing-packages__title">SMS Packages</h1>
      <p class="billing-packages__subtitle">Top up SMS credits for campaigns and customer alerts.</p>
    </header>

    @if ($packages->isEmpty())
      <div class="billing-packages__empty text-muted">No packages available yet.</div>
    @else
      <div class="billing-packages__grid">
        @foreach ($packages as $package)
          <article class="pkg-card" data-package="{{ $package->slug }}">
            <div class="pkg-card__hero">
              <h2 class="pkg-card__hero-name">{{ $package->name }}</h2>
              <div class="pkg-card__icon" aria-hidden="true">
                <i class="bi {{ $package->icon ?: 'bi-chat-dots' }}"></i>
              </div>
            </div>

            <div class="pkg-card__body">
              <p class="pkg-card__name">
                <span class="pkg-card__name-count">{{ number_format((int) $package->sms_count) }}</span>
                <span class="pkg-card__name-accent">SMS</span>
              </p>

              <div class="pkg-card__price">
                <span class="pkg-card__currency">{{ currency_symbol() }}</span>
                <span class="pkg-card__amount">{{ number_format((float) $package->price, 0) }}</span>
                <span class="pkg-card__suffix">/=</span>
              </div>

              <span class="pkg-card__sms">
                <i class="bi bi-chat-dots-fill" aria-hidden="true"></i>
                SMS Cost: {{ currency_code() }} {{ number_format((float) $package->sms_cost, 2) }}/-
              </span>

              <button
                type="button"
                class="pkg-card__action"
                data-bs-toggle="modal"
                data-bs-target="#topupPaymentModal"
                data-package-id="{{ $package->id }}"
                data-package-name="{{ $package->name }}"
                data-sms-count="{{ number_format((int) $package->sms_count) }}"
                data-package-price="{{ number_format((float) $package->price, 0) }}/="
              >
                <span class="pkg-card__action-icon" aria-hidden="true">
                  <i class="bi bi-check-lg"></i>
                </span>
                Top up
              </button>

              <p class="pkg-card__footer">
                <i class="bi bi-shield-check" aria-hidden="true"></i>
                <span>Credits added instantly • Use anytime.</span>
              </p>
            </div>
          </article>
        @endforeach
      </div>
    @endif
  </section>

  <div class="billing-topups-wrap mt-4">
    <x-data-table
      id="billing-topups-table"
      class="catalog-table"
      title="Top-up requests"
      subtitle="Activated packs start as Pending. SMS count shows after status becomes Active."
      search-placeholder="Search top-ups..."
      :selectable="false"
      :page-size="10"
    >
      <x-slot:afterToolbar>
        <div class="product-stats-panel">
          <div class="row g-3 product-stats product-stats--4 justify-content-start">
            <div class="col-6 col-md-3 product-stat-col">
              <div class="product-kpi product-kpi--primary">
                <span class="product-kpi__icon" aria-hidden="true">
                  <span class="product-kpi__glyph"><i class="bi bi-chat-dots"></i></span>
                </span>
                <div class="product-kpi__body">
                  <p class="product-kpi__label">Total active SMS</p>
                  <p class="product-kpi__value">{{ number_format((int) ($totalActiveSms ?? 0)) }}</p>
                  <p class="product-kpi__meta">From activated packs</p>
                </div>
              </div>
            </div>
            <div class="col-6 col-md-3 product-stat-col">
              <div class="product-kpi product-kpi--warning">
                <span class="product-kpi__icon" aria-hidden="true">
                  <span class="product-kpi__glyph"><i class="bi bi-hourglass-split"></i></span>
                </span>
                <div class="product-kpi__body">
                  <p class="product-kpi__label">Pending</p>
                  <p class="product-kpi__value">{{ $topups->where('status', 'Pending')->count() }}</p>
                  <p class="product-kpi__meta">Awaiting confirmation</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </x-slot:afterToolbar>
      <x-slot:filters>
        <select class="form-select form-select-sm" data-edt-col-filter="status" aria-label="Status">
          <option value="">All Statuses</option>
          <option>Pending</option>
          <option>Active</option>
          <option>Rejected</option>
        </select>
      </x-slot:filters>
      <x-slot:head>
        <tr>
          <th data-edt-sort="date">Date</th>
          <th data-edt-sort="package">Package</th>
          <th data-edt-sort="amount">Amount</th>
          <th data-edt-sort="status">Status</th>
          <th data-edt-sort="sms">Total SMS</th>
          <th data-edt-sort="by">Requested by</th>
          <th class="text-end">Actions</th>
        </tr>
      </x-slot:head>
      <x-slot:body>
        @forelse ($topups as $topup)
          <tr>
            <td data-edt-value="{{ $topup->created_at?->format('Y-m-d H:i') }}">
              {{ $topup->created_at?->format('Y-m-d H:i') ?? '—' }}
            </td>
            <td data-edt-value="{{ $topup->package_name }}" class="cell-primary">
              {{ $topup->package_name }}
            </td>
            <td data-edt-value="{{ $topup->price }}">
              {{ money($topup->price) }}
            </td>
            <td data-edt-value="{{ $topup->status }}" data-col="status">
              <x-badge :variant="$statusVariant($topup->status)">{{ $topup->status }}</x-badge>
            </td>
            <td data-edt-value="{{ $topup->isActive() ? $topup->sms_count : 0 }}">
              @if ($topup->isActive())
                {{ number_format((int) $topup->sms_count) }}
              @else
                <span class="text-muted">—</span>
              @endif
            </td>
            <td data-edt-value="{{ $topup->requester?->name ?? '' }}">
              {{ $topup->requester?->name ?? '—' }}
            </td>
            <td class="text-end">
              @if (($canManage ?? false) && $topup->isPending())
                <form method="post" action="{{ route('billing.topups.activate', $topup) }}" class="d-inline">
                  @csrf
                  <button type="submit" class="btn btn-sm btn-primary">Activate</button>
                </form>
              @else
                —
              @endif
            </td>
          </tr>
        @empty
          <tr class="data-table__empty-row">
            <td colspan="7" class="text-center text-muted py-4">No top-up requests yet.</td>
          </tr>
        @endforelse
      </x-slot:body>
    </x-data-table>
  </div>

  <div class="modal fade" id="topupPaymentModal" tabindex="-1" aria-labelledby="topupPaymentModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
      <div class="modal-content edt-modal topup-payment-modal">
        <form method="post" action="{{ route('billing.packages.topup') }}" id="topup-request-form">
          @csrf
          <input type="hidden" name="billing_package_id" id="topup_package_id" value="">

          <div class="modal-header topup-payment-modal__header">
            <h2 class="modal-title fs-5" id="topupPaymentModalLabel">How to pay</h2>
            <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>

          <div class="modal-body topup-payment-modal__body">
            <div class="topup-pay-hero" aria-hidden="true">
              <div class="topup-pay-hero__icons">
                <span class="topup-pay-hero__icon topup-pay-hero__icon--bank">
                  <svg viewBox="0 0 64 64" width="56" height="56" focusable="false">
                    <path fill="#7dd3fc" d="M8 24 L32 10 L56 24 V28 H8 Z"/>
                    <rect x="14" y="28" width="8" height="20" rx="1.5" fill="#38bdf8"/>
                    <rect x="28" y="28" width="8" height="20" rx="1.5" fill="#38bdf8"/>
                    <rect x="42" y="28" width="8" height="20" rx="1.5" fill="#38bdf8"/>
                    <rect x="10" y="48" width="44" height="6" rx="2" fill="#0ea5e9"/>
                    <circle cx="32" cy="22" r="7" fill="#0369a1"/>
                    <text x="32" y="26" text-anchor="middle" font-size="11" font-weight="700" fill="#fff">$</text>
                  </svg>
                </span>
                <span class="topup-pay-hero__icon topup-pay-hero__icon--transfer">
                  <svg viewBox="0 0 72 64" width="64" height="56" focusable="false">
                    <rect x="6" y="8" width="22" height="40" rx="4" fill="#60a5fa"/>
                    <rect x="10" y="14" width="14" height="24" rx="2" fill="#dbeafe"/>
                    <rect x="44" y="14" width="22" height="40" rx="4" fill="#3b82f6"/>
                    <rect x="48" y="20" width="14" height="24" rx="2" fill="#bfdbfe"/>
                    <circle cx="36" cy="32" r="10" fill="#facc15"/>
                    <text x="36" y="36" text-anchor="middle" font-size="12" font-weight="800" fill="#854d0e">$</text>
                    <path d="M34 18 V12 M34 18 L31 15 M34 18 L37 15" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>
                    <path d="M38 46 V52 M38 46 L35 49 M38 46 L41 49" stroke="#fff" stroke-width="2" fill="none" stroke-linecap="round"/>
                  </svg>
                </span>
              </div>
              <h3 class="topup-pay-hero__title">Bank Deposit/Transfer</h3>
              <p class="topup-pay-hero__sub">Deposit or online transfer to bank account directly</p>
            </div>

            <p class="topup-payment-modal__lead">
              You selected
              <strong data-topup-package>—</strong>
              (<span data-topup-sms>—</span> SMS · <span data-topup-price>—</span>).
              Pay by bank transfer using the details below.
            </p>

            <ol class="topup-payment-modal__steps">
              <li>Transfer the package amount to the bank account.</li>
              <li>Take a clear photo of the payment slip / receipt.</li>
              <li>Send the slip on WhatsApp with your restaurant name and pack.</li>
            </ol>

            <div class="topup-payment-modal__grid">
              <div class="topup-payment-modal__card">
                <h3 class="topup-payment-modal__card-title">
                  <i class="bi bi-bank" aria-hidden="true"></i> Bank details
                </h3>
                <dl class="topup-payment-modal__dl">
                  <div>
                    <dt>Bank</dt>
                    <dd>{{ $payment['bank_name'] !== '' ? $payment['bank_name'] : '—' }}</dd>
                  </div>
                  <div>
                    <dt>Branch</dt>
                    <dd>{{ $payment['bank_branch'] !== '' ? $payment['bank_branch'] : '—' }}</dd>
                  </div>
                  <div>
                    <dt>Account name</dt>
                    <dd>{{ $payment['account_name'] !== '' ? $payment['account_name'] : '—' }}</dd>
                  </div>
                  <div>
                    <dt>Account number</dt>
                    <dd class="topup-payment-modal__account">{{ $payment['account_number'] !== '' ? $payment['account_number'] : '—' }}</dd>
                  </div>
                </dl>
              </div>

              <div class="topup-payment-modal__card topup-payment-modal__card--wa">
                <h3 class="topup-payment-modal__card-title">
                  <i class="bi bi-whatsapp" aria-hidden="true"></i> Send slip on WhatsApp
                </h3>
                <p class="topup-payment-modal__note">{{ $payment['whatsapp_note'] }}</p>
                <p class="topup-payment-modal__contact mb-0">
                  Contact:
                  <strong>{{ $payment['contact_phone'] !== '' ? $payment['contact_phone'] : '—' }}</strong>
                </p>
              </div>
            </div>
          </div>

          <div class="modal-footer topup-payment-modal__footer">
            <button type="button" class="btn topup-payment-modal__btn-cancel" data-bs-dismiss="modal">
              Cancel
            </button>
            <button type="submit" class="btn topup-payment-modal__btn-topup">
              <i class="bi bi-check-lg" aria-hidden="true"></i>
              Top up
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
@endsection

@push('styles')
  <link rel="stylesheet" href="{{ asset('assets/css/pages/products.css') }}">
  <link rel="stylesheet" href="{{ asset('assets/css/pages/billing-packages.css') }}?v=12">
@endpush

@push('scripts')
  <script src="{{ asset('assets/js/pages/billing-packages.js') }}?v=3"></script>
  @if (session('whatsapp_url'))
    <script>
      window.open(@json(session('whatsapp_url')), '_blank', 'noopener,noreferrer');
    </script>
  @endif
@endpush