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

    <div class="table-responsive">
      <table @if($services->count() > 0) id="services-table" @endif class="table">
        <thead>
          <tr>
            <th>Name</th>
            <th>Category</th>
            <th>Country</th>
            <th>Service Plans</th>
            <th>Amount / Price</th>
            <th>Slug</th>
            <th>Status</th>
            <th>Action</th>
          </tr>
        </thead>
        <tbody>
          @php
            $countryList = function_exists('marketplaceAvailableCountries') ? marketplaceAvailableCountries() : [];
          @endphp
          @forelse($services as $service)
            @php
              $displayPrice = $service->price ?? ($service->plans?->first()?->price ?? null);
              $flagClass = $countryList[$service->country]['flag_class'] ?? 'fi fi-gb';
            @endphp
            <tr>
              <td>
                <div class="d-flex align-items-center gap-2">
                  @if($service->logo)
                    <img src="{{ $service->logo }}" alt="{{ $service->name }}" style="width: 24px; height: 24px; object-fit: contain; border-radius: 4px;" onerror="this.style.display='none'">
                  @endif
                  <span class="fw-semibold">{{ $service->name }}</span>
                </div>
              </td>
              <td>{{ $service->category->name ?? 'N/A' }}</td>
              <td>
                @if($service->country)
                  <span class="d-inline-flex align-items-center gap-1">
                    <span class="{{ $flagClass }}" style="width: 16px; height: 12px; border-radius: 2px;"></span>
                    <span>{{ $service->country }}</span>
                  </span>
                @else
                  <span class="text-muted">Global / All</span>
                @endif
              </td>
              <td>
                @if($service->plans && $service->plans->isNotEmpty())
                  <div class="d-flex flex-wrap gap-1">
                    @foreach($service->plans as $p)
                      <span class="badge bg-label-primary">{{ $p->name }}</span>
                    @endforeach
                  </div>
                @else
                  <span class="text-muted small">-</span>
                @endif
              </td>
              <td>
                @if($displayPrice !== null && $displayPrice > 0)
                  <span class="badge bg-label-warning fw-bold">${{ number_format($displayPrice, 2) }}</span>
                @else
                  <span class="text-muted">-</span>
                @endif
              </td>
              <td><code class="small">{{ $service->slug }}</code></td>
              <td><span class="badge bg-label-{{ $service->is_active ? 'success' : 'warning' }}">{{ $service->is_active ? 'Active' : 'Pending' }}</span></td>
              <td>
                <div class="d-flex gap-2">
                  @can('update services')
                    <a href="{{ route('admin.services.edit', $service) }}" class="btn btn-sm btn-outline-primary">Edit</a>
                  @endcan

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

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

@if($services->count() > 0)
@push('script')
<script>
$(document).ready(function () {
  const $table = $('#services-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