@php
    $tutorial_video = trim(config('app.TUTORIAL_VIDEO_URL'));
    $tutorial_admin = trim(config('app.TUTORIAL_ADMIN_URL'));
    $tutorial_themes = [
        /*
        [
            'name'=>'FMCG Theme',
            'url'=>'https://voucher-fmcg.skale.today',
            'active' => 'active',
        ],
        [
            'name'=>'Mall Theme',
            'url'=>'https://voucher-mall.skale.today',
        ],
        [
            'name'=>'Cosmetic Theme',
            'url'=>'https://voucher-cosmetic.skale.today',
        ],
        [
            'name'=>'Fashion Theme',
            'url'=>'https://voucher-fashion.skale.today'
        ]
        */
    ];
    $accounts = \App\Models\BusinessAccounts::select(['id', 'company_name', 'hostname'])
        ->whereNotNull('slug')
        ->get();
    $curr_host = parse_url(url('/'));
    $curr_host = $curr_host['host'];
    foreach ($accounts as $account) {
        $is_selected = $account->hostname === $curr_host;
        $tutorial_themes[] = [
            'name' => $account->company_name,
            'url' => $is_selected ? 'javascript:void(0);' : route('change_business_account', ['business_account' => $account->id, 'type' => 'home']), //'https://' . $account->hostname,
            'selected' => $is_selected,
        ];
    }

    $tutorial_projects = [
        /*
        [
            'name'=>'Theme 1',
            'url'=>'https://voucher-cosmetic.skale.today/assets/images/voucher/Voucher_500x395.png',
            'image' => '/assets/images/voucher/Voucher_500x395.png',
        ],
        [
            'name'=>'Theme 1',
            'url'=>'https://voucher-cosmetic.skale.today/assets/images/voucher/Voucher_500x395.png',
            'image' => '/assets/images/voucher/Voucher_500x395.png',
        ],
        [
            'name'=>'Theme 1',
            'url'=>'https://voucher-cosmetic.skale.today/assets/images/voucher/Voucher_500x395.png',
            'image' => '/assets/images/voucher/Voucher_500x395.png',
        ],
        [
            'name'=>'Theme 1',
            'url'=>'https://voucher-cosmetic.skale.today/assets/images/voucher/Voucher_500x395.png',
            'image' => '/assets/images/voucher/Voucher_500x395.png',
        ],
        */
    ];
    $tutorial_steps = [
       'home_page'=> [
            'name'=>__('tutorials_digital_voucher.toolbar_heading_home_page'),
            'path'=>'/',
            'content'=>[
               'home_banner'=> [
                    'name'=>__('tutorials_digital_voucher.toolbar_menu_home_banner'),
                    'popup_id'=>'tutorial_home_banner',
                    'script' => 'doShowHideHomeBanner',
                ],
               'flash_promo'=> [
                    'name'=>__('tutorials_digital_voucher.toolbar_menu_flash_promo'),
                    'popup_id'=>'tutorial_flash_promo',
                    'script' => 'doShowHideFlashPromo',
                ],
               'category_bar'=> [
                    'name'=>__('tutorials_digital_voucher.toolbar_menu_category_bar'),
                    'popup_id'=>'tutorial_category_bar',
                    'script' => 'doShowHideCategoryBar',
                ],
               'first_voucher'=> [
                    'name'=>__('tutorials_digital_voucher.toolbar_menu_first_voucher'),
                    'popup_id'=>'tutorial_first_voucher',
                    'script' => 'doShowHideFirstVoucher',
                ],
               'voucher_download'=> [
                    'name'=>__('tutorials_digital_voucher.toolbar_menu_voucher_details'),
                    'popup_id'=>'tutorial_voucher_download',
                    'script' => 'doShowHideVoucherDownload',
                ],
               'msg_proceed_voucher_wallet'=> [
                    'name'=>__('tutorials_digital_voucher.toolbar_menu_voucher_wallet'),
                    'popup_id'=>'tutorial_proceed_voucher_wallet',
                    'script' => 'doCtaToVoucherWallet',
                ],
            ],
        ],
        'vouchers_page'=>[
            'name'=>__('tutorials_digital_voucher.toolbar_heading_my_voucher_page'),
            'path'=>'my',
            'content'=>[
                'voucher_redemption'=>[
                    'name'=>__('tutorials_digital_voucher.toolbar_menu_voucher_redeem'),
                    'popup_id'=>'tutorial_voucher_redemption',
                    'script' => 'doShowHideVoucherRedemption',
                ],
                'voucher_redemption_pin'=>[
                    'name'=>__('tutorials_digital_voucher.toolbar_menu_redemption_pin'),
                    'popup_id'=>'tutorial_voucher_redemption_pin',
                    'script' => 'doShowHideVoucherRedemptionPin',
                ],
                'promotional_method'=>[
                    'name'=>__('tutorials_digital_voucher.toolbar_menu_promotion_method'),
                    'popup_id'=>'tutorial_promotional_method',
                    'script' => 'doShowHidePromotionMethod',
                ],
                'redemption_complete'=>[
                    'name'=>__('tutorials_digital_voucher.toolbar_menu_redemption_complete'),
                    'popup_id'=>'redemption_complete',
                    'script' => 'doShowHideRedemptionComplete',
                ],
                'get_in_touch' => [
                    'name' => __('tutorials_common.toolbar_menu_get_in_touch'),
                    'popup_id' => 'tutorial_get_in_touch',
                    'script' => 'doShowHideGetInTouch',
                ],
            ],
        ],
    ];

    $tutorial_data = [
        [
            'id' => 'tutorial_theme_selection',
            'text' => 'tutorials_common.tutorial_theme_selection',
        ],
        [
            'id' => 'tutorial_tut_progress_panel',
            'text' => 'tutorials_common.tutorial_tut_progress_panel',
        ],
    ];
@endphp
<script defer>
    var TUTORIAL_STEPS = {!! json_encode($tutorial_steps) !!};
</script>

<section class="tutorial-toolbar-default" style="display: none;">
    <div id="toolbar-inner" class="d-flex flex-column h-100 justify-content-between">
        <div>
            <div class="d-flex align-items-center px-4 mx-auto my-3">
                <img class="logo mr-3" src="{{ asset('/assets/images/skale.png')}}" height="25" />
                <span class="h5 text-muted mb-0 mt-2">{{ __('tutorials_digital_voucher.heading_voucher_demo') }}</span>
            </div>
            <hr/>
        </div>
        <div class="px-3">
            <div class="my-2">{{ __('tutorials_common.label_guided_tutorial') }}</div>

            @if($tutorial_video)
                <a href="{{$tutorial_video}}" target="_blank" class="btn btn-success text-white w-100 mb-2">
                    <div class="d-flex align-items-center">
                        <div class="icon-left h5"><i class="fa fa-play-circle"></i></div>
                        {{ __('tutorials_common.label_watch_a_video_tutorial') }}
                        <div class="icon-right"></div>
                    </div>
                </a>
            @endif

            @if($tutorial_steps)
                <div class="d-flex align-items-center" >
                    <button class="btn btn-success text-white w-100 mb-2" id="btn_resume_tutorial">
                        <div class="icon-left h5"><i class="fa fa-play-circle-o"></i></div>
                        {{ __('tutorials_common.btn_resume_tutorial') }}
                        <div class="icon-right"></div>
                    </button>
                </div>

                <div class="accordion mb-2" id="accordionExample">
                    @foreach($tutorial_steps as $slug => $step)
                        @php
                            $curr_page = $step['path'] == Request::path();
                        @endphp
                        <div class="card">
                            <div class="card-header" id="heading_{{$slug}}">
                                <h2 class="mb-0">
                                    <button id="{{$slug}}" class="progress-head btn-progress btn btn-block text-left text-secondary {{ $curr_page ? '' : 'collapsed' }}" type="button" data-toggle="collapse" data-target="#collapse_{{$slug}}" aria-expanded="{{ $curr_page ? 'true' : 'false' }}" aria-controls="collapse_{{$slug}}">
                                        <div class="d-flex align-items-center">
                                            <span class="icon-left">
                                                <i class="fa fa-circle text-light-grey"></i>
                                                <i class="fa fa-check-circle text-success"></i>
                                            </span>

                                            {{$step['name']}}
                                        </div>
                                        <div class="icon-right">
                                            @if($step['content'])
                                                <i class="fa fa-angle-down"></i>
                                            @endif
                                        </div>
                                    </button>
                                </h2>
                            </div>

                            @if($step['content'])
                            <div id="collapse_{{$slug}}" class="collapse {{ $curr_page ? 'show' : '' }}" aria-labelledby="heading_{{$slug}}" data-parent="#accordionExample">
                                <div class="card-body pb-0 pt-3">
                                    @foreach($step['content'] as $inner_slug =>$inner_step)
                                        <button id="{{$inner_slug}}" class="progress-body btn-progress btn w-100 p-0 mb-3">
                                            <div class="d-flex align-items-center">
                                                <div class="icon-left">
                                                    <i class="fa fa-circle text-light-grey"></i>
                                                    <i class="fa fa-check-circle text-success"></i>
                                                </div>
                                                {{$inner_step['name']}}
                                            </div>
                                            <div class="icon-right">
                                            </div>
                                        </button>
                                    @endforeach
                                </div>
                            </div>
                            @endif
                        </div>
                    @endforeach
                </div>
            @endif


            @if($tutorial_admin)
                <a href="{{$tutorial_admin}}" target="_blank" class="btn btn-info text-white w-100 mb-4">

                   {{-- <div class="icon-left h5"></div> --}}
                    {{ __('tutorials_common.label_learn_about_admin_dashboard') }}
                    <div class="icon-right"><i class="fa fa-external-link"></i></div>
                </a>
            @endif

            <div class="my-2">{{ __('tutorials_common.label_select_thems_for_this_demo') }}</div>
            <div class="dropdown mb-4">
                <button class="btn btn-outline-secondary dropdown-toggle w-100" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
                    @foreach($tutorial_themes as $theme)
                        @if($theme['selected'])
                            {{  $theme['name']}}
                        @endif
                    @endforeach
                </button>
                <div class="dropdown-menu dropdown-menu-left text-left w-100" aria-labelledby="dropdownMenuButton">
                    @foreach($tutorial_themes as $theme)
                        <a class="dropdown-item {{$theme['selected'] ? 'active' :''}}" href="{{$theme['url']}}">{{$theme['name']}}</a>
                    @endforeach
                </div>
            </div>

            @if($tutorial_projects)
                <div class="my-2">{{ __('tutorials_common.label_preview_other_demo_projects') }}</div>

                <div class="row row-cols-2 px-2">

                    @foreach($tutorial_projects as $proj)
                        <div class="col p-1">
                            <div class="card">
                                <a id="{{$proj['name']}}" class="card-img-top btn p-0 border-0" href="{{$proj['image']}}" target="_blank">
                                    <img class="w-100" src="{{asset( $proj['image'] )}}"/>
                                </a>
                            </div>
                        </div>
                    @endforeach

                </div>
            @endif
        </div>
        <div class="mt-auto">
            <hr>
            <div class="px-3 mb-3 text-muted small text-center">
                {!! __(
                    htmlentities(__('tutorials_common.label_contact_enquiry')), 
                    [
                        'contact_email' => '<a href="mailto:help@skale.today" class="text-muted"/>help@skale.today</a>',
                    ])
                !!}
            </div>
        </div>
    </div>

    <section class="tutorial-container">
        @foreach($tutorial_data as $tutorial)
            @component('components.utility.template_floating_container',  ['id' => $tutorial['id']])
                <label>{{ __($tutorial['text']) }}</label>
            @endcomponent
        @endforeach
    </section>

</section>