@extends('layouts.frontend')

@section('title', $collection->title)

@section('content')
<div class="container py-4 py-md-5">
  <div class="row mb-3 mb-md-4">
    <div class="col-12">
      @if($collection->image)
        <img src="{{ asset('storage/' . $collection->image) }}" alt="{{ $collection->title }}" class="img-fluid mb-2 mb-md-3 w-100 collection-header-image" style="max-height: 300px; object-fit: cover;">
      @endif
      <h1 class="text-uppercase collection-title mb-2 mb-md-3">{{ $collection->title }}</h1>
      @if($collection->description)
        <p class="lead collection-description mb-2 mb-md-3">{{ $collection->description }}</p>
      @endif
      <p class="text-muted collection-count mb-2 mb-md-3">{{ $products->total() }} product(s) in this collection</p>
    </div>
  </div>
  
  @if($products->count() > 0)
    <div class="row g-3">
      @foreach($products as $product)
        <div class="col-6 col-sm-4 col-md-3 mb-3 mb-md-4">
          @include('frontend.components.product-card', ['product' => $product])
        </div>
      @endforeach
    </div>
    <div class="mt-3 mt-md-4">
      {{ $products->links() }}
    </div>
  @else
    <div class="text-center py-4 py-md-5">
      <p class="fs-5 fs-md-4 mb-2 mb-md-3">No products found in this collection at Rathore Collection</p>
      <p class="text-muted mb-3 mb-md-4">Discover our premium stitched and unstitched garments for men, women, and children in other collections.</p>
      <a href="{{ route('products.index') }}" class="btn btn-primary">Browse All Products</a>
    </div>
  @endif
</div>

@push('styles')
<style>
  /* Collection Page Responsive Styles */
  @media (max-width: 767.98px) {
    .collection-header-image {
      max-height: 200px !important;
    }

    .collection-title {
      font-size: 1.5rem !important;
      line-height: 1.3;
    }

    .collection-description {
      font-size: 0.9rem !important;
      line-height: 1.5;
    }

    .collection-count {
      font-size: 0.85rem !important;
    }
  }

  @media (max-width: 575.98px) {
    .collection-title {
      font-size: 1.25rem !important;
    }

    .collection-description {
      font-size: 0.85rem !important;
    }

    .collection-count {
      font-size: 0.8rem !important;
    }

    .collection-header-image {
      max-height: 180px !important;
    }
  }
</style>
@endpush
@endsection