@extends('layouts.public')

@section('title', $title)

@section('content')

    @if(!empty(\Auth::user()) && user()->canEdit($registry->id))
        @include('partials.registration.banner')
    @endif

    @if($registry->hasStatus(\App\Models\Registry::$STATUS_RECOMMENDED, false)
        || (!empty(\Auth::user()) && \Auth::user()->hasRole(['staff', 'admin']))
    )
    <section class="container">
        <wine-list inline-template v-cloak ref="wineList"
                   initial-id="{{ $registry->id }}"
                   initial-url="{{ $registry_url ?? '' }}"
                   initial-signature="{{ $signature ?? '' }}"
                   :initial-is-editing="{{ $isEditing ?? 'false' }}"
                   :initial-show-alternates="{{ ( empty(\Auth::user()) || request()->is('*guest-view') || ($is_guest_view ?? false)) ? 'false' : 'true' }}"
                   initial-check-out-url="{{ route('registry.checkout', compact('registry')) }}"
                   initial-public-path="{{ $public_path }}"
                   :initial-images="{{ json_encode($images) }}"
                   initial-user-id="{{ user(false)->exists ? user(false)->id : '' }}"
                   :initial-is-previewing="{{ (request()->has('preview')) ? 'true' : 'false' }}"
        >
            <div v-if="registry">
{{--                <pre>@{{ form }}</pre>--}}
                {{--<pre>@{{ registry.data.products }}</pre>--}}
                @if(!request()->is(['wine-list']))
                    @include('registry.partials.wine-list-header')
                @endif

                <div class="wine-list" @click="toggleCart(false)">

                    @if(request()->is(['wine-list']) || $registry->hasStatus(\App\Models\Registry::$STATUS_RECOMMENDED))
                        <section>
                            <header>
                                <h2 class="text-center text-uppercase">Our Sommeliers Recommend:</h2>
                                <div class="text-center"> Due to your unique tastes here is what our team recommends
                                </div>
                            </header>
                        </section>
                    @endif

                    <div class="product-ordering">
                        <label>Sort By:
                            <select name="sort_by" v-model="params.sort_by">
                                <option v-for="(label, value) in registry.data.sort_by_list"
                                        :value="value"
                                >@{{ label }}
                                </option>
                            </select>
                        </label>
                    </div>

                    <div class="products-container"
                         v-for="(products, tag) in registry.data.products_sorted"
                    >
                        <template v-if="Object.keys(products).length && hasVisibleProducts(tag)">
                            <div class="row">
                                <div class="tag-container col-12 text-center">
                                    <h2 class="text-uppercase">@{{ (tag == 'Alternates') ? 'You may also love' : tag }}</h2>
                                </div>
                            </div>
                            <div class="d-flex flex-row flex-wrap products">
                                <template v-for="(product, index) in products">
                                    <div class="mx-auto d-flex justify-content-center"
                                         :class="{ faded: isFaded(product, tag), hidden: isHidden(product, tag) }"
                                    >
                                        <div class="product">
                                            <div class="product-header mb-2">
{{--                                                <pre>@{{ registry.data.products[product.id].pivot }}</pre>--}}
                                                <div class="d-flex justify-content-center mb-3">
                                                    <a href="#" class="product"
                                                       @click.prevent="toggleModal(product)"
                                                    >
                                                        <img :src="product.image">
                                                    </a>
                                                    <div v-if="registry.data.products[product.id].badge.title" class="wine-badge">
                                                        <img :alt="registry.data.products[product.id].badge.title"
                                                             :src="registry.data.products[product.id].badge.image">
                                                    </div>
                                                </div>
                                                <h2 class="cart-title">@{{ product.title | truncate(60) }}</h2>
                                                <p class="cart-price d-flex justify-content-center">@{{ product.price |
                                                    currency(0)
                                                    }}</p>
                                            </div>
                                            <div class="product-footer">

                                                @if(request()->is(['wine-list']))
                                                    <div class="d-flex justify-content-center">
                                                        <spinner ref="spinner" :id="product.handle"
                                                                 v-model="registry.data.products[product.id].pivot.required"
                                                                 :min="product.pivot.received"
                                                                 :max="100" :step="1" :fixed="0"
                                                                 v-on:spinner:changed="productChanged(registry.data.products[product.id], $event)"
                                                        />
                                                    </div>
                                                @else
                                                    <div class="d-flex justify-content-center pt-3">
                                                        <button
                                                            class="gift btn btn-block btn-hero-button btn-hero-button-dark"
                                                            :data-variant-id="product.variant_id"
                                                            :data-handle="product.handle"
                                                            @click.stop="addToCart(product, 1, null, true)"
                                                            v-bind:disabled="isFilled(product) || cartFilled(product)"
                                                        >{{ env('BUTTON_BUY', config('lv.button_buy', 'Gift') ) }}
                                                        </button>
                                                    </div>
                                                @endif

                                            </div>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </template>
                    </div>

                    <div class="buttons-container d-flex flex-column flex-md-row justify-content-center align-items-center">

                        @if(request()->is(['wine-list']))
                            <div class="d-flex">
                                <button class="btn btn-view-cart" @click="save">{{__("Save Changes")}}</button>
                            </div>
                            <div class="d-flex">
                                <button class="btn btn-view-cart" @click="preview" id="btn-preview"
                                        data-href="{{ route('registry.guest-view', ['registry' => $registry->id, 'preview' => 1]) }}#signature">{{__("Preview Registry")}}</button>
                            </div>
                        @else
                            @if(!empty(\Auth::user()))
                                <div class="d-flex justify-content-center">
                                    <div v-if="!isEditing">
                                        <template v-if="hasStatus({{ \App\Models\Registry::$STATUS_NOT_PUBLISHED }})">
                                            <button class="btn btn-publish" @click="publish(true)">Publish</button>
                                        </template>
                                    </div>
                                </div>
                            @endif
                        @endif
                    </div>
                </div>

                @include('registry.partials.wine-list-modal')

                @include('registry.partials.wine-list-cart')

            </div>
        </wine-list>

    </section>
    @endif
@endsection