@extends('base_html')
@push('GA')
    @vite(['resources/js/gaManager.js'])
@endpush
@section('title', 'Contact')
@section('meta_content_description', 'Contactez Atelier Steel Art pour vos projets sur mesure en acier : ameublement,
    pergolas, escaliers et autres réalisations élégantes et robustes.')
@section('meta_robots', 'index, follow')
@section('content')
    @include('partial.titlebanner', [
        'firstPartTitle' => 'Nous',
        'secondPartTitle' => 'contacter',
    ])
    @include('partial.navigation.breadcrumb', [
        'pages' => [
            ['name' => 'Atelier Steel Art', 'url' => '/', 'disabled' => false],
            ['name' => 'Nous contacter', 'url' => '/contact', 'disabled' => false],
        ],
    ])

    {{-- <section>
        <iframe width="600" height="450" class="w-full" loading="lazy" allowfullscreen
            src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDZDrImjrZ3nxl7-Jn8Rx2xQvuC2GMWUxU&q=Tour+Eiffel,Paris,France&zoom=16&maptype=roadmap">
        </iframe>
    </section> --}}
    <section class="text-gray-600 body-font relative">
        <div class="flex flex-col items-center">
            <div class="w-1/2">
                @include('partial.textWrapedBorder', [
                    'text' => 'une idée de projet ?',
                ])
            </div>
            <small class="tracking-widest 4xl:text-lg 5xl:text-2xl">envoyez nous un petit message.</small>
        </div>
        <div class="container px-5 py-10 mx-auto flex sm:flex-nowrap flex-wrap">
            <div class="w-full md:w-1/2 bg-gray-300 rounded-lg overflow-hidden sm:mr-10 relative">
                <!-- MAP -->
                <div class="relative h-64 md:h-full">
                    <iframe class="w-full h-full md:absolute md:inset-0 md:grayscale-75 hover:md:grayscale-0" frameborder="0"
                        title="map" scrolling="no"
                        src="https://maps.google.com/maps?width=100%25&height=600&hl=fr&q=34%20avenue%20Charles%20de%20Gaulle%2042600%20Montbrison,France&z=15&output=embed">
                    </iframe>
                </div>
                <div
                    class="bg-white md:absolute md:bottom-10 md:left-10 md:right-10 md:flex flex-wrap py-6 rounded shadow-md mt-0 md:mt-0">

                    <div class="lg:w-1/2 px-6 4xl:text-lg 5xl:text-2xl">
                        <h2 class="font-semibold text-gray-900 tracking-widest text-xs 4xl:text-lg 5xl:text-2xl uppercase">Adresse</h2>
                        <p class="mt-1">34 avenue Charles de Gaulle
                        42600 montbrison</p>
                    </div>
                    <div class="lg:w-1/2 px-6 mt-4 lg:mt-0 4xl:text-lg 5xl:text-2xl">
                        <h2 class="font-semibold text-gray-900 tracking-widest text-xs 4xl:text-lg 5xl:text-2xl uppercase">Email</h2>
                        <a href="mailto:contact@ateliersteelart.fr" class="hover:text-accent break-all">
                            contact@ateliersteelart.fr
                        </a>
                        <h2 class="font-semibold text-gray-900 tracking-widest text-xs 4xl:text-lg 5xl:text-2xl mt-4 uppercase">
                            Téléphone
                        </h2>
                        <a href="tel:+33678019737" class="hover:text-accent">
                            06 78 01 97 37
                        </a>
                    </div>
                </div>
            </div>
            <div class="lg:w-1/2 md:w-1/2 bg-white flex flex-col md:ml-auto w-full md:py-8 mt-8 md:mt-0">
                <h2 class="text-dark text-lg 4xl:text-xl 5xl:text-3xl mb-1 font-medium title-font">Formulaire de contact</h2>
                <p class="leading-relaxed mb-5 text-secondary 5xl:text-2xl">Pour nous contacter, remplissez ce formulaire</p>
                <form method="POST" action="{{ route('sendMessage') }}" x-data="{ accepted: false, loading: false }" @submit="loading = true">
                    @csrf
                    <div class="relative mb-4">
                        <label for="name" class="leading-7 text-sm 4xl:text-lg 5xl:text-3xl  text-dark">Nom</label>
                        <input type="text" id="name" name="name" value="{{ old('name') }}"
                            @error('name') aria-invalid="true" aria-describedby="name-error" @enderror
                            class="@error('name') is-invalid @enderror w-full bg-white rounded border border-secondary/90 focus:border-accent focus:ring-2
                             focus:ring-accent/50 text-base outline-none text-dark py-1 px-3 leading-8 transition-colors duration-200 ease-in-out 5xl:text-2xl">
                        @error('name')
                            <div id="name-error" role="alert" class="text-red-600 5xl:text-2xl"><small>{{ $message }}</small></div>
                        @enderror
                    </div>
                    <div class="relative mb-4">
                        <label for="firstname" class="leading-7 text-sm 4xl:text-lg 5xl:text-3xl text-dark">Prénom</label>
                        <input type="text" id="firstname" name="firstname" value="{{ old('firstname') }}"
                            @error('firstname') aria-invalid="true" aria-describedby="firstname-error" @enderror
                            class="@error('firstname') is-invalid @enderror w-full bg-white rounded border border-secondary/90 focus:border-accent focus:ring-2
                             focus:ring-accent/50 text-base outline-none text-dark py-1 px-3 leading-8 transition-colors duration-200 ease-in-out 5xl:text-2xl">
                        @error('firstname')
                            <div id="firstname-error" role="alert" class="text-red-600 5xl:text-2xl"><small>{{ $message }}</small></div>
                        @enderror
                    </div>
                    <div class="relative mb-4">
                        <label for="email" class="leading-7 text-sm 4xl:text-lg 5xl:text-3xl text-dark">Email</label>
                        <input type="email" id="email" name="email" value="{{ old('email') }}"
                            @error('email') aria-invalid="true" aria-describedby="email-error" @enderror
                            class="@error('email') is-invalid @enderror w-full bg-white rounded border border-secondary/90 focus:border-accent focus:ring-2
                             focus:ring-accent/50 text-base outline-none text-dark py-1 px-3 leading-8 transition-colors duration-200 ease-in-out 5xl:text-2xl">
                        @error('email')
                            <div id="email-error" role="alert" class="text-red-600 5xl:text-2xl"><small>{{ $message }}</small></div>
                        @enderror
                    </div>
                    <div class="relative mb-4">
                        <label for="tel" class="leading-7 text-sm 4xl:text-lg 5xl:text-3xl text-dark">téléphone</label>
                        <input type="tel" id="tel" name="tel" value="{{ old('tel') }}"
                            @error('tel') aria-invalid="true" aria-describedby="tel-error" @enderror
                            class="@error('tel') is-invalid @enderror w-full bg-white rounded border border-secondary/90 focus:border-accent focus:ring-2
                             focus:ring-accent/50 text-base outline-none text-dark py-1 px-3 leading-8 transition-colors duration-200 ease-in-out 5xl:text-2xl">
                        @error('tel')
                            <div id="tel-error" role="alert" class="text-red-600 5xl:text-2xl"><small>{{ $message }}</small></div>
                        @enderror
                    </div>
                    <div class="relative mb-4">
                        <label for="subject" class="leading-7 text-sm 4xl:text-lg 5xl:text-3xl text-dark">Sujet</label>
                        <input type="text" id="subject" name="subject" placeholder="ex: Information pergolas"
                            value="{{ old('subject') }}"
                            @error('subject') aria-invalid="true" aria-describedby="subject-error" @enderror
                            class="@error('subject') is-invalid @enderror w-full bg-white rounded border border-secondary/90 focus:border-accent focus:ring-2
                            focus:ring-accent/50 text-base outline-none text-dark py-1 px-3 leading-8 transition-colors duration-200 ease-in-out 5xl:text-2xl">
                        @error('subject')
                            <div id="subject-error" role="alert" class="text-red-600 5xl:text-2xl"><small>{{ $message }}</small></div>
                        @enderror
                    </div>
                    <div class="relative mb-4">
                        <label for="message" class="leading-7 text-sm 4xl:text-lg 5xl:text-3xl text-dark">Message</label>
                        <textarea id="message" name="message" value="{{ old('message') }}"
                            @error('message') aria-invalid="true" aria-describedby="message-error" @enderror
                            class="@error('message') is-invalid @enderror  w-full bg-white rounded border border-secondary/90 focus:border-accent focus:ring-2
                             focus:ring-accent/50 h-32 text-base outline-none text-dark py-1 px-3 resize-none leading-6 transition-colors duration-200 ease-in-out
                             5xl:text-2xl"></textarea>
                        @error('message')
                            <div id="message-error" role="alert" class="text-red-600 5xl:text-2xl"><small>{{ $message }}</small></div>
                        @enderror
                    </div>
                    <div class="relative mb-4">
                        <label class="flex items-center space-x-3 cursor-pointer">
                            <div class="relative">
                                <input type="checkbox" class="sr-only peer" x-model="accepted">
                                <div
                                    class="w-6 h-6 5xl:w-8 5xl:h-8 bg-ultraLight rounded-md peer-checked:bg-accent transition-all duration-300">
                                </div>
                                <svg class="absolute w-4 h-4 5xl:w-8 5xl:h-8 text-white left-1 top-1 opacity-0 peer-checked:opacity-100 transition-opacity duration-300"
                                    fill="none" stroke="currentColor" viewBox="0 0 24 24"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="3"
                                        d="M5 13l4 4L19 7"></path>
                                </svg>
                            </div>
                            <span class="text-dark 5xl:text-3xl">
                                En cochant cette case, j’accepte que mes informations soient utilisées uniquement dans le
                                cadre de ma demande de contact, conformément à <a href="{{ route('policies') }}"
                                    class="text-accent hover:border-b">la politique de confidentialité</a>.
                            </span>
                        </label>
                    </div>
                    @if (session('success'))
                        <div class="py-2" x-data="{ remove: false }" x-on:click="remove = !remove">
                            <div x-show="!remove"
                                class="cursor-pointer w-full p-3 bg-accent opacity-60 rounded shadow-2xl text-ultraLight tracking-widest 5xl:text-2xl">
                                {{ session('success') }}
                            </div>
                        </div>
                    @endif
                    <button type="submit" :disabled="!accepted || loading"
                        class="w-full text-ultraLight bg-dark border-0 py-2 px-6 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2 hover:bg-dark/90 rounded text-lg disabled:opacity-50
                        disabled:cursor-not-allowed 5xl:text-4xl">
                        <span x-show="!loading">
                            Envoyer
                        </span>
                        <!-- Loader -->
                        <span x-show="loading" class="flex items-center justify-center gap-2">
                            <svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none"
                                viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                    stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
                            </svg>
                            Envoi...
                        </span>
                    </button>
                </form>
            </div>
        </div>
    </section>
@endsection