@extends('front.layout')
@section('title')
    {{__('Our products')}}
@endsection
@section('css')
<link href="{{url('assets/front/css/product_page.css')}}" rel="stylesheet">
<link href="{{url('assets/front/css/checkout.css')}}" rel="stylesheet">
@endsection
@section('content')
<main>
<div class="container margin_30 rtl">
    <div class="row">
		<div class="col-lg-12">
			<div class="top_panel">
				<div class="container header_panel">
					<small>{{__('What are you looking for?')}}</small>
				</div>
				<!-- /header_panel -->

				<div class="container">
					<div class="search-input">
                        <form action="{{route('search')}}">
                            <div class="row">
                                <div class="col-md-1">
                                    <button style="background: #ffdc5d;color: #fff;top: 0;width: 100%;height: 100%" type="submit"><i class="ti-search"></i></button>
                                </div>
                                <div class="col-md-11" style="padding: 0;">
                                    <input type="text" placeholder="{{__('Search here')}}" class="search_products" name="term"
                                           value="@if(request()->has('term')) {{request()->term}} @endif">
                                </div>

                            </div>
                        </form>
					</div>
				</div>
				<!-- /related -->
			</div>
		</div>
	</div>
    <!-- categories -->
    <div class="row">
        @foreach($categories_show as $category)
        <div class="col-12 col-md-3 col-xl-3">
            <div class="box_general summary">
            <div class="grid_item">

                <figure>
                    <a href="{{route('category',$category->slug)}}">
                        <img class="img-fluid lazy" src="{{category_cover($category)}}" data-src="{{category_cover($category)}}" alt="">
                        <img class="img-fluid lazy" src="{{category_cover($category)}}" data-src="{{category_cover($category)}}" alt="">
                    </a>
                </figure>
                <div class="step">
                    <h3><a href="{{route('category',$category->slug)}}" style="color:white">{{$category->name}}</a></h3>
               </div>

            </div>
            <ul class="subcategories">
                @foreach($category->subcategories as $subcategory)
                    <li>
                        <h6> <a href="{{route('subcategory',$subcategory->slug)}}"><i class="fa fa-dot-circle-o" aria-hidden="true"></i> {{$subcategory->name}}</a></h6>
                    </li>
                @endforeach
            </ul>
            </div>

            <!-- /grid_item -->
        </div>
        @endforeach
    </div>
    {{-- <div class="row">
        <div class="container margin_60_35">
            <div class="row small-gutters categories_grid">
                <div class="col-sm-12 col-md-12">
                    <div class="row small-gutters mt-md-0 mt-sm-2">
                        @foreach($categories_show as $category)
                        <div class="col-sm-4" style="margin-top: 20px;">
                            <a href="{{route('category',$category->slug)}}">
                                <img src="{{category_cover($category)}}" data-src="{{category_cover($category)}}" alt="" class="img-fluid lazy">
                                <div class="wrapper">
                                    <h2>{{$category->name}}</h2>
                                    <p>{{count($category->category_products)}}</p>
                                </div>
                            </a>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            <!--/categories_grid-->
        </div>
    </div> --}}
</div>
</main>
@endsection