@extends('template.main-template')

@section('content')
    <section class="custom-hero"></section>
    <div id="content">

        <!--======= CONATACT  =========-->
        <section class="contact padding-top-100 padding-bottom-100">
            <div class="container">
                <div class="contact-form">
                    <h5 class="text-center" style="font-size: 2.3em;">Message us</h5>
                    <div class="row">
                        <div class="col-md-8">

                            <!--======= Success Msg =========-->
                            @if (session('success'))
                            <div id="" class="success-msg"> <i class="fa fa-paper-plane-o"></i>
                                {{session()->get('success')}}
                            </div>
                            @endif

                            <!--======= FORM  =========-->
                            <form role="form" id="contact_form" class="contact-form" method="post"
                                action="{{ route('actions.sendContactForm') }}">
                                @csrf
                                <ul class="row">
                                    <li class="col-sm-6">
                                        <label>full name *
                                            <input type="text" class="form-control" name="name" id="name"
                                                placeholder="">
                                        </label>
                                    </li>
                                    <li class="col-sm-6">
                                        <label>Email *
                                            <input type="text" class="form-control" name="email" id="email"
                                                placeholder="">
                                        </label>
                                    </li>
                                    <li class="col-sm-6">
                                        <label>Phone *
                                            <input type="text" class="form-control" name="phone" id="company"
                                                placeholder="">
                                        </label>
                                    </li>
                                    <li class="col-sm-6">
                                        <label>SUBJECT
                                            <input type="text" class="form-control" name="subject" id="website"
                                                placeholder="">
                                        </label>
                                    </li>
                                    <li class="col-sm-12">
                                        <label>Message
                                            <textarea class="form-control" name="msg" id="message" rows="5" placeholder=""></textarea>
                                        </label>
                                    </li>
                                    <li class="col-sm-12">
                                        {{-- <div id="recaptchaContainer"></div> --}}
                                        <div class="g-recaptcha" data-sitekey="{{ env('WEBSITE_KEY', '6LcRWLgpAAAAAASQv_KLrARI1KKZIR-fvdSYVP8B') }}"></div>
                                    </li>
                                    <li class="col-sm-12">
                                        <button type="submit" value="submit" class="btn" id="btn_submit"
                                            onClick="proceed();">SEND</button>
                                    </li>
                                </ul>
                            </form>
                        </div>

                        <!--======= ADDRESS INFO  =========-->
                        <div class="col-md-4">
                            <div class="contact-info">
                                <h6>OUR ADDRESS</h6>
                                <ul>
                                    <li> <i class="icon-map-pin"></i> 1800 N Powerline Rd #5, Pompano Beach, FL 33069</li>
                                    <li> <i class="icon-call-end"></i> 954.586.4535</li>
                                    <li> <i class="icon-envelope"></i> <a href="mailto:info@permshield.com"
                                            target="_top">info@permshield.com</a> </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
@endsection

@push('javascript')
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script defer src="https://www.google.com/recaptcha/api.js" async defer></script>
@endpush

@push('css')
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
@endpush