@extends('layouts.frontend')
@section('title', $seoDatum->title)
@section('description', strip_tags($seoDatum->description))
@section('keywords', $seoDatum->keywords)

@section('content')

<section class="jumbotron">
    <p class="maintitle ttu animate__animated fadeIn animate__slow">{{ $gamme->title}}</p>
    <img class="img-zoom" src="{{ asset($gamme->banner) }}" alt="{{ $gamme->alt_text_banner }}">
    {{-- <img class="img-zoom" src="{{ asset('assets/images/volailles.jpg') }}" alt=""> --}}
    <div class="banner">
        <svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1919.76 59.99">
            <defs>
                <style>
                    .cls-1 {
                        fill: #ffffff;
                    }

                    .cls-2 {
                        fill: transparent;
                    }
                </style>
            </defs>
            <path class="cls-1" d="M1919.67,58c-.42.62,1,2.12-1,2-1.17-.07-2.34,0-3.5,0H0V55c3-.06,6,.08,9-.22,28.32-2.84,56.61-6,85-8.6q59.19-5.38,118.44-10c46.65-3.58,93.32-7,140-9.88,49.7-3.05,99.43-5.85,149.18-7.9,68.4-2.81,136.83-5,205.26-7.06,38.63-1.14,77.28-1.58,115.92-1.94,78.47-.74,156.93-.9,235.39.32,37.81.59,75.62,1.2,113.42,2.09q64.44,1.5,128.85,4,76.89,2.85,153.71,6.91,63.36,3.32,126.66,7.44,43.86,2.85,87.7,6,33.13,2.4,66.22,5.17,38.82,3.23,77.61,6.72c20.06,1.79,40.11,3.73,60.16,5.6Z" />
            <path class="cls-2" d="M1919.67,58l-47.21-4.36c-20-1.87-40.1-3.81-60.16-5.6q-38.79-3.47-77.61-6.72-33.09-2.74-66.22-5.17-43.83-3.18-87.7-6-63.3-4.11-126.66-7.44-76.83-4-153.71-6.91-64.41-2.4-128.85-4c-37.8-.89-75.61-1.5-113.42-2.09-78.46-1.22-156.92-1.06-235.39-.32-38.64.36-77.29.8-115.92,1.94-68.43,2-136.86,4.25-205.26,7.06-49.75,2-99.48,4.85-149.18,7.9-46.7,2.87-93.37,6.3-140,9.88q-59.27,4.54-118.44,10c-28.35,2.58-56.64,5.76-85,8.6-3,.3-6,.16-9,.22V0H1919.67Z" />
        </svg>
    </div>
</section>

<section class="container product">
    <div class="wrapper">
        <div class="breadcrumb is-flex">
            <a href="{{ route($routeprefixer . 'gammes.index') }}" class="link">{{ __('Gammes') }}</a> - <a href="{{ route($routeprefixer . 'gammes.show', ['gammeSlug' => $gamme->slug]) }}" class="link">{{ $gamme->title}}</a>
        </div>
        <div class="header-title align-center p-rel">
            <i class="animate__animated fadeInDown animate__slow mascotte"></i>
            <h1 class="animate__animated fadeInUp animate__slow">{{ $product->name}}</h1>
        </div>
        <div class="is-flex mt-5">
            <div class="w50 align-center">
                @php
                $pictos = json_decode($product->pictos);
                @endphp
                <div class="img-bloc animate__animated fadeInLeft animate__slow @if ($product->is_halal) view-halal @endif">
                    <img src="{{ asset($product->picture) }}" alt="{{ $product->alt_text_picture }}">
                </div>
                @if (isset($pictos))
                    <ul class="infos animate__animated fadeInLeft animate__slow">
                        @foreach ($pictos as $picto)
                            @if ($picto->status)
                                <li><span><img src="{{$picto->url}}" alt="{{$picto->name}}"></span>{{ $picto->time }}<br/>{{ $picto->temp }}</li>
                            @endif
                        @endforeach
                    </ul>
                @endif
            </div>
            <div class="w50 mt-5">
                <p class="animate__animated fadeInRight animate__slow align-justify">{!! clean(nl2br($product->description)) !!}</p>
                @php
                $plusproduit = json_decode($product->plusproduit);
                @endphp
                @if (isset($plusproduit))
                    <span class="best p-rel animate__animated fadeInRight animate__slow">
                        {!! __('<span>les +</span><span>Produit</span>') !!}
                    </span>
                    <ul class="more is-flex flex-col">
                        @foreach ($plusproduit as $plus)
                            @if (isset($plus->name))
                                <li class="is-flex animate__animated fadeInRight animate__slow">
                                    <p>{{ $plus->name }}</p>
                                    @if ($plus->url != '')
                                        <span class="label">
                                            <img src="{{$plus->url}}" alt="{{$plus->name}}">
                                        </span>
                                    @endif
                                </li>
                            @endif
                        @endforeach
                    </ul>
                @endif
            </div>
        </div>
    </div>
</section>

@endsection