@extends('layouts.app')
@section('content')

    <div id="contactus" class="wrap-bg">
        <!-- .container -->
        <div class="container">
            <h3>Contact Iviggo</h3>
            <div class="row">
                <div class="col-lg-4 col-md-4 col-sm-6 mt-4 contact-order">
                    <h6>iviggo.com</h6>
                    c/o TEO A/S<br />
                    Njalsgade 74, 4 sal<br />
                    2300 Copenhagen<br />
                    Denmark<br />
                    +45 42217569<br />
                    VAT/CVR: DK26522633<br />

                    <hr >

                    <h6>Contact info</h6>
                    <a href="mailto:support@iviggo.com">support@iviggo.com</a>
                    <p>(All communication in English, please)</p>
                </div>
                <div class="col-lg-8 col-md-8 col-sm-6 mt-4 mb-5">
                    <form method="post" id="contact-form" action="{{ route('contact-submit') }}" data-type="">

                        {{ csrf_field() }}
                        @include('common.flash_messages')
                        <div class="form-row">
                            <div class="form-group col-md-12">
                                <label for="first_name" class="required">Name</label>
                                <input id="first_name" name="name" required class="form-control" type="text"  value="{{old('name')}}" autocomplete="off">
                            </div>

                        </div>
                        <div class="form-row">
                            <div class="form-group col-md-12">
                                <label for="first_name" class="required">Email</label>
                                <input id="email" name="email" required class="form-control" type="email" value="{{old('email')}}" autocomplete="off">
                            </div>

                        </div>


                        <div class="form-row">
                            <div class="form-group col-md-12">
                                <label for="first_name" class="required">Message</label>

                                <textarea name="message" class="form-control" placeholder="(All communication in English, please)" required></textarea>
                            </div>


                        </div>





                        <div class="form-row">

                            <div class="form-group col-md-4">
                                <div class="captcha">
                                    <span>{!! captcha_img() !!}</span>
                                    <button type="button" class="btn-manage" id="refresh"><i class="fa fa-sync" title="Refresh"></i></button>
                                </div>
                            </div>

                            <div class="form-group col-md-3">
                                <input id="captcha" type="text" class="form-control" placeholder="Enter Captcha" name="captcha" ></div>


                        </div>


                        <div class="form-row pt-3">
                            <button type="submit" class="color-two btn-custom ">Send Message</button>
                        </div>
                    </form>
                </div>

            </div>

        </div>
    </div>
@endsection

@push('scripts')
    <script type="text/javascript">
        $('#refresh').click(function(){
            $.ajax({
                type:'GET',
                url:'refreshcaptcha',
                success:function(data){
                    $(".captcha span").html(data.captcha);
                }
            });
        });
    </script>
@endpush