@extends('template.coin.layouts.base')

@section('title', __('Support'))

@section('css')
<link href="{{getTemplateFiles('coin')}}/assets/user/css/app.css?ver=132" type="text/css" rel="stylesheet"> 
<style>
    .hide{
        display: none !important;
    }
</style>
@endsection

@section('content')
<div class="nk-content nk-content-fluid">
    <div class="container-xl wide-lg">
        <div class="nk-content-body">
            <div class="content-page">
                <div class="nk-block-head nk-block-head-lg">
                    <div class="nk-block-head-content">
                        <h3 class="nk-block-title">Contact Us</h3>
                    </div>
                </div>
                <div class="nk-block card card-bordered card-stretch">
                    <div class="card-inner card-inner-lg">
                        <article class="entry">
                            <h4>Get In Touch</h4>
                            <p>If you need advice or have any question in mind or technical assistance, do not hesitate to contact our specialists via email or livechat.</p>
                            <p><strong>Email Address:</strong> {{system_settings('site_email')}}</p>
                            @if(!blank(system_settings('site_phone_number')))
                            <p><strong>Phone Number:</strong> {{system_settings('site_phone_number')}}</p>
                            @endif
                            @if(!blank(system_settings('livechat')))
                            <p><strong>Live Chat:</strong><a href="{{system_settings('livechat')}}" class="btn btn-primary">Contact Live Support</a></p>
                            @endif
                            
                        </article>
                        <form method="POST" action="{{route('support.contact')}}" class="mt-5 form-public form-validate is-alter" novalidate="novalidate" id="formpublic">
                            <h4>Support Form</h4>
                            <p>Contact us using the contact form and we will respond immediately.</p>
                             @if(Session::has('errmessage'))
                    <div class="alert alert-danger alert-thick alert-plain">
                        <div class="alert-cta flex-wrap flex-md-nowrap g-2">
                            <div class="alert-text has-icon">
                                <em class="icon ni ni-info-fill text-danger"></em>
                                <p>{{Session::get('errmessage')}}</p>
                            </div>
                            <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
    <span aria-hidden="true" style="color:#000">&times;</span>
  </button> 
                        </div>
                    </div>
                    @endif
                    
                    @if(Session::has('sucmessage'))
                    <div class="alert alert-success alert-thick alert-plain">
                        <div class="alert-cta flex-wrap flex-md-nowrap g-2">
                            <div class="alert-text has-icon">
                                <em class="icon ni ni-info-fill text-success"></em>
                                <p>{{Session::get('sucmessage')}}</p>
                            </div>
                           <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
    <span aria-hidden="true" style="color:#000">&times;</span>
  </button> 
                        </div>
                    </div>
                    @endif
                            <h5 id="errmessage" style="color:red"></h5>
                            <div class="row g-3">
                                <div class="col-12">
                                    <div class="form-group">
                                        <label for="subject" class="form-label">Subject <span class="text-danger">*</span></label>
                                        <div class="form-control-wrap">
                                            <input type="text" class="form-control form-control-lg" name="subject" id="subject" value="" required="" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label for="message" class="form-label">Message <span class="text-danger">*</span></label>
                                        <div class="form-control-wrap">
                                            <textarea name="message" class="form-control" id="message" placeholder="Enter your message here..." required=""></textarea>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-12">
                                    <div class="form-group mt-1">
                                        @csrf
                                        <button class="btn btn-primary btn-lg btn-mw " >
                                            <span class="spinner-border spinner-border-sm hide" role="status" aria-hidden="true"></span>
                                            <span>Submit</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


@endsection

@section('js')
<script>
   $('#submitx-form').on('click' , function(e){
       e.preventDefault();
       var data = $('#formpublic').serialize();
       var url = $("#formpublic").attr('action');
       $.ajax({
           type: "POST",
           url: url,
           data: data,
           dataType: 'json',
           
           beforeSend: function(){
               $(".spinner-border").removeClass('hide');
           },
           
           success: function(res) {
               if(res.status == true){
                   
               }else{
                  $("#errmessage").text(res.error) 
               }
           },
           
           complete: function() {
               $(".spinner-border").addClass('hide');
           },
       })
   }) 
</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/5d5056b9eb1a6b0be607048c/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->
@endsection