@extends('front.app')
@section('meta')
    <x-meta :meta="$meta"/>
@stop

@section('container')
    <div class="page-content">

        <div class="breadcrumbs-wrapper">
            <div class="container">
                {{breadcrumbs('static-page',$meta->metaStatic)}}
            </div>
        </div>
        <section class="section favorites pt-0">
            <div class="container">
                @if($elements->isNotEmpty())
                    <h1 class="h2">{{ShowLabelById(29)}}</h1>
                        <form class="favorites-inner" action="{{route('order.wish')}}" method="post" id="new-order">
                            @csrf
                            <x-honeypot />
                            <div class="favorites-content">
                                @foreach($elements as $item)
                                    <div class="favorites-item" data-id="{{$item->id}}">
                                        <div class="favorites-img">
                                            <a class="wish-name-link" href="{{$item->productLink}}">
                                                @include('front.templates.wish-photo')
                                            </a>
                                        </div>
                                        <div class="favorites-item-content">
                                            <button type="button"
                                                    class="favorites-remove delete-wish-item"
                                            >
                                                <svg>
                                                    <use xlink:href="{{asset('front-assets/svg/sprite.svg#close')}}"></use>
                                                </svg>
                                            </button>
                                            <div class="favorites-info">
                                                @if($item->productActive->article)
                                                    <div class="favorites-code">{{ShowLabelById(17)}}: {{$item->productActive->article}}</div>
                                                @endif
                                                <div class="favorites-name h2">
                                                    <a class="wish-name-link" href="{{$item->productLink}}">{{$item->productActive->name}}</a>
                                                </div>
                                                <div class="favorites-price">{{$item->productActive->priceFormat}}</div>
                                            </div>

                                            <div class="favorites-filter">
                                                @if($item->colors->isNotEmpty())
                                                    <div class="favorites-filter-item favorites-color">
                                                        <label for="wish-product-colors-{{$item->id}}">{{ShowLabelById(18)}}:</label>
                                                        <select name="color[{{$item->id}}]" class="change-options" id="wish-product-colors-{{$item->id}}">
                                                            @if(!count($item->optionsFormat) || !isset($item->optionsFormat['color']))
                                                                <option value="" hidden>
                                                                    {{ShowLabelById(30)}}
                                                                </option>
                                                            @endif
                                                            @foreach($item->colors as $color)
                                                                <option
                                                                    value="{{$color->id}}"
                                                                    data-position="{{$loop->iteration}}"
                                                                    @selected(isset($item->optionsFormat['color']) && $item->optionsFormat['color'] == $color->id)
                                                                >
                                                                    {{$color->name}}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                @endif
                                                @if($item->sizes->isNotEmpty())
                                                        <div class="favorites-filter-item favorites-size">
                                                            <label for="wish-product-sizes-{{$item->id}}">{{ShowLabelById(19)}}:</label>
                                                            <select name="size[{{$item->id}}]" class="change-options" id="wish-product-sizes-{{$item->id}}">
                                                                @if(!count($item->optionsFormat) || !isset($item->optionsFormat['size']))
                                                                    <option value="" hidden>
                                                                        {{ShowLabelById(30)}}
                                                                    </option>
                                                                @endif
                                                                @foreach($item->sizes as $size)
                                                                    <option
                                                                        value="{{$size->id}}"
                                                                        @selected(isset($item->optionsFormat['size']) && $item->optionsFormat['size'] == $size->id)
                                                                        >
                                                                        {{$size->name}}
                                                                    </option>
                                                                @endforeach
                                                            </select>
                                                        </div>
                                                @endif

                                            </div>
                                            <div class="favorites-quantity product-quantity">
                                                <button type="button" class="change-quantity count-minus" onclick="this.parentNode.querySelector('input[type=number]').value--">
                                                    <svg>
                                                        <use xlink:href="{{asset('front-assets/svg/sprite.svg#minus')}}"></use>
                                                    </svg>
                                                </button>
                                                <input type="number" name="quantity[{{$item->id}}]" value="{{$item->quantity}}">
                                                <button type="button" class="change-quantity count-plus" onclick="this.parentNode.querySelector('input[type=number]').value++">
                                                    <svg>
                                                        <use xlink:href="{{asset('front-assets/svg/sprite.svg#plus')}}"></use>
                                                    </svg>
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                @endforeach

                            </div>
                            <div class="favorites-aside">
                                <div class="favorites-aside-block">
                                    <div class="h2">{{ShowLabelById(31)}}</div>
                                    <div class="favorites-aside-desc">
                                        <p>{{ShowLabelById(32)}}</p>
                                    </div>
                                    <div class="favorites-aside-form">

                                            <div class="form-item">
                                                <label for="wish-name" class="sr-only">{{ShowLabelById(33)}} *</label>
                                                <input type="text" id="wish-name" name="name" placeholder="{{ShowLabelById(33)}} *">
                                            </div>
                                            <div class="form-item">
                                                <label for="wish-email" class="sr-only">{{ShowLabelById(34)}} *</label>
                                                <input type="text" id="wish-email" name="email" placeholder="{{ShowLabelById(34)}} *">
                                            </div>
                                            <div class="form-item">
                                                <label for="wish-phone" class="sr-only">{{ShowLabelById(35)}} *</label>
                                                <input type="text" id="wish-phone" name="phone" placeholder="{{ShowLabelById(35)}} *">
                                            </div>

                                            <div class="form-item">
                                                <label for="wish-comment" class="sr-only">{{ShowLabelById(36)}}</label>
                                                <textarea name="comment" id="wish-comment" placeholder="{{ShowLabelById(36)}}"></textarea>
                                            </div>
                                            <p class="aggreement">
                                                <label>
                                                    <input id="agree" name="agree" type="checkbox">
                                                    {{ShowLabelById(37)}}
                                                </label>
                                            </p>
                                            <div class="captcha">
                                                <input type="hidden" name="g-recaptcha-response" id="recaptcha-order-form">
                                            </div>
                                            <div class="favorites-aside-submit">
                                                <button
                                                    type="submit"
                                                    class="button button--dark"
                                                    onclick="newOrder(this)"
                                                    data-form-id="new-order"
                                                >{{ShowLabelById(38)}}</button>
                                            </div>
                                    </div>
                                </div>
                            </div>
                        </form>

                @else
                    <h2>{{ShowLabelById(39)}}</h2>
                @endif
            </div>
        </section>

        @if($recommendations->isNotEmpty())
            <section class="section goods-slider">
                <div class="container">
                    <div class="slider-head">
                        <h2>{{ShowLabelById(24)}}</h2>
                        <div class="slider-navs">
                            <button type="button" class="slider-nav slider-nav--prev">
                                <img src="{{asset('front-assets/img/icons/arrow-right.svg')}}" alt="arrow-right">
                            </button>
                            <button type="button" class="slider-nav slider-nav--next">
                                <img src="{{asset('front-assets/img/icons/arrow-right.svg')}}" alt="arrow-right">
                            </button>
                        </div>
                    </div>
                    <div class="slider-wrapper">
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                @foreach($recommendations as $product)
                                    @foreach($product->gender_category as $gender)
                                        <div class="swiper-slide">
                                            @include('front.templates.goods-template',['imageSize'=>'M','gender'=>$gender])
                                        </div>
                                    @endforeach
                                @endforeach

                            </div>
                        </div>
                    </div>
                    {{--<div class="section-link">
                        <a href="#" class="button">Перейти в каталог</a>
                    </div>--}}
                </div>
            </section>
        @endif
    </div>
@stop

{{--
@push('js')
    <script>
        getRecaptcha('/', 'recaptcha-order-form')
    </script>
@endpush
--}}