@extends('layouts.master')
@section('link')
    <link href="{!! asset('css/numclass/index.css') !!}" rel="stylesheet">
    <link href="{!! asset('css/career/style.css') !!}" rel="stylesheet">
    <link href="{!! asset('css/common/com004.css') !!}" rel="stylesheet">
    @include('layouts.header')
@stop

@section('content')
    <div class="container">

        {{--Validator Error From Server--}}
        @if($errors->any())
            <div class="flash-message">
                <div class="alert alert-danger">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{$error}}</li>
                        @endforeach
                    </ul>
                </div>
            </div>
        @endif
        {{--End Validator Error From Server--}}

        {{--Begin flash message--}}
        <div class="flash-message">

            @foreach (['danger', 'warning', 'success', 'info'] as $msg)
                @if(Session::has('alert-' . $msg))
                    <p class="alert alert-{{ $msg }}">{{ Session::get('alert-' . $msg) }}
                        <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                    </p>
                @endif
            @endforeach

        </div>
        {{--End flash message--}}

        {{--Begin validate message--}}
        <div id="validate_form_error_msg">
            <div v-cloak v-if="form.errors.any()" class="flash-message">
                <div class="alert alert-danger">
                    <ul>
                        <li v-for="(value, key, index) in form.errors.errors">@{{form.errors.get(key)}}</li>
                    </ul>
                </div>
            </div>
        </div>
        {{--End validate message--}}


        <div class="col-xs-12">
            <h4><strong>職能区分の新規登録・編集</strong></h4>
        </div>
        <div class="col-xs-12 title-register">
            <div class="col-xs-6">
                <h5><strong>システムの性質上、一度作成した職能区分は削除することができません。</strong></h5>
            </div>
            <div class="col-xs-6 inner-col-content text-right min-height-32">
                @if($dispFlg)
                    <a class="btn btn-primary width-150 color" href="{{ route('get.career.skillRegister') }}">新規職能区分登録</a>
                @endif
            </div>
        </div>
        <div class="col-xs-12">
            <div class="flash-message" id="editionMsg">

            </div>
        </div>
        <div class="col-xs-12 show-success">

        </div>
        <div class="col-xs-12" id="left-body">
            <div class="col-xs-5 register-list">
                <div class="col-xs-12">
                    <table class="table table-striped ">
                        <thead>
                        <tr>
                            <th class="title-list"><strong>職能区分</strong></th>
                            <th class="text-center"></th>
                            <th class="text-center"></th>
                            <th class="text-center"></th>
                        </tr>
                        </thead>
                        <tbody class="formatGlyphicon">
                        @foreach($ListSkillClass as $key => $listSkill)
                            <tr>

                                <td>{{ $listSkill->name }}</td>

                                <td class="text-center">
                                    <a href="{{route('get.career.skillRegister.modify', [
                                        'id' => tn_optional($listSkill)->id
                                    ])}}">
                                        <span class="glyphicon glyphicon-pencil"
                                              style="color: #665a48 !important;"></span>
                                    </a>
                                </td>

                                @if(! $loop->first)
                                    <td class="text-center">
                                        <a href="{{route('get.career.skillRegister.changeOrder', [
                                        'id' => $ListSkillClass[$key],
                                        'anotherId' => $ListSkillClass[$key - 1],
                                    ])}}">
                                            <span class="glyphicon glyphicon-arrow-up"
                                                  style="color: #665a48 !important;"></span>
                                        </a>
                                    </td>

                                @else
                                
                                    <td class="text-center" >
                                        <a href="#" style="display: none;">
                                            <span class="glyphicon glyphicon-arrow-down"
                                                  style="color: #665a48 !important;"></span>
                                        </a>
                                    </td>

                                @endif

                                @if(! $loop->last)
                                    <td class="text-center">
                                        <a href="{{route('get.career.skillRegister.changeOrder', [
                                        'id' => $ListSkillClass[$key],
                                        'anotherId' => $ListSkillClass[$key + 1],
                                    ])}}">
                                            <span class="glyphicon glyphicon-arrow-down"
                                                  style="color: #665a48 !important;"></span>
                                        </a>
                                    </td>
                                @else
                                    <td class="text-center">
                                        <a href="#" style="display: none;">
                                            <span class="glyphicon glyphicon-arrow-up"
                                                  style="color: #665a48 !important;"></span>
                                        </a>
                                    </td>
                                @endif

                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="col-xs-7 rightbox">

                <form method="POST" id="registrationForm" action="{{route('post.career.skillRegister.modify', [
                    'id' => tn_optional($skillClassById)->id
                ])}}">

                    {{csrf_field()}}

                    <div class="col-xs-12">

                        <div class="col-xs-12 inner-col-content title-regi-form"
                             style="display:inline-flex;padding:0;">
                            <h5 style="margin-right:5px; width:80px;"><strong>職能区分名</strong></h5>
                            <input class="form-control input-register" id="skillName" name="skillName"
                                   maxlength="16"
                                   placeholder="入力してください" value="{{tn_optional($skillClassById)->name}}"/>
                        </div>

                        <div class="col-xs-12 inner-col-content" style="display:inline-flex;padding:0;">
                            <h5 style="margin-right:5px; width:80px;"><strong>概要</strong></h5>

                            <textarea rows="4" class="form-control input-register" id="skillNote" maxlength="64"
                                      name="skillNote"
                                      placeholder="入力してください">{{tn_optional($skillClassById)->note}}</textarea>
                        </div>

                        <input type="hidden" name="id" id="id" value="0">
                        <input type="hidden" name="redirectPage" id="redirectPage" value="0">

                    </div>
                    <div class="col-xs-12 text-right button-search">
                        <input name="Action" type="button" class="btn btn-primary backAboutMenu width-125 color"
                               value="メニューへ戻る">
                        <input name="Action" type="button" class="btn btn-primary saveSkillClass width-105 color"
                               id="saveSkillClass" value="確定">
                    </div>

                </form>

            </div>

        </div>

    </div>

    <div class="modal fade" id="myModalBackMenu" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h5>&#160;</h5>
                </div>
                <div class="modal-body">
                    <h4 class="modal-title">編集内容は破棄されます。よろしいですか？</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">いいえ</button>
                    <button type="button" class="btn btn-primary" id='yesClose'>はい</button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(function () {

            $('.backAboutMenu').on('click', function (e) {
                e.preventDefault();
                window.location.href = '{{ url('/career') }}';
            });

            // 確定ボタン押下
            $('#saveSkillClass').on('click', function () {
                $('#ComPassModal').modal('show');
            });
            // 確定パスワードポップアップ「確定」押下時
            $('#comSubmitPass').on('click', function () {
                jQuery.ajaxSetup({
                    header: jQuery('meta[name="csrf-token"]').attr('content')
                });
    
                var pass = $('#comInputPass').val();
                $.ajax({
                    type: 'GET',
                    url: '{{route("get.basicEvaluation.confirm.check")}}',
                    data: {pass:pass},
                    dataType: 'json',
                    success: function(data){
                        if(data === true){
                            var skillName = $('#skillName').val(),
                                skillNote = $('#skillNote').val();

                            var resultValidate = validateRegistration(skillName, skillNote);

                            if (resultValidate) {
                                $('#registrationForm').submit();
                            }

                            setTimeout(function () {
                                $('.close').trigger('click');
                            }, 1500)
                        }else{
                            $('#ComPassErrModal').modal('show');
                        }
                    }
                });
            });

            $('#saveSkillClassNext').on('click', function () {
                $('#registrationForm').submit();
            })

        });

        function validateRegistration(skillName, skillNote) {
            if (skillName == '') {
                $('#editionMsg').html('<p class="alert alert-danger">{{ Message::get("E00060") }} <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a></p>');
                window.scrollTo(0, 0);
                return false;
            }
            return true;
        }
    </script>
@stop
@include ('layouts.footer')