@extends('website.layouts.master')
@section('css')
    <link rel="stylesheet" href="{{asset('website/css/subpages.css')}}">
@stop
@section('content')
    <style>
        .verified-badge{
            width: 20px;
            margin-left: 5px;
            margin-right: 5px;
        }
    </style>

    <nav class="breadcrumb-area">
        <div class="container">
            <ol class="breadcrumb-list">
                <li class="breadcrumb-item"><a href="{{route('brands')}}">{{ trans('theme.all_brands') }}</a></li>
            </ol>

        </div>
    </nav>
    <section class="sub-page agriculural-sector">
        <div class="container">
            <div class="row">
                <div class="col-sm-3 col-lg-3 col-md-3 co-xs-12">
                    <div class="card">
                        <div class="widget-filters">


                            <div class="widget-filters__item">
                                <div class=".widget__title">
                                    <h4 class="widget__title">{{__('theme.latest_brands')}}</h4>
                                </div>
                                @foreach ($latest_brands as $latest_brand)
                                    @php
                                        $latest_brand_translation = $latest_brand->translations->where('language_id',getLocaleId())->first();
                                    @endphp
                                <div class="widget-products__item">
                                    <div class="widget-products__image">
                                        <a href="{{ route('show.brand', $latest_brand->slug) }}">
                                            <img style="width: 80px; height: 65px; !important;" src="{{ get_storage_file_url(optional($latest_brand->logoImage)->path, 'logo_lg') }}"/>
                                        </a>
                                    </div>
                                    <div class="widget-products__info">
                                        <h6>
                                            <a href="{{ route('show.brand', $latest_brand->slug) }}">{{ Str::limit(($latest_brand_translation->name ?? $latest_brand->name),33)  }}</a>
                                        </h6>
                                    </div>
                                </div>
                                @endforeach

                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-sm-9 col-lg-9 col-md-9 co-xs-12">
                    <div class="sb-cat-items">
                        <div class="well">
                            <div class="btn-group">
                                <a href="#" id="list" class="btn btn-default btn-sm">
                                    <i class="bi bi-list-ul"></i>
                                </a> <a href="#" id="grid" class="btn btn-default btn-sm">
                                    <i class="bi bi-grid"></i>
                                </a>
                            </div>

                        </div>

                        <div id="products" class="row">
                            @foreach ($brands as $brand)
                                @php
                                    $brand_translation = $brand->translations->where('language_id',getLocaleId())->first();
                                @endphp
                                <div class="item  col-xs-4 col-lg-4">
                                <div class="card wow fadeInUp animated">
                                    <div class="card-body">
                                        <div class="product-wrapper">
                                            <a href="{{ route('show.brand', $brand->slug) }}">

                                                <div class="thumbnail-wrapper img-hover">
                                                    <img style="width: 229px; height: 185px; !important;" class="img-fluid img-hover" src="{{ get_storage_file_url(optional($brand->logoImage)->path, 'logo_lg') }}">
                                                </div>
                                                <div class="meta-wrapper">
                                                    <h3>{{ $brand_translation->name ?? $brand->name }}</h3>
                                                </div>
                                            </a>

                                        </div>
                                    </div>
                                </div>
                            </div>
                            @endforeach
                        </div>
                        <div class="row pagenav-wrapper mt-4">
                            {{ $brands->links('vendor.pagination.default') }}
                        </div><!-- /.row .pagenav-wrapper -->

                    </div>

                </div>
            </div>
        </div>
    </section>

@stop

@section('script')
    <script>
        $('.slider').each(function() {
            var $this = $(this);
            var $group = $this.find('.slide_group');
            var $slides = $this.find('.slide');
            var bulletArray = [];
            var currentIndex = 0;
            var timeout;

            function move(newIndex) {
                var animateLeft, slideLeft;

                advance();

                if ($group.is(':animated') || currentIndex === newIndex) {
                    return;
                }

                bulletArray[currentIndex].removeClass('active');
                bulletArray[newIndex].addClass('active');

                if (newIndex > currentIndex) {
                    slideLeft = '100%';
                    animateLeft = '-100%';
                } else {
                    slideLeft = '-100%';
                    animateLeft = '100%';
                }

                $slides.eq(newIndex).css({
                    display: 'block',
                    left: slideLeft
                });
                $group.animate({
                    left: animateLeft
                }, function() {
                    $slides.eq(currentIndex).css({
                        display: 'none'
                    });
                    $slides.eq(newIndex).css({
                        left: 0
                    });
                    $group.css({
                        left: 0
                    });
                    currentIndex = newIndex;
                });
            }

            function advance() {
                clearTimeout(timeout);
                timeout = setTimeout(function() {
                    if (currentIndex < ($slides.length - 1)) {
                        move(currentIndex + 1);
                    } else {
                        move(0);
                    }
                }, 4000);
            }

            $('.next_btn').on('click', function() {
                if (currentIndex < ($slides.length - 1)) {
                    move(currentIndex + 1);
                } else {
                    move(0);
                }
            });

            $('.previous_btn').on('click', function() {
                if (currentIndex !== 0) {
                    move(currentIndex - 1);
                } else {
                    move(3);
                }
            });

            $.each($slides, function(index) {
                var $button = $('<a class="slide_btn">&bull;</a>');

                if (index === currentIndex) {
                    $button.addClass('active');
                }
                $button.on('click', function() {
                    move(index);
                }).appendTo('.slide_buttons');
                bulletArray.push($button);
            });

            advance();
        });
    </script>
    <script>
        $(document).ready(function() {
            $('#list').click(function(event){event.preventDefault();$('#products .item').addClass('list-group-item');});
            $('#grid').click(function(event){event.preventDefault();$('#products .item').removeClass('list-group-item');$('#products .item').addClass('grid-group-item');});
        });
    </script>

@stop