@extends('layouts.app', [
    'pageTitle' => 'Saree Categories & Weaving Traditions - Glamics Luxury Sarees',
    'metaDescription' => 'Explore 10+ authentic handcrafted saree categories including Kanjeevaram, Banarasi, Organza, Paithani, Chanderi, Tussar, Chettinad, and Mysore Silk.'
])

@section('content')
<!-- BREADCRUMB SECTION START -->
<div class="ul-breadcrumb">
    <div class="wow animate__fadeInUp">
        <h2 class="ul-breadcrumb-title">Saree Categories & Collections</h2>
        <div class="ul-breadcrumb-nav">
            <a href="{{ route('home') }}">Home</a>
            <i class="flaticon-arrow-point-to-right"></i>
            <span class="current-page">Categories</span>
        </div>
    </div>
</div>
<!-- BREADCRUMB SECTION END -->

<!-- CATEGORIES SHOWCASE CONTAINER START -->
<div class="ul-container py-5">
    <div class="ul-inner-container">
        
        <!-- HEADER INTRO & SEARCH BAR -->
        <div class="row align-items-end justify-content-between mb-5 g-4">
            <div class="col-lg-7 col-md-8">
                <span class="badge px-3 py-2 rounded-pill fw-semibold mb-2" style="background: #FDE8ED; color: #EF2853; font-size: 13px; letter-spacing: 0.5px;">
                    ✦ AUTHENTIC WEAVING HERITAGE ({{ $categories->count() }} CATEGORIES)
                </span>
                <h2 class="fw-bold display-6 mb-2" style="color: #2B1820; letter-spacing: -0.5px;">
                    Master Weaves & Fabric Traditions
                </h2>
                <p class="text-muted mb-0" style="font-size: 15.5px; line-height: 1.6;">
                    Discover handcrafted saree varieties from India's most celebrated artisanal looms. Click any category to explore exclusive designs and shop by your favorite weave.
                </p>
            </div>
            
            <div class="col-lg-4 col-md-4 text-md-end">
                <form action="{{ route('categories') }}" method="GET" class="d-flex gap-2">
                    <div class="input-group shadow-sm rounded-pill overflow-hidden border bg-white">
                        <input type="text" name="search" value="{{ request('search') }}" class="form-control border-0 px-3 py-2" placeholder="Search categories..." aria-label="Search categories">
                        <button class="btn border-0 px-3 text-white" type="submit" style="background: #EF2853;" title="Search">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                <circle cx="11" cy="11" r="8"></circle>
                                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
                            </svg>
                        </button>
                    </div>
                </form>
                @if(request('search'))
                    <div class="mt-2 small">
                        <span class="text-muted">Showing results for: <strong>"{{ request('search') }}"</strong></span>
                        <a href="{{ route('categories') }}" class="text-danger ms-2 text-decoration-none fw-semibold">Clear ✕</a>
                    </div>
                @endif
            </div>
        </div>

        <!-- CATEGORIES GRID -->
        <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4" id="categoriesGrid">
            @forelse($categories as $category)
                <div class="col">
                    <div class="category-showcase-card h-100 rounded-4 overflow-hidden bg-white border shadow-sm d-flex flex-column transition-all position-relative">
                        <!-- Image Wrap with Zoom & Overlay -->
                        <div class="category-card-img-wrap position-relative overflow-hidden" style="height: 250px;">
                            <img src="{{ $category->display_image }}" alt="{{ $category->name }}" class="w-100 h-100 object-fit-cover category-card-img">
                            
                            <!-- Dark Gradient Vignette for Readability -->
                            <div class="category-img-overlay position-absolute bottom-0 start-0 w-100 p-3 d-flex justify-content-between align-items-end" style="background: linear-gradient(to top, rgba(20, 8, 14, 0.75) 0%, transparent 100%);">
                                <span class="badge bg-white text-dark rounded-pill px-2.5 py-1.5 shadow-sm fw-semibold" style="font-size: 12px;">
                                    {{ $category->products_count }} {{ Str::plural('Design', $category->products_count) }}
                                </span>
                            </div>
                        </div>

                        <!-- Card Content -->
                        <div class="p-4 d-flex flex-column flex-grow-1 justify-content-between">
                            <div>
                                <h5 class="fw-bold mb-2 category-card-title">
                                    <a href="{{ route('shop', ['category' => $category->slug]) }}" class="text-dark text-decoration-none stretched-link">
                                        {{ $category->name }}
                                    </a>
                                </h5>
                                <p class="text-muted small mb-3" style="line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;">
                                    {{ $category->description ?: 'Artisanal handwoven sarees tailored for celebrations, weddings, and refined occasions.' }}
                                </p>
                            </div>

                            <!-- Card Action Footer -->
                            <div class="pt-3 border-top d-flex align-items-center justify-content-between text-danger fw-semibold small">
                                <span>Explore Sarees</span>
                                <div class="category-arrow-icon rounded-circle d-flex align-items-center justify-content-center" style="width: 28px; height: 28px; background: #FDE8ED; color: #EF2853;">
                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                                        <line x1="5" y1="12" x2="19" y2="12"></line>
                                        <polyline points="12 5 19 12 12 19"></polyline>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @empty
                <div class="col-12 py-5 text-center text-muted">
                    <div class="mb-3">
                        <i class="flaticon-sparkle" style="font-size: 3rem; color: #EF2853;"></i>
                    </div>
                    <h4>No categories found matching your search</h4>
                    <p class="small">Try searching with different keywords or explore all saree collections.</p>
                    <a href="{{ route('categories') }}" class="btn btn-danger rounded-pill px-4 mt-2" style="background: #EF2853; border-color: #EF2853;">View All Categories</a>
                </div>
            @endforelse
        </div>

        <!-- BOTTOM BOUTIQUE HIGHLIGHT BANNER -->
        <div class="mt-5 pt-4">
            <div class="rounded-4 p-4 p-md-5 text-white position-relative overflow-hidden" style="background: radial-gradient(circle at 10% 20%, #2B1820 0%, #15090F 100%); box-shadow: 0 10px 30px rgba(43, 24, 32, 0.15);">
                <div class="row align-items-center g-4 position-relative" style="z-index: 2;">
                    <div class="col-lg-8">
                        <span class="badge bg-danger rounded-pill px-3 py-1.5 mb-3" style="background: #EF2853 !important; font-size: 13px;">✦ DIRECT FROM MASTER WEAVERS</span>
                        <h3 class="fw-bold text-white mb-2">Can't Find Your Preferred Weave or Color?</h3>
                        <p class="text-light opacity-75 mb-0" style="font-size: 15px; max-width: 650px;">
                            We collaborate with weaver communities across India for custom bridal orders, authentic silk mark certification, and personalized color matching.
                        </p>
                    </div>
                    <div class="col-lg-4 text-lg-end">
                        <a href="https://wa.me/919876543210?text=Hello%20Glamics%2C%20I%20am%20looking%20for%20a%20specific%20saree%20category" target="_blank" rel="noopener noreferrer" class="btn btn-light rounded-pill px-4 py-2.5 fw-semibold shadow text-dark d-inline-flex align-items-center gap-2">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="#25D366"><path d="M12.04 2c-5.46 0-9.91 4.45-9.91 9.91 0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21 5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.01A9.816 9.816 0 0 0 12.04 2zm.01 1.67c2.2 0 4.26.86 5.82 2.42a8.225 8.225 0 0 1 2.41 5.83c0 4.54-3.7 8.24-8.24 8.24-1.48 0-2.93-.4-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.196 8.196 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.24-8.24zm4.52 11.64c-.25-.13-1.47-.72-1.7-.81-.23-.08-.39-.13-.56.13-.17.25-.64.81-.79.97-.14.17-.29.19-.54.06-.25-.13-1.06-.39-2.02-1.25-.75-.67-1.26-1.5-1.41-1.75-.15-.25-.02-.39.11-.51.11-.11.25-.29.37-.44.13-.15.17-.25.25-.42.08-.17.04-.31-.02-.44-.06-.13-.56-1.35-.77-1.85-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.44.06-.67.31-.23.25-.88.86-.88 2.1 0 1.24.9 2.44 1.03 2.61.13.17 1.77 2.7 4.29 3.79.6.26 1.07.41 1.44.53.6.19 1.15.16 1.58.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.15-1.18-.06-.11-.23-.18-.48-.3z"/></svg>
                            <span>Chat on WhatsApp</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<!-- CATEGORIES SHOWCASE CONTAINER END -->

<style>
    /* Category Cards Aesthetic Styling */
    .category-showcase-card {
        border-color: rgba(43, 24, 32, 0.08) !important;
        transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    }

    .category-showcase-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 16px 32px rgba(43, 24, 32, 0.12) !important;
        border-color: rgba(239, 40, 83, 0.35) !important;
    }

    .category-card-img {
        transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
    }

    .category-showcase-card:hover .category-card-img {
        transform: scale(1.08);
    }

    .category-card-title a {
        transition: color 0.25s ease;
    }

    .category-showcase-card:hover .category-card-title a {
        color: #EF2853 !important;
    }

    .category-arrow-icon {
        transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
    }

    .category-showcase-card:hover .category-arrow-icon {
        transform: translateX(4px);
        background: #EF2853 !important;
        color: #FFFFFF !important;
    }

    @media (max-width: 576px) {
        .category-card-img-wrap {
            height: 210px !important;
        }
    }
</style>
@endsection