@php
    $tutorial_video = trim(config('app.TUTORIAL_VIDEO_URL'));
    $tutorial_admin = trim(config('app.TUTORIAL_ADMIN_URL'));
    $tutorial_themes = [
    ];
    $accounts = \App\Models\BusinessAccounts::select(['id', 'company_name', 'hostname'])
        ->whereNotNull('slug')
        ->get();
    $curr_host = parse_url(url('/'));
    $curr_host = $curr_host['host'];
    $num_account = 0;

    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']),
            'selected' => $is_selected,
        ];
        ++$num_account;
    }

    $tutorial_projects = [

    ];
    $tutorial_steps = [
       'home'=> [
            'name' => __('tutorial_stampcard.toolbar_heading_home_page'),
            'path' => '/',
            'content' => [
               'masthead' => [
                    'name' => __('tutorial_stampcard.toolbar_menu_masthead'),
                    'popup_id' => 'tutorial_2_masthead',
                ],
               'referral' => [
                    'name' => __('tutorial_stampcard.toolbar_menu_referral'),
                    'popup_id' => 'tutorial_3_referral',
                ],
               'customizable_grid' => [
                    'name' => __('tutorial_stampcard.toolbar_menu_customizable_grid'),
                    'popup_id' => 'tutorial_4_card_grid',
                ],
               'upload_receipt' => [
                    'name' => __('tutorial_stampcard.toolbar_menu_upload_receipt'),
                    'popup_id' => 'tutorial_5_btn_upload_receipt',
                ],
               'receipt_picker' => [
                    'name' => __('tutorial_stampcard.toolbar_menu_receipt_picker'),
                    'popup_id' => 'tutorial_6_receipt_picker',
                ],
                'receipt_cropper' => [
                    'name' => __('tutorial_stampcard.toolbar_menu_receipt_cropper'),
                    'popup_id' => 'tutorial_6_1_receipt_cropper',
                ],
                'merchant_product_confirmation' => [
                    'name' => __('tutorial_stampcard.toolbar_menu_merchant_product_confirmation'),
                    'popup_id' => 'tutorial_6_2_merchant_product_confirmation',
                ],
                'point_award' => [
                    'name' => __('tutorial_stampcard.toolbar_menu_point_award'),
                    'popup_id' => 'tutorial_7_point_award',
                ],
                'reward_marketplace' => [
                    'name' => __('tutorial_stampcard.toolbar_menu_reward_marketplace'),
                    'popup_id' => 'tutorial_8_btn_reward_marketplace',
                ],
                'multiple_reward' => [
                    'name' => __('tutorial_stampcard.toolbar_menu_multiple_reward'),
                    'popup_id' => 'tutorial_9_reward_marketplace',
                ],
                'redemption_complete' => [
                    'name' => __('tutorial_stampcard.toolbar_menu_redemption_complete'),
                    'popup_id' => 'tutorial_10_completion',
                ],
                'get_in_touch' => [
                    'name' => __('tutorials_common.toolbar_menu_get_in_touch'),
                    'popup_id' => 'tutorial_get_in_touch',
                ],
            ],
        ],
    ];

    $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>
<link href="https://fonts.googleapis.com/css2?family=Nunito:400,600,700&display=swap" rel="stylesheet">
<style>
    .tutorial-toolbar {
        color: #8a9195;
        font-family: Nunito,sans-serif;
    }

    #app:not(.daterangepicker td) {
        flex-direction: inherit;
    }
</style>

<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">{{ __('tutorial_stampcard.heading_stampcard_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"></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

            @if($num_account > 1)
                <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>
            @endif

            @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>