@extends('layouts.app')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  <div class="card">
    <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
      <h5 class="mb-0">Shared Subscriptions</h5>
      <a href="{{ route('admin.subscription-invoices.index') }}" class="btn btn-sm btn-warning text-white fw-bold">
        <i class="ti tabler-file-certificate me-1"></i> Invoice Verifications ({{ getPendingInvoicesCount() }} Pending)
      </a>
    </div>

    <div class="table-responsive">
      <table @if($sharedSubscriptions->count() > 0) id="shared-subscriptions-table" @endif class="table">
        <thead>
          <tr>
            <th>Title</th>
            <th>Owner</th>
            <th>Service</th>
            <th>Subscription Email</th>
            <th>Subscription Password</th>
            <th>Slots</th>
            <th>Status</th>
            <th>Invoice Proof</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          @forelse($sharedSubscriptions as $subscription)
            <tr>
              <td>{{ $subscription->title }}</td>
              <td>{{ $subscription->owner?->name ?? 'N/A' }}</td>
              <td>{{ $subscription->service?->name ?? 'N/A' }} / {{ $subscription->servicePlan?->name ?? 'N/A' }}</td>
              <td>
                @if(filled($subscription->subscription_email))
                  <div class="d-inline-flex align-items-center gap-1 bg-light border rounded px-2 py-1">
                    <span class="font-monospace small text-dark fw-semibold">{{ $subscription->subscription_email }}</span>
                    <button type="button" class="btn btn-sm btn-icon btn-text-secondary rounded-pill p-0" style="width: 24px; height: 24px;" title="Copy Email" onclick="navigator.clipboard.writeText('{{ addslashes($subscription->subscription_email) }}'); this.classList.add('text-success'); setTimeout(() => this.classList.remove('text-success'), 1500);">
                      <i class="ti tabler-copy fs-6"></i>
                    </button>
                  </div>
                @else
                  <span class="text-muted small fst-italic">Not provided</span>
                @endif
              </td>
              <td>
                @if(filled($subscription->subscription_password))
                  <div class="d-inline-flex align-items-center gap-1 bg-light border rounded px-2 py-1">
                    <span class="admin-password-text font-monospace small text-dark fw-semibold" data-password="{{ e($subscription->subscription_password) }}">••••••••</span>
                    <button type="button" class="btn btn-sm btn-icon btn-text-secondary rounded-pill p-0 js-toggle-pwd" style="width: 24px; height: 24px;" title="Show/Hide Password">
                      <i class="ti tabler-eye fs-6"></i>
                    </button>
                    <button type="button" class="btn btn-sm btn-icon btn-text-secondary rounded-pill p-0" style="width: 24px; height: 24px;" title="Copy Password" onclick="navigator.clipboard.writeText('{{ addslashes($subscription->subscription_password) }}'); this.classList.add('text-success'); setTimeout(() => this.classList.remove('text-success'), 1500);">
                      <i class="ti tabler-copy fs-6"></i>
                    </button>
                  </div>
                @else
                  <span class="text-muted small fst-italic">Not provided</span>
                @endif
              </td>
              <td>{{ $subscription->available_slots }}/{{ $subscription->total_slots }}</td>
              <td>
                @php
                  $subStatus = strtolower(trim((string) $subscription->status));
                @endphp
                @if(in_array($subStatus, ['active', 'approved', 'approve'], true))
                  <span class="badge bg-success rounded-pill px-2 py-1 fw-bold">
                    <i class="ti tabler-circle-check me-1"></i> Active
                  </span>
                @elseif(in_array($subStatus, ['rejected', 'reject', 'cancelled'], true))
                  <span class="badge bg-danger rounded-pill px-2 py-1 fw-bold">
                    <i class="ti tabler-circle-x me-1"></i> {{ ucfirst($subscription->status) }}
                  </span>
                @elseif(in_array($subStatus, ['draft', 'pending'], true))
                  <span class="badge bg-warning rounded-pill px-2 py-1 text-dark fw-bold">
                    <i class="ti tabler-clock me-1"></i> Pending
                  </span>
                @elseif($subStatus === 'full')
                  <span class="badge bg-info rounded-pill px-2 py-1 fw-bold">Full</span>
                @else
                  <span class="badge bg-secondary rounded-pill px-2 py-1">{{ ucfirst($subscription->status) }}</span>
                @endif
              </td>
              <td>
                @php
                  $subInvoice = getSubscriptionInvoiceForSubscription((int) $subscription->id);
                  $subInvStatus = strtolower(trim((string) ($subInvoice['status'] ?? ($subscription->is_invoice_verified ? 'approved' : ($subscription->invoice_status ?? 'unverified')))));
                @endphp
                @if(in_array($subInvStatus, ['approved', 'approve', 'verified'], true))
                  <a href="{{ route('admin.subscription-invoices.index', ['status' => 'approved']) }}" class="badge bg-success rounded-pill text-decoration-none px-2 py-1 fw-bold">
                    <i class="ti tabler-rosette-discount-check me-1"></i> Approved
                  </a>
                @elseif(in_array($subInvStatus, ['pending'], true))
                  <a href="{{ route('admin.subscription-invoices.index', ['status' => 'pending']) }}" class="badge bg-warning text-dark rounded-pill text-decoration-none px-2 py-1 fw-bold">
                    <i class="ti tabler-clock me-1"></i> Needs Review
                  </a>
                @elseif(in_array($subInvStatus, ['rejected', 'reject'], true))
                  <a href="{{ route('admin.subscription-invoices.index', ['status' => 'rejected']) }}" class="badge bg-danger rounded-pill text-decoration-none px-2 py-1 fw-bold">
                    <i class="ti tabler-circle-x me-1"></i> Rejected
                  </a>
                @else
                  <span class="badge bg-label-secondary rounded-pill">Unverified</span>
                @endif
              </td>
              <td>
                @if($isAdminOrSuper ?? false)
                  <div class="d-flex gap-2">
                    @can('update subscription')
                      <a href="{{ route('admin.shared-subscriptions.edit', $subscription) }}" class="btn btn-sm btn-outline-primary">Manage</a>
                    @endcan

                    @can('delete subscription')
                      <form method="POST" action="{{ route('admin.shared-subscriptions.destroy', $subscription) }}">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Delete this shared subscription?')">Delete</button>
                      </form>
                    @endcan
                  </div>
                @else
                  <span class="text-muted">-</span>
                @endif
              </td>
            </tr>
          @empty
            <tr><td colspan="9" class="text-center py-4">No shared subscriptions found.</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>

    @if($sharedSubscriptions->hasPages() || $sharedSubscriptions->total() > 0)
      <div class="card-footer d-flex justify-content-between align-items-center flex-wrap py-3 border-top">
        <div class="text-muted small mb-2 mb-md-0">
          Showing <strong>{{ $sharedSubscriptions->firstItem() ?? 0 }}</strong> to <strong>{{ $sharedSubscriptions->lastItem() ?? 0 }}</strong> of <strong>{{ $sharedSubscriptions->total() }}</strong> entries
        </div>
        <div>
          {{ $sharedSubscriptions->links() }}
        </div>
      </div>
    @endif
  </div>
</div>
@endsection

@push('script')
<script>
$(document).ready(function () {
  const $table = $('#shared-subscriptions-table');
  if ($table.length) {
    $table.DataTable({
      responsive: false,
      scrollX: true,
      paging: false,
      info: false,
      order: [[0, 'desc']],
      columnDefs: [{ orderable: false, targets: -1 }]
    });
  }

  $(document).on('click', '.js-toggle-pwd', function () {
    const $btn = $(this);
    const $wrap = $btn.closest('div');
    const $span = $wrap.find('.admin-password-text');
    const realPwd = $span.attr('data-password');
    const $icon = $btn.find('i');

    if ($span.text() === '••••••••') {
      $span.text(realPwd);
      $icon.removeClass('tabler-eye').addClass('tabler-eye-off');
      $btn.attr('title', 'Hide Password');
    } else {
      $span.text('••••••••');
      $icon.removeClass('tabler-eye-off').addClass('tabler-eye');
      $btn.attr('title', 'Show Password');
    }
  });
});
</script>
@endpush