@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">
      <h5 class="mb-0">Service Plans</h5>
      @can('create plans')
        <a href="{{ route('admin.service-plans.create') }}" class="btn btn-sm btn-primary">Add Plan</a>
      @endcan
    </div>

    <div class="table-responsive">
      <table @if($servicePlans->count() > 0) id="service-plans-table" @endif class="table">
        <thead>
          <tr>
            <th>Plan Name</th>
            <th>Plan Price ($)</th>
            <th>Admin Fee ($)</th>
            <th>Max Slots</th>
            <th>Status</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          @forelse($servicePlans as $plan)
            @php
              $planPrice = (float) ($plan->price ?? 0);
              $adminFee = (float) ($plan->admin_fee ?? 0);
            @endphp
            <tr>
              <td>
                <span class="fw-semibold text-heading">{{ $plan->name }}</span>
                @if($plan->service)
                  <br><small class="text-muted">{{ $plan->service->name }}</small>
                @endif
              </td>
              <td><span class="badge bg-label-success fs-6">${{ number_format($planPrice, 2) }}</span></td>
              <td><span class="badge bg-label-primary fs-6">${{ number_format($adminFee, 2) }}</span></td>
              <td>{{ $plan->max_slots }} seats</td>
              <td>
                <span class="badge bg-label-{{ $plan->is_active ? 'success' : 'warning' }}">
                  {{ $plan->is_active ? 'Active' : 'Pending' }}
                </span>
              </td>
              <td>
                @canany(['update plans', 'delete plans'])
                  <div class="d-flex gap-2">
                    @can('update plans')
                      <a href="{{ route('admin.service-plans.edit', $plan) }}" class="btn btn-sm btn-outline-primary">Edit</a>
                    @endcan

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

    @if($servicePlans->hasPages() || $servicePlans->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>{{ $servicePlans->firstItem() ?? 0 }}</strong> to <strong>{{ $servicePlans->lastItem() ?? 0 }}</strong> of <strong>{{ $servicePlans->total() }}</strong> entries
        </div>
        <div>
          {{ $servicePlans->links() }}
        </div>
      </div>
    @endif
  </div>
</div>
@endsection

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

  $table.DataTable({
    responsive: false,
    scrollX: true,
    paging: false,
    info: false,
    order: [[0, 'asc']],
    columnDefs: [{ orderable: false, targets: -1 }]
  });
});
</script>
@endpush
@endif