@php
    $is_demo = config('app.IS_DEMO');
    $is_show_sidebar = config('app.SHOW_SIDEBAR');
    $tutorials = config('spinandwin.tutorial');

    if ($is_demo) {
        $tutorials = [
            [
                'id' => 'tutorial_2_masthead',
                'text' => 'tutorial_spinandwin.textDemoMastHead',
            ],
            [
                'id' => 'tutorial_4_card_grid',
                'text' => 'tutorial_spinandwin.textDemoGrid',
            ],
            [
                'id' => 'tutorial_5_btn_upload_receipt',
                'text' => 'tutorial_spinandwin.textDemoUploadReceiptButton',
            ],
            [
                'id' => 'tutorial_6_receipt_picker',
                'text' => 'tutorial_spinandwin.textDemoUploadReceiptPicker',
            ],
            [
                'id' => 'tutorial_6_1_receipt_cropper',
                'text' => 'tutorial_spinandwin.textDemoReceiptCroper',
            ],
            [
                'id' => 'tutorial_7_point_award',
                'text' => 'tutorial_spinandwin.textDemoPointAward',
            ],
            [
                'id' => 'tutorial_qrcode',
                'text' => 'tutorial_spinandwin.textDemoQrCode',
            ],
            [
                'id' => 'tutorial_additional_attempts',
                'text' => 'tutorial_spinandwin.textDemoAdditionalAttempts',
            ],
            [
                'id' => 'tutorial_get_in_touch',
                'text' => 'tutorials_common.label_get_in_touch'
            ],
        ];
    }

    foreach ($tutorials as $key => $item) {
        $tutorials[$key]['text'] = __($item['text']);
    }
@endphp

@push('script')
    <script src="{{ asset('assets/bower/jquery-ui/jquery-ui.min.js') }}"></script>
    <script src="{{ mix('js/spinandwin/tutorial.js') }}"></script>
    <script>
        var TUTORIAL_DATA = {!! json_encode($tutorials) !!};
        var IS_HOME_PAGE = {{ boolToInt($is_home) }};
        var TRANS_TEXTS_TUT = {
            btnStartPlayingNow: "{!! addslashes(__('tutorial_spinandwin.btnStartPlayingNow')) !!}",
            @if($is_demo)
                btnGetStarted: "{!! addslashes(__('tutorial_spinandwin.btnGetStarted')) !!}",
                btn_explore_admin_dashboard: "{{ addslashes(__('tutorials_common.btn_explore_admin_dashboard')) }}",
                btn_get_in_touch: '{!! addslashes(__('tutorials_common.btn_get_in_touch')) !!}',
                email_get_in_touch: '{!! addslashes(__('tutorials_common.btn_get_in_touch_email_address')) !!}'
            @endif
        };
        @if($is_demo)
            var URL_TUTORIAL_ADMIN = '{!! addslashes(config('app.TUTORIAL_ADMIN_URL')) !!}';
        @endif

        $(function(){
            window.APP_IS_DEMO ? startDemoTutorial() : startTutorial();
        })
    </script>
@endpush

@push('style')
    <link rel="stylesheet" href="{{ mix('css/digital_voucher_generic_tutorial.css') }}">
    @if($is_demo && $is_show_sidebar)
        <link rel="stylesheet" href="{{ mix('css/digital_voucher_generic_sidebar.css') }}">
    @endif
@endpush


<section class="tutorial-container">
    @if($is_demo)
        @component('components.utility.popup_welcome', ['product_name' => __('tutorial_spinandwin.textProductName')])
        @endcomponent
    @endif

    {{--    @include('components.spinandwin.tutorial.popup_welcome', [])--}}
    @foreach($tutorials as $item)
        @component('components.utility.template_floating_container', ['id' => $item['id'] ])
            <label>{{  $item['text'] }}</label>
        @endcomponent
    @endforeach
</section>


@if($is_demo && $is_show_sidebar)
    @component('components.spinandwin.tutorial.tutorial_sidebar')
    @endcomponent
@endif