@section('script')
    @parent
    <script src="{{ asset('assets/bower/jquery-ui/jquery-ui.min.js') }}" defer></script>
    <script src="{{ mix('js/digital_voucher/tutorial.js') }}" defer></script>
    <script>
        var IS_HOME_PAGE = {{ $is_home ? 1 : 0 }};
        var IS_VOUCHER_WALLET = {{ $is_wallet ? 1 : 0 }};
        var URL_TUTORIAL_ADMIN = '{!! addslashes(config('app.TUTORIAL_ADMIN_URL')) !!}';
        var IS_SHOW_TUTORIAL = !!("{{ config('app.SHOW_SIDEBAR')}}" == "1");
        var TRANS_TEXTS_TUT = {
            btn_close: '{!! addslashes(__('heading.btn_close')) !!}',
            btn_get_in_touch: '{!! addslashes(__('tutorials_common.btn_get_in_touch')) !!}',
            email_get_in_touch: '{!! addslashes(__('tutorials_common.btn_get_in_touch_email_address')) !!}',
            btn_click_download_below: '{!! addslashes(__('tutorials_digital_voucher.btn_click_download_below')) !!}'
        };
    </script>
@endsection

@section('style')
    @parent
    <link rel="stylesheet" href="{{ mix('css/digital_voucher_generic_tutorial.css') }}">
    @if(config('app.SHOW_SIDEBAR'))
    <link rel="stylesheet" href="{{ mix('css/digital_voucher_generic_sidebar.css') }}">
    @endif
@endsection

@php
    $tutorial_data = [];

    if ($is_home) {
        $tutorial_data = array_merge($tutorial_data, [
            [
                'id' => 'tutorial_home_banner',
                'text' => 'tutorials_common.home_banner',
            ],
            [
                'id' => 'tutorial_flash_promo',
                'text' => 'tutorials_digital_voucher.flash_promo',
            ],
            [
                'id' => 'tutorial_category_bar',
                'text' => 'tutorials_digital_voucher.category_bar',
            ],
            [
                'id' => 'tutorial_first_voucher',
                'text' => 'tutorials_digital_voucher.first_voucher',
                'global_script' => 'var MSG_CTA_DOWNLOAD_VOUCHER = "'.addslashes(__('tutorials_digital_voucher.msg_cta_download_voucher')).'";',
            ],
            [
                'id' => 'tutorial_voucher_download',
                'text' => 'tutorials_digital_voucher.voucher_download',
            ],
            [
                'id' => 'tutorial_proceed_voucher_wallet',
                'text' => 'tutorials_digital_voucher.msg_proceed_voucher_wallet',
            ],
        ]);
    }

    if ($is_wallet) {
        $tutorial_data = array_merge($tutorial_data, [
            [
                'id' => 'tutorial_voucher_redemption',
                'text' => 'tutorials_digital_voucher.voucher_redemption',
            ],
            [
                'id' => 'tutorial_voucher_redemption_pin',
                'text' => 'tutorials_digital_voucher.voucher_redemption_pin',
            ],
            [
                'id' => 'tutorial_promotional_method',
                'text' => 'tutorials_digital_voucher.promotional_method',
            ],
            [
                'id' => 'redemption_complete',
                'text' => 'tutorials_digital_voucher.redemption_complete',
            ],
            [
                'id' => 'tutorial_get_in_touch',
                'text' => 'tutorials_common.label_get_in_touch'
            ],
        ]);
    }
@endphp

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

    @php
        $global_js = [];
    @endphp
    @foreach($tutorial_data as $tutorial)
        @component('components.utility.template_floating_container',  ['id' => $tutorial['id']])
            <label>{{ __($tutorial['text']) }}</label>
        @endcomponent
        @php
            if ($tutorial['global_script']) {
                $global_js[] = $tutorial['global_script'];
            }
        @endphp
    @endforeach

    @if(config('app.SHOW_SIDEBAR'))
        @component('components.digital_voucher.tutorial_sidebar')
        @endcomponent
    @endif

</section>


@if(!empty($global_js))
    @section('script')
        @parent
        <script>
            {!! implode("\r\n", $global_js) !!}
        </script>
    @endsection
@endif