@extends('user.layouts.app')

@section('title', 'TOP')

@section('header')
    <h1 id="title">TOP<a class="question-mark modal-open" data-target="use_flow"><img src="{{ asset('assets/user/img/question_mark.png') }}"></a></h1>
@endsection

@section('content')
    <main>
        <div class="truck"><img src="{{ asset('assets/user/img/truck.png') }}"></div>
        <div id="welcome">
            <h1>ようこそ<strong>{{ $f_user->supporter_id }}</strong>さん<br>まずは車両登録から始めましょう!!</h1>
            <p class="btn"><a href="{{ route('user.vehicles.create') }}">車両を登録する</a></p>
        </div>
        <a data-target="slide_dialog" id="h_show_slide" class="modal-open hide"></a>

        @if(!$is_viewed)
            <div id="slide_dialog" class="modal-content">
                <h2>ボタンの説明</h2>
                <ul id="slider-explain">
                    <li><img src="{{ asset('assets/user/img/slider/ushisapo1.png') }}?20210830"></li>
                    <li><img src="{{ asset('assets/user/img/slider/ushisapo2.png') }}?20210830"></li>
                    <li><img src="{{ asset('assets/user/img/slider/ushisapo3.png') }}?20210830"></li>
                    <li><img src="{{ asset('assets/user/img/slider/ushisapo4.png') }}?20210830"></li>
                    <li><img src="{{ asset('assets/user/img/slider/ushisapo5.png') }}?20210830"></li>
                    <li><img src="{{ asset('assets/user/img/slider/ushisapo6.png') }}?20210830"></li>
                    <li><img src="{{ asset('assets/user/img/slider/ushisapo7.png') }}?20210830"></li>
                    <li><img src="{{ asset('assets/user/img/slider/ushisapo8.png') }}?20210830"></li>
                </ul>
                <p class="back-slider"><a class="modal-close">スキップ</a></p>
            </div>
            <script>
                $('#h_show_slide').click();
            </script>
        @endif
    </main>


    <div id="dialog-confirm" style="display:none">
        <p><span class="ui-icon ui-icon-alert" style="float:left; margin:12px 12px 20px 0;"></span>
            <span id="confirm_text"></span></p>
    </div>


@endsection

@section('page_css')
    <style>
        strong {
            font-size: 1rem;
            font-weight: bold;
        }
        #confirm_text {
            display: flex;
        }
    </style>
@endsection

@section('page_js')
    <script src="{{ asset('assets/vendor/jquery-ui/jquery-ui.js') }}"></script>
    <script>
        $(document).ready(function () {
            @if(!Auth::guard('web')->user()->checkImageUpload())
                helper_confirm("dialog-confirm", '確認', "登録後は身分証の登録及び確認が必要になります。<br>電話番号や住所の登録を各種設定の基本情報編集から登録お願いします。", 300, "登録する", "後で行う", function () {
                    location.href = "{{ route("user.my_account.edit", ["is_image"=>1]) }}";
                });
            @endif

            @if(!$is_viewed)
                $('#h_show_slide').click();
            @endif
        });
    </script>
@endsection