@extends('app.layouts.master_sup')
@section('links')
<style>
    .ajolla-text-color{
        color: #6045FB !important;
    }
</style>
@stop
@section('content')

<div class="banner-area banner-common">
    <div class="container banner-pad">
        <div class="row">
            <div class="col-lg-1">
                </div>
            <div class="col-lg-10 " >
              
<center>
                    <h2 class="playfair-font header-policy" >Get in touch</h2>
             <p class="banner-desc-c-p">Ajolla Inc site thoughtfully designed for real humans which means the best user experience for your entire community of donors, fundraisers, customers, and staff.</p>
                     </center>
                    <br><br><br>
                  <form >  
                   @csrf
                    <div class="row">
                        <div class="col-xl-6 col-lg-6 col-sm-12">
 <div class="form-field">
 <label style="font-size:15px">Name</label>
              <input name="name"  id="name" type="text" placeholder="Name" class="input-field" required/>
</div>

</div>

<div class="col-xl-6 col-lg-6 col-sm-12">
 <div class="form-field">
 <label style="font-size:15px">Email</label>
              <input name="email"  id="email" type="email" placeholder="Email" class="input-field" required/>
</div>

</div>
<div>
 <div class="row">
                        <div class="col-xl-12 col-lg-12 col-sm-12">
 <div class="form-field">
        <br>
 <label style="font-size:15px">Subject</label>
              <input name="subject"  id="subject" type="text" placeholder="Subject" class="input-field" required/>
</div>

</div>
<div>
<div class="row">
                        <div class="col-xl-12 col-lg-12 col-sm-12">
 <div class="form-field">
        <br>
 <label style="font-size:15px">Message</label>
              <textarea name="message" id="message" style="resize:none;height:200px" placeholder="Enter Message" class="input-field" required ></textarea> 
</div>

</div>

</div>
<br><br>
<center>
 <button class="btn btn sapphire-color " style="width:140px;height:60px;"  > <span class="fot-9">SEND </span></button>
</center>
</div>

          </form>         
               
            </div>
            <div class="col-lg-1 ">
               
            </div>
        </div>



    </div>


</div>
                        </div>

                    </div>
                     
  

{{-- <div class="relative flex items-top justify-center min-h-screen bg-gray-100 sm:items-center py-4 sm:pt-0">
    <hello-world/>
</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 = $('#name').val();
        var email = $('#email').val();
        var subject = $('#subject').val();
        var message = $('#message').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