@extends('web.layouts.container')

@section('content')

    <!--start page-heading-->
    <div class="page-heading">
        <div class="overlay"></div>
        <div class="container">
            <div class="text text-center">
                <h4>{{$title}}</h4>
            </div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item">
                        <a href="#">{{__('main.home_page')}}</a>
                        <i class="far fa-dot-circle"></i>
                    </li>
                    <li class="breadcrumb-item active" aria-current="page">{{$title}}</li>
                </ol>
            </nav>
        </div>
    </div>
    <!--start about-sec-->
    <section class="about-sec about-wrapper">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <div class="text">
                        <span>{{__('main.welcome_to')}}</span>
                        <h4>{{$page->first_title}}</h4>
                        <p>{!! $page->first_description !!}</p>
                    </div>
                </div>
                @if($page->images && (is_array($page->images) && count($page->images)))
                <div class="col-md-6">
                    <div class="swiper-about">
                        <div class="swiper-wrapper">
                            @foreach($page->images as $image)
                                <div class="swiper-slide">
                                    <img src="{{asset($image)}}" alt="">
                                </div>
                            @endforeach
                        </div>
                        <!-- Add Arrows -->
                        <div class="swiper-button-next">
                        <i class="fas fa-long-arrow-alt-left"></i>
                        </div>
                        <div class="swiper-button-prev">
                        <i class="fas fa-long-arrow-alt-right"></i>
                        </div>
                    </div>
                </div>
                @endif
{{--                <div class="col-md-6">--}}
{{--                    <div class="image-content">--}}
{{--                        @php--}}
{{--                            $classes = ['main-img', 'img-top', 'img-bottom'];--}}
{{--                        @endphp--}}
{{--                        @foreach($page['images'] as $key => $image)--}}
{{--                            <img src="{{asset($image)}}" class="{{$classes[$key]}}">--}}
{{--                        @endforeach--}}

{{--                    </div>--}}
{{--                </div>--}}
            </div>
        </div>
    </section>
    <!--start about-pg-->
    <section class="about-pg">
        <div class="container">
            <div class="single-item">
                <div class="row">
                    <div class="col-md-6">
                        <div class="image-content video">
                            <img src="{{is_array($page->video) && count($page->video) > 0 ? asset($page->video[1]) :asset('assets/web/images/pic-5.jpg')}}" class="about-img ">
                            <a class="play-btn" data-fancybox href="{{is_array($page->video) && count($page->video) > 0 ? asset($page->video[0]) : 'https://www.youtube.com/watch?v=_sI_Ps7JSEk'}}">
                                <i class="fas fa-play"></i>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="text">
                            <h4>{{$page->second_title}}</h4>
                            <p>{!! $page->second_description !!}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--start about-pg-->
    <section class="gallery">
        <div class="container">
            <div class="text-heading">
                <div class="text">
                    <span class="title">{{__('pages.photo_gallery')}}</span>
{{--                    <span class="bg">{{__('pages.photo_gallery')}}</span>--}}
                    <h3>{{__('pages.photos')}}</h3>
                </div>
{{--                <div class="button-wrapper">--}}
{{--                    <a href="#" class="main-butn">شاهد المزيد</a>--}}
{{--                </div>--}}
            </div>
                    <!-- Swiper -->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                @if($galleries->count())
                    @foreach($galleries as $gallery)
                        <div class="swiper-slide">
                            <a href="{{asset($gallery->image)}}" data-fancybox="images">
                                <img src="{{asset($gallery->image)}}" alt="">
                            </a>
                        </div>
                    @endforeach

                    @else
                    <div class="swiper-slide">
                        <a href="{{asset('assets/web/')}}/images/pic-6.jpg" data-fancybox="images">
                            <img src="{{asset('assets/web/')}}/images/pic-6.jpg" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="{{asset('assets/web/')}}/images/pic-7.jpg" data-fancybox="images">
                            <img src="{{asset('assets/web/')}}/images/pic-7.jpg" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="{{asset('assets/web/')}}/images/pic-5.jpg" data-fancybox="images">
                            <img src="{{asset('assets/web/')}}/images/pic-5.jpg" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="{{asset('assets/web/')}}/images/pic-4.jpg" data-fancybox="images">
                            <img src="{{asset('assets/web/')}}/images/pic-4.jpg" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="{{asset('assets/web/')}}/images/pic-2.jpg" data-fancybox="images">
                            <img src="{{asset('assets/web/')}}/images/pic-2.jpg" alt="">
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="{{asset('assets/web/')}}/images/pic-1.jpg" data-fancybox="images">
                            <img src="{{asset('assets/web/')}}/images/pic-1.jpg" alt="">
                        </a>
                    </div>
                @endif

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

    </section>
@endsection

@section('inner_js')
    <script>
        //swiper carousel
        var swiper = new Swiper('.swiper-container', {
            centeredSlides: false,
            spaceBetween: 30,
            grabCursor: true,
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
            breakpoints: {
                320: {
                    slidesPerView: 1,
                },
                768: {
                    slidesPerView: 2,
                },
                1024: {
                    slidesPerView: 4,
                },
            }
        });
    </script>
    <script>
        $(function(){
            $('.tewnty').twentytwenty();
        })
    </script>
@endsection