@extends('layouts.app')

@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
  <div class="card">
    <div class="card-header">
      <h5 class="mb-0">Shared Subscriptions</h5>
    </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>Slots</th>
            <th>Status</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>{{ $subscription->available_slots }}/{{ $subscription->total_slots }}</td>
              <td>{{ $subscription->status === 'draft' ? 'Pending' : ucfirst($subscription->status) }}</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="6" class="text-center py-4">No shared subscriptions found.</td></tr>
          @endforelse
        </tbody>
      </table>
    </div>

    <div class="card-body">{{ $sharedSubscriptions->links() }}</div>
  </div>
</div>
@endsection

@if($sharedSubscriptions->count() > 0)
@push('script')
<script>
$(document).ready(function () {
  const $table = $('#shared-subscriptions-table');
  if (!$table.length) return;

  $table.DataTable({
    responsive: false,
    scrollX: true,
    pageLength: 10,
    lengthMenu: [5, 10, 25, 50, 100],
    order: [[0, 'desc']],
    columnDefs: [{ orderable: false, targets: -1 }]
  });
});
</script>
@endpush
@endif