@extends('layouts.app')

@section('seo')
    <meta name="description"
          content="Vous pouvez-nous contactez en remplissant les informations demandé dans le formulaire.">
    <meta name="title" content="Diffusions Aromatique - Contact">
@endsection

@section('pageTitle', __('Contact'))

@section('menu')
    <x-menu></x-menu>
@endsection
@section('content')
    <section class="relative py-20 overflow-x-hidden">
        <x-container class="grid lg:grid-cols-2 gap-x-12">
            <div class="w-full">
                <img src="/images/contact/contact.jpg" alt="Diffusions-aromatiques - contact"
                     class="w-full object-cover  h-96 lg:h-auto">
            </div>
            <div class="pt-10">
                <h1 class="text-blue-contrast text-5xl leading-none font-bold mb-5">@lang('Contactez-nous')</h1>
                @if(\Illuminate\Support\Facades\Session::get('success'))
                    <div class="bg-green text-white px-4 py-4 rounded-xl mb-2">
                        {{session()->get('success')}}
                    </div>
                @endif
                @if(\Illuminate\Support\Facades\Session::get('error'))
                    <div class="bg-red text-white px-4 py-4 rounded-xl mb-2">
                        {{session()->get('error')}}
                    </div>
                @endif
                @if ($errors->any())
                    <ul class="bg-red text-white px-4 py-4 rounded-xl mb-2">
                        @foreach ($errors->all() as $error)
                            <li>{{$error}}</li>
                        @endforeach
                    </ul>
                @endif
                <form id="contact-form" method="post" action="{{route('contact.store', ['product' => $product])}}"
                      class="md:grid md:grid-cols-2 self-start space-y-5 md:space-y-0 gap-y-5 gap-x-12">
                    @csrf
                    <div class="self-start">
                        <label for=""
                               class="mb-2.5 uppercase text-sm block text-blue-contrast font-semibold ml-5">@lang('nom')</label>
                        <input type="search" name="name" placeholder="@lang('Votre nom')"
                               class="appearance-none text-sm text-blue-contrast border border-blue-contrast rounded-full placeholder-blue-contrast placeholder-opacity-75 py-4 px-6 pr-10 focus:outline-none w-full">
                    </div>
                    <div class="self-start">
                        <label for=""
                               class="mb-2.5 uppercase text-sm block text-blue-contrast font-semibold ml-5">@lang('prénom')</label>
                        <input type="text" name="firstname" placeholder="@lang('Votre prénom')"
                               required
                               class="appearance-none text-sm text-blue-contrast border border-blue-contrast rounded-full placeholder-blue-contrast placeholder-opacity-75 py-4 px-6 pr-10 focus:outline-none w-full">
                    </div>
                    <div class="self-start">
                        <label for=""
                               class="mb-2.5 uppercase text-sm block text-blue-contrast font-semibold ml-5">Email</label>
                        <input type="email" name="email" placeholder="@lang('Votre email')"
                               required
                               class="appearance-none text-sm text-blue-contrast border border-blue-contrast rounded-full placeholder-blue-contrast placeholder-opacity-75 py-4 px-6 pr-10 focus:outline-none w-full">
                    </div>
                    <div class="col-span-2 ">
                        <textarea name="content"
                                  value="{{ old('content') }}"
                                  placeholder="@lang('Ecrivez votre message')"
                                  required
                                  rows="6"
                                  class="appearance-none mt-5 w-full text-sm text-blue-contrast border border-blue-contrast rounded-lg placeholder-blue-contrast placeholder-opacity-75 py-4 px-6 pr-10  focus:outline-none"></textarea>
                    </div>
                    <div class="col-span-2 md:flex justify-end">
                        @env('local')
                                <div id="recaptcha" class="g-recaptcha mb-4 md:mr-2" data-sitekey="6LejsH8cAAAAAHhFp3NZ9ZRrLXzBmyx7dj6v3vJ3"></div>
                                <x-button class="bg-blue-contrast text-white self-start"
                                          type="submit">@lang('Envoyer')</x-button>
                        @endenv()
                        @env('production')
                                    <div id="recaptcha" class="g-recaptcha mb-2 md:mr-2 md:mb-0" data-sitekey="6LejsH8cAAAAAHhFp3NZ9ZRrLXzBmyx7dj6v3vJ3"></div>
                                    <x-button class="bg-blue-contrast text-white self-start" type="submit" >@lang('Envoyer')</x-button>
                        @endenv()
                    </div>
                </form>
                <p class="text-blue-contrast mt-4 md:mt-0">
                    Diffusions Aromatiques <br>
                    PA "les hauts de Grasse"
                    558 Allée des Parfums, 06530 Saint-Cézaire-sur-Siagne<br>
                    <a href="tel:0493608282" type="tel">+33 (0)4 93 60 82 82</a><br>
                </p>
            </div>
        </x-container>
    </section>
    <script>
        document.getElementById('contact-form').addEventListener('submit',(event) => {
            event.preventDefault()
            const cap = document.getElementById('g-recaptcha-response').value
            if(cap === ""){
                console.log('no checked')
                return
            }
            document.getElementById('contact-form').submit()
        })
        // function onSubmit(token) {
        //     document.getElementById("contact-form").submit();
        // }
    </script>
@endsection