@extends('user_layout.app')
@push('style')
<style>
    .product-box{
        border:1px solid #eee;
        border-radius:4px;
        margin-bottom:30px;
        transition:all .3s ease;
        background:#fff;
    }
    .product-box:hover{
        box-shadow:0 10px 25px rgba(0,0,0,.15);
        transform:translateY(-5px);
    }
    .product-img{
        position:relative;
        overflow:hidden;
    }
    .product-img img{
        width:100%;
        transition:all .4s ease;
    }
    .product-box:hover img{
        transform:scale(1.1);
    }
    .price-tag{
        position:absolute;
        top:10px;
        right:10px;
        background:#e74c3c;
        color:#fff;
        padding:5px 10px;
        font-size:14px;
        border-radius:3px;
    }
    .product-info{
        padding:15px;
        text-align:center;
    }
    .product-info h4{
        font-size:16px;
        font-weight:600;
        margin:10px 0;
    }
    .product-info p{
        font-size:13px;
        color:#777;
        height:40px;
        overflow:hidden;
    }
    .btn-cart{
        background:#cc9a4b;
        color:#fff;
        border-radius:20px;
        padding:7px 20px;
        font-size:13px;
    }
    .btn-cart:hover{
        background:#db9b35;
        color:#fff;
    }
    section.products {
        padding: 83px 0px 37px;
    }
    






.card {
  border: none;
}

.card-header {
  background: none;
  border: none;
}

.btn-primary {
  background-color: #3b86c6;
  border: none;
  font-size: 18px;
}

.btn-primary:hover {
  background-color: #2c6da3;
}
div.space {
    margin: 23px 0px;
}





.accordion-link {
  color: #1a73e8;
  text-decoration: none;
}

.accordion-link:hover {
  text-decoration: none;
}

.accordion-link .icon {
    font-size: 27px;
    font-weight: bold;
    vertical-align: middle;
    margin-right: 10px;
}

div#customAccordion .accordion-link {
    border: 1px solid #dbdbdb;
    font-size: 21px;
}




.carousel-item {
  height: 500px;
}
.carousel-item img {
  height: 500px;
  object-fit: cover;
}
.carousel-caption {
  bottom: 35%;
}






















     /* Product Card */
        .product-card {
            background: #fff;
            border-radius: 6px;
            overflow: hidden;
            box-shadow: 0 0 20px rgba(0,0,0,0.06);
            transition: 0.3s;
        }

        .product-card:hover {
            transform: translateY(-5px);
        }

    .product-img {
    position: relative;
    padding: 30px;
    text-align: center;
    width: 100%;
    height: 285px;
    object-fit: cover;
}

        .product-img img {
            max-width: 100%;
        }

        /* Button & Icons hidden */
        .select-btn,
        .product-icons {
            opacity: 0;
            visibility: hidden;
            transition: 0.3s ease;
        }

        /* Show on hover */
        .product-card:hover .select-btn,
        .product-card:hover .product-icons {
            opacity: 1;
            visibility: visible;
        }

        /* Select Button */
        .select-btn {
            position: absolute;
            bottom: 15px;
            left: 50%;
            width:100%;
            transform: translate(-50%, 10px);
            background: #1e73be;
            color: #fff;
            padding: 10px 28px;
            font-size: 14px;
            font-weight: 600;
            text-decoration: none;
        }

        .product-card:hover .select-btn {
            transform: translate(-50%, 0);
        }

        .select-btn:hover {
            background: #155a99;
            color: #fff;
        }

        /* Icons */
        .product-icons {
            position: absolute;
            top: 15px;
            right: 15px;
            display: flex;
            flex-direction: column;
        }

        .product-icons a {
            width: 38px;
            height: 38px;
            background: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #000;
            margin-bottom: 10px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.15);
            transition: 0.3s;
        }

        .product-icons a:hover {
            background: #1e73be;
            color: #fff;
        }

        /* Product Body */
        .product-body {
            padding: 20px;
            text-align: center;
        }

        .product-cat {
            font-size: 13px;
            color: #777;
            margin-bottom: 8px;
        }

        .product-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .product-price .old {
            text-decoration: line-through;
            color: #999;
            margin-right: 8px;
        }

        .product-price .new {
            color: red;
            font-weight: 600;
        }







</style>
@endpush
@section('content')


   {{-- SLIDER --}}
    <!--<div id="mainSlider" class="carousel slide" data-ride="carousel">-->
    
        <!-- Slides -->
    <!--    <div class="carousel-inner">-->
    
            <!-- Slide 1 -->
    <!--        <div class="carousel-item active">-->
    <!--            <img src="{{ asset('user_assets/images/mfmslider1.jpeg') }}" class="d-block w-100" alt="">-->
    <!--        </div>-->
    
            <!-- Slide 2 -->
    <!--        <div class="carousel-item">-->
    <!--            <img src="{{ asset('user_assets/images/mfmslider2.jpeg') }}" class="d-block w-100" alt="">-->
    <!--        </div>-->
    
            <!-- Slide 3 -->
    <!--        <div class="carousel-item">-->
    <!--            <img src="{{ asset('user_assets/images/mfmslider3.jpeg') }}" class="d-block w-100" alt="">-->
    <!--        </div>-->
    
    <!--    </div>-->
    
        <!-- Controls -->
    <!--    <a class="carousel-control-prev" href="#mainSlider" data-slide="prev">-->
    <!--        <span class="carousel-control-prev-icon"></span>-->
    <!--    </a>-->
    <!--    <a class="carousel-control-next" href="#mainSlider" data-slide="next">-->
    <!--        <span class="carousel-control-next-icon"></span>-->
    <!--    </a>-->
    <!--</div>-->
    
    
    @php
    // DB se images (controller se $slids aa raha hai)
    $sliderImages = $slids->pluck('image')->toArray();

    // Fallback images
    $fallbackImages = [
        'user_assets/images/mfmslider1.jpeg',
        'user_assets/images/mfmslider2.jpeg',
        'user_assets/images/mfmslider3.jpeg',
    ];

    // Agar DB me images kam hain to repeat / fallback add karo
    while (count($sliderImages) < 3) {
        foreach ($fallbackImages as $img) {
            if (count($sliderImages) >= 3) break;
            $sliderImages[] = $img;
        }
    }
@endphp

<div id="mainSlider" class="carousel slide" data-ride="carousel">

    <div class="carousel-inner">
        @foreach($sliderImages as $index => $img)
            <div class="carousel-item {{ $index == 0 ? 'active' : '' }}">
                <img src="{{ asset($img) }}" class="d-block w-100" alt="Slider Image">
            </div>
        @endforeach
    </div>

    <!-- Controls -->
    <a class="carousel-control-prev" href="#mainSlider" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#mainSlider" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>

</div>

    
    
    <section>
        <div class="container mt-4">
    
          
            <div id="productAccordion">
                
                 <div class="card mb-2">
                    <div class="card-header p-0">
                        <button class="btn btn-primary btn-block text-center py-3"
                                data-toggle="collapse" data-target="#ac">
                            Air Conditioner
                        </button>
                    </div>
    
                    <div id="ac"
                         class="collapse {{ request()->has('sub_category_id') ? 'show' : '' }}"
                         data-parent="#productAccordion">
    
                         <!--Filter Section (AC Sub Categories only) -->
                        <form method="GET" action="{{ route('user.online_shop') }}">
                            <div class="row mb-4">
                                <div class="col-md-12 space">
                                    <select class="form-control"
                                            name="sub_category_id"
                                            onchange="this.form.submit()">
                                        <option value="">Filter Sub Category (All)</option>
    
                                        @foreach($acSubCategories as $sub)
                                            <option value="{{ $sub->id }}"
                                                {{ (string)request('sub_category_id') === (string)$sub->id ? 'selected' : '' }}>
                                                {{ $sub->name }}
                                            </option>
                                        @endforeach
                                    </select>
                                </div>
    
                                <div class="col-md-12">
                                    <a href="{{ route('user.online_shop') }}" class="btn btn-primary btn-block">
                                        CLEAR FILTER
                                    </a>
                                </div>
                            </div>
                        </form>
    
                       
                        <div class="row text-center">
                            @forelse($acProducts as $product)
                                @php $image = $product->firstImage(); @endphp
                                  <div class="col-md-4">
                                    <div class="product-card">
                        
                                        <div class="product-img">
                                      <img class="img-fluid mb-3"
                                         src="{{ $image ? asset('uploads/products/images/' . $image->image) : asset('assets/no-image.png') }}"
                                         alt="{{ $product->name }}">

                                   
                        
                                            <a href="{{ route('user-products.show', $product->id) }}" class="select-btn">SELECT OPTIONS</a>
                        
                                            <div class="product-icons">
                                                <a href="#"><i class="fa fa-eye"></i></a>
                                                <a href="#"><i class="fa fa-heart"></i></a>
                                            </div>
                                        </div>
                        
                                        <div class="product-body">
                                           <p class="product-cat">
                                              {{ $freeCategory->name ?? 'Home Appliances - Free Standing' }},
                                              {{ $sub->name }}
                                            </p>
                                            <h5 class="product-title">
                                               {{ $product->name }}
                                            </h5>
                                            
                                             <!-- ✅ QR Code from Database -->
                                        <div class="text-center mt-2">
                                            @if($product->barcode)
                                                <img 
                                                    src="{{ asset($product->barcode) }}"
                                                    class="img-thumbnail"
                                                    width="80"
                                                    alt="QR Code"
                                                    style="cursor: default;">
                                            @else
                                                <small class="text-danger">QR not generated</small>
                                            @endif
                                        </div>
                                             
                                            <div class="product-price">
                                                <span class="old">QR {{  number_format($product->standard_price, 2) }}</span>
                                                <span class="new"> QR {{number_format($product->special_price)}}</span>
                                                 
                                            </div>
                                        </div>
                        
                                    </div>
                                </div>
                            @empty
                                <div class="col-md-12">
                                    <p class="text-muted">No products found.</p>
                                </div>
                            @endforelse
                        </div>
    
                    </div>
                </div>
    
    
                {{-- =========================
                    WATER TREATMENT
                ========================= --}}
                <div class="card mb-2">
                    <div class="card-header p-0">
                        <button class="btn btn-primary btn-block text-center py-3"
                                data-toggle="collapse" data-target="#water">
                            Water Treatment
                        </button>
                    </div>
    
                    <div id="water" class="collapse" data-parent="#productAccordion">
    
                      
                        <div class="row text-center">
                            @forelse($waterProducts as $product)
                                @php $image = $product->firstImage(); @endphp
                                
                                <div class="col-md-4">
                                    <div class="product-card">
                        
                                        <div class="product-img">
                                       <img src="{{ $image ? asset('uploads/products/images/' . $image->image) : asset('user_assets/images/product1.jpg') }}"
                                            class="img-fluid mb-3"
                                            alt="{{ $product->name }}">

                                   
                        
                                            <a href="{{ route('user-products.show', $product->id) }}" class="select-btn">SELECT OPTIONS</a>
                        
                                            <div class="product-icons">
                                                <a href="#"><i class="fa fa-eye"></i></a>
                                                <a href="#"><i class="fa fa-heart"></i></a>
                                            </div>
                                        </div>
                        
                                        <div class="product-body">
                                           <p class="product-cat">
                                              {{ $freeCategory->name ?? 'Home Appliances - Free Standing' }},
                                              {{ $sub->name }}
                                            </p>
                                            <h5 class="product-title">
                                               {{ $product->name }}
                                            </h5>
                                            
                                             <!-- ✅ QR Code from Database -->
                                                <div class="text-center mt-2">
                                                    @if($product->barcode)
                                                        <img 
                                                            src="{{ asset($product->barcode) }}"
                                                            class="img-thumbnail"
                                                            width="80"
                                                            alt="QR Code"
                                                            style="cursor: default;">
                                                    @else
                                                        <small class="text-danger">QR not generated</small>
                                                    @endif
                                                </div>
                                             
                                            <div class="product-price">
                                                <span class="old">QR {{  number_format($product->standard_price, 2) }}</span>
                                                <span class="new"> QR {{number_format($product->special_price)}}</span>
                                                 
                                            </div>
                                        </div>
                        
                                    </div>
                                </div>
    
                                
    
                            @empty
                                <div class="col-md-12">
                                    <p class="text-muted">No products found.</p>
                                </div>
                            @endforelse
                        </div>
    
                    </div>
                </div>
    
    
                {{-- =========================
                    HOME APPLIANCES - FREE STANDING
                ========================= --}}
                  <div class="card mb-2">
                        <div class="card-header p-0">
                            <button class="btn btn-primary btn-block text-center py-3"
                                    data-toggle="collapse" data-target="#free">
                                Home Appliances - Free Standing
                            </button>
                        </div>
                    
                        <div id="free" class="collapse" data-parent="#productAccordion">
                    
                            <div class="container mt-4">
                                <div id="customAccordion">
                    
                                    {{-- Loop all sub-categories --}}
                                    @forelse(($freeSubCategories ?? collect()) as $sub)
                                        @php
                                            // Create a unique collapse id for each subcategory
                                            $collapseId = 'freeSub_' . $sub->id;
                    
                                            // Get products for this subcategory from grouped collection
                                            $productsForThisSub = ($freeProductsBySub[$sub->id] ?? collect());
                                        @endphp
                    
                                        <div class="card">
                                            <div class="card-header p-0">
                                                <a class="d-flex justify-content-between align-items-center px-3 py-2 accordion-link"
                                                   data-toggle="collapse"
                                                   href="#{{ $collapseId }}">
                                                    <span><span class="icon">+</span>{{ $sub->name }}</span>
                                                </a>
                                            </div>
                    
                                            <div id="{{ $collapseId }}" class="collapse" data-parent="#customAccordion">
                                                <div class="card-body">
                                                    <div class="row text-center">
                    
                                                        @forelse($productsForThisSub as $product)
                                                            @php $image = $product->firstImage(); @endphp
                                                            
                                                            
                                                            <div class="col-md-4">
                                                                <div class="product-card">
                                                    
                                                                    <div class="product-img">
                                                                     <img src="{{ $image ? asset('uploads/products/images/' . $image->image) : asset('user_assets/images/product1.jpg') }}"
                                                                     class="img-fluid mb-3"
                                                                     alt="{{ $product->name }}">
                    
                                                               
                                                    
                                                                        <a href="{{ route('user-products.show', $product->id) }}" class="select-btn">SELECT OPTIONS</a>
                                                    
                                                                        <div class="product-icons">
                                                                            <a href="#"><i class="fa fa-eye"></i></a>
                                                                            <a href="#"><i class="fa fa-heart"></i></a>
                                                                        </div>
                                                                    </div>
                                                    
                                                                    <div class="product-body">
                                                                       <p class="product-cat">
                                                                          {{ $freeCategory->name ?? 'Home Appliances - Free Standing' }},
                                                                          {{ $sub->name }}
                                                                        </p>
                                                                        <h5 class="product-title">
                                                                           {{ $product->name }}
                                                                        </h5>
                                                                        
                                                                         <!-- ✅ QR Code from Database -->
                                                                            <div class="text-center mt-2">
                                                                                @if($product->barcode)
                                                                                    <img 
                                                                                        src="{{ asset($product->barcode) }}"
                                                                                        class="img-thumbnail"
                                                                                        width="80"
                                                                                        alt="QR Code"
                                                                                        style="cursor: default;">
                                                                                @else
                                                                                    <small class="text-danger">QR not generated</small>
                                                                                @endif
                                                                            </div>
                                                                         
                                                                        <div class="product-price">
                                                                            <span class="old">QR {{  number_format($product->standard_price, 2) }}</span>
                                                                            <span class="new"> QR {{number_format($product->special_price)}}</span>
                                                                             
                                                                        </div>
                                                                    </div>
                                                    
                                                                </div>
                                                            </div>
                            
                                                        @empty
                                                            <div class="col-md-12">
                                                                <p class="text-muted">No products in {{ $sub->name }}.</p>
                                                            </div>
                                                        @endforelse
                    
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @empty
                                        <div class="alert alert-info">
                                            No sub-categories found for Home Appliances - Free Standing.
                                        </div>
                                    @endforelse
                    
                                </div>
                            </div>
                    
                        </div>
                    </div>

                
                @foreach($categories as $category)
                    @php
                        $catData = $productsByCategory->get($category->id, ['selected_sub_id' => null, 'products' => collect()]);
                        $selectedSubId = $catData['selected_sub_id'];
                        $products = $catData['products'];
                
                        // collapse open if this category has filter selected
                        $isOpen = !empty($selectedSubId);
                        $collapseId = 'cat_' . $category->id;
                    @endphp
                
                    <div class="card mb-2">
                        <div class="card-header p-0">
                            <button class="btn btn-primary btn-block text-center py-3"
                                    data-toggle="collapse"
                                    data-target="#{{ $collapseId }}">
                                {{ $category->name }}
                            </button>
                        </div>
                
                        <div id="{{ $collapseId }}"
                             class="collapse {{ $isOpen ? 'show' : '' }}"
                             data-parent="#productAccordion">
                
                           
                            <form method="GET" action="{{ route('user.online_shop') }}">
                                {{-- preserve other category filters --}}
                                @if(is_array($subCategoryFilters))
                                    @foreach($subCategoryFilters as $cId => $sId)
                                        @if((int)$cId !== (int)$category->id && !empty($sId))
                                            <input type="hidden" name="sub_category[{{ $cId }}]" value="{{ $sId }}">
                                        @endif
                                    @endforeach
                                @endif
                
                                <div class="row mb-4">
                                    <div class="col-md-12 space">
                                        <select class="form-control"
                                                name="sub_category[{{ $category->id }}]"
                                                onchange="this.form.submit()">
                                            <option value="">All Sub Categories</option>
                
                                            @foreach($category->subCategories as $sub)
                                                <option value="{{ $sub->id }}"
                                                    {{ (string)$selectedSubId === (string)$sub->id ? 'selected' : '' }}>
                                                    {{ $sub->name }}
                                                </option>
                                            @endforeach
                                        </select>
                                    </div>
                
                                    <div class="col-md-12">
                                        <a href="{{ route('user.online_shop') }}" class="btn btn-primary btn-block">
                                            CLEAR FILTER
                                        </a>
                                    </div>
                                </div>
                            </form>
                
                         
                            <div class="row text-center">
                                @forelse($products as $product)
                                    @php $image = $product->firstImage(); @endphp
                
                                    <div class="col-md-4">
                                        <div class="product-card">
                
                                            <div class="product-img">
                                                <img class="img-fluid mb-3"
                                                     src="{{ $image ? asset('uploads/products/images/' . $image->image) : asset('assets/no-image.png') }}"
                                                     alt="{{ $product->name }}">
                
                                                <a href="{{ route('user-products.show', $product->id) }}" class="select-btn">
                                                    SELECT OPTIONS
                                                </a>
                
                                                <div class="product-icons">
                                                    <a href="#"><i class="fa fa-eye"></i></a>
                                                    <a href="#"><i class="fa fa-heart"></i></a>
                                                </div>
                                            </div>
                
                                            <div class="product-body">
                                                <p class="product-cat">
                                                    {{ $product->category->name ?? 'Category' }},
                                                    {{ $product->subCategory->name ?? 'All' }}
                                                </p>
                
                                                <h5 class="product-title">{{ $product->name }}</h5>
                                                
                                                 <!-- ✅ QR Code from Database -->
                                                <div class="text-center mt-2">
                                                    @if($product->barcode)
                                                        <img 
                                                            src="{{ asset($product->barcode) }}"
                                                            class="img-thumbnail"
                                                            width="80"
                                                            alt="QR Code"
                                                            style="cursor: default;">
                                                    @else
                                                        <small class="text-danger">QR not generated</small>
                                                    @endif
                                                </div>
                
                                                <div class="product-price">
                                                    <span class="old">QR {{ number_format($product->standard_price, 2) }}</span>
                                                    <span class="new">QR {{ number_format($product->special_price, 2) }}</span>
                                                </div>
                                            </div>
                
                                        </div>
                                    </div>
                
                                @empty
                                    <div class="col-md-12">
                                        <p class="text-muted">No products found.</p>
                                    </div>
                                @endforelse
                            </div>
                
                        </div>
                    </div>
                @endforeach
                
                
                
            </div>

        </div>
    </section>

    






  
  

@endsection