@extends('layouts.admin')
@push('styles')
<link href="{{ asset('css/instruct.css') }}" rel="stylesheet">
@endpush

@section('content')
<div class='container-fluid'>
    <div class='row d-flex justify-content-center mt-4'>
        <div class='col-8'>
            <form class='bg-white border p-4' id="form">
                <div class='form-group'>
                    <h3 class='mb-4'>(一)、請選擇項目</h3>
                    <select class='form-control' name="item" required>
                        <option value="" selected disabled>請選擇...</option>
                        <option value="main">首頁</option>
                        <option value="applies">基線清查</option>
                        <option value="monitor">作業環境監測</option>
                        <option value="machine">機械設備自動檢查</option>
                        <!-- <option value="checkitems">自動檢查表單設定</option> -->
                        <option value="health">健康檢查</option>
                        <option value="license">人員證照與教育訓練</option>
                        <option value="analysis">適法性分析</option>
                        <option value="report">輔導報告</option>
                        <option value="subaccount">子帳號管理</option>
                        <!-- <option value="account">帳號管理</option> -->
                        <option value="message">意見回覆</option>
                        <option value="alerming">提醒功能</option>
                        <option value="appdownload">APP下載</option>
                    </select>
                    <hr>
                </div>

                <div class='form-group input_section'>
                    <h3 class='mb-4'>(二)、上傳教學圖檔</h3>
                    <input type="file" class='form-control-file' name="file[]" accept="image/*" multiple>
                    <small class='text-success'>
                        <span class='invalid_name'>1. 請注意檔名須符合以下規定：只能有大小寫英文、半形數字、下底線；不能有其他特殊符號、空格、中文等特殊字元<br /></span>
                        <span class='invalid_size'>2. 檔案大小限制在 5MB 內 <br /></span>
                        <span class='invalid_ext'>3. 檔案類型只允許 .png 和 .jpg 檔<br /></span>
                        <span>4. 檔案以檔名做排序，上傳前請務必先確認好檔名。</span>
                    </small>
                    <hr>
                </div>

                <div class='form-group'>
                    <h3 class='mb-4'>(三)、已上傳項目</h3>
                    <section id="uploaded_files"></section>
                    <div id="loading" hidden>loading...</div>
                </div>

                <div class='w-100 text-center'>
                    <button type="submit" class='btn btn-success w-100'>提交</button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script src="{{ asset('js/instruct.js') }}"></script>
@endsection