@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_smart_receipt.toolbar_heading_home_page'),
            'path' => '/',
            'content' => [
               'ocr_scenario_picker' => [
                    'name' => __('tutorial_smart_receipt.toolbar_menu_ocr_scenario_picker'),
                    'popup_id' => $popup_id['receipt']['picker'],
                ],
                'receipt_cropper' => [
                    'name' => __('tutorial_smart_receipt.toolbar_menu_receipt_cropper'),
                    'popup_id' => $popup_id['receipt']['cropper'],
                ],
                'scratch_card' => [
                    'name' => __('tutorial_smart_receipt.toolbar_menu_scratch_card'),
                    'popup_id' => $popup_id['scratchCard'],
                ],
                'receipt_approved' => [
                    'name' => __('tutorial_smart_receipt.toolbar_menu_receipt_approved'),
                    'popup_id' => $popup_id['receipt']['approved'],
                ],
                'receipt_pending' => [
                    'name' => __('tutorial_smart_receipt.toolbar_menu_receipt_pending'),
                    'popup_id' => $popup_id['receipt']['pending'],
                ],
               'receipt_rejected' => [
                    'name' => __('tutorial_smart_receipt.toolbar_menu_receipt_rejected'),
                    'popup_id' => $popup_id['receipt']['reject'],
                ],
                'not_receipt' => [
                    'name' => __('tutorial_smart_receipt.toolbar_menu_not_receipt'),
                    'popup_id' => $popup_id['receipt']['notReceipt'],
                ],
                'receipt_high_value' => [
                    'name' => __('tutorial_smart_receipt.toolbar_menu_receipt_high_value'),
                    'popup_id' => $popup_id['receipt']['highValue'],
                ],
                'receipt_low_value' => [
                    'name' => __('tutorial_smart_receipt.toolbar_menu_receipt_low_value'),
                    'popup_id' => $popup_id['receipt']['lowValue'],
                ],
                'completion' => [
                    'name' => __('tutorial_smart_receipt.toobar_menu_completion'),
                    'popup_id' => $popup_id['completion'],
                ],
                'get_in_touch' => [
                    'name' => __('tutorials_common.toolbar_menu_get_in_touch'),
                    'popup_id' => $popup_id['getInTouch'],
                ],
            ],
        ],
    ];

    $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;
    }

    {{-- workaround to fix toolbar expand issue --}}
    @media (min-width: 1400px) {
        .tutorial-main {
            transform: translateX(0px);
        }
        body.modal-open .tutorial-main {
            transform: none !important;
        }

        body.modal-open .tutorial-main .bg-layer {
            transform: translateX(-38%);
        }
    }

    @media (min-width: 1500px) {
        .tutorial-main .bg-layer {
            height: 106%;
        }
    }

</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_smart_receipt.heading_product_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>