@extends('website.layouts.master')

@section('content')

    <!-------- main section slider ads and 3 rwow ------>
    <section class="main-s">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-md-8 col-sm-8 col-xs-12">
                    <div class="slider  wow fadeInUp animated" style="width: 856px; height: 385px; !important;">
                        <div class="slide_viewer" >
                            <div class="slide_group" >

                                @foreach ($sliders as $slider)
                                    @php
                                        $slider_translation = \App\Models\SliderTranslation::where('slider_id',$slider['id'])->where('language_id',getLocaleId())->first();
                                    @endphp
                                <div class="slide"  >
                                    @if ($slider['sub_title'] || $slider['title'] || $slider['description'])
                                        <div class="caption">
                                        <div class="banner__content-{{ $slider['text_position'] == 'right' ? 'left' : 'right' }}"></div>

                                        <div class="banner__content-{{ $slider['text_position'] ?? 'right' }}">

                                            <div class="banner__content-title">
                                                <h6 style="color: {{ $slider['title_color'] }}">{!! $slider_translation->title ?? $slider['title'] !!}</h6>
                                            </div>
                                            <div class="mt-2 banner__content-sub-title ">
                                                <h3 style="color: {{ $slider['sub_title_color'] }}">{!! $slider_translation->sub_title ?? $slider['sub_title'] !!}</h3>
                                            </div>
                                            <div class="banner__content-text">
                                                <p style="color: {{ $slider['description_color'] }}">{!! $slider_translation->description ?? $slider['description'] !!}</p>
                                            </div>
                                            @if (!empty($slider['link']))
                                                <div class="banner__content-btn">
                                                    <a href="{{ $slider['link'] }}">{{ trans('theme.shop_now') }}</a>
                                                </div>
                                            @endif
                                        </div>
                                        </div>
                                    @endif
                                    <a href="{{ $slider['link'] }}">
                                        <img width="100%" style="height: 400px;"  src="{{ get_storage_file_url($slider['feature_image']['path'] ?? null, 'full') }}" alt="{{ $slider['title'] ?? 'Slider Image ' }}"/>
                                    </a>
                                </div>
                                @endforeach

                            </div>
                        </div>
                        <div class="slide_buttons">
                        </div>
                    </div><!-- End // .slider -->

                </div>

                @if (isset($announcements_top))
                <div class="col-sm-4 col-md-4 col-lg-4 col-xs-12">
                    <div class="Shine wow fadeInUp animated">
                        @foreach($announcements_top as $announcement_top)
                        <a href="{{$announcement_top->action_url}}" class="top-left-ads">
                            <img class="img-fluid" style="height: 158px" src="{{asset('images/' .$announcement_top->image)}}"/>
                        </a>
                        @endforeach
{{--                        <a href="{{$announcement_top->action_url}}" class="top-left-ads mt-3">--}}
{{--                            <img class="img-fluid " src="{{asset('images/' .$announcement_top->image)}}"/>--}}
{{--                        </a>--}}
                    </div>
                </div>
                @endif
            </div>
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12 mt-4">
                    <div class="card">
                        <div class="card-header wow fadeInUp animated">
                            <h5>{{__('theme.toDays_specials')}}</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">

                            @foreach($daily_popular as $item)
                                @php
                                    $item_translation = $item->translations->where('language_id',getLocaleId())->first();
                                @endphp
                                    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                                    <div class="product-wrapper  wow fadeInLeft animated">
                                        <div class="thumbnail-wrapper img-hover">
                                            <a href="{{ route('show.product', $item->slug) }}">
                                                <img style="width: 155px; height: 125px;" class="img-fluid" src="{{ get_inventory_img_src($item, 'medium') }}"
                                                     data-name="product_image" alt="{{ $item_translation->title ?? $item->title }}" title="{{ $item_translation->title ??  $item->title }}"/>
                                            </a>
                                        </div>
                                        <div class="meta-wrapper">
                                            <h3>
                                                <a href="{{ route('show.product', $item->slug) }}">{!! \Str::limit(($item_translation->title ?? $item->title), 55) !!}</a>
                                            </h3>
                                        </div>
                                        <div class="price">
                                            <span>{!! get_formated_price($item->current_sale_price(), config('system_settings.decimals', 2)) !!}</span>
                                            @if ($item->hasOffer())
                                                <p style="color: #b0b0b0;text-decoration: line-through;font-size: 16px;line-height: 24px;font-family: Arimo,sans-serif;">
                                                    {!! get_formated_price($item->sale_price, config('system_settings.decimals', 2)) !!}
                                                </p>
                                            @endif
                                        </div>
                                            <div class="product-card-actions">

                                            <a class="sc-add-to-cart" href="javascript:void(0)" data-link="{{ route('cart.addItem', $item->slug) }}">
                                                <i class="bi bi-cart3"></i>
                                            </a>
                                            <a class="product-link itemQuickView" href="{{ route('quickView.product', $item->slug) }}" tabindex="0">
                                                <i class="bi bi-zoom-in"></i>
                                            </a>
                                            <a class="add-to-wishlist" href="javascript:void(0)" data-link="{{ route('wishlist.add', $item) }}">
                                                <i class="bi bi-heart"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                                @endforeach

                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12 mt-4">
                    <div class="card" >

                            <div class="card-header wow fadeInUp animated">
    {{--                            <h5> أعلى المنتجات تقيماً</h5>--}}
                                <h5>{{__('theme.featured_category')}} </h5>
                            </div>
                            <div class="card-body">
                                <div class="row">

                                        @foreach($featured_category as $item)
{{--                                            @dd($item->translations()->where('language_id',getLocaleId())->first())--}}

                                            <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12" >
                                                <div class="product-wrapper wow fadeInLeft animated" >
                                                    <div class="thumbnail-wrapper img-hover">
                                                        <a href="{{ route('category.browse', $item->slug) }}">
                                                            <img style="width: 155px; height: 125px;" src="{{ get_storage_file_url(optional($item->featureImage)->path, 'full') }}" alt="{{ $item->name }}"/>
                                                        </a>

                                                    </div>
                                                    <div class="meta-wrapper">
                                                        <h3>
{{--                                                            @if(isset($item->translations->where('language_id',getLocaleId())) != null)--}}
                                                                @php
                                                                $translation = $item->translations->where('language_id',getLocaleId())->first();
                                                                @endphp
{{--                                                            @endif--}}
                                                            <a href="{{ route('category.browse', $item->slug) }}">
                                                                {{ $translation->name ?? $item->name}}

                                                            </a>
                                                        </h3>
                                                    </div>
{{--                                                    <div class="price"> <span>{{ trans('theme.listings_count', ['count' => $item->listings_count]) }}</span></div>--}}

                                                </div>
                                            </div>
                                        @endforeach


                                </div>
                            </div>

                    </div>

                </div>

            </div>
            @if (isset($announcements_bottom))
            <div class="row">
                @foreach($announcements_bottom as $announcement_bottom)
                <div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 mt-4">
                    <div class=" Shine wow fadeInDown animated">
                        <a class="b-ads" href="{{$announcement_bottom->action_url}}">
                            <img class="img-fluid" style="height: 150px" src="{{asset('images/' .$announcement_bottom->image)}}"/>
                        </a>
                    </div>
                </div>
                @endforeach
{{--                <div class="col-sm-6 col-md-6 col-lg-6 col-xs-12 mt-4">--}}
{{--                    <div class="Shine wow fadeInDown animated">--}}
{{--                        <a class="b-ads" href="{{$announcements[3]->action_url}}">--}}
{{--                            <img class="img-fluid" src="{{asset('images' .$announcements[3]->image)}}"/></a>--}}
{{--                    </div>--}}
{{--                </div>--}}
            </div>
            @endif
        </div>
    </section>
    <!-------- end of main section slider ads and 3 rwow ------>

    @include('website.home.main_section')


    @if($featured_auctions->count())
    <!------------ start Auctions section ------------>
    <section class="Auctions  wow fadeInUp animated">
        <div class="container">
            <div class="module-title wow fadeInUp animated">
                <h2>
                    <a href="{{route('auction.index')}}">
                        {{__('theme.auctions')}}
                    </a>
                </h2>
            </div>
            <div class="row">
                <div class="col-md-4 col-sm-4 col-lg-4 col-xs-12">
                    <div class="Auction-item wow fadeInUp animated">
                        <div class="Auction-tumb">
                            <a href="{{route('auction.show',$featured_auctions[0]->slug)}}">
                                <img style="width: 356px; height: 302px;" class="img-fluid" src="{{ get_storage_file_url(optional($featured_auctions[0]->featureImage)->path, 'full') }}"/>
                            </a>
                        </div>
                        <div class="Auction-content">
                            <h3>
                                @php
                                    $featured_auction_translation = $featured_auctions[0]->translations->where('language_id',getLocaleId())->first();
                                @endphp
                                <a href="{{route('auction.show',$featured_auctions[0]->slug)}}">{{$featured_auction_translation->title ?? $featured_auctions[0]->title}}</a>
                            </h3>
                            <div class="countdownv">
                                @php
                                    $seconds = strtotime($featured_auctions[0]->end_date) - time();
                                    $days = floor($seconds / 86400);
                                    $seconds %= 86400;
                                    $hours = floor($seconds / 3600);
                                    $seconds %= 3600;
                                    $minutes = floor($seconds / 60);
                                    $seconds %= 60;
                                @endphp
                                <span>
                                    <span class="gtext">{{__('theme.Days').' '}}|</span>
                                    <span>{{$days}}</span>
                                </span>

                                <span>
                                    <span class="gtext">{{__('theme.Hours').' '}}|</span>
                                    <span>{{$hours}}</span>
                                </span>
                                <span>
                                    <span class="gtext">{{__('theme.Minutes').' '}}|</span>
                                    <span>{{$minutes}}</span>
                                </span>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="col-md-8 col-sm-8 col-lg-8 col-xs-12">
                    <div class="row">
                        @foreach($featured_auctions as $key=>$auction)
                            @if($key != 0)
                            @php
                                $auction_translation = $auction->translations->where('language_id',getLocaleId())->first();
                                $seconds = strtotime($auction->end_date) - time();
                                $days = floor($seconds / 86400);
                                $seconds %= 86400;
                                $hours = floor($seconds / 3600);
                                $seconds %= 3600;
                                $minutes = floor($seconds / 60);
                                $seconds %= 60;
                            @endphp
                        <div class="col-md-4 col-sm-4 col-lg-4 col-xs-12">
                            <div class="card wow fadeInLeft animated">
                                <div class="card-body">
                                    <div class="product-wrapper">
                                        <div class="thumbnail-wrapper img-hover">
                                            <a href="{{route('auction.show',$auction->slug)}}">
                                                <img style="width: 189px; height: 152px" class="img-fluid img-hover" src="{{ get_storage_file_url(optional($auction->featureImage)->path, 'full') }}"
                                                     height="149" width="185">
                                            </a>
                                        </div>
                                        <div class="meta-wrapper">
                                            <h3>
                                                <a href="{{route('auction.show',$auction->slug)}}">{{Str::limit($auction_translation->title ?? $auction->title,20)}}</a>
                                            </h3>
                                        </div>
                                        @if($auction->bids()->count() > 0 )
                                            @php
                                                $amount_paid = $auction->bids()->max('price');
                                            @endphp
                                            <span class="graytext"> {{__('theme.amount_paid')}} |</span>
                                            <span class="price">{{get_formated_currency($amount_paid, config('system_settings.decimals', 2))}}</span>
                                        @else
                                            <span class="graytext"> {{__('theme.start_price')}} |</span>
                                            <span class="price">{{get_formated_currency($auction->start_price, config('system_settings.decimals', 2))}}</span>
                                        @endif
                                        <div class="countdownv">
                                            <span class="wd30 b-l">
                                                <span class="greentext">{{$days}}</span>
                                                <span class="gtext">{{__('theme.Days')}} </span>
                                            </span>
                                            <span class="wd30 b-l">
                                                <span class="greentext">{{$hours}}</span>
                                                <span class="gtext"> {{__('theme.Hours')}}</span>
                                            </span>
                                            <span class="wd30 ">
                                                <span class="greentext">{{$minutes}}</span>
                                                <span class="gtext"> {{__('theme.Minutes')}}</span>
                                            </span>


                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                            @endif
                        @endforeach

                    </div>
                </div>
            </div>
        </div>
    </section>
    <!------------ end Auctions section ------------>
    @endif

    <!------------ start statistics section ------------>
    <section class=" wow fadeInUp animated">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-lg-6 col-sm-6 col-xs-12">
                    <div class="statstics wow fadeInUp animated">
                        <h2 class="mt-1 mb-5">{{__('theme.stats_and_figures')}}</h2>
                        <span class="d-inline-block">
                            <span class="price mt-5">{{$shops}}</span>
                            <span>{{__('theme.nav.shops')}} </span>
                        </span>
                        <span class="d-inline-block">
                            <span class="price mt-5">{{$customers}}</span>
                            <span>{{__('theme.nav.customers')}}</span>
                        </span>
                        <br>
                        <span class="d-inline-block">
                            <span class="price mt-5">{{$inventories}}</span>
                            <span>{{__('theme.products')}}</span>
                        </span>
                    </div>
                </div>
                <div class="col-md-6 col-lg-6 col-sm-6 col-xs-12">
                    <div class="Shine wow fadeInDown animated" style="height: 800px !important;">
                        <a class="b-ads" href="{{$announcement_bottom->latest()->first()->action_url}}" style="height: 100%">
                            <img class="img-fluid" style="height: 395px !important;" src="{{asset('images/' .$announcement_bottom->latest()->first()->image)}}"/>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!------------ end statistics section ------------>
    @if($featured_tenders->count())
    <!------------ start tenders section ------------>
    <section class=" wow fadeInUp animated">
        <div class="container">
            <div class="module-title wow fadeInUp animated">
                <h2>
                    <a href="{{route('tender.index')}}">
                        {{__('theme.tenders')}}
                    </a>
                </h2>
            </div>
            <div class="card">
                <div class="card-body">
                    <div class="row">
                        @foreach($featured_tenders as $tender)
                            @php
                                $tender_translations = $tender->translations->where('language_id',getLocaleId())->first()
                            @endphp
                        <div class="col-md-3 col-lg-3 col-sm-3 col-xs-6">
                            <div class="tender-item">
                                <div class="t-date" >
                                    <span class="d-block num">{{$tender->created_at->format('d')}}</span>
                                    <span>{{$tender->created_at->format('Y-m')}}</span>
                                </div>
                                <div class="meta-info">
                                    <h6>
                                        <a href="{{route('tender.show',$tender->slug)}}">
                                            {{Str::limit($tender_translations->title ?? $tender->title,30)}}
                                        </a>

                                    </h6>
                                </div>

                            </div>
                        </div>
                        @endforeach

                    </div>

                </div>
            </div>
        </div>
    </section>
    <!------------ end tenders section ------------>
    @endif

    @if($blogs->count())
    <!------------ start articals section ------------>
    <section class=" wow fadeInUp animated">
        <div class="container">
            <div class="module-title wow fadeInUp animated">
                <h2>
                    <a href="{{route('blog')}}">
                        {{__('theme.nav.blogs')}}
                    </a>
                </h2>
            </div>
            <div class="articls">

                <div class="row">
                    @foreach($blogs as $blog)
                        @php
                            $blog_translation = $blog->translations->where('language_id',getLocaleId())->first();
                        @endphp
                        <div class="col-md-3 col-lg-3 col-sm-3 col-xs-6">
                            <div class="card wow fadeInLeft animated">
                                <div class="card-body">
                                    <article>
                                        <div class="post-date mt-3">
                                            <span>{{$blog->created_at->format('Y-m-d')}}</span>
                                        </div>
                                        <div class="meta-info mt-3">
                                            <h6>
                                                <a href="{{route('blog.show',$blog->slug)}}">{{$blog_translation->title ?? $blog->title}}</a>
                                            </h6>
                                        </div>
                                        <div class="post-thumb img-hover mt-4">
                                            <a href="{{route('blog.show',$blog->slug)}}">
                                                <img style="width: 230px; height: 160px;" class="img-fluid" src="{{asset('storage/'.$blog['image']['path'])}}" alt="{{$blog_translation->title ?? $blog->title}}" title="{{ $blog_translation->title ?? $blog->title }}"/>
                                            </a>
                                        </div>
                                    </article>
                                </div>
                            </div>
                        </div>
                    @endforeach


                </div>
                <div class="row  wow fadeInUp animated">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="Factory mb-3">
                            <div class="finfo">
                                <div class="Factory-icon">
                                    <img src="{{asset('website/img/icon.png')}}" height="74" width="74"/>
                                </div>
                                <h2>
                                    {{__('theme.request_visit')}}
                                </h2>
                                <span>{{__('theme.you_can_request_visit')}}</span>
                            </div>

                            <a style="background: #135C4B;border-radius: 0.6rem;" href="{{route('request.visit.create')}}" class="mt-3 modalAction btn btn-default btn-sm flat pull-right">{{__('theme.request_now')}}</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif
    <!------------ end articals section ------------>
@stop

@section('script')
    <script src="{{asset('website/js/plugins.js')}}"></script>
    <script src="{{asset('website/js/main.js')}}"></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>

@stop