@extends('layouts.home')
@section('styles')
    <style>
        body {
            background-image: url(../images/bg.png);
            background-size: 100% 100%;
        }
    </style>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
@endsection
@section('body')
    <h1 class="section-header">Contact</h1>
{{-- {{dd(session()->all())}} --}}
    <div class="row ">
        <div class="col-12 pl-4">
            <div class="is-invalid invalid-feedback">
                {{ $errors->first('general') }}
            </div>
            @if (session('success'))
                <div class="is-valid"></div>
                <div class="valid-feedback">
                    {{ session('success') }}
                </div>
            @endif
        </div>
    </div>


    <div class="contact-wrapper">

        <form id="contact-form" method="post" action={{ route('contact-us.save') }}>
            @csrf
            <div class="row">
                <div class="col-12">
                    <div class="form-group">
                        <label for="">Email</label>
                        <input value="{{ old('email') }}" type="text"
                            class='form-control {{ $errors->has('email') ? 'is-invalid' : '' }}' name="email"
                            id="email" aria-describedby="helpId" placeholder="">
                        <div class="invalid-feedback">
                            {{ $errors->first('email') }}
                        </div>
                    </div>
                </div>

            </div>

            {{-- <button type="submit" class="btn btn-primary">Submit</button> --}}
            <button class="g-recaptcha" data-sitekey="6LezBJkmAAAAAFe7AgtxTgPUJLVnmG8lx5GCXeNo" data-callback='onSubmit'
            data-action='submit'> Send Message</button>


        </form>

        <script>
            function onSubmit(token) {

                $.ajax({
                type: 'POST',
                url: 'http://localhost:8000/contact-us',
                dataType: 'json',
                data: {
                    '_token': $('input[name=_token]').val(),
                },
                success: function(data) {
                    console.log(data);
                }});
            }
        </script>
    </div>
@endsection