@extends('layouts.master')

@section('link')
    <link href="{!! asset('css/numclass/index.css') !!}" rel="stylesheet">
    <link href="{!! asset('css/format/format-index.css?20190530-1700') !!}" rel="stylesheet">
    @include('layouts.header')
@stop

@section('content')
    <script type="text/javascript">
        $(document).ready(function () {

            /**
             * 送信ボタン押下時
             * ファイルの送信処理を行う
             *
             * @param event event クリックイベント
             */
            $('#uploadBtn').on('click',function(event){
                event.preventDefault();
                // ボタンのフォーカスを外す
                this.blur();
                var fileName = document.getElementById("xlsmFile").value;

                // 入力チェック
                var errorString = errorCheck(fileName);

                if(errorString.length > 0){
                    // 入力チェックでエラーがあるときはメッセージ表示して処理終了
                    errorMsg(errorString);
                } else{
                    // 入力チェックに問題なければ非同期処理実行

                    // 画面に表示されているメッセージを非表示にする
                    $('#errorMsg').addClass('hidden');
                    $('#resultMsg').addClass('hidden');

                    // ajaxでのcsrfトークン送信
                    $.ajaxSetup({
                        headers:{'X-CSRF-TOKEN':$('meta[name="csrf-token"]').attr('content')}
                    });

                    // 非同期処理用パラメータ設定
                    var url = '{{route("uploadFormat")}}';
                    var file = $("input[name='xlsmFile']").prop("files")[0];
                    var fd = new FormData();
                    fd.append("fmt01_name", fileName);
                    fd.append("file", file);

                    // ローディング画面表示
                    showLoading();

                    $.ajax({
                        url:url,
                        type:"post",
                        dataType:'json',
                        data:fd,
                        processData:false,
                        contentType:false,
                        success:function(data){
                            if (data.success) {
                                $('#resultMsg').removeClass('hidden');
                                $('#resultMsg').html('ファイルのアップロードが完了しました。');
                                // アップローダーをクリア
                                $('#xlsmFile').val(null);
                                // メッセージを消す
                                setTimeout(function(){
                                    $('#resultMsg').addClass('hidden');
                                },5000);
                            } else {
                                // エラー時
                                errorString = '{{ Message::get("E00108", ["Field" => "ファイルの送信"]) }}';
                                errorMsg(errorString);
                            }
                        },
                        error:function (err){
                            if (err.status === {{Config::get('const.AJAX_VALIDATE_ERROR_STATUS')}}){
                                // バリデーションエラーの場合
                                errorString = err.responseJSON.fmt01_name[0];
                                errorMsg(errorString);
                            }
                        },
                        complete:function(){
                            // ローディング画面を消す
                            hideLoading();
                        }
                    });
                }
            });

            /**
             * ファイルの必須チェックを行う
             *
             * @param string fileName ファイル名
             * @return string errorString エラーメッセージ
             */
            function errorCheck(fileName){
                var errorString='';

                // 必須チェック
                if(fileName === ''){
                    errorString = errorString + '{{ Message::get("E00095", ["Field" => "アップロードファイル"]) }}';
                }
                return errorString;
            };

            /**
             * ローディング表示
             */
            function showLoading() {
                $('body').append('<div id="loadingBox"><img src="{{asset('img/loading.gif')}}"></div>');
            }

            /**
             * 表示したローディングを消す
             */
            function hideLoading() {
                $('#loadingBox').remove();
            }

            /**
             * エラーメッセージを表示させる
             * @param string errorString エラーメッセージ
             */
            function errorMsg(errorString) {
                $('#errorMsg').removeClass('hidden');
                $('#errorMsg').html(errorString);
                // エラー時はスクロールをリセットする
                $(window).scrollTop(0);
            }

        });
    </script>
    <div class="container format">
        <div id="errorMsg" class="hidden alert alert-danger"></div>
        <div class="col-xs-12">
            <h4 class="format"><strong>キャリアデザイン・チームマネジメントに関する各種フォーマット</strong></h4>
        </div>
        <div class="col-xs-12">
            <ul class="format">
                <a href="{{url('/format/キャリアデザインシート.xls')}}">
                    <li class="col-xs-6 format">キャリアデザインシート</li>
                </a>
                <a href="{{url('/format/数値指標設定シート.xls')}}">
                    <li class="col-xs-6 format">数値指標設定シート</li>
                </a>
                <a href="{{url('/format/職務経歴計画シート.xls')}}">
                    <li class="col-xs-6 format">職務経験計画シート</li>
                </a>
                <a href="{{url('/format/職務経験入力シート.xls')}}">
                    <li class="col-xs-6 format">職務経験入力シート</li>
                </a>

                <a href="{{url('/format/資格取得・技能習得計画シート.xls')}}">
                    <li class="col-xs-6 format">資格取得・技能習得計画シート</li>
                </a>
                <a href="{{url('/format/資格取得・技能習得入力シート.xls')}}">
                    <li class="col-xs-6 format">資格取得・技能習得入力シート</li>
                </a>
                <a href="{{url('/format/受講計画シート.xls')}}">
                    <li class="col-xs-6 format">受講計画シート</li>
                </a>
                <a href="{{url('/format/研修・訓練受講実績シート.xls')}}">
                    <li class="col-xs-6 format">研修・訓練受講実績シート</li>
                </a>

                <a href="{{url('/format/スキルアップ×数値指標紐付けシート.xls')}}">
                    <li class="col-xs-6 format">スキルアップ×数値指標紐付けシート</li>
                </a>
                <a href="{{url('/format/数値指標個人振り返りシート.xls')}}">
                    <li class="col-xs-6 format">数値指標個人振り返りシート</li>
                </a>
                <a href="{{url('/format/数値指標管理シート.xls')}}">
                    <li class="col-xs-6 format">数値指標管理シート</li>
                </a>
                <a href="{{url('/format/目指す職位の設定シート.xls')}}">
                    <li class="col-xs-6 format">目指す職位の設定シート</li>
                </a>
            </ul>
        </div>

        @if($proxy_input && (Auth::user()->auth === 1 || Auth::user()->auth === 2))
            <div class="col-xs-12">
                <h4 class="format"><strong>職員表代行入力に関するフォーマット</strong></h4>
            </div>
            <div class="col-xs-12">
                <ol class="proxy">
                    <li>下記のリンクからフォーマットをダウンロードしてください。</li>
                    <ul class="format proxy-div">
                        <a href="{{url('/format/TN職員データ入力フォーマット.xlsm')}}">
                            <li class="format-xlsm">TN職員データ入力フォーマット</li>
                        </a>
                    </ul>
                    <li>フォーマットを入力してください。</li>
                    <div class="proxy-div">
                        <strong>注意点</strong>
                    </div>
                    <ul>
                        <li>起動にはMicrosoft Excelをご利用ください。</li>
                        <li>フォーマットのパスワードは「<strong>tn2018</strong>」です。</li>
                        <li>マクロを有効にしてから入力してください。</li>
                    </ul>
                    <div class="proxy-div">
                        <strong>入力手順</strong>
                    </div>
                    <ol>
                        <li>
                            「1基本情報」のシートから入力していきます。<br>
                            「1基本情報」のシートに入力された姓名が、<br>
                            「2休職期間」以降のシートに自動反映されるように作られていますので、<br>
                            まずはこのシートを完成させてください。<br><br>
                        </li>
                        <li>
                            「1基本情報」のシートが完成したら、<br>
                            「2休職期間」「3学歴」「4職務経歴」「5家族構成」「6資格」「7研修・訓練」と、<br>
                            全てのシートに職員情報を入力してください。<br><br>
                        </li>
                        <li>
                            不要なシート（情報）は入力不要です。<br><br>
                        </li>
                    </ol>
                    <li class="proxy-li">入力完了後、下記にアップロードして送信してください。</li>
                    <div>
                        {{ Form::open(array('url'=>'/uploadFormat', 'class'=>'form-inline', 'name'=>'cond', 'id'=>'cond')) }}
                            {{ Form::file('xlsmFile',['id' => 'xlsmFile', 'accept' => '.xlsm', 'class' => 'proxy-up-form']) }}
                            <button id="uploadBtn" class="form-control btn btn-primary add-btn proxy-btn">送信</button>
                        {{ Form::close() }}
                    </div>
                    <div id="resultMsg" class="hidden bg-success"></div>
                    <li class="proxy-li">
                        入力内容に問題がなければ3営業日以内にデータを反映いたします。<br>
                        反映完了までフォーマットファイルは破棄しないようよろしくおねがいします。
                    </li>
                    <div class="proxy-info">
                        <strong>ご不明な点等ございましたら<a href="{{route('supportGet')}}">こちら</a>からお問い合わせください。</strong>
                    </div>
                </ol>
            </div>
        @endif
    </div><!-- /.bs-docs-main -->
@stop
@include ('layouts.footer')