@extends('frontend.layouts.app')

@section('meta')
    <meta name="description" content="{{ getCachedOption('site_description_'.App::getLocale()) }}">
@endsection

@section('title', '聯絡我們')

@section('main')
<div class="full-more-layout" style="background:url(/frontend/images/bg-more-layout.png) no-repeat center;background-size:cover;">
    <div class="breadcrumbs">
        <div class="inner-container">
            <ul>
                <li><a href="{{ route('tsvn.home') }}">首頁</a></li>
                <li>聯絡我們</li>
            </ul>
        </div>
    </div>
</div>

<main class="full-content full-page page-contact">
    <div class="inner-container">
        <div class="main-contact flex row">
            <div class="col-contact info-contact">
                <h2>Transoft Việt Nam</h2>
                <div class="des-info-contact">
                    {!! getCachedOption('site_description_'.app()->getLocale()) !!}<br>
                </div>
                <ul class="list-info-contact">
                    <li><i class="fas fa-map-marker-alt"></i>{{ getCachedOption('contact_address_'.app()->getLocale()) }}</li>
                    <li><i class="fas fa-phone-alt"></i><a href="tel:{{ getCachedOption('contact_phone') }}">{{ getCachedOption('contact_phone') }}</a></li>
                    <li><i class="fas fa-envelope"></i><a href="mailto:{{ getCachedOption('contact_email') }}">{{ getCachedOption('contact_email') }}</a></li>
                    <li><i class="fab fa-line"></i>Line ID: {{ getCachedOption('social_line') }}</li>
                    <li><i class="fab fa-facebook-square"></i><a href="{{ getCachedOption('social_facebook') }}">{{ getCachedOption('social_facebook') }}</a></li>
                    <li><i class="fas fa-globe"></i><a href="https://transoftvietnam.com/">transoftvietnam.com</a></li>
                </ul>
            </div>
            <div class="col-contact form-contact">
                <h2>請填寫您的資料，我們將儘快與您聯繫!</h2>
                <div id="formmessage" style="display:none"></div>
				<div id="errmessage" style="display:none; color:red;"></div>
                <form id="contactform" action="" class="flex row" method="post">
                    <div class="field-form f-col-6">
                        <label for="name">姓名</label>
                        <input type="text" name="name" id="name" placeholder="Your name..." required>
                     
                    </div>
                    <div class="field-form f-col-6">
                        <label for="phone">聯絡電話</label>
                        <input type="number" name="phone" id="phone" placeholder="Your phone..." required>
                       
                    </div>
                    <div class="field-form f-col-6">
                        <label for="email">電子郵件</label>
                        <input type="text" name="email" id="email" placeholder="Your email..." required>
                        
                    </div>
                    <div class="field-form f-col-6">
                        <label for="subject">主旨</label>
                        <input type="text" name="subject" id="subject" placeholder="Subject..." required>
                       
                    </div>
                    <div class="field-form">
                        <label for="message">內容</label>
                        <textarea name="message" id="message" placeholder="Message..." required></textarea>
                       
                    </div>
                    <div class="field-form f-col-3 captcha">
                        <span>{!! captcha_img('flat_mini') !!}</span>
                        <img src="/images/refresh-page.png" alt="" id="reload" style="margin: 14px 5px;">
                    </div>
                    <div class="field-form f-col-3" style="margin-top:3px;">
                        <input type="text" name="captcha" id="captcha" class="form-control @error('captcha') is-invalid @enderror" placeholder="Captcha *" autocomplete="off" style="height:40px;" required>
                        @error('captcha')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                    <div class="field-form field-btn">
                        <button type="submit"><i class="far fa-paper-plane"></i>寄出</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="map-contact">
        {!! getCachedOption('contact_google_maps_'.app()->getLocale()) !!}
    </div>
</main>
@endsection

@push('js')
<script>
     $('#reload').click(function () {
        loadCaptcha();
    });

    $("#contactform").submit(function(event) {
        event.preventDefault();
        
        // $("#ajaxloader").show();
        // $("#contactform").hide();

        $.post('{{ route('contact.send') }}', {
            name : $('#name').val(),
            email : $('#email').val(),
            phone : $('#phone').val(),
            subject : $('#subject').val(),
            message : $('#message').val(),
            captcha : $('#captcha').val(),
            _token : '{{ csrf_token() }}'
            }, function (response){
                // $("#ajaxloader").hide();

                if (response.status && response.status === 'success'){
                    $("#contactform").remove();
                    $("#errmessage").hide();
                    $("#formmessage").html(response.message).show();
                }else {
                    $("#contactform").show();
                    loadCaptcha();
                    $("#formmessage").hide();
                    $("#errmessage").html(response.message).show();
                    
                }
            })
    });

        function loadCaptcha(){
            $.ajax({
                type: 'GET',
                url: '/contact/reload-captcha',
                success: function (data) {
                    $(".captcha span").html(data.captcha);
                }
            });
        }
</script>
@endpush