@extends('web.layouts.container')

@section('content')
    <section class="products-sec products-pg">
        @if(count($products))
            @foreach($products as $product)
                <div class="item {{$loop->even ? 'dark-item dark-green' : ''}}">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-6 m-auto">
                                <div class="text-box text-center wow text-focus-in">
                                    <h6 class="h6 text-uppercase">{{$product->category_name}}</h6>
                                    <h4 class="h4 mb-4 text-uppercase">{{$product->name}}</h4>
                                </div>
                                <div class="colors-available">
                                    @if(count($product->colors))
                                        @foreach($product->colors as $color => $amount)
                                            <span data-img-src="{{getAgentPhotos($product->images[$loop->index])}}" data-img-target=".product_image_{{$loop->parent->iteration}}" class="product_color" style="cursor:pointer;background-color: {{$color}}"></span>
                                        @endforeach
                                    @endif
                                </div>
                                <div class="img-box">
                                    <img src="{{count($product->images) ? getAgentPhotos($product->images[0]) : ''}}" alt="" class="main-img product_image_{{$loop->iteration}}">
                                    <img src="{{asset('assets/web/images/pattern-1.png')}}" alt="" class="pattern wow fadeInUp">
                                </div>
                                <div class="btns-wrapper text-center mt-3">
                                    @if($product->status)
                                        <a href="{{route('product.show', $product->id)}}" class="btn ">{{__('products.learn_more')}} <i class="fas fa-angle-right"></i></a>
                                    @endif
                                    @if(!$product->status)
                                        <a href="#" onclick="return false" class="btn active">{{__('products.coming_soon')}} <i class="fas fa-angle-right"></i></a>
                                    @endif
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
            @else
            <div class="container mt-5 mb-4">
                <div class="row">
                    <div class="alert alert-secondary text-center text-danger col-lg-12">{{__('products.no_data')}}</div>
                </div>
            </div>
        @endif
    </section>
@endsection

@section('inner_js')
    <script type="text/javascript">
        $(document).on('click', '.product_color', function(){
            $($(this).data('img-target')).attr('src', $(this).data('img-src'));
        });

    </script>
@endsection