@extends('layouts.default')

@section('title', 'Contact')

@section('styles')
    {!! RecaptchaV3::initJs() !!}
@endsection

@section('content')
    <section class="header-page contact-header-bg">
        <div class="tag-header">{{ __('global.navigation.contact') }}</div>
        <h2 class="title-header">{{ __('contact.header') }}</h2>
    </section>

    <section class="tree-details">
        <div class="container-tree">
            <a href="{{ route('home') }}" class="btn-back w-inline-block">
                <div class="btn-back-name">{{ __('global.tree.back-btn') }}</div>
            </a>

            <div class="tree-text">
                <div class="tree-arbo">
                    <a href="{{ route('home') }}">{{ __('global.navigation.home') }}</a> &nbsp;&gt;&nbsp; <span
                        class="tree-arbo-current">{{ __('global.navigation.contact') }}</span></div>
            </div>
        </div>
    </section>

    <section class="content">
        <div class="container-contact">
            <h2 class="contact-heading">{{ __('contact.title') }}</h2>
            <p class="contact-subtitle">{{ __('contact.subtitle') }}</p>

            <div class="w-row">
                <div class="col-contact-1 w-col w-col-6">
                    <div id="w-node-_36469f67-f993-767b-2bb7-0cc9669e8cca-7a78f0cf" class="contact-card">
                        <h3 class="contact-title-form">{{ __('contact.form-title') }}</h3>
                        <div class="w-form">
                            <form method="POST" action="#">
                                @csrf

                                @if($errors->any())
                                    <p class="error-popup"><b>Erreur :</b><br>{{$errors->first()}}</p><br/>
                                @endif

                                @if(\Illuminate\Support\Facades\Session::has('success'))
                                    <p class="success-popup">{{ \Illuminate\Support\Facades\Session::get('success') }}</p>
                                    <br/>
                                @endif

                                {!! RecaptchaV3::field('contact') !!}

                                <input type="text" class="contact-field-input w-input" maxlength="256" name="name"
                                       placeholder="{{ __('contact.form-input.name') }}" required>

                                <input type="email" class="contact-field-input w-input" maxlength="256" name="email"
                                       placeholder="{{ __('contact.form-input.email') }}" required>

                                <input type="tel" class="contact-field-input w-input" maxlength="256" name="phone"
                                       placeholder="{{ __('contact.form-input.phone') }}" required>

                                <input type="text" class="contact-field-input w-input" maxlength="256" name="subject"
                                       placeholder="{{ __('contact.form-input.subject') }}" required>

                                <textarea required placeholder="{{ __('contact.form-input.message') }}" maxlength="5000"
                                          name="message"
                                          class="contact-field-textarea w-input"></textarea>

                                <div class="div-block-6">
                                    <input type="submit" value="{{ __('contact.form-btn') }}"
                                           class="btn-contact-submit w-button">

                                    <p class="contact-mention">{{ __('contact.form-legal-text') }}</p>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

                <div class="col-contact-2 w-col w-col-6">
                    <div class="contact-card">
                        <h3 class="contact-title-other">{{ __('contact.info-title') }}</h3>
                        <div class="contact-other">
                            <div class="w-row">
                                <div class="contact-other-1 w-col w-col-12 w-col-stack w-col-small-12"
                                     onclick="location.href = 'mailto:contact@florianvieira.fr'">
                                    <div class="contact-other-picto">
                                        <svg width="15" height="13" viewBox="0 0 15 13" fill="none" class="contact-other-picto-svg"
                                             xmlns="http://www.w3.org/2000/svg">
                                            <path id="chat_paste_go"
                                                  d="M11.8301 10.7187H9.76174C9.5245 10.7187 9.32416 10.6382 9.16074 10.4772C8.99731 10.3161 8.9156 10.1188 8.9156 9.88505C8.9156 9.65134 8.99731 9.45255 9.16074 9.28868C9.32416 9.12481 9.5245 9.04287 9.76174 9.04287H11.8301L11.3683 8.56576C11.201 8.4016 11.1197 8.21322 11.1245 8.00062C11.1294 7.78804 11.2182 7.59484 11.391 7.42102C11.5601 7.25042 11.7573 7.16512 11.9827 7.16512C12.2081 7.16512 12.4034 7.24895 12.5685 7.4166L14.4223 9.29835C14.5874 9.46718 14.67 9.66162 14.67 9.88166C14.67 10.1017 14.5874 10.2956 14.4223 10.4632L12.5685 12.345C12.4034 12.5126 12.2075 12.5957 11.9808 12.5941C11.754 12.5924 11.551 12.5015 11.3717 12.3213C11.2085 12.1571 11.1253 11.9695 11.1221 11.7585C11.1189 11.5476 11.201 11.36 11.3683 11.1958L11.8301 10.7187ZM2.57743 10.4764L0.72249 12.3314C0.598706 12.4551 0.447349 12.4841 0.268417 12.4184C0.0894723 12.3527 0 12.23 0 12.0504V1.76215C0 1.28849 0.163351 0.889415 0.490053 0.564907C0.816754 0.240386 1.21229 0.078125 1.67667 0.078125H10.3751C10.8394 0.078125 11.2339 0.241395 11.5584 0.567935C11.8829 0.894462 12.0452 1.28981 12.0452 1.75397V5.05913C12.0291 5.02255 12.0114 5.00601 11.9921 5.00952C11.9728 5.01304 11.9535 5.01479 11.9341 5.01479C11.6725 5.04171 11.4076 5.07361 11.1392 5.11048C10.8709 5.14735 10.6143 5.21099 10.3693 5.30142V1.75397H1.67586V8.80058H7.21343C7.17685 8.95129 7.14685 9.09686 7.12344 9.23731C7.10003 9.37777 7.08833 9.52496 7.08833 9.67888C7.08833 9.80588 7.08994 9.93962 7.09315 10.0801C7.09637 10.2205 7.11627 10.3526 7.15286 10.4764H2.57743ZM3.76392 4.64215H8.27959C8.50582 4.64215 8.69654 4.56596 8.85176 4.41357C9.00699 4.26118 9.0846 4.07236 9.0846 3.84709C9.0846 3.62183 9.00808 3.43159 8.85503 3.27638C8.70198 3.12117 8.51234 3.04356 8.28611 3.04356H3.77044C3.54421 3.04356 3.35348 3.11975 3.19825 3.27212C3.04304 3.42451 2.96543 3.61333 2.96543 3.83859C2.96543 4.06386 3.04196 4.2541 3.195 4.40931C3.34804 4.56454 3.53768 4.64215 3.76392 4.64215ZM3.76473 7.51099H6.34698C6.57344 7.51099 6.76327 7.4348 6.91646 7.28243C7.06967 7.13004 7.14628 6.94122 7.14628 6.71595C7.14628 6.49069 7.06967 6.30045 6.91646 6.14524C6.76327 5.99001 6.57344 5.9124 6.34698 5.9124H3.76473C3.53827 5.9124 3.34843 5.98859 3.19523 6.14098C3.04203 6.29337 2.96543 6.48219 2.96543 6.70745C2.96543 6.93272 3.04203 7.12296 3.19523 7.27817C3.34843 7.43338 3.53827 7.51099 3.76473 7.51099Z"
                                                  />
                                        </svg>

                                    </div>
                                    <div class="contact-other-name">contact@florianvieira.fr</div>
                                </div>

                                <div class="contact-other-2 w-col w-col-12 w-col-stack w-col-small-12"
                                     onclick="location.href = 'tel:0673184146'">
                                    <div class="contact-other-picto">
                                        <svg width="11" height="15" viewBox="0 0 11 15" fill="none"
                                             class="contact-other-picto-svg"
                                             xmlns="http://www.w3.org/2000/svg">
                                            <path id="ad_units"
                                                  d="M3.59635 5.39174C3.42627 5.39174 3.28281 5.33449 3.16596 5.21999C3.04911 5.10548 2.99069 4.96359 2.99069 4.79433C2.99069 4.62505 3.04821 4.48199 3.16326 4.36514C3.27832 4.24829 3.42088 4.18987 3.59096 4.18987H7.07277C7.24285 4.18987 7.38631 4.24712 7.50316 4.36162C7.62001 4.47613 7.67843 4.61803 7.67843 4.7873C7.67843 4.95657 7.62091 5.09962 7.50587 5.21647C7.39081 5.33332 7.24824 5.39174 7.07816 5.39174H3.59635ZM1.78881 14.67C1.40507 14.67 1.07822 14.535 0.808268 14.265C0.538303 13.9951 0.40332 13.6682 0.40332 13.2845V1.38549C0.40332 1.00175 0.538303 0.674903 0.808268 0.404949C1.07822 0.134983 1.40507 0 1.78881 0H8.88031C9.26405 0 9.5909 0.134983 9.86086 0.404949C10.1308 0.674903 10.2658 1.00175 10.2658 1.38549V13.2845C10.2658 13.6682 10.1308 13.9951 9.86086 14.265C9.5909 14.535 9.26405 14.67 8.88031 14.67L1.78881 14.67ZM1.78881 12.4832V13.2845H8.88031V12.4832H1.78881ZM1.78881 11.2814H8.88031V3.38862H1.78881V11.2814ZM1.78881 2.18674H8.88031V1.38549H1.78881V2.18674Z"
                                            />
                                        </svg>
                                    </div>
                                    <div class="contact-other-name">06 73 18 41 46</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection