@extends('layouts.master')
@section('title', 'Contact Us | Ajolla Inc')
@section('links')
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<style>
    .input-group-text {
        height: 100%;
    }

    .ajolla-btn-primary{
        background-color: #6045FB;
        color: white;
    }

    .form-control::placeholder{
        color: #b4b4b4;
    }
</style>
@stop
@section('content')
<div class="container">
    <div class="row ajolla-row-1">
        <div class="col-md-8 mx-auto">
            <h1 class="text-center">Get in touch</h1>
            <h5 class="text-center text-muted">Ajolla Inc site thoughtfully designed for real humans which means the best user experience for your entire community of donors, fundraisers, customers, and staff.</h5>
        </div>
    </div>

    <div class="row ajolla-row-4">
        <div class="col-md-8 content-center mx-auto">
            <div class="xs-contact-form-wraper">
                <!-- <form action="submit" method="POST" id="xs-contact-form"> -->
                    @csrf
                    <div class="row xs-margin-0 xs-mb-30">
                        <div class="col-md-6 xs-padding-0 xs-pr-15">
                            <div class="xs-input-group">
                                <label for="xs_contact_name">Name</label>
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-user"></i></span>
                                    </div>
                                    <input type="text" name="name" class="form-control" id="xs_contact_name" placeholder="Name">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6 xs-padding-0 xs-pl-15">
                            <div class="xs-input-group">
                                <label for="xs_contact_email">Email</label>
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text"><i class="fas fa-envelope"></i></span>
                                    </div>
                                    <input type="email name="email" id="xs_contact_email"" class="form-control" placeholder="Email">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row xs-input-group xs-mb-30">
                        <label for="xs_contact_subject">Subject</label>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text"><i class="fas fa-file"></i></span>
                            </div>
                            <input type="text" class="form-control" name="subject" id="xs_contact_subject" placeholder="Subject">
                        </div>
                    </div>
                    <div class="row xs-massage-group xs-mb-30">
                        <label for="x_contact_massage">Message</label>
                        <div class="input-group mb-3">
                            <textarea name="massage" id="x_contact_massage" class="form-control" cols="30" rows="5" placeholder="Enter your message..."></textarea>
                        </div>
                    </div>
                    <div class="row xs-submit-wraper ajolla-row-4">
                        <div class="col-md-3 mx-auto">
                            <button name="submit" id="xs_contact_submit" class="form-control btn ajolla-btn-primary">SEND</button>
                        </div>
                    </div>
                <!-- </form> -->
            </div>
        </div>
    </div>
</div>

@stop
@section('scripts')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
<script>
    $('#xs_contact_submit').click(function(){
        var name = $('#xs_contact_name').val();
        var email = $('#xs_contact_email').val();
        var subject = $('#xs_contact_subject').val();
        var message = $('#x_contact_massage').val();
        if(name && email && subject && message){
            var submitURL = "{{env('APP_URL').'/support'}}";
            var formdata = new FormData();
            formdata.append('name', name);
            formdata.append('email', email);
            formdata.append('subject', subject);
            formdata.append('message', message);
            var requestOptions = {
                method: 'POST',
                body: formdata,
                redirect: 'follow'
            };
            fetch(
                submitURL, requestOptions
            ).then(data => {
                return data.json();
            }).then(
                result => {
                    toastr.success(result.data)
                    console.log(result)
                }
            );
        }else{
            toastr.error('Error! All fields are required');
        }
    });
</script>
@stop