@extends('front.layouts.layout')
@section('title',"Products")
@section('content')
    <div class="main-content bg-lighter">
        <!-- Section: inner-header -->
        <section class="inner-header divider parallax layer-overlay overlay-dark-5" style="background-color: #0a53be;">
            <div class="container pt-20 pb-20">
                <!-- Section Content -->
                <div class="section-content">
                    <div class="row">
                        <div class="col-sm-8 text-left flip xs-text-center">
                            <h2 class="title text-white">
                                @if(isset($category))
                                    {{ $category->name }}
                                @elseif(isset($alphabet))
                                {{ $alphabet }}
                                @else
                                    Products
                                @endif
                            </h2>
                        </div>
{{--                        <div class="col-sm-4">--}}
{{--                            <ol class="breadcrumb text-right sm-text-center text-black mt-10">--}}
{{--                                <li><a href="{{ route('home') }}">Home</a></li>--}}
{{--                                <li><a href="{{ route('product.list') }}">Products</a></li>--}}
{{--                                <li class="active text-gray-silver">@if(isset($category))--}}
{{--                                        {{ $category->name }}--}}
{{--                                    @elseif(isset($alphabet))--}}
{{--                                        {{ $alphabet }}--}}
{{--                                                                        @endif--}}
{{--                                    </li>--}}
{{--                            </ol>--}}
{{--                        </div>--}}
                    </div>
                </div>
            </div>
        </section>
        <!-- Divider: Contact -->
        <section class="divider bg-white">
            <div class="container">
{{--                @if(!isset($category))--}}
{{--                @foreach (range('A', 'Z') as $char)--}}
{{--                    <a href="{{ route('alphabet.single',$char) }}" class="btn btn-primary mb-5">{{ $char }}</a>--}}
{{--                    @endforeach--}}
{{--                @endif--}}
                <div class="row pt-20">
                    @foreach($products as $product)
                        <a href="{{ route('product.single',$product->id) }}">
                            <div class="col-md-4">
                                <div class="panel panel-info dpanel-cm">
                                    <div class="panel-body">
                                        <div class="thumb text-center">
                                            <img src="{{ asset($product->image) }}" class="img-fullwidth" style="height: 200px;">
                                        </div>
                                    </div>
                                    <div class="panel-footer text-center dpanel-footer"><h4 class="m-0">{{ $product->name }}</h4></div>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
                <div class="row">
                    <div class="col-md-12 text-right">
                        {{ $products->links() }}
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection