@extends('web.layouts.container')
@section('css')
    <link rel="stylesheet" href="{{ asset('assets/web/css/lib/toastr.css') }}" />
@endsection
@section('content')
    <section class="course_header page_header">
        <div class="container">
            <div class="content">
                <ul class="links">
                    <li class="li_link">
                        <a href="{{LaravelLocalization::getLocalizedURL(getCurrentLocale(), url('/'), [], true)}}">{{__('main.home_page')}}</a>
                    </li>
                    <li class="li_link">
                        <span>المنتجات</span>
                    </li>
                </ul>
                <div class="row">
                    <div class="col-lg-6 valign">
                        <div class="r_side w-100">
                            <h2>إبحث عن منتج</h2>
                            <form class="form">
                                <div class="form-group">
                                    <button class="butn color search_button"><span>بحث</span></button>
                                    <input name="name" type="text" class="" placeholder="...بحث عن منتج أو محتوي">
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="img">
                            <img src="{{asset('assets/web/images/course_view.png')}}" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <section class="courses products-sec section-padding bg-gray">
        <div class="container">
            <div class="section_head mb-0">
                <h5> فلتر البحث حسب </h5>
                <form action="" class="filter mt-4">
                    <div class="form-group">
                        <select name="category_id" class="custom-select">
                            <option value="">القسم</option>
                            @if(count($categories))
                                @foreach($categories as $category)
                                    <option value="{{$category->id}}">{{$category->name}}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                </form>
            </div>
            <div class="content small_prod">
                <div class="row product_container">
                    @if(count($products))
                        @foreach($products as $product)
                            <div class="col-lg-4">
{{--                                <a onclick="return false" href="#">--}}
                                    <div class="prod_item">
                                        <div class="img">
                                            <div class="btns">
                                                <button data-href="{{route('eyeStore.addToFavorite', $product->id)}}" class="btn add_to_favorite"><i class="fas fa-heart"></i></button>
                                                <button data-href="{{route('eyeStore.addToCart', $product->id)}}" {{ $product->amount <= 0 ? 'disabled' : '' }} class="btn add_to_cart {{ $product->amount <= 0 ? 'disabled' : '' }}"><i class="fas fa-shopping-cart"></i></button>
                                            </div>
                                            <img src="{{$product->image ? asset($product->image) : asset('assets/web/images/prod/1.png')}}" alt="">
                                            <span class="sec">{{$product->category_name}}</span>
                                        </div>
                                        <div class="info">
                                            <h3><a href="{{route('eyeStore.show', $product->id)}}">{{$product->name}}</a></h3>
                                            <div class="prc">
                                                <div class="str">
                                                    <small>
                                                        ( {{$product->evaluate_count}} تقييم )
                                                    </small>
                                                    <div class="stars">
                                                        <i class="{{abs(round($product->evaluate_average)) >=1 ? 'fas' : 'far'}} fa-star"></i>
                                                        <i class="{{abs(round($product->evaluate_average)) >=2 ? 'fas' : 'far'}} fa-star"></i>
                                                        <i class="{{abs(round($product->evaluate_average)) >=3 ? 'fas' : 'far'}} fa-star"></i>
                                                        <i class="{{abs(round($product->evaluate_average)) >=4 ? 'fas' : 'far'}} fa-star"></i>
                                                        <i class="{{abs(round($product->evaluate_average)) >=5 ? 'fas' : 'far'}} fa-star"></i>
                                                    </div>
                                                </div>
                                                <h3> {{$product->price}} <small> SAR </small></h3>
                                            </div>
                                        </div>
                                    </div>
{{--                                </a>--}}
                            </div>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>
    </section>
@endsection

@section('inner_js')
    <script src="{{ asset('assets/web/js/lib/toastr.min.js') }}"></script>

    <script>
        let productSearchRoute = "{{route('productSearch')}}";
    </script>
    <script src="{{asset('assets/web/js/eye_stores.index.js')}}"></script>
@endsection