@extends('mix::layouts.master')
@section('title', __('Wizard'))
@section('content')
@section('head')
<style>
.header, header, .floaty-bar, .header-side, .nav-mobile-header, .javascript-history-back{
display: none !important;
}
#content{
display: flex !important;
flex-direction: column !important;
}
.h-avatar.is-upload{
padding: 14px !important;
}
.h-avatar.is-upload img, .h-avatar.is-upload .solid-color, .h-avatar.is-upload video, .h-avatar.is-upload .image {
position: relative !important;
}
.h-avatar.is-upload::before{
border-radius: inherit !important;
}

.dashboard-main-content{
    width: 100% !important;
    padding: 0 !important;
}
</style>
@stop

<script>
    function interest(){
        return {
            interests: {!! json_encode(config('sandy.interest'), JSON_UNESCAPED_UNICODE) !!},
            subinterests: [],


            get_sub(index){
                var _this = this;
                _this.subinterests = [];
                setTimeout(function(){
                    _this.subinterests = _this.interests[index].sub;
                }, 5);
            }
        }
    }
</script>

<div class="onboard-wizard-g">



    <div class="-left-side">
        <div class="--left-side-stack">
            <div class="--banner-items">
                <img alt=" " src="{{ url('pexels-amina-filkins-5409680.jpg') }}" >
            </div>
        </div>
    </div>
    <div class="-right-side">
        <div class="--right-side-stack bordered-form-input">

            <img src="{{ mix_logo() }}" class="--logo-img">

            <form method="POST" action="{{ route('user-mix-onboard-wizard-post') }}" class="sandy-tabs">
                @csrf
                <div class="hidden">
                    <div class="sandy-tabs-link active"></div>
                    <div class="sandy-tabs-link"></div>
                </div>

                <div class="sandy-tabs-body">
                    <div class="sandy-tabs-item">


                        <h1 class="text-black --onb-title mb-5 mt-5">{{ __('Tell us about yourself') }}</h1>
                        <p class="--onb-subtitle mb-12">{{ __('For a personalized koon experience') }}</p>

                        <div class="mb-12">

                            <div class="form-input">
                                <label>{{ __('Tell us your name') }}</label>
                                <input type="text" name="name" value="{{ user('name') }}">
                            </div>
                        </div>
            
                        <div class="mb-12" x-data="interest()">
                            <p class="mb-3 text-sm font-semibold" x-on:click="subinterests = []">{{ __('Select one category that best describes yourself:') }}</p>
            
                            <div class="-category-space">
                                <template x-for="(interest, index) in interests">
                                    <div class="inline-flex max-w-full">
                                        
                                        <label class="category-radio">
                                            <input type="radio" name="interest" x-on:change="get_sub(index)" :value="interest.name" class="custom-control-input">
                                            <div class="category-radio-inner">
                                                <div class="mr-2 self-center" x-text="interest.icon"></div>
                                                
                                                <span x-text="interest.name"></span>
                                            </div>
                                        </label>
                                    </div>
                                </template>
                            </div>
            
            
            
                            <template x-if="Array.isArray(subinterests) && subinterests.length">
                                <div class="mt-10">
                                        
                                    <p class="mb-3 text-sm font-semibold">{{ __('Pick your Creative category (optional):') }}</p>
            
                                    <div class="-category-space">
                                        <template x-for="sub in subinterests">
                                            <div class="inline-flex max-w-full">
                                                
                                                <label class="category-radio">
                                                    <input type="radio" name="subinterest" x-bind:value="sub.name" class="custom-control-input">
                                                    <div class="category-radio-inner">
                                                        <span x-text="sub.name"></span>
                                                    </div>
                                                </label>
                                            </div>
                                        </template>
                                    </div>
                                </div>
                            </template>
            
                            <a class="mt-5 sandy-expandable-btn px-10 rounded-xl sandy-tabs-next cursor-pointer"><span>{{ __('Proceed') }}</span></a>
                        </div>


                    </div>
                    <div class="sandy-tabs-item">
                        
                        <h1 class="text-black --onb-title mb-5 mt-5">{{ __('Find the plan for you') }}</h1>
                        <p class="--onb-subtitle mb-12">{{ __('You can change at anytime.') }}</p>
                        <div class="change-pricing-selector is-onboard">
                            <a href="#" class="active" data-price-change=".monthly">{{ __('Monthly') }}</a>
                            <a href="#" data-price-change=".annually">{{ __('Annual') }}</a>
                        </div>
            
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        @foreach ($plans as $plan)
                        <label class="pricing-wrap-input">     
                            
                            <input type="radio" class="sandy-input-inner" name="plan" value="{{ $plan->id }}">       
                            <div class="pricing-table-card has-cta-bg-shade is-onboard">
                                <div class="pricing-table-header z-10E relative">
                                    <div class="pricing-title">
                                        <div class="flex justify-between">
                                            
                                            <h5 class="mb-0">{{ $plan->name }}</h5>
                                            
                                            <div class="active-dot"></div>
                                        </div>

                                        <div class="pricing-price-content">
                                            <div class="number">
                                                @switch($plan->price_type)
                                                @case('free')
                                                <p class="price">{{ __('Free') }}</p>
                                                @break
                                                @case('paid')
                                                <p class="price monthly" data-price-selector>{!! price_with_cur(\Currency::symbol(settings('payment.currency')), ao($plan->price, 'monthly'), 2) !!}</p>
                                                <p class="annually price hide" data-price-selector>{!! price_with_cur(\Currency::symbol(settings('payment.currency')), ao($plan->price, 'annually')) !!}</p>
                                                @break
                                                @case('trial')
                                                <p class="price">{{ __(':trial Days.', ['trial' => ao($plan->price, 'trial_duration')]) }}</p>
                                                @break
                                                @endswitch
                                                
                                                @if ($plan->price_type == 'paid')
                                                <span class="duration monthly" data-price-selector>/ {{ __('mo') }}</span>
                                                <span class="duration annually hide" data-price-selector>/ {{ __('yr') }}</span>
                                                @endif
                                            </div>
                                        </div>
                                        <p>{{ ao($plan->extra, 'description') }}</p>
                                    </div>
                                </div>
                                
                                <div class="sandy-accordion border-0 mt-3">
                                    <div class="sandy-accordion-head flex remove-before flex items-center p-0">
                                        <span class="font-black">{{ __('See benefits') }}</span>
                                        {!! svg_i('angle-down-1', 'h-5 w-5') !!}
                                    </div>
                                    <div class="sandy-accordion-body mt-5 pb-0">
                                        
                                
                                        <ul class="pricing-list m-0">
                                            @foreach ($skeleton() as $key => $value)
                                            <li>
                                                @if (ao($plan->settings, $key))
                                                <i class="flaticon2-checkmark icon mr-4"></i>
                                                @else
                                                <i class="flaticon2-cross icon mr-4"></i>
                                                @endif
                                                <span>{{ $skeleton("$key.name") }}</span>
                                            </li>
                                            @endforeach
                                            <hr class="my-7">
                                            @foreach (config('blocks') as $key => $value)
                                                
                                            <li>
                                                @if (ao($plan->settings, "blocks.$key"))
                                                <i class="flaticon2-checkmark icon mr-4"></i>
                                                @else
                                                <i class="flaticon2-cross icon mr-4"></i>
                                                @endif
                                                <span>{{ __(ao($value, 'name')) }}</span>
                                            </li>
                                            @endforeach
                                            
                                            <div class="sandy-accordion border-0 mt-3">
                                                <div class="sandy-accordion-head flex remove-before flex items-center p-0">
                                                    <span class="font-black">{{ __('See Apps') }}</span>
                                                    {!! svg_i('angle-down-1', 'h-5 w-5') !!}
                                                </div>
                                                <div class="sandy-accordion-body mt-5 pb-0 block">
                                                    @if (is_array($loop_elements = ao($plan->settings, 'elements')))
                                                    <li>
                                                        <span class="text-xs font-bold sep-p">
                                                            @php
                                                            $len = count($loop_elements);
                                                            @endphp
                                                            @foreach ($loop_elements as $key => $value)
                                                            
                                                            @if ($value)
                                                            {{ Elements::config($key, 'name') }}<span>,</span>
                                                            @endif
                                                            @endforeach
                                                        </span>
                                                    </li>
                                                    @endif
                                                </div>
                                            </div>
                                            <hr class="my-7">
                                            @foreach (['blocks_limit' => 'Blocks Creation', 'pixel_limit' => 'Pixel Creation'] as $key => $value)
                                            <li>
                                                <span class="text-sticker mt-0 mr-4">{{ ao($plan->settings, $key) }}</span>
                                                <span>{{ __($value) }}</span>
                                            </li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </label>
                        @endforeach
                    </div>

                    
                    <button class="mt-5 sandy-expandable-btn px-10 rounded-xl cursor-pointer"><span>{{ __('Proceed') }}</span></button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection