@extends('front.layouts.app')

@section('content')

    <div class="main-content-box">
        <form id="step-form" action="{{route('front.step.eight.submit')}}" method="post" enctype='multipart/form-data' @if(!empty($detail->review_pages) && !in_array(8,$detail->review_pages)) class="from-overlayer" @endif>
            @csrf
            <div class="height-counter d-flex  justify-content-between flex-column">
                <div class="login-box pad-t">
                    <div class="container">
                        <div class="row">
                            @include('front.common.review-alert',['number'=>8])
                            <div class="col-sm-12  pad-x-100">
                                <div class="login-box-des">
                                    <div class="login-title">
                                        {{__('Provide below social media links for your store.')}}
                                    </div>
                                    <h4 class="cat-title mb-0">
                                        {{__('Social Links')}}
                                    </h4>
                                    {{--<div class="d-flex  flex-wrap flex-md-row flex-column check-ctm-ha">
                                        <div class="term-check d-flex align-items-start align-items-md-center mt-1 mr-30">
                                            <label class="terms-check mr-2 mr-md-1 mt-1 mt-md-0">
                                                <input type="checkbox" name="facebook_check"
                                                       id="facebook-check" {{isset($store->facebook_link)? 'checked': ''}}>
                                                <span class="checkmark"></span>
                                            </label>
                                            <div class="t-des text-capitalize">
                                                {{__('Facebook')}}
                                            </div>
                                        </div>
                                        <div class="term-check d-flex align-items-start align-items-md-center mr-30 mt-1">
                                            <label class="terms-check mr-2 mr-md-1 mt-1 mt-md-0">
                                                <input type="checkbox" name="instagram_check"
                                                       id="instagram-check" {{isset($store->instagram_link)? 'checked': ''}}>
                                                <span class="checkmark"></span>
                                            </label>
                                            <div class="t-des text-capitalize">
                                                {{__('instagram')}}
                                            </div>
                                        </div>
                                        <div class="term-check d-flex align-items-start align-items-md-center mt-1 mr-30">
                                            <label class="terms-check mr-2 mr-md-1 mt-1 mt-md-0">
                                                <input type="checkbox" name="youtube_check"
                                                       id="youtube-check" {{isset($store->youtube_link)? 'checked': ''}}>
                                                <span class="checkmark"></span>
                                            </label>
                                            <div class="t-des text-capitalize">
                                                {{__('youtube')}}
                                            </div>
                                        </div>
                                    </div>--}}
                                </div>
                            </div>

                            <div class="col-12 pad-x-100">
                                <div class="row">
                                    <div class="col-md-6" id="facebook-link">
                                        <div class="input-style">
                                            <label>{{__('Facebook')}}
                                                <div class="characters">{{__('format: www.facebook.com/abc')}}</div>
                                                <span class="text-danger"></span></label>
                                            <input type="text" placeholder="{{__('e.g www.facebook.com/abc')}}"
                                                   class="ctm-input" name="facebook_link"
                                                   value="{{isset($store->facebook_link)? $store->facebook_link: old('facebook_link')}}">
                                            @include('front.common.alert',['input' => 'facebook_link'])
                                        </div>
                                    </div>
                                    <div class="col-md-6" id="instagram-link">
                                        <div class="input-style">
                                            <label>{{__('Instagram')}}
                                                <div class="characters">{{__('format: www.instagram/abc')}}</div>
                                                <span class="text-danger"></span></label>
                                            <input type="text" placeholder="{{__('e.g www.instagram/abc')}}"
                                                   class="ctm-input" name="instagram_link"
                                                   value="{{isset($store->instagram_link)? $store->instagram_link: old('instagram_link')}}">
                                            @include('front.common.alert',['input' => 'instagram_link'])
                                        </div>
                                    </div>
                                    <div class="col-md-6" id="youtube-link">
                                        <div class="input-style">
                                            <label>{{__('YouTube')}}
                                                <div class="characters">{{__('format: www.youtube.com/abc')}}</div>
                                                <span class="text-danger"></span></label>
                                            <input type="text" placeholder="{{__('e.g www.youtube.com/abc')}}"
                                                   class="ctm-input" name="youtube_link"
                                                   value="{{isset($store->youtube_link)? $store->youtube_link: old('youtube_link')}}">
                                            @include('front.common.alert',['input' => 'youtube_link'])
                                        </div>
                                    </div>

                                    <div class="col-md-6" id="youtube-link">
                                        <div class="input-style">
                                            <label>{{__('Twitter')}}
                                                <div class="characters">{{__('format: www.twitter.com/abc')}}</div>
                                                <span class="text-danger"></span></label>
                                            <input type="text" placeholder="{{__('e.g www.twitter.com/abc')}}"
                                                   class="ctm-input" name="twitter_link"
                                                   value="{{isset($store->twitter_link)? $store->twitter_link: old('twitter_link')}}">
                                            @include('front.common.alert',['input' => 'twitter_link'])
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-sm-12  pad-x-100">
                                <div class="login-box-des">
                                    <h4 class="cat-title mb-0">
                                        {{__('Enter your Facebook Account credentials')}} <span class="us-font-small"> ({{__('for integration purpose')}})</span>
                                    </h4>
                                </div>
                            </div>

                            <div class="col-12 pad-x-100">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="input-style">
                                            <label>{{__('Email')}}<span
                                                        class="text-danger"></span></label>
                                            <input type="email" placeholder="{{__('Email *')}}" class="ctm-input"
                                                   name="facebook_email"
                                                   value="{{isset($store->facebook_email)? $store->facebook_email: old('facebook_email')}}">
                                            @include('front.common.alert',['input' => 'facebook_email'])
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="input-style">
                                            <label>{{__('Password')}}<span
                                                        class="text-danger"></span></label>
                                            <input type="text" placeholder="{{__('Password')}}" class="ctm-input"
                                                   name="facebook_password"
                                                   value="{{isset($store->facebook_password)? $store->facebook_password: old('facebook_password')}}">
                                            @include('front.common.alert',['input' => 'facebook_password'])
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="sub-label-nete">{{__('Please create a new facebook account with your store name, which will enable your store to let users login with facebook account.')}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row pt-2">
                            <div class="col-sm-12  pad-x-100">
                                <div class="login-box-des">
                                    <h4 class="cat-title mb-0">
                                        {{__('Enter your Gmail Account credentials')}} <span class="us-font-small"> ({{__('for integration purpose')}})</span>
                                    </h4>
                                </div>
                            </div>

                            <div class="col-12 pad-x-100">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="input-style">
                                            <label>{{__('Email')}}<span
                                                        class="text-danger"></span></label>
                                            <input type="email" placeholder="{{__('Email *')}}" class="ctm-input"
                                                   name="gmail_email"
                                                   value="{{isset($store->gmail_email)? $store->gmail_email: old('gmail_email')}}">
                                            @include('front.common.alert',['input' => 'gmail_email'])
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <div class="input-style">
                                            <label>{{__('Password')}}<span
                                                        class="text-danger"></span></label>
                                            <input type="text" placeholder="{{__('Password')}}" class="ctm-input"
                                                   name="gmail_password"
                                                   value="{{isset($store->gmail_password)? $store->gmail_password: old('gmail_password')}}">
                                            @include('front.common.alert',['input' => 'gmail_password'])
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="sub-label-nete">{{__('Please create a new gmail account relevant to your store, which will enable your store to let users login with gmail account directly.')}}</div>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>
                </div>


                @include('front.common.step-pages')
            </div>
        </form>
    </div>

@endsection

@push('script-page-level')
    <script>
        $(document).ready(function () {
            $('input:checkbox[name="facebook_check"]').change(function () {
                    if ($(this).is(':checked')) {
                        $("#facebook-link").show()
                    } else {
                        $("#facebook-link").hide()
                    }
                }
            );

            $('input:checkbox[name="instagram_check"]').change(function () {
                    if ($(this).is(':checked')) {
                        $("#instagram-link").show()
                    } else {
                        $("#instagram-link").hide()
                    }
                }
            );

            $('input:checkbox[name="youtube_check"]').change(function () {
                    if ($(this).is(':checked')) {
                        $("#youtube-link").show()
                    } else {
                        $("#youtube-link").hide()
                    }
                }
            );
        });
    </script>
@endpush