@extends( getThemePath() . '.layout.master')

@section('header')
@include( getThemePath() . '.partials.header')
@endsection

@section('content')
<section class="section-white">
    <div class="content-wrap">
        <div class="col">
            <h1 class="page-title">{{ $page->title }}</h1>
        </div> <!-- col -->
        <div class="col-half">
            <div class="w-[66%] pt-6">
                {!! $page->content !!}
            </div>
        </div> <!-- col-half -->
        <div class="col-half">
            @include( getThemePath() . '.notifications')

            {{-- Ajax Notifications --}}
            <div class="qp-notification qp-success hidden"></div>
            <div class="qp-notification qp-error hidden"></div>

            <h2>Send Us a Message</h2>

            <!-- form start -->
            {{-- <form method="POST" action="/contact-us-ajax" class="qp-form" role="form">
                {{ csrf_field() }} --}}
                <form method="POST" action="" class="qp-form" role="form">
                    <div class="qp-form-group">
                        <label for="name">Name</label>
                        <input type="text" name="name" class="form-control" id="name" placeholder="Your name"
                            value="{{ old('name') }}" required>
                    </div>
                    <div class="qp-form-group">
                        <label for="email">Email</label>
                        <input type="text" name="email" class="form-control" id="email" placeholder="Your Email"
                            value="{{ old('email') }}">
                    </div>
                    <div class="qp-form-group">
                        <label for="msg">Message</label>
                        <textarea name="msg" class="form-control" id="message"
                            placeholder="Your Message">{{ old('msg') }}</textarea>
                    </div>
                    <div class="qp-form-group">
                        <button type="submit" name="SendMessage" class="btn" id="SendMessage">Send
                            Message</button>
                    </div>
                </form>
        </div> <!-- qp-row -->
    </div> <!-- qp-page-content -->
    </div> <!-- content-wrap -->
</section> <!-- section-white -->
@endsection

@section('footer')
@include( getThemePath() . '.partials.footer')
@endsection

@section('scripts')
<script>
    $( document ).ready(function() {

        $.ajaxSetup({            
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
        });
                
        $('#SendMessage').click( function (e) {
            e.preventDefault();

            $('#SendMessage').attr('disabled','disabled');
            $('.qp-success').children().remove();
            $('.qp-error').children().remove();
            $('.qp-success').addClass('hidden');
            $('.qp-error').addClass('hidden');

            var name = $("input[name=name]").val();
            var email = $("input[name=email]").val();
            var msg = $("#message").val();

            if( name == '' || email == '' || msg == '' ) {
                $('#SendMessage').removeAttr("disabled");
                $('.qp-error').removeClass("hidden");
                $('.qp-error').addClass("block");
                if( name == '' ) {
                    var nameDiv = '<p>Name field is required.</p>';
                    $('.qp-error').append(nameDiv);
                }
                if( email == '' ) {
                    var emailDiv = '<p>Email field is required.</p>';
                    $('.qp-error').append(emailDiv);
                }
                if( msg == '' ) {
                    var msgDiv = '<p>Message field is required.</p>';
                    $('.qp-error').append(msgDiv);
                }
                return false;
            }
            else {

                let data = { name: name, email: email, msg: msg};

                $.ajax({
                    type:'post',
                    url:"{{ route('contact.us.ajax') }}",
                    dataType: 'json',
                    data:{
                        name:name,
                        email:email,
                        msg:msg
                    },
                    success:function(data) {
                        // console.log(data);
                        $('#SendMessage').removeAttr("disabled");
                        $('.qp-success').removeClass("hidden");
                        $('.qp-success').addClass("block");
                        var successDiv = '<p>' + data.message + '</p>';                                                    
                        $('.qp-success').append(successDiv);
                        $("input[name=name]").val("");
                        $("input[name=email]").val("");
                        $("#message").val("");                
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        var data = jqXHR.responseJSON;
                        $('#SendMessage').removeAttr("disabled");
                        console.log(data.errors);
                        
                        $('.qp-error').removeClass("hidden");
                        $('.qp-error').addClass("block");

                        var errorDiv = '<p>' + data.errors + '</p>';
                        $('.qp-error').append(errorDiv);


                        if( data.errors.name ) {
                            var nameDiv = '<p>' + data.errors.name + '</p>';
                            $('.qp-error').append(nameDiv);
                        }
                        if( data.errors.email ) {
                            var emailDiv = '<p>' + data.errors.email + '</p>';
                            $('.qp-error').append(emailDiv);
                        }
                        if( data.errors.msg ) {
                            var msgDiv = '<p>' + data.errors.msg + '</p>';
                            $('.qp-error').append(msgDiv);
                        }
                    }
                });
            }            
        });
    });
</script>
@stop