@extends('layouts.master')

@section('title', 'Contacter le bureau s\'Architecturer')

@section('meta_description', 'Contactez-nous pour discuter de votre projet de construction ou de rénovation en Suisse.
    Remplissez notre formulaire, envoyez un e-mail ou appelez-nous pour une consultation personnalisée.');

@section('content')

    <!-- section start -->
    <section class="layout-pt-xl layout-pb-xs">
        <!-- container start -->
        <div class="container">

            <!-- row start -->
            <div class="row">
                <div class="col-xl-9 offset-xl-1 col-lg-11">
                    <div class="sectionHeading -lg">
                        <p class="sectionHeading__subtitle">
                            Contact
                        </p>
                        <h1 class="sectionHeading__title leading-sm">
                            Collaborons ensemble.
                        </h1>
                    </div>
                </div>
            </div>
            <!-- row end -->

            <!-- row start -->
            <div class="row justify-content-center layout-pt-md">
                <div class="col-xl-10">
                    <div class="row x-gap-48 y-gap-48">
                        <div class="col-lg-3 col-md-6 col-sm-8">
                            <h4 class="text-xl fw-600">
                                Localiser
                            </h4>
                            <div class="text-dark mt-12">
                                <p>Suisse</p>
                            </div>
                        </div>

                        <div class="col-lg-auto offset-lg-1 col-md-6">
                            <h4 class="text-xl fw-600">
                                Contacter
                            </h4>
                            <div class="text-dark mt-12">
                                <div>
                                    <a class="button -underline" href="{{ route('mail-contact') }}">Envoyer un e-mail</a>
                                </div>
                                <div class="mt-4">
                                    <a class="button -underline" href="{{ route('tel-contact') }}">Appeler le bureau</a>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-auto offset-lg-1">
                            <h4 class="text-xl fw-600">
                                Suivre
                            </h4>
                            <div class="social -bordered mt-16 md:mt-12">

                                <a class="social__item text-black border-dark"
                                    href="https://www.instagram.com/sarchitecturer/" target="_blank">
                                    <i class="fa fa-instagram"></i>
                                </a>
                                <a class="social__item text-black border-dark" href="https://facebook.com/sarchitecturer/"
                                    target="_blank">
                                    <i class="fa fa-facebook"></i>
                                </a>
                                <a class="social__item text-black border-dark"
                                    href="https://www.linkedin.com/company/sarchitecturer" target="_blank">
                                    <i class="fa fa-linkedin"></i>
                                </a>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- row end -->

        </div>
        <!-- container end -->
    </section>
    <!-- section end -->


    <!-- section start -->
    <section class="layout-pt-md layout-pb-lg">
        <!-- container start -->
        <div class="container">
            <!-- row start -->
            <div class="row justify-content-center">
                <div class="col-xl-10">
                    @if (session('success'))
                        <div class="alert-success">
                            {{ session('success') }}
                        </div>
                    @endif

                    @if (session('error'))
                        <div class="alert-error">
                            {{ session('error') }}
                        </div>
                    @endif

                    <div class="sectionHeading -sm">
                        <h2 class="sectionHeading__title">
                            Écrivez-nous
                        </h2>
                        <p class="text-black leading-md mt-12">
                            Formulaire de contact
                        </p>
                    </div>
                </div>

                <div class="w-1/1"></div>
                <div class="col-xl-10 mt-48 sm:mt-32">
                    <div class="contact-form -type-1">
                        <meta name="form-submit-route">
                        <form method="POST" action="{{ route('form.submit') }}" class="js-ajax-form row x-gap-40 y-gap-32">
                            @csrf
                            <div class="col-lg-6">
                                <label class="js-input-group">
                                    Nom
                                    <input type="text" name="name" data-required placeholder="Votre nom">
                                    <span class="form__error"></span>
                                </label>
                            </div>

                            <div class="col-lg-6">
                                <label class="js-input-group">
                                    Téléphone
                                    <input type="text" name="phone" data-required placeholder="Numéro de téléphone">
                                    <span class="form__error"></span>
                                </label>
                            </div>

                            <div class="col-lg-6">
                                <label class="js-input-group">
                                    E-mail
                                    <input type="text" name="email" data-required placeholder="Votre adresse e-mail">
                                    <span class="form__error"></span>
                                </label>
                            </div>

                            <div class="col-lg-6">
                                <label class="js-input-group">
                                    Sujet
                                    <input type="text" name="subject" data-required value=""
                                        placeholder="À propos de quoi ?">
                                    <span class="form__error"></span>
                                </label>
                            </div>

                            <div class="col-12">
                                <label class="js-input-group">
                                    Message
                                    <textarea name="message" rows="2" data-required placeholder="Votre message"></textarea>
                                    <span class="form__error"></span>
                                </label>
                            </div>

                            <div class="col-lg-6">
                                <label class="js-input-group">
                                    <input type="hidden" name="valeur"
                                        placeholder="Laissez ce champ VIDE si vous n'êtes pas un ROBOT ;)">
                                </label>
                            </div>

                            <div class="col-12 ajax-form-alert js-ajax-form-alert">
                                <div class="ajax-form-alert__content">
                                </div>
                            </div>

                            <div class="col-12">
                                <button class="button -md -black text-white">Envoyer
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <!-- row end -->
        </div>
        <!-- container end -->
    </section>
    <!-- section end -->

@endsection