@extends('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 ah-blur-img" 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>Nos offres d'emploi</h3>
            </div>
        </div>
        <div class="col-md-8">
            <div class="ah-Recru">
                @php
                    $count = 1;
                @endphp
                @foreach ($recrutement as $recru)
                <div id="carRecru{{ $recru->id }}" class="ah-Recru__card">
                    <div class="ahRecru__figure" style="background-color: #e9e9e92e;">
                        {{-- <div class="ahRecru_img" style="background-image: url(../public/img/img_recru_1.jpg)"></div> --}}
                        <div class="ahRecru_img">
                            <h1>{{ $count++ }}</h1>
                        </div>
                    </div>
                    <div class="ahRecru__Description">
                            <div class="ahRecru__title">
                                {!! $recru->titre !!}
                            </div>
                            <div class="row" style="margin: 0">
                                <div class="col-md-8" >
                                    <div class="profilRecru">
                                        {!! $recru->bref_description !!}
                                    </div>
                                </div>
                                <div class="col-md-4 ah-calendar">
                                    <div class="dateRecruslide">
                                                                                <div class="dateDay">{{ $date->format('d') }}</div>
                                        <div class="dateMonthYear">{{ $date->format('M Y') }}</div>
                                    </div>

                                </div>
                                <div class="btn-recruDetail">
                                    <span id="recruDetail{{ $recru->id }}" onclick="shoWdetail(this,{{ $recru->id }},$('#carRecru{{ $recru->id }}'))">Plus detail</span>
                                </div>
                            </div>
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
@section('scripts')
    <script>

        var image = document.images[2];
        var big_img = document.createElement("img");

        big_img.onload = function(){
            image.src = this.src;
            image.className = "ah-no-blur-img"
        }

        setTimeout(function() {
            big_img.src = "{{ asset('img/motar.jpg') }}";
        },50)

        var shoWdetail = function(node,id,parentN) {

            if ($(node).text() === 'Moins detail' ) {
                $(node).text('Plus detail');
                $('.ah-detail__recrutement').remove();
            }else{

                //Get all button and add text 'Plus detail'
                $('.ah-Recru').find('.btn-recruDetail > span').each(function(e){
                    $(this).text('Plus detail');
                });

                var atribgenerale = '';
                var responsGene = '';

                if (!$('.ah-detail__recrutement').length){
                    parentN.after('<div class="ah-detail__recrutement"><img src="{{asset("img/loading_otivzl_200px.gif")}}" /></div>')
                }else{
                    $('.ah-detail__recrutement').remove();
                    parentN.after('<div class="ah-detail__recrutement"><img src="{{asset("img/loading_otivzl_200px.gif")}}" /></div>')
                }
                $.ajax({
                    type: 'GET',
                    url: "{{ route('recrutement.show') }}",
                    data: {
                        id_recrutement: id
                    },
                    success:function(data){
                        //Ajout moin de details bouton
                        $(node).text('Moins detail');
                        if (!data.recrutement.atribution == '') {
                            atribgenerale = '<div class="ah-detail__mission"><h2>Attributions générale:</h2>'
                                                +data.recrutement.atribution+
                                            '</div>';

                        }
                        if(!data.recrutement.mission == ''){
                            responsGene = '<div class="ah-detail__mission"><h2>Responsabilité générale:</h2>'
                                                +data.recrutement.mission+
                                          '</div>';
                        };
                        $('.ah-detail__recrutement').empty();
                        $('.ah-detail__recrutement').append('<div class="ah-detail__title">'
                                                                +data.recrutement.titre+
                                                            '</div>'+
                                                            '<div class="ah-detail__description"><h1>AVIS DE RECRUTEMENT</h1>'
                                                                +data.recrutement.description+
                                                            '</div>'+
                                                                atribgenerale
                                                            +
                                                            responsGene
                                                            +
                                                            '<div class="ah-detail__profil"><h2>Critères de qualifications requises:</h2>'
                                                                +data.recrutement.profil+
                                                            '</div>'+
                                                            '<div class="ah-detail__postule"><h2>Dossiers de candidatures</h2>'
                                                                +data.recrutement.postule+
                                                            '</div>')
                    }
                });
            }
        }
    </script>
@endsection
@stop()