@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;
        height: 221px;
    object-fit: cover;
    }
    .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: 15px;
}

.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;
}







</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>
    

  <section class="products">
     <div class="container py-5">
     <div class="row">
            @foreach($products as $product)
        
                @php
                    $image = $product->firstImage();
                @endphp
        
                <div class="col-md-3">
                    <div class="product-box">
        
                        <!-- Product Image + Price -->
                        <div class="product-img">
                            @if($image)
                                <img src="{{ asset('uploads/products/images/' . $image->image) }}" alt="{{ $product->name }}">
                            @else
                                <img src="{{ asset('user_assets/images/no-image.png') }}" alt="No Image">
                            @endif
        
                            <!-- Dynamic Price Tag -->
                            <span class="price-tag">
                               QR  {{ number_format( $product->standard_price, 2) }}
                            </span>
                        </div>
        
                        <!-- Product Info -->
                        <div class="product-info">
                            <!-- Product Name -->
                            <h4>{{ $product->name }}</h4>
        
                            <!-- ✅ 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>
        
                            <!-- View Details Button -->
                            <a href="{{ route('user-products.show', $product->id) }}" 
                               class="btn btn-primary mt-2 btn-sm">
                                View Details
                            </a>
                        </div>
        
                    </div>
                </div>
        
            @endforeach
    </div>

        
        </div>
  </section>
  
  
  
  
  
  
  

@endsection