@extends('layouts.front')

@section('content')

    <div id="page" data-barba="container">

        <!-- Page Header -->
        <div data-anim="true" class="page-header">

            <div class="page-header-wrap wrapper-small">

                <!-- Page Title -->
                <div class="page-title">
                    <h1 class="big-title">Get in touch!</h1>
                </div>
                <!-- /Page Title -->

            </div>

        </div>
        <!-- /Page Header -->

        <!-- Page Content -->
        <div id="content" class="page-content">

            <!--Section-->
            <div class="section">

                <!--Wrapper-->
                <div class="wrapper">

                    <!--Column-->
                    <div class="c-col-6">

                        <!--Text Wrapper-->
                        <div class="text-wrapper">

                            <h3 class="has-anim" data-stagger="0.1" data-duration="1.5" data-delay=".1" data-animation="linesUp">
                                Hi! Tell us about your project
                                <br>Fill the form below</h3>

                        </div>
                        <!--/Text Wrapper-->

                        <!-- Contact Form -->
                        <div class="alioth-form">

                            <form id="contact-form" action="{{ route('front.contact_send') }}" method="post">
                            	@csrf
                                <!-- Form Field -->
                                <div class="field-wrap">
                                    <label>
                                        Company Name
                                    </label>
                                    <input type="text" name="company" />
                                </div>
                                <!--/ Form Field -->

                                <!-- Form Field -->
                                <div class="field-wrap">
                                    <label>
                                        Your Name
                                    </label>
                                    <input type="text" name="fullname" required />
                                </div>
                                <!--/ Form Field -->

                                <!-- Form Field -->
                                <div class="field-wrap">
                                    <label>
                                        Phone number
                                    </label>
                                    <input type="phone" name="phone" required />
                                </div>
                                <!--/ Form Field-->

                                <!-- Form Field -->
                                <div class="field-wrap">
                                    <label>
                                        E-mail
                                    </label>
                                    <input type="email" name="email" required />
                                </div>
                                <!--/ Form Field-->

                                <!-- Form Field (Textarea)-->
                                <div class="message-wrap">
                                    <label>
                                        Your message
                                    </label>
                                    <textarea rows="8" name="comments"></textarea>
                                </div>
                                <!--/ Form Field (Textarea)-->

                                <!-- Button -->
                                <div class="send-wrap">
                                    @if (session('contact_success'))
                                    <div style="padding:  15px 0;">
                                        We received your message and will contact you as soon as possible!
                                    </div>
                                    @endif
                                    @if (session('contact_recaptcha'))
                                    <div style="padding:  15px 0;">
                                        Please complete the Recaptcha to proceed.
                                    </div>
                                    @endif
                                    <button type="submit" class="button button-block g-recaptcha" data-sitekey="6Lfgg5gpAAAAAEL16xpnSW8BoMKNHA5tEIodHdn_" data-callback='onContactFormSubmit' data-action='submit'>Submit</button>
                                </div>
                                <!--/ Button -->

                            </form>
                        </div>
                        <!--/Contact Form -->

                    </div>
                    <!--/Column-->

                    <!--Column-->
                    <div style="margin-top: -100px" class="c-col-6">

                        <!--Single Image-->
                        <div class="single-image">

                            <img class="has-anim" data-animation="slideUp" data-duration="2" data-delay="0" alt="Single Image" src="{{ asset('assets/img/banners/contact-us-2.jpg') }}">

                        </div>
                        <!--/Single Image-->

                    </div>
                    <!--/Column-->

                </div>
                <!--/Wrapper-->

            </div>
            <!--/Section -->


            <!--Section-->
            <div style="background: #ebebeb; padding-top: 100px;padding-bottom: 30px" class="section no-margin">

                <!--Wrapper-->
                <div class="wrapper-small">

                    <!--Column-->
                    <div class="c-col-4">

                        <!--Text Wrapper-->
                        <div class="text-wrapper">

                            <h2 style="margin-bottom: 0">Let's talk</h2>
                            <p style="color: #191b1d">Call us.</p>

                            <span style="height: 50px" class="a-empty-space"></span>

                            <a class="inner-button dark" href="tel:+302810360263">+30 281 036 0263</a>

                        </div>
                        <!--/Text Wrapper-->

                    </div>
                    <!--/Column-->

                    <!--Column-->
                    <div class="c-col-4">

                        <!--Text Wrapper-->
                        <div class="text-wrapper">

                            <h2 style="margin-bottom: 0;">Drop a line</h2>
                            <p style="color: #191b1d">Send us an e-mail.</p>

                            <span style="height: 50px" class="a-empty-space"></span>

                            <a class="inner-button dark" href="mailto:info@stigma.gr">info@stigma.gr</a>

                        </div>
                        <!--/Text Wrapper-->

                    </div>
                    <!--/Column-->

                    <!--Column-->
                    <div class="c-col-4">

                        <!--Text Wrapper-->
                        <div class="text-wrapper">

                            <h2 style="margin-bottom: 0;">Our Office</h2>
                            <p style="color: #191b1d">Discuss your idea in person.</p>

                            <span style="height: 50px" class="a-empty-space"></span>

                            <a class="inner-button dark" href="https://www.google.com/maps/place/Stigma+-+the+ad+studio/@35.3310413,25.136851,15z/data=!4m6!3m5!1s0x149a5980c2ee036d:0xe3efb987a7fdc3a9!8m2!3d35.3310413!4d25.136851!16s%2Fg%2F1q5gjf5nk?entry=ttu" target="_blank">View on map</a>

                        </div>
                        <!--/Text Wrapper-->

                    </div>
                    <!--/Column-->

                </div>
                <!--/Wrapper-->

            </div>
            <!--/Section -->

            <!--Section -->
            <div class="section">

                <!--Wrapper-->
                <div class="wrapper-full no-margin">

                    <!--Column-->
                    <div class="c-col-12 no-gap no-margin">

                        <!-- Page Nav -->
                        <div class="alioth-page-nav" style="background-color: #f1f1f1">

                            <!--Page URL-->
                            <a href="{{ route('front.about') }}">

                                <!-- Page Title -->
                                <div class="page-title">About Us</div>
                                <!-- /Page Title -->

                                <!-- Page Sub-Title -->
                                <div class="page-sub-title">Something more about the agency.</div>
                                <!-- /Page Sub-Title -->

                            </a>

                        </div>
                        <!-- /Page Nav -->

                    </div>
                    <!--/Column-->

                </div>
                <!--/Wrapper-->

            </div>
            <!--/Section -->

        </div>
        <!-- /Page Content -->

    </div>
    
@endsection

@section('extra_js')
    <script>
       function onContactFormSubmit(token) {
         document.getElementById("contact-form").submit();
       }
    </script>
@endsection