@if(inject('setting')->config('service') == 1)
	<div class="service-view hidden-xs" id="service-view">
		<div class="service-close text-center" onclick="$('#service-view').remove();">&times;</div>
		<ul class="service-list" {{ inject('visual')->url('service') }}>
			@if(inject('setting')->config('whatsapp'))
				<li class="whatsapp">
					<a href="https://api.whatsapp.com/send?phone={{inject('setting')->config('whatsapp')}}" target="_blank"><img src="{{ themePath('images/kf/whatsapp.png') }}" alt='{{ inject('setting')->config('whatsapp') }}' /></a>
				</li>
			@endif
			@if(inject('setting')->config('message_email'))
			<li class="email">
				<a href="mailto:{{ inject('setting')->config('message_email') }}" target="_blank"><img src="{{ themePath('images/kf/email.png') }}" alt='{{ inject('setting')->config('message_email') }}' /></a>
			</li>
			@endif
      @if(config('lang') == 'cn')
        @if(inject('setting')->config('qq'))
          <li class="qq">
            <a href="//wpa.qq.com/msgrd?v=3&amp;uin={{ inject('setting')->config('qq') }}&amp;site=qq&amp;menu=yes" target="_blank"><img src="{{ themePath('images/kf/qq.png') }}" alt='{{ inject('setting')->config('qq') }}' /></a>
          </li>
        @endif
        @if(inject('setting')->config('qr_code'))
          <li class="weixin">
            <a href="javascript:;;"><img src="{{ themePath('images/kf/weixin.png') }}" /></a>
            <div class="qr-code">
              <img src="{{ inject('setting')->config('qr_code') }}">
            </div>
          </li>
        @endif
      @endif
			<li class="message">
				<a href="{{ url('message') }}" target="_blank"><img src="{{ themePath('images/kf/message.png') }}" /></a>
			</li>
        <li class="chat">
          <a href="javascript:;;"><img src="{{ themePath('images/kf/chat.png') }}" /></a>
        </li>
		</ul>

    <div class="chat-box">
      <div class="title">
        <div class="img"><img class="avatar" alt="chat" src="{{ inject('setting')->config('kf_logo') }}"></div>
        <h3>{{ inject('setting')->config('kf_title') }}</h3>
        <div class="close">&times;</div>
      </div>
      <div class="body">
        <ul>
          <li>
            <h3>{{ inject('setting')->config('kf_title') }} <span>{{ date('H:i') }}</span></h3>
            <dd>{{ inject('setting')->config('kf_text1') }}</dd>
          </li>
          <li>
            <h3>{{ inject('setting')->config('kf_title') }} <span>{{ date('H:i') }}</span></h3>
            <dd>{{ inject('setting')->config('kf_text2') }}</dd>
          </li>
        </ul>
      </div>
      <form class="content">
        {!! Form::textarea('content', '', ['class'=>'form-control len-full', 'id'=>'chat-content', 'rows'=>4, 'placeholder'=>inject('setting')->langs('web', 'content')]) !!}
        <div class="btn">
          <button type="button" id="subBtn" class="submit">{{ inject('setting')->langs('system', 'submit') }}</button>
        </div>
      </form>
    </div>
	</div>
	<script>
		window.onload = function() {  
            $('.service-view').distance();
        }
    $('.service-list li.chat a').click(function (event){
        event.preventDefault()
        $('.service-view .chat-box').show()
    })
    $('.service-view .chat-box .close').click(function (){
        $('.service-view .chat-box').hide()
    })

    const textarea = document.getElementById('chat-content');
    textarea.addEventListener('keydown', function(event) {
        if (event.key === 'Enter' && !event.shiftKey) {
            let val = $(event.target).val()
            if (val) {
                sendData(val)
            }

            event.preventDefault();
        }
    });

    $(".chat-box #subBtn").click(function () {
        let val = $(".chat-box #chat-content").val()
        if (val) {
            sendData(val)
        }
    })

    function sendData(value) {
        var title = "{{ inject('setting')->config('kf_title') }}"
        var date = "{{ date('H:i') }}"
        var text1 = "{{ inject('setting')->config('kf_text3') }}"
        var text2 = "{{ inject('setting')->config('kf_text4') }}"
        $.ajax({
            type: 'POST',
            url: HOME_URL + '/service',
            headers: {
                'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content')
            },
            data: {'content': value},
            dataType: 'json',
            success: function (json) {
                if (json.status == 'success') {
                    $(".chat-box .body ul").append("<li><h3>" + title + " <span>" + date + "</span></h3><dd>" + text1 + "</dd></li><li><h3>" + title + " <span>" + date + "</span></h3><dd>" + text2 + "</dd></li>")
                    $('.chat-box .body').animate({
                        scrollTop: $('.chat-box .body').scrollTop() + $('.chat-box .body ul li:last-child').outerHeight(true) * 2
                    }, 100)
                }
                $("#chat-content").val('')
            }
        })
    }
	</script>

  <div class="mobile-service visible-xs">
    <ul class="service-item">
      @if(inject('setting')->config('whatsapp_status'))
        <li class="whatsapp">
          <a href="whatsapp://send?phone={{inject('setting')->config('whatsapp')}}" target="_blank"><img src="{{ themePath('images/kf/whatsapp.png') }}" alt='{{ inject('setting')->config('whatsapp') }}' />{{ inject('setting')->langs('web', 'Whatsapp') }}</a>
        </li>
      @endif
        @if(inject('setting')->config('phone_status'))
        <li class="skype">
          <a href="tel:{{ inject('setting')->config('tel') }}"><img src="{{ themePath('images/kf/phone.png') }}" alt='{{ inject('setting')->config('tel') }}' />{{ inject('setting')->langs('web', 'phone') }}</a>
        </li>
        @endif
        @if(inject('setting')->config('email_status'))
        <li class="email">
          <a href="mailto:{{ inject('setting')->config('message_email') }}"><img src="{{ themePath('images/kf/email.png') }}" alt='{{ inject('setting')->config('message_email') }}' />{{ inject('setting')->langs('web', 'email') }}</a>
        </li>
        @endif
        @if(inject('setting')->config('message_status'))
        <li class="message">
          <a href="{{ url('message') }}" target="_blank"><img src="{{ themePath('images/kf/message.png') }}" />{{ inject('setting')->langs('web', 'message') }}</a>
        </li>
        @endif
    </ul>
  </div>
  <script>
    $('.service-item li.top').click(function (event){
        event.preventDefault();
        $('html, body').animate({scrollTop:0}, 'slow');
    })
  </script>
@endif