@extends('layouts.public')

@section('title', 'Intake')

@section('content')
    @include('partials.registration.banner')
    <intake-form inline-template v-cloak initial-id="{{ $registry->id }}">
        <div id="intake" class="d-flex flex-column px-1">
            {{ csrf_field() }}
            @include('fields._errors')
            <section id="tell-us" class="align-center">
                <h2 class="text-uppercase"> What types of wine do you love?</h2>
                <div class="d-flex flex-row justify-content-center">
                </div>
                <div class="d-flex flex-row justify-content-center">
                    {!! $registry->render('op_wine_color_range') !!}
                </div>
                <div class="d-flex flex-row justify-content-between range-label">
                    <div>WHITE</div>
                    <div>RED</div>
                </div>

                <div class="d-flex flex-row justify-content-around checks">
                {!! $registry->render('op_wine_rose') !!}
                {!! $registry->render('op_wine_sparkling') !!}
                </div>
            </section>

            <section id="price-point" class="d-none d-lg-block">
                <h2 class="mr-3 ml-3"> WHAT PRICE POINTS DO YOU PREFER?</h2>
                <div class="d-flex flex-row align-items-start justify-content-center mb-5 mr-2 ml-2">
                    <div class="d-flex flex-column px-2 text-right ml-auto price-point-slider">
                        <h4 class="text-right"> Every day, easy-drinkers:</h4>
                        <div class="small-text-right">Under $35</div>
                        <div class="small-text-right">Enjoy a glass with friends or while cozy on the couch.</div>
                    </div>
                    <div class="d-flex flex-column px-2 text-left mr-auto range-container" style="min-width:50%">
                    {!! $registry->render('op_wine_easy_range') !!}
                        <div class="d-flex flex-row justify-content-between range-label">
                            <div>Just a Few</div>
                            <div>Love These</div>
                        </div>
                    </div>
                </div>
                <div class="d-flex flex-row align-items-start justify-content-center mb-5 mr-2 ml-2">
                    <div class="d-flex flex-column px-2 text-right ml-auto price-point-slider">
                        <h4 class="text-right"> Impressive dinner wines:</h4>
                        <div class="small-text-right">$35-$70</div>
                        <div class="small-text-right">Date night, Friendsgiving, or dinner with the in-laws.</div>
                    </div>
                    <div class="d-flex flex-column px-2 text-left mr-auto range-container" style="min-width:50%">
                    {!! $registry->render('op_wine_dinner_range') !!}
                        <div class="d-flex flex-row justify-content-between range-label">
                            <div>Just a Few</div>
                            <div>Love These</div>
                        </div>
                    </div>
                </div>
                <div class="d-flex flex-row align-items-start justify-content-center mb-5 mr-2 ml-2">
                    <div class="d-flex flex-column px-2 text-right ml-auto price-point-slider" style="max-width: 50%">
                        <h4 class="text-right"> Showstoppers:</h4>
                        <div class="small-text-right">Over $70</div>
                        <div class="small-text-right">Anniversary, promotion, or new home? No matter what the occasion, these wines make any celebration better.</div>
                    </div>
                    <div class="d-flex flex-column px-2 text-left mr-auto range-container" style="min-width:50%">
                    {!! $registry->render('op_wine_special_range') !!}
                        <div class="d-flex flex-row justify-content-between range-label">
                            <div>Just a Few</div>
                            <div>Love These</div>
                        </div>
                    </div>
                </div>
            </section>

            <section id="price-point" class="d-lg-none d-xs-block">
                <h2 class="mr-3 ml-3"> WHAT PRICE POINTS DO YOU PREFER?</h2>
                <div class="d-flex flex-column align-items-start justify-content-center mb-5 mr-2 ml-2">
                    <div class="d-flex flex-column px-2 text-center ml-auto price-point-slider">
                        <h4 class="text-center"> Every day, easy-drinkers:</h4>
                        <div class="small-text-center price-point-text">Under $35</div>
                        <div class="small-text-center">Enjoy a glass with friends or while cozy on the couch.</div>
                    </div>
                    <div class="d-flex flex-column px-2 text-center range-container" style="width:100%">
                        {!! $registry->render('op_wine_easy_range') !!}
                        <div class="d-flex flex-row justify-content-between range-label">
                            <div>Just a Few</div>
                            <div>Love These</div>
                        </div>
                    </div>
                </div>
                <div class="d-flex flex-column align-items-start justify-content-center mb-5 mr-2 ml-2">
                    <div class="d-flex flex-column px-2 text-center ml-auto price-point-slider">
                        <h4 class="text-center"> Impressive dinner wines:</h4>
                        <div class="small-text-center price-point-text">$35-$70</div>
                        <div class="small-text-center">Date night, Friendsgiving, or dinner with the in-laws.</div>
                    </div>
                    <div class="d-flex flex-column px-2 text-center range-container" style="width:100%">
                        {!! $registry->render('op_wine_dinner_range') !!}
                        <div class="d-flex flex-row justify-content-between range-label">
                            <div>Just a Few</div>
                            <div>Love These</div>
                        </div>
                    </div>
                </div>
                <div class="d-flex flex-column align-items-start justify-content-center mb-5 mr-2 ml-2">
                    <div class="d-flex flex-column px-2 text-center ml-auto price-point-slider" style="min-width: 50%">
                        <h4 class="text-center"> Showstoppers:</h4>
                        <div class="small-text-center price-point-text">Over $70</div>
                        <div class="small-text-center">Anniversary, promotion, or new home? No matter what the occasion, these wines make any celebration better.</div>
                    </div>
                    <div class="d-flex flex-column px-2 text-center range-container" style="width:100%">
                        {!! $registry->render('op_wine_special_range') !!}
                        <div class="d-flex flex-row justify-content-between range-label">
                            <div>Just a Few</div>
                            <div>Love These</div>
                        </div>
                    </div>
                </div>
            </section>

            <section id="your-favorite" >
                <h2 class="text-uppercase">What are your favorite wine regions?</h2>
{{--                v-if="!op('op_wine_region_surprise')"--}}
                <template>
                    <div class="d-none d-sm-flex flex-sm-row align-items-center justify-content-around checks">
                        <div class="flex-item">{!! $registry->render('op_wine_region_italy') !!}</div>
                        <div class="flex-item">{!! $registry->render('op_wine_region_france') !!}</div>
                        <div class="flex-item">{!! $registry->render('op_wine_region_usa') !!}</div>
                    </div>
                    <div class="d-none d-sm-flex flex-sm-row align-items-center justify-content-around checks">
                        <div class="flex-item">{!! $registry->render('op_wine_region_spain') !!}</div>
                        <div class="flex-item">{!! $registry->render('op_wine_region_south_africa') !!}</div>
                        <div class="flex-item">{!! $registry->render('op_wine_region_new_zealand') !!}</div>
                    </div>
                    <div class="d-none d-sm-flex flex-sm-row align-items-center justify-content-around checks">
                        <div class="flex-item">{!! $registry->render('op_wine_region_germany') !!}</div>
                        <div class="flex-item">{!! $registry->render('op_wine_region_australia') !!}</div>
                        <div class="flex-item">{!! $registry->render('op_wine_region_argentina') !!}</div>
                    </div>
                    <div class="d-flex d-sm-none flex-wrap align-items-center flex-row justify-content-center checks">
                        <div class="d-flex flex-row align-items-center justify-content-center">
                            <div class="flex-item">{!! $registry->render('op_wine_region_italy') !!}</div>
                            <div class="flex-item">{!! $registry->render('op_wine_region_france') !!}</div>
                        </div>
                        <div class="d-flex flex-row align-items-center justify-content-center">
                            <div class="flex-item">{!! $registry->render('op_wine_region_usa') !!}</div>
                            <div class="flex-item">{!! $registry->render('op_wine_region_spain') !!}</div>
                        </div>
                        <div class="d-flex flex-row align-items-center justify-content-center">
                           <div class="flex-item">{!! $registry->render('op_wine_region_south_africa') !!}</div>
                           <div class="flex-item">{!! $registry->render('op_wine_region_new_zealand') !!}</div>
                        </div>
                        <div class="d-flex flex-row align-items-center justify-content-center">
                            <div class="flex-item">{!! $registry->render('op_wine_region_germany') !!}</div>
                            <div class="flex-item">{!! $registry->render('op_wine_region_australia') !!}</div>
                        </div>
                    </div>
                    <div class="d-flex d-sm-none flex-wrap align-items-center flex-row justify-content-center checks">
                        <div class="d-flex flex-row align-items-center justify-content-center">
                            <div class="flex-item">{!! $registry->render('op_wine_region_argentina') !!}</div>
                            <div class="flex-item">{!! $registry->render('op_wine_region_surprise') !!}</div>
                        </div>
                    </div>
                    <div class="d-none d-sm-flex flex-wrap flex-row align-items-center justify-content-center checks">
                        <div class="flex-item">{!! $registry->render('op_wine_region_other') !!}</div>
                        <div class="flex-item">{!! $registry->render('op_wine_region_surprise') !!}</div>
                    </div>
                    <div class="d-flex d-sm-none flex-wrap align-items-center flex-row justify-content-center checks">
                        <div class="d-flex flex-row align-items-center justify-content-center">
                            <div class="flex-item">{!! $registry->render('op_wine_region_other') !!}</div>
                        </div>
                        <div class="d-flex flex-row align-items-center justify-content-center">
                            <div class="flex-item"><span class="checkbox-component">&nbsp;</span></div>
                        </div>
                    </div>
                    <div class="sub-head" v-if="op('op_wine_region_other')">
                        {!! $registry->render('op_wine_region_comment') !!}
                    </div>
                    <div class="other-spacer" v-if="!op('op_wine_region_other')"></div>
                </template>
            </section>


            <section id="grape-white">
                <h2 class="text-uppercase">What are your favorite white grapes?</h2>
{{--                v-if="!op('op_wine_varietal_white_surprise')"--}}
                <template>
                    <div class="d-none d-sm-flex flex-sm-row align-items-center justify-content-around checks">
                        <div class="flex-item">{!! $registry->render('op_wine_varietal_white_sauvignon_blanc') !!}</div>
                        <div class="flex-item">{!! $registry->render('op_wine_varietal_white_riesling') !!}</div>
                        <div class="flex-item">{!! $registry->render('op_wine_varietal_white_pinot_grigio') !!}</div>
                    </div>
                    <div class="d-none d-sm-flex flex-sm-row align-items-center justify-content-around checks">
                        <div class="flex-item">{!! $registry->render('op_wine_varietal_white_chardonnay') !!}</div>
                        <div class="flex-item">{!! $registry->render('op_wine_varietal_white_albarino') !!}</div>
                        <div class="flex-item">{!! $registry->render('op_wine_varietal_white_chenin_blanc') !!}</div>
                    </div>
                    <div class="d-flex d-sm-none flex-wrap align-items-center flex-row justify-content-center checks">
                        <div class="d-flex flex-column flex-sm-row align-items-center justify-content-center">
                            <div class="flex-item">{!! $registry->render('op_wine_varietal_white_sauvignon_blanc') !!}</div>
                            <div class="flex-item">{!! $registry->render('op_wine_varietal_white_riesling') !!}</div>
                            </div>
                        <div class="d-flex flex-column flex-sm-row align-items-center justify-content-center">
                            <div class="flex-item">{!! $registry->render('op_wine_varietal_white_pinot_grigio') !!}</div>
                            <div class="flex-item">{!! $registry->render('op_wine_varietal_white_chardonnay') !!}</div>
                        </div>
                    </div>
                    <div class="d-flex d-sm-none flex-wrap align-items-center flex-row justify-content-center checks">
                        <div class="d-flex flex-wrap flex-row align-items-center justify-content-center">
                            <div class="flex-item">{!! $registry->render('op_wine_varietal_white_albarino') !!}</div>
                            <div class="flex-item">{!! $registry->render('op_wine_varietal_white_chenin_blanc') !!}</div>
                        </div>
                    </div>

                    <div class="d-flex flex-wrap flex-row align-items-center justify-content-center checks">
                        <div class="flex-item">{!! $registry->render('op_wine_varietal_white_other') !!}</div>
                        <div class="flex-item">{!! $registry->render('op_wine_varietal_white_surprise') !!}</div>
                    </div>
                    <div class="sub-head" v-if="op('op_wine_varietal_white_other')">
                        {!! $registry->render('op_wine_varietal_white_comment') !!}
                    </div>
                    <div class="other-spacer" v-if="!op('op_wine_varietal_white_other')"></div>
                </template>
            </section>

            <section id="grape-red" class="d-lg-none">
                <h2 class="text-uppercase">What about reds?</h2>
{{--                v-if="!op('op_wine_varietal_red_surprise')"--}}
                <template>
                    <div class="d-flex flex-wrap align-items-center flex-sm-row justify-content-center checks">
                        <div class="d-flex flex-column flex-sm-row align-items-center justify-content-center">
                            <div class="flex-item">{!! $registry->render('op_wine_varietal_red_pinot_noir') !!}</div>
                            <div class="flex-item">{!! $registry->render('op_wine_varietal_red_cabernet_sauvignon') !!}</div>
                        </div>
                        <div class="d-flex flex-column flex-sm-row align-items-center justify-content-center">
                            <div class="flex-item">{!! $registry->render('op_wine_varietal_red_merlot') !!}</div>
                            <div class="flex-item">{!! $registry->render('op_wine_varietal_red_shriaz') !!}</div>
                        </div>
                    </div>
                    <div class="d-flex flex-wrap align-items-center flex-sm-row justify-content-center checks">
                        <div class="d-flex flex-column flex-sm-row align-items-center justify-content-center">
                            <div class="flex-item">{!! $registry->render('op_wine_varietal_red_gamay') !!}</div>
                            <div class="flex-item">{!! $registry->render('op_wine_varietal_red_sangiovese') !!}</div>
                        </div>
                        <div class="d-flex flex-column flex-sm-row align-items-center justify-content-center">
                            <div class="flex-item">{!! $registry->render('op_wine_varietal_red_nebbiolo') !!}</div>
                            <div class="flex-item">{!! $registry->render('op_wine_varietal_red_malbec') !!}</div>
                        </div>
                    </div>
                    <div class="d-flex flex-wrap align-items-center flex-sm-row justify-content-center checks">
                        <div class="flex-item">{!! $registry->render('op_wine_varietal_red_other') !!}</div>
                        <div class="flex-item">{!! $registry->render('op_wine_varietal_red_surprise') !!}</div>
                    </div>
                    <div class="sub-head" v-if="op('op_wine_varietal_red_other')">
                        {!! $registry->render('op_wine_varietal_red_comment') !!}
                    </div>
                    <div class="other-spacer" v-if="!op('op_wine_varietal_red_other')"></div>
                </template>
            </section>
            <section id="grape-red" class="d-none d-lg-block">
                <h2 class="text-uppercase">What about reds?</h2>
                {{--                v-if="!op('op_wine_varietal_red_surprise')"--}}
                <template>
                    <div class="d-flex flex-wrap align-items-center flex-sm-row justify-content-center checks">
                        <div class="d-flex flex-column flex-sm-row align-items-center justify-content-center">
                            <div class="flex-item">{!! $registry->render('op_wine_varietal_red_pinot_noir') !!}</div>
                            <div class="flex-item">{!! $registry->render('op_wine_varietal_red_cabernet_sauvignon') !!}</div>
                            <div class="flex-item">{!! $registry->render('op_wine_varietal_red_merlot') !!}</div>
                        </div>
                    </div>
                    <div class="d-flex flex-wrap align-items-center flex-sm-row justify-content-center checks">
                        <div class="d-flex flex-column flex-sm-row align-items-center justify-content-center">
                            <div class="flex-item">{!! $registry->render('op_wine_varietal_red_shriaz') !!}</div>
                            <div class="flex-item">{!! $registry->render('op_wine_varietal_red_gamay') !!}</div>
                            <div class="flex-item">{!! $registry->render('op_wine_varietal_red_sangiovese') !!}</div>
                        </div>
                    </div>
                    <div class="d-flex flex-wrap align-items-center flex-sm-row justify-content-center checks">
                        <div class="d-flex flex-column flex-sm-row align-items-center justify-content-center">
                            <div class="flex-item">{!! $registry->render('op_wine_varietal_red_nebbiolo') !!}</div>
                            <div class="flex-item">{!! $registry->render('op_wine_varietal_red_malbec') !!}</div>
                        </div>
                    </div>
                    <div class="d-flex flex-wrap align-items-center flex-sm-row justify-content-center checks">
                        <div class="flex-item">{!! $registry->render('op_wine_varietal_red_other') !!}</div>
                        <div class="flex-item">{!! $registry->render('op_wine_varietal_red_surprise') !!}</div>
                    </div>
                    <div class="sub-head" v-if="op('op_wine_varietal_red_other')">
                        {!! $registry->render('op_wine_varietal_red_comment') !!}
                    </div>
                    <div class="other-spacer" v-if="!op('op_wine_varietal_red_other')"></div>
                </template>
            </section>
            <section id="wine-budget">
                <h2>WHAT IS YOUR WINE BUDGET?</h2>
                <div class="sub-head text-center">
                    <div class="input-group-prepend justify-content-center">
                        <span class="input-group-text dollar-prepend">$</span>
                        {!! $registry->render('op_wine_budget') !!}
                    </div>
                    <div class="budget-text">* The average gift per wedding guest is around $100-$150</div>
                </div>
            </section>

            <section id="anything-else" class="mb-0">
                <h2 class="text-uppercase mr-2 ml-2">Is there anything else we should know?</h2>
                <div class="sub-head text-center mb-0">
                    {!! $registry->render('op_wine_anything_else_comment') !!}
                </div>
                @if(!($registry->hasStatus(\App\Models\Registry::$STATUS_LOCKED, false)))
                <button class="btn-save btn-150"  @click="save" :disabled="form.busy || disabled">Next</button>
                @endif
            </section>
        </div>
    </intake-form>
@endsection