@extends('zl_frontend.layout')

@section('content')

<div class="row breadcrumbs">
    <div class="col-md-12">
        <ul class="ah-breadcrumb">
            <li>
                <a href="{{ route('home') }}">Accueil</a>
            </li>
            @foreach(Menu::rootline($rootline) as $root)

            <li>
                <a href="{{ url(Menu::slug($root->slug)) }}" class="hvr-underline-from-center-breadcrumb">{{ $root->title }}</a>
            </li>

            @endforeach()
        </ul>
    </div>
</div>

<header class="ah-in-containt">
    <div class="ah-heade__pic">
        <img src="{{ asset('img/motar.jpg') }}" class="img-responsive" alt="épargne à vue">
        <div class="ah-head__title">
            {{-- <h1>Recrutement</h1> --}}
        </div>
    </div>
</header>
    <div class="ah-in-containt">
        <div class="row no-gutters">
            <div class="col-md-12">
                <div class="ah-produit__title">
                    <h3>Nous Contacter</h3>
                </div>
                <div class="ah-content-page" style="margin-top: 40px;margin-bottom: 120px;">
                    <div class="row">
                        <div class="col-md-12">
                            <h3 style="color:#000 !important;font-weight: normal;font-size: 2rem;">
                                OTIV Zone littoral répond à vos questions sur tous les sujets !
                            </h3>
                            {{-- <ul>
                                <li>Cibles : tout déposant quelle que soit son activité</li>
                                <li>Destination du crédit : achat d’équipement ménager</li>
                                <li>Remboursement : jusqu’à 24 mois</li>
                            </ul> --}}
                            <p>Vous souhaitez nous contacter directement&nbsp;?</p>
                            <p>"Faites nous part de votre besoin en remplissant le formulaire ci-dessous. Nous vous répondrons dans les meilleurs délais"</p>
                        </div>
                    </div>
                    <div class="row" >
                        <div class="col-md-8">
                            <div class="ah-form__contact">
                                <div class="ah-body__form">
                                    <form id="ah-fomrContact" method="post" action="{{ route('contact.send') }}">
                                        @csrf
                                        <div class="form-group ">
                                                    <label for="inputNom">
                                                        <span>
                                                            <i class="fa fa-user"></i>
                                                        </span>
                                                        <span>Nom</span>
                                                        <span class="ah-asterisk"><i>*</i>
                                                        </span>
                                                    </label>
                                                    {{-- <input type="text" name="nom" class="ah-form-control" id="inputNom">  --}}
                                                    {{-- {!! Form::text('nom', null, ['class'=>'ah-form-control', 'id'=>'inputNom']) !!} --}}
                                                    <input type="text" id="inputNom" name="nom" class="ah-form-control">

                                        </div>
                                        <div class="form-group ">
                                                    <label for="inputEmail">
                                                        <span>
                                                            <i class="fa fa-envelope"></i>
                                                        </span>
                                                        <span>é-mail</span>
                                                        <span class="ah-asterisk"><i>*</i>
                                                        </span>

                                                    </label>
                                                    {{-- {!! Form::text('email', null, ['class'=>'ah-form-control', 'id'=>'inputEmail']) !!} --}}
                                                    <input type="text" id="inputEmail" name="email" class="ah-form-control">
                                        </div>
                                        <div class="form-group ">
                                                    <label for="inputPhone">
                                                        <span>
                                                            <i class="fa fa-phone"></i>
                                                        </span>
                                                        <span>Téléphone</span>
                                                        <span class="ah-asterisk"><i>*</i>
                                                        </span>
                                                    </label>
                                                    {{-- {!! Form::text('phone', null, ['class'=>'ah-form-control', 'id'=>'inputPhone']) !!} --}}
                                                    <input type="text" id="inputPhone" name="phone" class="ah-form-control">
                                        </div>
                                        <div class="form-group ">
                                                    <label for="inputObjet">
                                                        <span>Objét</span>
                                                        <span class="ah-asterisk"><i>*</i>
                                                        </span>
                                                    </label>
                                                    {{-- {!! Form::text('subject', null, ['class'=>'ah-form-control', 'id'=>'inputObjet']) !!} --}}
                                                    <input type="text" id="inputObjet" name="subject" class="ah-form-control">
                                        </div>
                                        <div class="form-group">
                                                    <label for="inputmessage">
                                                        <span>
                                                            <i class="fa fa-comment"></i>
                                                        </span>
                                                        <span>Message</span>

                                                    </label>
                                                    {{-- {!! Form::textarea('message', null, ['class'=>'ah-form-control', 'id'=>'inputmessage']) !!} --}}
                                                    <textarea id="inputmessage" name="message" class="ah-form-control"></textarea>
                                        </div>
                                        <div class="form-group ">
                                            <div class="captcha" style="display: flex;">
                                                <input type="text" id="captcha" name="captcha" class="ah-form-control" style="width: 40%;height: 36px">
                                                <span class="ah-captcha__img" style="padding: 0 10px;">{!! captcha_img() !!}</span>
                                                <span style="line-height: 40px;">Cliquer l'image pour rafraîchir</span>
                                            </div>
                                        </div>
                                        <div class="row">
                                                    <div class="col-md-6">
                                                        <div class="info" style="margin-top: 20px">
                                                            <p style="padding-left: 0">Champ obligatoire *</p>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-6">
                                                        <div id="btn-envoyer" class="ah-btn__contact float-right">
                                                                <a id="ahSubmit__btn" href="#" onclick="document.getElementById('ah-fomrContact').submit()">
                                                                    <span>Envoyer</span>
                                                                    <span>Envoyer</span>
                                                                </a>
                                                        </div>
                                                    </div>
                                        </div>

                                    </form>
                                </div>
                            </div>
                        </div>
                        <div class="col-4">
                            @if (session()->has('error_validation'))
                                @php
                                    $rules = session()->get('error_validation');
                                @endphp
                                <div class="ah-noti_mail">
                                    <ul>
                                        @foreach ($rules['message'] as $item)
                                            <li>{{ $item }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                                @section('scripts')
                                    <script>
                                        @foreach (array_keys($rules['rules']) as $item)
                                                $("input[name='{{ $item }}']").addClass('form__has_error');
                                                $("textarea[name='{{ $item }}']").addClass('form__has_error');

                                                $('html, body').stop().animate({
                                                    scrollTop: $("[name='{{ $item }}']").offset().top - 150
                                                }, 1000);
                                        @endforeach

                                        $('.captcha').on('click','img',function(){
                                            $(document).ajaxStart(function(){
                                                $(".ah-captcha__img").html('<img src="{{ asset('img/loading_otivzl_200px.gif') }}" width="40px"/>');
                                            })
                                            $.ajax({
                                                type: 'GET',
                                                url : "{{ route('refresh_captcha') }}",
                                                success:function(data){
                                                    $(".ah-captcha__img").html(data.captcha);
                                                }
                                            })
                                        })
                                    </script>
                                @stop
                            @endif

                            @if (session()->has('success'))
                                <div class="ah-noti_mail">
                                    <p>{{ session()->get('success') }}</p>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@stop()
@section('scripts')
    <script>
        $('.captcha').on('click','img',function(){
             $(document).ajaxStart(function(){
                $(".ah-captcha__img").html('<img src="{{ asset('img/loading_otivzl_200px.gif') }}" width="40px"/>');
            })
            $.ajax({
                type: 'GET',
                url : "{{ route('refresh_captcha') }}",
                success:function(data){
                    $(".ah-captcha__img").html(data.captcha);
                }
            })
        })
    </script>
@endsection