@extends('website.layouts.master')
@section('content')
    <!-- Start Carousel -->
    <div class="slider d-flex justify-content-center align-items-center">
        <div class="over-lay"></div>
        <div class="skitter slider_skitter skitter-themed skitter-default with-dots">
            <ul>
                @foreach(\App\Slider::where('type','behind_search')->get() as $slide)
                    <li>
                        <a href="#">
                            <img src="{{asset($slide->image)}}" class="glassCube"/>
                        </a>
                    </li>
                @endforeach
            </ul>
        </div>
        <div class="search" data-aos-delay="200" data-aos-duration="800" data-aos="fade-up">
            <h1 class="mb-4">{{trans('sidebar.easiest_website')}}</h1>
            <form action="{{route('search')}}">
                <div class="input-group">
                    <input type="text" class="form-control" name="name"
                           placeholder="{{trans('sidebar.find_your_transaction')}}" aria-describedby="button-addon1">
                    <div class="input-group-prepend">
                        <button class="btn" type="submit" id="button-addon1">{{trans('sidebar.search')}}</button>
                    </div>
                    <i class="fas fa-search"></i>
                </div>
            </form>
        </div>
    </div>
    <!-- End Carousel -->
    <!-- ================================================= -->
    <!-- Start Request -->
    <div class="request mt-5 mb-5">
        <div class="container">
            <h3 class="mb-4 mr-2">{{trans('sidebar.services')}}</h3>
            <div class="row">
                @foreach(\App\Service::where('visible',1)->get() as $service)
                    <div class="col-lg-2 col-md-4 col-sm-6 col-12 mb-4" data-aos-delay="200" data-aos-duration="800"
                         data-aos="zoom-in">
                        <a href="{{route('transactions.index',$service->id)}}">
                            <div class="box">
                                <img src="{{asset($service->image)}}" alt="{{$service->name}}">
                                <div class="name">{{$service->name}}</div>
                            </div>
                        </a>
                    </div>
                @endforeach

            </div>
        </div>
    </div>
    <!-- End Request -->
    <!-- ================================================= -->
    <!-- Start Video -->
    <div class="video mt-5 mb-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-6 mb-lg-0 mb-4" data-aos-delay="200" data-aos-duration="800" data-aos="zoom-in">
                    <div class="skitter skitter-themed skitter-default with-dots">
                        <ul>
                            @foreach(\App\Slider::where('type','website')->get() as $slide)
                                <li>
                                    <a href="#">
                                        <img src="{{asset($slide->image)}}" class="glassCube"/>
                                    </a>
                                </li>
                            @endforeach
                        </ul>
                    </div>

                    <div id="owl-videos" class="owl-carousel owl-theme h-100">
                        @foreach(\App\Slider::where('type','website')->get() as $slide)
                            <div class="item">
                                <img class="w-100 h-100" src="{{asset($slide->image)}}" alt="">
                            </div>
                        @endforeach
                    </div>
                </div>
                <div class="col-lg-6 mb-lg-0" data-aos-delay="200" data-aos-duration="800" data-aos="zoom-in">
                    <video class="w-100" controls>
                        <source class="w-100" src="{{asset(setting('home_video',app()->getLocale()))}}"
                                type="video/mp4">
                    </video>
                </div>
            </div>
        </div>
    </div>
    <!-- End Video -->
    <!-- ================================================= -->
    <!-- Start Qr -->
    <div class="qr pt-4 pb-5 mt-5 mb-5">
        <div class="container">
            <h3 class="mb-5 text-center">{{trans('sidebar.downloadable_files')}}</h3>
            <div id="owl-qr" class="owl-carousel owl-theme h-100">
                @foreach(\App\Explaination::all() as $exp)
                    <div class="item" data-aos-delay="200" data-aos-duration="800" data-aos="fade-up">
{{--                        <img src="{{asset($exp->image)}}" alt="{{$exp->name}}">--}}
                        {!! \SimpleSoftwareIO\QrCode\Facades\QrCode::size(200)->generate(asset($exp->file)) !!}
                        <a href="{{asset($exp->file)}}" download>
                            <div class="circle">
                                <i class="fas fa-file-pdf"></i>
                            </div>
                            <div>{{$exp->name}}</div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    <!-- End Qr -->
    <!-- ================================================= -->
    <!-- Start Company -->
    <div class="company text-center mt-5 mb-5">
        <div class="container">
            <div class="rate" data-aos-delay="100" data-aos-duration="800" data-aos="zoom-in">
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
                <i class="fas fa-star"></i>
            </div>
            <h3 class="mb-4 mt-2" data-aos-delay="200" data-aos-duration="800" data-aos="zoom-in">{{trans('sidebar.companies_proud_of')}}</h3>
            <div id="owl-company" class="owl-carousel owl-theme h-100">
                @foreach(\App\Testmonial::all() as $testmonial)
                    <div class="item" data-aos-delay="200" data-aos-duration="800" data-aos="fade-up">
                        <img src="{{asset($testmonial->image)}}" alt="{{$testmonial->name}}">
                    </div>
                @endforeach

            </div>
        </div>
    </div>
    <!-- End Company -->
    <!-- ================================================= -->
    <!-- Start Advertisement -->
    <div class="advertisement">
        <div class="container">
            <div id="owl-advertise" class="owl-carousel owl-theme h-100">
                @foreach(\App\Ad::where('status',1)->get() as $my_ad)
                    @if(\Illuminate\Support\Carbon::createFromFormat('Y-m-d',  $my_ad->created_at->format('Y-m-d'))->addMonth()->format('Y-m-d') >= \Illuminate\Support\Carbon::now()->format('Y-m-d'))
                        <div class="item" data-aos-delay="100" data-aos-duration="800" data-aos="fade-up">
                            <img src="{{asset(@unserialize($my_ad->image)[0])}}" class="w-100 mb-3" alt="{{$my_ad->name}}">
                            <a href="{{route('view_ad',$my_ad->id)}}" class="name">{{$my_ad->name}}</a>
                            <p>{{$my_ad->description}}
                            </p>
                            <div class="links">
                                <a href="https://wa.me/{{$my_ad->whatsapp}}" target="_blank"><i
                                        class="fab fa-whatsapp"></i></a>
                                <a href="tel:{{$my_ad->phone}}" target="_blank"><i class="fas fa-phone-alt"></i></a>
                            </div>
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    </div>
    <!-- End Advertisement -->

@endsection
@section('loading')
    <div class="box_loading pt-5 pb-5">
        <div class="container">
            <h3 class="text-center mb-5">{{trans('sidebar.loading_page')}}</h3>
            <div class="row justify-content-center mb-5">
                <div class="col-lg-3 col-6">
                    <div class="load">
                        <img src="{{asset(setting('loading_logo_1',app()->getLocale()))}}" alt="">
                        <svg class="w-100 h-100" viewBox="0 0 100 100">
                            <circle class="bg" cx="50" cy="50" r="46"/>
                            <circle class="loader" cx="50" cy="50" r="46"/>
                        </svg>
                    </div>
                </div>
                <div class="col-lg-3 col-6">
                    <div class="load">
                        <img src="{{asset(setting('loading_logo_2',app()->getLocale()))}}" alt="">
                        <svg class="w-100 h-100" viewBox="0 0 100 100">
                            <circle class="bg" cx="50" cy="50" r="46"/>
                            <circle class="loader" cx="50" cy="50" r="46"/>
                        </svg>
                    </div>
                </div>
            </div>
            <div class="slider d-flex justify-content-center align-items-center">
                <div id="" class=" h-100">
                    {{--                @foreach(\App\Slider::where('type','loader')->get() as $slide)--}}
                    <img src="{{asset('bg.jpg')}}" style="width: 100% ; height: 500px" alt="" >

                    {{--                @endforeach--}}

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

@endsection