@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>
{{--                                        <a href="{{route('getProductDetails')}}" data-product="{{$product->id}}"  data-target="#buy_now_modal" class="btn active buy_now_modal_button">{{__('products.buy_now')}} <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>
                                        {{--                                        <a href="#" onclick="return false" class="btn ">{{__('products.learn_more')}} <i class="fas fa-angle-right"></i></a>--}}
                                    @endif
                                    {{--                                    @if(in_array($product->id, [3,4]))--}}
                                    {{--                                        @if($product->status)--}}
                                    {{--                                            <a href="{{route('product.show', $product->id)}}" class="btn active">{{__('products.coming_soon')}} <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--}}
                                    {{--                                    @else--}}
                                    {{--                                        @if($product->status)--}}
                                    {{--                                            <a href="{{route('getProductDetails')}}" data-product="{{$product->id}}"  data-target="#buy_now_modal" class="btn active buy_now_modal_button">{{__('products.buy_now')}} <i class="fas fa-angle-right"></i></a>--}}
                                    {{--                                        @endif--}}
                                    {{--                                        @if(!$product->status)--}}
                                    {{--                                            <a href="#" onclick="return false" class="btn active">{{__('products.buy_now')}} <i class="fas fa-angle-right"></i></a>--}}
                                    {{--                                        @endif--}}
                                    {{--                                    @endif--}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        @endif
    </section>
@endsection

@section('inner_js')

    <script type="text/javascript">
        // var s = skrollr.init();

        $(document).on('click', '.product_color', function(){
            $($(this).data('img-target')).attr('src', $(this).data('img-src'));
        });

    </script>

@endsection