@extends('layouts.subscriptions')

@push('style')
<style>
  .service-back {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #111;
    text-decoration: none;
  }

  .service-top-pill {
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #2f2f2f;
    background: #fff;
  }

  .service-banner {
    background: linear-gradient(120deg, #5c1fa3 0%, #7b30d7 100%);
    border-radius: 8px;
    color: #fff;
    padding: 20px 24px;
  }

  .service-banner-title {
    font-size: 29px;
    font-weight: 700;
  }

  .service-banner-price {
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: var(--user-accent, #ffcb4b);
  }

  .service-tab-pill {
    border-radius: 8px;
    padding: 7px 12px;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background: #9ea0a4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .service-tab-pill.active {
    background: var(--user-accent, #ff9800);
  }

  .sort-btn {
    border: 0;
    border-radius: 10px;
    padding: 8px 14px;
    font-weight: 700;
    color: #fff;
    background: var(--user-accent, #c98e4a);
  }

  .sort-btn:hover {
    background: var(--user-accent-hover, #b57a37);
  }

  .filter-chip {
    border: 1px solid #ececec;
    border-radius: 9px;
    padding: 12px 16px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 9px;
    font-weight: 600;
    font-size: 14px;
  }

  .listing-card {
    border: 1px solid #8ac54b;
    border-radius: 8px;
    padding: 14px;
    background: #fff;
    position: relative;
  }

  .listing-online {
    position: absolute;
    right: 12px;
    top: -9px;
    background: #d9efbb;
    color: #57a30d;
    border-radius: 7px;
    padding: 1px 8px;
    font-size: 12px;
    font-weight: 600;
  }

  .score-ring {
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 4px solid #f3bd3f;
    color: #5fbb2d;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
  }

  .listing-price {
    color: var(--user-accent, #ff9200);
    font-weight: 700;
    font-size: 38px;
    line-height: 1;
    margin: 12px 0 8px;
  }

  .listing-price span {
    font-size: 16px;
    color: #111;
    font-weight: 500;
  }

  .seat-icons {
    display: flex;
    gap: 5px;
    font-size: 15px;
    margin-bottom: 10px;
  }

  .seat-icons .filled {
    color: var(--user-accent, #f09300);
  }

  .seat-icons .empty {
    color: #111;
  }

  .join-btn {
    background: var(--user-accent, #ff9800);
    border-color: var(--user-accent, #ff9800);
    color: #fff;
    font-weight: 700;
    border-radius: 8px;
    width: 100%;
  }
</style>
@endpush

@section('content')
@php
  $lowestPrice = $summary['lowest_price'] ?? 0;
  $listingCount = $summary['listing_count'] ?? 0;
  $availableSlots = $summary['total_available_slots'] ?? 0;
  $currencySymbol = $selectedCountryMeta['currency_symbol'] ?? '€';
@endphp

<div class="container-xxl flex-grow-1 container-p-y">
  <div class="d-flex justify-content-between align-items-center gap-3 flex-wrap mb-3">
    <div class="d-flex align-items-center gap-2">
      <a href="{{ route('subscriptions.index', ['country' => $selectedCountry]) }}" class="service-back">
        <i class="icon-base ti tabler-chevron-left icon-md"></i>
      </a>
      <h2 class="mb-0 fw-bold">{{ $subscription->service->name }}</h2>
    </div>

    <div class="d-flex gap-2 flex-wrap">
      <span class="service-top-pill"><i class="icon-base ti tabler-link icon-xs me-1"></i> Type</span>
      <span class="service-top-pill"><i class="icon-base ti tabler-file-text icon-xs me-1"></i> Infos</span>
      <span class="service-top-pill"><i class="icon-base ti tabler-help-circle icon-xs me-1"></i> FAQ</span>
    </div>
  </div>

  <div class="service-banner mb-4">
    <div class="row g-3 align-items-center">
      <div class="col-lg-7">
        <div class="service-banner-title">Share your {{ $subscription->service->name }} directly</div>
        <div class="mt-2">{{ $availableSlots }} slots currently available. New joins happen fast.</div>
      </div>
      <div class="col-lg-5 text-lg-end">
        <div class="small text-white-50">Starting from</div>
        <div class="service-banner-price">{{ number_format($lowestPrice, 2) }} {{ $currencySymbol }}<span class="fs-6 text-white"> / month</span></div>
        <div class="small mt-2">Across {{ $listingCount }} listing(s)</div>
      </div>
    </div>
  </div>

  <div class="d-flex justify-content-between align-items-center flex-wrap gap-2 mb-4">
    <div class="d-flex gap-2 flex-wrap">
      <a
          href="{{ route('subscriptions.show', ['subscription' => $subscription->id, 'country' => $selectedCountry]) }}"
          class="service-tab-pill {{ $selectedPlan <= 0 ? 'active' : '' }}"
      >
        All ({{ $listingCount }})
      </a>
      @foreach($planCounts as $plan)
        <a
          href="{{ route('subscriptions.show', ['subscription' => $subscription->id, 'plan' => $plan['id'], 'country' => $selectedCountry]) }}"
          class="service-tab-pill {{ $selectedPlan === $plan['id'] ? 'active' : '' }}"
        >
          {{ $plan['name'] }} ({{ $plan['count'] }})
        </a>
      @endforeach
    </div>

    <button type="button" class="sort-btn"><i class="icon-base ti tabler-sort-ascending icon-sm me-1"></i> Sort</button>
  </div>

  <div class="fw-bold mb-2">Sort by:</div>
  <div class="row g-2 mb-4">
    <div class="col-lg-3 col-md-6">
      <div class="filter-chip"><i class="icon-base ti tabler-rosette-discount-check icon-sm"></i> Verified Invoice</div>
    </div>
    <div class="col-lg-3 col-md-6">
      <div class="filter-chip"><i class="icon-base ti tabler-point-filled icon-sm text-success"></i> Online</div>
    </div>
    <div class="col-lg-3 col-md-6">
      <div class="filter-chip"><i class="icon-base ti tabler-medal icon-sm"></i> Trust score</div>
    </div>
    <div class="col-lg-3 col-md-6">
      <div class="filter-chip"><i class="icon-base ti tabler-coins icon-sm"></i> Lowest price</div>
    </div>
  </div>

  @if($serviceSubscriptions->isEmpty())
    <div class="card">
      <div class="card-body py-5 text-center">No listings found for this filter.</div>
    </div>
  @else
    <div class="row g-3">
      @foreach($serviceSubscriptions as $item)
        @php
          $totalSeats = (int) $item->total_slots;
          $remainingSeats = (int) $item->available_slots;
          $occupiedSeats = max($totalSeats - $remainingSeats, 0);
          $visibleSeatSlots = min(max($totalSeats, 1), 6);
          $trustScore = (int) max(60, min(100, 80 + (float) ($item->owner?->trust_score ?? 0)));
          $isJoinable = $item->status === 'active' && $remainingSeats > 0;
        @endphp
        <div class="col-lg-4 col-md-6">
          <div class="listing-card h-100">
            <span class="listing-online">Online</span>

            <div class="d-flex align-items-center">
              <div class="score-ring">{{ $trustScore }}</div>
              <div>
                <h5 class="mb-0 fw-semibold">{{ $item->owner?->name ?? 'N/A' }}</h5>
                <small class="text-muted">{{ $item->servicePlan?->name ?? 'Plan N/A' }}</small>
              </div>
            </div>

            <div class="listing-price">{{ number_format(round((float) $item->price_per_slot * (float) ($selectedCountryMeta['rate'] ?? 1), 2), 2) }}<span>{{ $currencySymbol }} / month</span></div>

            <div class="seat-icons">
              @for($i = 0; $i < $visibleSeatSlots; $i++)
                <i class="icon-base ti tabler-user-filled {{ $i >= $occupiedSeats ? 'empty' : 'filled' }}"></i>
              @endfor
            </div>

            <div class="text-end small mb-3">{{ $remainingSeats }} remaining seat(s)</div>

            @auth
              @if((int) auth()->id() === (int) $item->owner_id)
                <button type="button" class="btn btn-secondary w-100" disabled>Your Listing</button>
              @elseif(! $isJoinable)
                <button type="button" class="btn btn-secondary w-100" disabled>Not Available</button>
              @else
                <a href="{{ route('subscriptions.join.create', $item) }}" class="btn join-btn">Join</a>
              @endif
            @else
              @if(! $isJoinable)
                <button type="button" class="btn btn-secondary w-100" disabled>Not Available</button>
              @else
                <a href="{{ route('subscriptions.join.create', $item) }}" class="btn join-btn">Login to Join</a>
              @endif
            @endauth
          </div>
        </div>
      @endforeach
    </div>
  @endif
</div>
@endsection