@extends('layouts.front')
@section('title', __('Traçabilité des Volailles de Loué'))
@section('description', __('Recherchez la treaceabilité de votre produit Loué ainsi que sa provenance.'))

@section('breadcrumb', request()->route()->getName())

@section('content')
<div class="container oldEgg">
    <div class="sub-page elevage">
        <header>
            <a href="{{route('egg.FrontPage', ['id' => request()->id])}}">
                <p class="arrow">&#9668;</p>
                <p>Retour</p>
            </a>
        </header>
        <div class="container">
            <div class="portrait-eleveur">
                <div class="top">
                    @if ($eleveur->path_picture_2 != null && $eleveur->path_picture_2 != "")
                    <img src="{{ asset($eleveur->path_picture_2) }}" alt="Éleveur">
                    @else
                    <img src="{{ asset('assets/images/parts/generique_portrait.jpg') }}" alt="Éleveur">
                    @endif
                    <div class="content">
                        <p>
                            <span class="name green">{{$eleveur->firstname}} {{$eleveur->lastname}}</span><br>
                            @if ($age)
                            {{$age}} ans <span class="green">/</span>
                            @endif
                            {{$eleveur->city}} ({{$eleveur->postcode}})
                        </p>

                        @if ($ageElevage)
                        @switch($eleveur->civilite)
                        @case(App\Enums\BreederCivilty::elle())
                        <p>Éleveuse de poules de Loué depuis {{$ageElevage}} ans</p>
                        @break
                        @case(App\Enums\BreederCivilty::il())
                        <p>Éleveur de poules de Loué depuis {{$ageElevage}} ans</p>
                        @break
                        @case(App\Enums\BreederCivilty::elles())
                        <p>Éleveuses de poules de Loué depuis {{$ageElevage}} ans</p>
                        @break
                        @case(App\Enums\BreederCivilty::ils())
                        <p>Éleveurs de poules de Loué depuis {{$ageElevage}} ans</p>
                        @break
                        @default
                        <p>Éleveur(se) de poules de Loué depuis {{$ageElevage}} ans</p>
                        @endswitch
                        @endif
                    </div>
                </div>
                <div class="pagination">
                    <div class="prev"></div>
                    <div class="next"></div>
                    <p>Question<br><span id="q-index">1</span>/{{count($questions)}}</p>
                </div>
                <div class="slider">
                    @foreach ($questions as $key => $question)
                    @if ($key == 0)
                    <div class="item active" id="q-{{$key + 1}}">
                        @else
                        <div class="item" id="q-{{$key + 1}}">
                            @endif
                            <p class="question">{{$question[0]}}</p>
                            <p class="answer">« <span class="green">{{$question[1]}}</span> »</p>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endsection

    @push('scripts')
    <script nonce="{{ $nonce }}">
        document.addEventListener('DOMContentLoaded', function() {
            let currentPage = 1;
            const maxPage = $('.slider').children().length;
            $('.next').on('click', function(e) {
                currentPage++;
                $("#q-" + (currentPage - 1)).toggleClass('active');
                $('.item').each(function(index, element) {
                    $(this).removeClass('fadeInLeft animated');
                })
                $("#q-" + currentPage).removeClass('fadeInLeft animated').addClass('active fadeInRight animated');
                $("#q-index").text(currentPage);

                if (currentPage > 1)
                    $('.prev').show();
                if (currentPage === maxPage)
                    $(this).hide();
            });

            $('.prev').on('click', function(e) {
                currentPage--;
                $("#q-" + (currentPage + 1)).toggleClass('active');
                $('.item').each(function(index, element) {
                    $(this).removeClass('fadeInRight animated');
                })
                $("#q-" + currentPage).removeClass('fadeInRight animated').addClass('active fadeInLeft animated');
                $("#q-index").text(currentPage);

                if (currentPage === 1)
                    $(this).hide();
                if (currentPage < maxPage)
                    $('.next').show();
            });
        });
    </script>
    @endpush