@extends('layouts/indexLayoutMaster')

@section('title', 'Somebuddy')

@section('content')

<section class="home-hero" style="background-image: url('{{asset('images/banners/' . $heroBanner['image'])}}');">
    <div class="container-fluid pt-5">
        <div class="row">
            <div class="col-md-6">
                <h2 class="hero-text text-white font-weight-bolder font-large-2 line-height-condensed mt-5 mb-2 text-center text-md-left" data-sal="slide-right" data-sal-duration="1000" data-lang="{{ app()->getLocale() }}" >
                    @if ( Config::get('app.locale') == 'id')
                        {{ $heroBanner['title'] }}
                    @else
                        {{ $heroBanner['title_en'] }}
                    @endif
                </h2>
            </div>
        </div>
    </div>
</section>

<section class="home-activities mb-5">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="list-activity slick-activity" data-sal="slide-down" data-sal-duration="1000">
                    @foreach($activities as $key => $data)
                        <a href="{{url('/buddies?activity=' . $data['title'])}}">
                            <div class="item-activity text-center d-block">
                                <div class="d-block item-image mb-1">
                                    @if (!empty($data['image']))
                                        <img src="{{asset('images/icon/' . $data['image'])}}"/>
                                    @else
                                        <img src="{{asset('images/icon/somebuddy-logo.png')}}"/>
                                    @endif
                                </div>
                                <div class="item-detail px-50">
                                    <p class="title font-medium-3 font-weight-bolder text-primary mb-25">
                                        @if ( Config::get('app.locale') == 'id')
                                            {{ $data['title'] }}
                                        @else
                                            {{ $data['title_en'] }}
                                        @endif
                                    </p>
                                    <p class="desc font-small-3 text-primary">
                                        @if ( Config::get('app.locale') == 'id')
                                            {{ $data['description'] }}
                                        @else
                                            {{ $data['description_en'] }}
                                        @endif
                                    </p>
                                </div>
                            </div>
                        </a>
                    @endforeach
                </div>
            </div>
            <div class="col-md-12 text-center mt-2">
                <button class="btn btn-outline-secondary round" data-sal="fade" data-sal-duration="1000" data-sal-delay="200" data-toggle="modal" data-target="#modal-activity">{{ __('landing.activity_more') }}</button>
            </div>
        </div>
    </div>
</section>

<section class="home-buddy mb-5" style="background-image: url('{{asset('images/banners/' . $bgBuddies['image'])}}');">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="title mb-3" data-sal="slide-down" data-sal-duration="1000">
                    <h2 class="font-large-2 font-weight-bolder text-center text-white">{{ __('landing.our_buddies') }}</h2>
                    <h3 class="font-weight-bolder text-center text-white">{{ __('landing.best_recommendation') }}</h2>
                </div>
            </div>
        </div>
        
        <div class="row item-lists">
            <div class="col-md-12 p-0 slick-buddy">
                @foreach($buddies as $key => $data)
                    @include('panels.item-buddy-slider')
                @endforeach
            </div>
        </div>
        <div class="row" data-sal="slide-up" data-sal-duration="1000">
            <div class="col text-center">
                <a href="{{route('buddies')}}" class="btn btn-light">{{ __('locale.view_more') }}</a>
            </div>
        </div>
    </div>
</section>

<section class="home-about-us mb-5 py-4">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-6 mb-2" data-sal="slide-right" data-sal-duration="1000">
                <h4 class="font-large-2 font-weight-bolder text-primary text-center text-lg-left">{{ __('landing.why_choose_us') }}</h4>
                <h3 class="font-large-2 font-weight-bolder text-center text-lg-left">
                    @if ( Config::get('app.locale') == 'id')
                        {{ $aboutUs['title'] }}
                    @else
                        {{ $aboutUs['title_en'] }}
                    @endif
                </h3>
            </div>
            <div class="col-md-6">
                <div class="row m-0 list-about">
                    @foreach($aboutUsItems as $key => $data)
                    <div class="col-6 col-md-4">
                        <div class="item-about text-center">
                            <div class="d-inline-block item-image mb-1">
                                @if (!empty($data['image']))
                                    <img src="{{asset('images/icon/' . $data['image'])}}"/>
                                @else
                                    <img src="{{asset('images/icon/somebuddy-logo.png')}}"/>
                                @endif
                            </div>
                            <div class="item-detail ">
                                <p class="desc font-weight-bolder font-small-3 text-primary">
                                    @if ( Config::get('app.locale') == 'id')
                                        {{ $data['title'] }}
                                    @else
                                        {{ $data['title_en'] }}
                                    @endif
                                </p>
                            </div>
                        </div>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-md-12">
                <p class="text-primary text-center text-lg-left">
                    @if ( Config::get('app.locale') == 'id')
                        {{ $aboutUs['description'] }}
                    @else
                        {{ $aboutUs['description_en'] }}
                    @endif
                </p>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 text-center mt-2">
                <a href="{{ url('about') }}" class="btn btn-outline-secondary round" data-sal="fade" data-sal-duration="1000" data-sal-delay="200">{{ __('locale.about_us_more') }}</a>
            </div>
        </div>
    </div>
</section>

@include('panels.promotion')

<section class="home-testimonial mb-5 py-4" >
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="title mb-5" data-sal="slide-down" data-sal-duration="1000">
                    <h2 class="font-large-2 font-weight-bolder text-center text-primary">{{ __('landing.what_they_say') }}</h2>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12 slick-testimonial">
                @foreach($testimonials as $data)
                <div class="item-testimonial text-center px-2" data-sal="fade" data-sal-duration="1000">
                    <span class="avatar mb-1">
                        <img class="round" src="{{asset('images/profile/' . $data['image'])}}" alt="avatar" height="100" width="100">
                    </span>
                    <h4 class="font-weight-bolder text-primary m-0">{{$data['name']}}</h4>
                    <p class="font-weight-bolder">{{$data['age']}}th</p>
                    @if ( Config::get('app.locale') == 'id')
                        {{ $data['description'] }}
                    @else
                        {{ $data['description_en'] }}
                    @endif
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>

@include('panels.call-to-action')
@include('panels.socmed')

{{-- <section>
    <div class="modal fade" id="modalProfile" tabindex="-1" role="dialog" aria-hidden="true" >
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
            <div class="modal-header bg-white">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body text-center">
                <div class="d-block">
                    <span class="d-inline-block" style="height: 100px">
                        <i data-feather="alert-circle" class="w-100 h-100"></i>
                    </span>
                </div>
                <p class="my-2">
                    {{ __('locale.complete_profile_note') }}
                </p>
                <a href="{{ route('settings') }}" class="btn btn-primary mb-3">{{ __('locale.complete_profile') }}</a>
            </div>
            </div>
        </div>
    </div>
</section> --}}

{{-- @include('panels.modal-waiting-verification') --}}

<section>
    <div class="modal fade text-left home-activities" id="modal-activity" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
            <div class="modal-content bg-light">
                <div class="modal-header bg-light">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body row">
                    @foreach($masterActivities as $key => $data)
                        <div class="col-md-2 col-sm-4 col-6">
                            <a href="{{url('/buddies?activity=' . $data['name'])}}">
                                <div class="item-activity text-center d-block mb-5">
                                    <div class="d-block item-image mb-1">
                                        @if (!empty($data['image']))
                                            <img src="{{asset('images/icon/' . $data['image'])}}"/>
                                        @else
                                            <img src="{{asset('images/icon/somebuddy-logo.png')}}"/>
                                        @endif
                                    </div>
                                    <div class="item-detail px-50">
                                        <p class="title font-medium-3 font-weight-bolder text-primary mb-25">
                                            @if ( Config::get('app.locale') == 'id')
                                                {{ $data['name'] }}
                                            @else
                                                {{ $data['name_en'] }}
                                            @endif
                                        </p>
                                    </div>
                                </div>
                            </a>
                        </div>
                    @endforeach
                </div>
                <div class="modal-footer bg-light">
                </div>
            </div>
        </div>
    </div>
</section>


<!--/ Page layout -->
@endsection

@section('page-script')
    {{-- Page js files --}}
    <script src="{{ asset(('js/scripts/home/index.js')) }}"></script>
    <!--Start of Tawk.to Script-->
    <script type="text/javascript">
        var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
        (function(){
        var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
        s1.async=true;
        s1.src='https://embed.tawk.to/61b860e380b2296cfdd19c20/1fms3kufr';
        s1.charset='UTF-8';
        s1.setAttribute('crossorigin','*');
        s0.parentNode.insertBefore(s1,s0);
        })();
    </script>
    <!--End of Tawk.to Script-->
@endsection