@extends('frontend.layouts.app') 

@section('meta_title'){{ $page->meta_title }}@stop

@section('meta_description'){{ $page->meta_description }}@stop

@section('meta_keywords'){{ $page->meta_keywords }}@stop

@section('meta')
    <!-- Schema.org markup for Google+ -->
    <meta itemprop="name" content="{{ $page->meta_title }}">
    <meta itemprop="description" content="{{ $page->meta_description }}">
    <meta itemprop="image" content="{{ $page->meta_img }}">

    <!-- Twitter Card data -->
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@publisher_handle">
    <meta name="twitter:title" content="{{ $page->meta_title }}">
    <meta name="twitter:description" content="{{ $page->meta_description }}">
    <meta name="twitter:creator" content="@author_handle">
    <meta name="twitter:image" content="{{ $page->meta_img }}">

    <!-- Open Graph data -->
    <meta property="og:title" content="{{ $page->meta_title }}" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="{{ route('page', $page->id) }}" />
    <meta property="og:image" content="{{ $page->meta_img }}" />
    <meta property="og:description" content="{{ $page->meta_description }}" />
    <meta property="og:site_name" content="{{ config('app.name') }}" />
@endsection

@section('content')
<script src="{{ asset('frontend/js/showmoreless.min.js')}}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>

<section class="headings">
    <div class="text-heading text-center">
        <div class="container">
            <h1>About Our Company</h1>
            <h2><a href="{{route('home')}}">Home </a> &nbsp;/&nbsp; About Us</h2>
        </div>
    </div>
</section>
<!-- END SECTION HEADINGS -->

<style>
    .inner-pages .about-us h2::after{
        display: none;
    }
    .inner-pages .about-us .who-1 h2 span{
        color: #3399ff;
    }
    .how-it-works .serv-flex{
            min-height: 320px;
    }
    
    .mm-slideout header.sticky .hamburger--collapse .hamburger-inner {
        top: -23px !important;
        left: 0px !important;
    }
    .mm-slideout header .hamburger--collapse .hamburger-inner {
        top: -23px !important;
        left: 0px !important;
    }
  @media only screen and (max-width: 767px){
        .inner-pages .hamburger {
            top: 16px !important;
            left: 12px;
        }
         .mm-slideout header .hamburger--collapse .hamburger-inner, .mm-slideout header.sticky .hamburger--collapse .hamburger-inner{
            top: -30px !important;
            left: -5px !important;
        }
    }
    @media (max-width: 450px){
     .mm-slideout header.sticky .hamburger--collapse .hamburger-inner {
        top: -20px !important;
        left: 0px !important;
    }
    .mm-slideout header .hamburger--collapse .hamburger-inner {
        top: -18px !important;
        left: 0px !important;
    }
   }
</style>


<!-- START SECTION ABOUT -->
<section class="about-us fh d-none">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 col-md-12 who-1">
                <div class="text-center">
                    <h2 class="text-center mb-4">About <span>Baytik</span></h2>
                </div>
                <div class="pftext more">
                    <p class="">
                       {!! $page->desc_en !!}
                    </p>
                </div>
               
                <div class="box bg-2 text-center">
                    <span class="text-center button button--moema button--text-thick button--text-upper button--size-s show-more">Read more</span>
                </div>
            </div>
            
            <script type="text/javascript">
                $('.more').css({height:'200px', overflow:'hidden'});
                $('.show-more').on('click', function() {
                    var $this = $('.more');
                    if ($this.data('open')) {
                        $this.animate({height:'200px'});
                        $this.data('open', 0);
                    }
                    else {
                        $this.animate({height:'100%'});
                        $this.data('open', 1);
                    }
                    $(this).text() === 'Read more' ? $(this).text('Read less') : $(this).text('Read more');
                });

            </script>
        </div>
    </div>
</section>
<!-- END SECTION ABOUT -->
<!-- .html -->



<!-- START SECTION ABOUT -->

    <style>
    .about-us{
        padding:40px 0px
    }
        .shadow-box{
            background: #fff;
        -webkit-box-shadow: 0 0 40px 0 rgb(0 0 0 / 10%);
        -moz-box-shadow: 0 0 40px 0 rgba(0, 0, 0, .1);
        box-shadow: 0 0 40px 0 rgb(0 0 0 / 10%);
        height: 100%;
        position: relative;
        }
        .about-box-img img{
            width: 100%;
            height: 400px;
            object-fit: cover;
        }
        .overlappingDesc{
            background: #fff;
            padding: 25px 45px;
            -webkit-box-shadow: 0 0 40px 0 rgb(0 0 0 / 6%);
            -moz-box-shadow: 0 0 40px 0 rgba(0, 0, 0, .06);
            box-shadow: 0 0 40px 0 rgb(0 0 0 / 6%);
            width: calc(100% - 120px);
            margin: auto;
            margin-top: -60px;
            position: relative;
            z-index: 9;
            border-radius: 6px;
        }
        
        .overlappingDesc h3{
            line-height: 2 !important;
            text-align: center;
            font-size: 24px;
            color: #686D52;
        }
        .pftext{
            width: calc(100% - 120px);
            margin: auto;
            padding-top: 20px !important;
            padding-bottom: 20px !important;
        }
        .pftext p span{
            font-size: 17px !important;
            line-height: 1.7 !important;
            margin-bottom: 20px !important;
            display: block;
            color: #000 !important;
        }
        .pftext p span strong{
            font-size: 24px;
            color: #3399ff;
        }
        @media(max-width:767.98px){
            .overlappingDesc {
                width: calc(100% - 40px);
                padding: 15px 25px;
                margin-top: 20px;
            }
            .pftext{
                width: calc(100% - 40px);
            }
        }
    </style>

    <section class="about-us">
        <div class="container">
            <div class="shadow-box">
                @if($page->image)
                <div class="about-box-img">
                    <img src="{{ $page->image }}" alt="" class="img-fluid w-100">
                </div>
                @endif
                <div class="overlappingDesc">
                    <h3>{{$page->title_en}}</h3>
                </div>
                <div class="pftext">
                    <p class="">
                       {!! $page->desc_en !!}
                    </p>
                </div>
            </div>
        </div>
    </section>

    @if(\Route::currentRouteName() == 'aboutus')
    <!-- START SECTION WHY CHOOSE US -->
    <section class="how-it-works bg-white-2">
        <div class="container">
            <div class="sec-title">
                <h2><span>Why </span>Choose Us</h2>
                <p>We provide full service at every step.</p>
            </div>
            <div class="row service-1">
                <article class="col-lg-4 col-md-6 col-xs-12 serv" data-aos="fade-up">
                    <div class="serv-flex">
                        <div class="art-1 img-13">
                            <img src="{{ asset('frontend/images/icons/icon-4.svg')}}" alt="" />
                            <h3>Wide Range Of Properties</h3>
                        </div>
                        <div class="service-text-p">
                            <p class="text-center">Our holiday homes are close to all the popular tourist locations in Dubai. From Studios to Private Villas, plan your stay on the go!</p>
                        </div>
                    </div>
                </article>
                <article class="col-lg-4 col-md-6 col-xs-12 serv" data-aos="fade-up">
                    <div class="serv-flex">
                        <div class="art-1 img-14">
                            <img src="{{ asset('frontend/images/icons/icon-5.svg')}}" alt="" />
                            <h3>Dedicated Guest Support</h3>
                        </div>
                        <div class="service-text-p">
                            <p class="text-center">Our guest support team works tirelessly to make your stay the most memorable one. Pack your bags and just come, we take care of everything else!</p>
                        </div>
                    </div>
                </article>
                <article class="col-lg-4 col-md-6 col-xs-12 serv mb-0 pt" data-aos="fade-up">
                    <div class="serv-flex arrow">
                        <div class="art-1 img-15">
                            <img src="{{ asset('frontend/images/icons/icon-6.svg')}}" alt="" />
                            <h3>Don’t Compromise on Privacy</h3>
                        </div>
                        <div class="service-text-p">
                            <p class="text-center">Our holiday homes offer you complete privacy and unhindered holiday experience. Nothing is more important than your privacy to us!</p>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </section>
    @endif
    
    <style>
        .testimonial-client{
            padding: 60px 20px 60px;
        }
        .client-testimonial-title{
            text-align: center;
            margin-bottom: 30px;
        }
        .client-testimonial-title h2 span{
            color: #3399ff;
        }
        .client-inner {
            /*display: flex;*/
            /*align-items: center;*/
            /*justify-content: space-between;*/
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-direction: column;
                /* align-content: center; */
                text-align: center;
        }

        .client-img {
            margin-right: 20px;
        }

        .client-img img {
            border-radius: 50%;
            width: 80px !important;
            height: auto;
        }

        .client-info {
            position: relative;
            padding: 25px 25px 25px 10px;
            background: url(https://baytikholidayhomes.com/public/website-assets/images/testimonial-quote.svg) no-repeat right 10px top 10px;
            background-size: 20px;
        }
        .testimonial-client .owl-carousel .owl-item .client-info img{
           width: 80px !important;
           height: auto !important;
        }


        .client-info h3 {
            font-size: 18px;
        }

        .client-info h4 {
            font-size: 16px;
        }

        .client-info p {
            font-size: 12px;
            line-height: 2;
            margin-bottom: 0 !important;
        }

        .readmore-btn {
            font-size: 14px;
            margin-bottom: 10px;
        }

        .readmore-btn a{
            text-decoration: none;
        }
        .rating {
                display: flex;
                justify-content: center;
                align-items: baseline;
        }

        .rating h3 {
            margin-bottom: 0;
            margin-right: 10px;
        }
        .rating h3 {
            font-size: 16px;
        }
        .rating h3 span {
            font-size: 36px;
        }

        .rating img {
            margin-left: 20px;
        }

        .rating img {
            width: 80px !important;
        }

        .bg {
            /*background: #fff;*/
            /*right: 0;*/
            /*width: 82%;*/
            /*position: absolute;*/
            /*height: 100%;*/
            /*-webkit-box-shadow: 0 0 40px 0 rgb(0 0 0 / 6%);*/
            /*-moz-box-shadow: 0 0 40px 0 rgba(0, 0, 0, .06);*/
            /*box-shadow: 0 0 40px 0 rgb(0 0 0 / 6%);*/
            /*z-index: -1;*/
        }
        
        .testimonial-client .owl-carousel .owl-nav .owl-next,
        .testimonial-client .owl-carousel .owl-nav .owl-prev,
        .testimonial-client .owl-carousel .owl-dot {
          background: #fff;
          color: inherit;
          border: 1px solid #e5e8ef;
          padding: 0 !important;
          font-size: 12px;
          width: 30px;
          height: 30px;
          align-items: center;
          justify-content: center;
          display: flex;
          outline: none;
          border-radius: 50%
        }

        .testimonial-client .owl-nav {
          display: block !important;
        }


        .testimonial-client .owl-carousel .owl-nav .owl-prev {
          position: absolute;
          left: -15px !important;
          top: 35%;
          background: #343a40 !important;
          border-color: #343a40 !important;
          color: #fff !important;
          transition: 0.5s all ease-in-out;
          width: 54px;
          height: 54px;
        }

        .testimonial-client .owl-carousel .owl-nav .owl-next {
          position: absolute;
          right: -15px !important;
          top: 35%;
          background: #343a40 !important;
          border-color: #343a40 !important;
          color: #fff !important;
          transition: 0.5s all ease-in-out;
          width: 54px;
          height: 54px;
        }



        .testimonial-client .owl-carousel .owl-nav .owl-next,.testimonial-client .owl-carousel .owl-nav .owl-prev{
            font-size: 0;
        }
        .testimonial-client .owl-carousel .owl-nav .owl-next:hover,
        .testimonial-client .owl-carousel .owl-nav .owl-prev:hover {
          background: #008cd8 !important;
          border-color: #008cd8 !important;
          color: #fff !important;
        }

        .testimonial-client .owl-carousel .owl-prev i, .testimonial-client .owl-carousel .owl-next i {
            font-size: 20px;
        }
        @media(max-width:992px){
            .testimonial-client .row{
                padding: 0px !important;
                margin: 0px !important;
            }
        }


        @media(max-width:599px){
            .client-inner {
                display: flex;
                justify-content: space-between;
                flex-direction: column;
                align-items: center !important;
                text-align: center !important;
            }
            .rating {
                display: flex;
                align-items: flex-end !important;
                justify-content: center !important;
            }
            .bg{
                display: none !important;
            }
            .testimonial-client{
                padding:  60px 10px 60px; !important;
            }
            .testimonial-client .container{
                padding: 0px !important;
                margin: 0px !important;
            }
            .testimonial-client .owl-carousel .owl-nav .owl-prev, .testimonial-client .owl-carousel .owl-nav .owl-next {
                width: 40px !important;
                height: 40px !important;
            }
        }
    </style>
    
    @if(isset($client_testimonials) && $client_testimonials->count() > 0)
    <div class="container-fluid testimonial-client">
        <div class="container">
            <div class="client-testimonial-title">
            <h2>What <span>People</span> Are Saying</h2>
        </div>
        <div class="row owl-carousel" id="client-testimonial-slider">
            @foreach ($client_testimonials as $key => $testimonial)
            <div class="col-lg-12">
                <div class="item">
                    <div class="client-inner">
                        <div class="client-img">
                           @if($testimonial->image)
                            <img src="{{$testimonial->image}}" alt="" />
                            @else
                            <img src="{{asset('frontend/images/user_avatar.png')}}" class="img-fluid" alt="">
                            <!-- <img src="{{ asset('frontend/images/testimonials/1.jpg') }}" class="img-fluid" alt=""> -->
                            @endif
                        </div>
                        <div class="client-info">
                            <h3>{{$testimonial->name}}</h3>
                            <h6>{{$testimonial->designation}}</h6>
                            <p>{{short_description($testimonial->desc_en,20)}}</p>
                            <!--<div class="readmore-btn">-->
                            <!--    <span><a href="#">Read More</a></span>-->
                            <!--</div>-->
                            <div class="rating">
                                <h3><span>{{$testimonial->ratings}}</span>/ 5</h3>
                                <span>via</span>
                                @if($testimonial->brand)
                                <img src="{{$testimonial->brand->image}}" data-toggle="tooltip" data-placement="bottom" title="{{$testimonial->brand->text_en}}" alt="">
                                @endif
                                <!-- <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/Airbnb_Logo_B%C3%A9lo.svg/2560px-Airbnb_Logo_B%C3%A9lo.svg.png" alt=""> -->
                            </div>
                        </div>
                        <div class="bg"></div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
        <!--<div class="owl-nav"><div class="owl-prev disabled"><i class="fas fa-long-arrow-alt-left"></i></div><div class="owl-next"><i class="fas fa-long-arrow-alt-right"></i></div></div>-->
        </div>
    </div>
    @endif

    @if (isset($partners) && $partners->count() > 0)
        <div class="partners bg-white-2">
            <div class="container">
                <div class="sec-title">
                    <h2><span>Our </span>Partners</h2>
                    <p>The Companies That Represent Us.</p>
                </div>
                <div class="owl-carousel style2">
                    @foreach ($partners as $row)
                        <div class="owl-item" data-aos="fade-up"><img src="{{ public_url() . $row->image }}" alt="{{ $row->name }}" /></div>
                    @endforeach
                </div>
            </div>
        </div>
    @endif


@endsection 

@section('script')
<script>
    $(".dropdown-filter").on("click", function () {
        $(".explore__form-checkbox-list").toggleClass("filter-block");
    });
</script>
@endsection