@extends('layouts.frontend')

@section('title', 'Collections - Premium Fashion | Rathore Collection')

@section('content')
<div class="container py-4 py-md-5">
  <div class="row mb-3 mb-md-4">
    <div class="col-12 text-center">
      <h1 class="text-uppercase mb-2 mb-md-3 collection-page-title">Our Collections</h1>
      <p class="text-muted collection-page-description">Discover Rathore Collection's carefully curated selection of premium stitched and unstitched garments for men, women, and children. Each collection features traditional elegance and modern sophistication.</p>
    </div>
  </div>
  
  @if($collections->count() > 0)
    <div class="row g-3">
      @foreach($collections as $collection)
        <div class="col-12 col-sm-6 col-md-4 mb-3 mb-md-4">
          <div class="card h-100 shadow-sm">
            <div class="image-holder collection-card-image" style="height: 300px; overflow: hidden;">
              <a href="{{ route('collections.show', $collection->slug) }}">
                @if($collection->image)
                  <img src="{{ asset('storage/' . $collection->image) }}" alt="{{ $collection->title }}" class="img-fluid w-100" style="height: 100%; object-fit: cover;">
                @else
                  <img src="{{ asset('theme/images/banner-image-1.jpg') }}" alt="{{ $collection->title }}" class="img-fluid w-100" style="height: 100%; object-fit: cover;">
                @endif
              </a>
            </div>
            <div class="card-body">
              <h5 class="card-title text-uppercase collection-card-title">
                <a href="{{ route('collections.show', $collection->slug) }}" class="text-decoration-none text-dark">
                  {{ $collection->title }}
                </a>
              </h5>
              @if($collection->description)
                <p class="card-text collection-card-description">{{ strlen($collection->description) > 100 ? substr($collection->description, 0, 100) . '...' : $collection->description }}</p>
              @endif
              <p class="text-muted small collection-card-count mb-2 mb-md-3">{{ $collection->products->count() }} product(s)</p>
              <a href="{{ route('collections.show', $collection->slug) }}" class="btn btn-dark text-uppercase w-100 w-md-auto">View Collection</a>
            </div>
          </div>
        </div>
      @endforeach
    </div>
    <div class="mt-3 mt-md-4">
      {{ $collections->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 collections available at the moment at Rathore Collection.</p>
      <p class="text-muted mb-3 mb-md-4">Explore our complete range of premium stitched and unstitched garments for men, women, and children.</p>
      <a href="{{ route('products.index') }}" class="btn btn-primary">Browse All Products</a>
    </div>
  @endif
</div>

@push('styles')
<style>
  /* Collections Index Page Responsive Styles */
  @media (max-width: 767.98px) {
    .collection-page-title {
      font-size: 1.5rem !important;
    }

    .collection-page-description {
      font-size: 0.9rem !important;
      line-height: 1.5;
      padding: 0 10px;
    }

    .collection-card-image {
      height: 200px !important;
    }

    .collection-card-title {
      font-size: 0.95rem !important;
    }

    .collection-card-description {
      font-size: 0.85rem !important;
      line-height: 1.4;
    }

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

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

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

    .collection-card-image {
      height: 180px !important;
    }

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

    .collection-card-description {
      font-size: 0.8rem !important;
    }
  }
</style>
@endpush
@endsection