@extends('layouts.general')

@section('layouts.header')
    @include('layouts.header')
@stop

@section('link')
    <link href="{!! asset('css/career/skill/index.css') !!}?20191226-1230" rel="stylesheet">
    <link href="{!! asset('css/common/com004.css') !!}" rel="stylesheet">
@stop

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

        {{--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--}}

        <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 flash 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 flash message--}}

        <form
                action="{{route('updatePostBaseSkillDetailCareer')}}"
                class="careerSkillFrm ajaxValidateFrm"
                method="post">
            <input class="hidden" type="hidden" id="deleteDetailIds" name="deleteDetailIds">
            {{csrf_field()}}

            <div class="row">

                <div class="row">
                    <div class="col-md-12">
                        <h4><strong>職能基準（小項目）の新規登録・編集</strong></h4>
                    </div>
                </div>

                <div class="row">

                    <div class="col-md-4">

                        <div class="col-md-12">
                            <h5><strong>職能区分</strong></h5>
                        </div>

                        <div class="col-md-12 form-group" style="display:inline-flex;padding:0px;  ">
                            <select style="width:270px;" class="form-control" id="classSkillDropdown">
                                @if(isset($classSkillList))
                                    @foreach($classSkillList as $classSkill)
                                        <option
                                                data-route="{{route('indexSkillCareer', [
                                                    'cId' => $classSkill->id,
                                                ])}}"
                                                value="{{$classSkill->id}}" {{Route::input('cId') == $classSkill->id ? 'selected' : ''}}>
                                            {{$classSkill->name}}
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                        </div>

                        <div class="col-md-12"><h1></h1></div>

                        <div class="col-md-12">
                            <h5><strong>職能基準一覧</strong></h5>
                        </div>

                        <div class="col-md-12">
                            <h6></h6>
                            <h6></h6>
                        </div>

                        <div class="col-md-12">
                            <table class="table table-striped ">
                                <thead>
                                <tr>
                                    <th colspan="2" class="text-center">登録されている職能基準</th>
                                </tr>
                                </thead>
                                <tbody>
                                @if(isset($classSkillById) && !empty($mst_base_skills = $classSkillById['base_skills']))
                                    @foreach($mst_base_skills as $mst_base_skill)
                                        <tr class="col-md-12">
                                            <td class="text-left col-md-3">{{$loop->index + 1}}.</td>
                                            <td class="col-md-9 text-left">
                                                @if(mb_strwidth($mst_base_skill['name']) > 28)
                                                    {{ mb_strimwidth($mst_base_skill['name'], 0, 28, '...', 'UTF-8') }}
                                                @else
                                                    {{ $mst_base_skill['name'] }}
                                                @endif
                                            </td>
                                        </tr>
                                    @endforeach
                                @endif

                                </tbody>
                            </table>
                        </div>

                    </div>

                    <div class="col-md-8">

                        <div class="col-md-6">
                            <h5><strong>職能基準</strong></h5>
                        </div>

                        @if(isset($classSkillById) && !empty($mst_base_skills = $classSkillById['base_skills']))

                            @foreach($mst_base_skills as $mst_base_skill)

                                <div class="col-md-12 showBaseSkillDetailBtn" style="display:inline-flex;padding:0;">
                                    <h5 class="black_box_number">{{isset($loop) ? $loop->index + 1 : 1}}</h5>
                                    <label style="padding-top:5px;">{{$mst_base_skill['name']}}</label>
                                </div>

                                <div class="baseSkillContainer" style="display: none;">

                                    <div class="subcatergory">
                                            @include('career.skill.partial.base_skill_detail_dummy')

                                        @if(!empty($base_skill_details = $mst_base_skill['base_skill_details']))

                                            @foreach($base_skill_details as $base_skill_detail)
                                                @include('career.skill.partial.base_skill_detail')
                                            @endforeach
                                            @unset($base_skill_detail)
                                        @endif
                                    </div>

                                    <div class="col-md-12 text-right addBaseSkillDetailBtn">
                                        <a class="btn btn-primary add-base-skill-detail color">小項目を追加</a>
                                    </div>

                                </div>

                            @endforeach

                        @endif

                    </div>
                </div>

                <div class="row">
                    <div class="col-md-12" style="margin-top: 15px;padding: 0px;">
                        <div class="col-md-12 text-right">
                            <input
                                    name="Action"
                                    type="button"
                                    onclick="location.href = '{{route('getCareerIndex')}}';"
                                    class="btn btn-primary"
                                    value="メニューへ戻る"/>
                            <input
                                    id="submitDetail"
                                    name="Action"
                                    type="button"
                                    class="btn btn-primary"
                                    value="確定"
                                    style="WIDTH: 105px !important;"/>
                        </div>
                    </div>
                </div>
            </div>

        </form>

    </div>
    <div id="passErrDetailModal" class="modal fade in" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-sm">
            <div class="modal-content" style="width:300px;">
                <div class="modal-header" style="width:298px;">
                    <h4 id="modalTitle" class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    パスワードが不正です。
                </div>
                <div class="modal-footer" style="width:298px;">
                    <a id="BackClose" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"></i> OK</a>
                </div>
            </div>
        </div>
    </div>
    <div id="passDetailModal" class="modal fade in" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-sm">
            <div class="modal-content" style="width:300px;">
                <div class="modal-header" style="width:298px;">
                    <h4 id="modalTitle" class="modal-title">確定用パスワード入力</h4>
                </div>
                <div class="modal-body submit-modal-title">
                    <div class="col-xs-12 inner-col-content submit-message">
                        *確定にはパスワードが必要です。
                    </div>
                    <div class="col-xs-12 inner-col-content submit-content">
                        <h5 id="SubmitHeader">パスワード</h5>
                        <input name ='Password' id="SubmitPassword" type="password" class=" form-control">
                    </div>
                </div>
                <div class="modal-footer" style="width:298px;">
                    <a class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"></i>  戻る</a>
                    <a id="submitDetailPass" onclick="" class="btn btn-primary" data-dismiss="modal"><i class="fa "></i>確定</a>
               </div>
            </div>
        </div>
    </div>
    {{--End cointainer--}}
@stop

@section('modal')
    @include('layouts.modal')
@stop

@section('copy_subcategory')
    @include('career.skill.partial.copy_subcategory')
@stop

@section('layouts.footer')
    @include ('layouts.footer')
@stop

@section('optionalJs')
    <script src="{!! asset('js/lib/validateFrm.js') !!}" type="text/javascript"></script>
    <script>
        $(document).ready(function () {

            // 反映ボタン押下時
            $('#btnApply')
                .off('click.submit')
                .on('click.submit', function () {
                    // 入力欄にデータを反映する
                    var target_key = $('#targetKey').val();
                    var target =  $('[data-key="'+ target_key +'"]');
                    var baseSkillDetail = $('#copyBaseSkillDetailsDropdown option:selected').text(),
                    detailDispName = $('#preview_disp_name').text(),
                    consideration = $('#preview_consideration').html();
                    target.find('[name="bsd[' + target_key + '][name]"]').val(baseSkillDetail);
                    target.find('[name="bsd[' + target_key + '][disp_name]"]').val(detailDispName);

                    $('[name="bsd[' + target_key + '][consideration]"]').summernote('code', consideration);
                });

            $('#copyClassSkillDropdown')
                .off('change.cs')
                .on('change.cs', function () {

                    $('#copyBaseSkillDropdown').empty();
                    $('#copyBaseSkillDetailsDropdown').empty();
                    $('#preview_name').empty();
                    $('#preview_disp_name').empty();
                    $('#preview_consideration').empty();
                    $('#copyBaseSkillDropdown').append('<option value="">入力してください。</option>');
                    $('#copyBaseSkillDetailsDropdown').append('<option value="">入力してください。</option>');
                    $('#btnApply').addClass('disabled');

                    var selected_id = Number($(this).val());
                    var classSkill = {!! $classSkillByFacilityId !!};
                    var classSkill_result = classSkill.filter(function(item, index){
                        if (item.id === selected_id){
                            return true;
                        }
                    });
                    // 職能基準（大項目）のリスト
                    for (var class_skill_key in classSkill_result) {
                        for (var base_skill_key in classSkill_result[class_skill_key].base_skills) {
                            base_skill_id = classSkill_result[class_skill_key].base_skills[base_skill_key].id;
                            base_skill_name = classSkill_result[class_skill_key].base_skills[base_skill_key].name;
                            $('#copyBaseSkillDropdown').append('<option value="'+base_skill_id+'">'+base_skill_name+'</option>');
                        }
                    }

                });

            $('#copyBaseSkillDropdown')
                .off('change.cs')
                .on('change.cs', function () {

                    $('#copyBaseSkillDetailsDropdown').empty();
                    $('#preview_name').empty();
                    $('#preview_disp_name').empty();
                    $('#preview_consideration').empty();
                    $('#copyBaseSkillDetailsDropdown').append('<option value="">入力してください。</option>');
                    $('#btnApply').addClass('disabled');

                    var classSkill = {!! $classSkillByFacilityId !!};
                    var selected_class_skill_id = Number($('#copyClassSkillDropdown').val());
                    var classSkill_result = classSkill.filter(function(item, index){
                        if (item.id === selected_class_skill_id) {
                            return true;
                        }
                    });
                    var selected_base_skill_id = Number($(this).val());
                    var class_skill_obj = classSkill_result[0].id;
                    var baseSkill_result = classSkill_result[0].base_skills.filter(function(item, index){
                        if (item.id === selected_base_skill_id) {
                            return true;
                        }
                    });
                    // 職能基準（小項目）のリスト
                    for (var base_skill_key in baseSkill_result) {
                        for (var base_skill_details_key in baseSkill_result[base_skill_key].base_skill_details) {
                            base_skill_details_id = baseSkill_result[base_skill_key].base_skill_details[base_skill_details_key].id;
                            base_skill_details_name = baseSkill_result[base_skill_key].base_skill_details[base_skill_details_key].name;
                            $('#copyBaseSkillDetailsDropdown').append('<option value="'+base_skill_details_id+'">'+base_skill_details_name+'</option>');
                        }
                    }

                });

            $('#copyBaseSkillDetailsDropdown')
                .off('change.cs')
                .on('change.cs', function () {

                    $('#preview_name').empty();
                    $('#preview_disp_name').empty();
                    $('#preview_consideration').empty();
                    $('#btnApply').addClass('disabled');

                    var classSkill = {!! $classSkillByFacilityId !!};
                    var selected_class_skill_id = Number($('#copyClassSkillDropdown').val());
                    var classSkill_result = classSkill.filter(function(item, index){
                        if (item.id === selected_class_skill_id) {
                            return true;
                        }
                    });

                    var selected_base_skill_id = Number($('#copyBaseSkillDropdown').val());
                    var baseSkill_result = classSkill_result[0].base_skills.filter(function(item, index){
                        if (item.id === selected_base_skill_id) {
                            return true;
                        }
                    });

                    var selected_base_skill_details_id = Number($(this).val());
                    var baseSkillDetails_result = baseSkill_result[0].base_skill_details.filter(function(item, index){
                        if (item.id === selected_base_skill_details_id) {
                            return true;
                        }
                    });

                    document.getElementById("preview_name").innerHTML = baseSkillDetails_result[0].name;
                    document.getElementById("preview_disp_name").innerHTML = baseSkillDetails_result[0].disp_name;
                    document.getElementById("preview_consideration").innerHTML = baseSkillDetails_result[0].consideration;

                    $('#btnApply').removeClass('disabled');
                });

            var skillModule = (function () {

                    var summernoteSkill = function () {
                            $('.summernote').summernote({
                                toolbar: [
                                    ['style', ['bold', 'italic', 'underline', 'clear']],
                                    ['fontsize', ['fontsize']],
                                    ['color', ['color']]
                                ],
                                height: 200
                            });
                        },
                        searchByCS = function () {
                            $('#classSkillDropdown')
                                .off('change.cs')
                                .on('change.cs', function () {
                                    var that = this;
                                    window.location.href = $('option:selected', that).data('route');
                                });
                        },
                        toggleBS = function () {
                            $('.showBaseSkillDetailBtn')
                                .off('click.bsd')
                                .on('click.bsd', function () {
                                    $(this).next('.baseSkillContainer').toggle();
                                });
                        },
                        addBSD = function () {
                            $('.baseSkillContainer')
                                .off('click.addBaseSkillDetail', '.add-base-skill-detail')
                                .on('click.addBaseSkillDetail', '.add-base-skill-detail', function () {
									
                                    var that = this,
                                        container = $(that).closest('.baseSkillContainer'),
                                        newRow = $('.base-skill-detail-row:last', container).clone(),
                                        settingTarget = $(container).children('.subcatergory');

                                    newRow
                                        .attr('data-key', function (index, key) {

                                            var arrKey = key.split('/');
                                            arrKey[arrKey.length - 1] = arrKey[arrKey.length - 1] > 0 ? -1 : arrKey[arrKey.length - 1] - 1;

                                            $(newRow).data('old-key', key);
                                            return arrKey.join('/');
                                        })
                                        .find('input[name], textarea[name]')
                                        .each(function (index, el) {

                                            var that = this;
                                            $(that)
                                                .val('')
                                                .attr('name', function (index, name) {
                                                    return name.replace($(newRow).data('old-key'), $(newRow).data('key'));
                                                });
                                        })
                                        .end()
                                        .find('.note-editor')
                                        .remove()
                                        .end()
                                        .find('.summernote')
                                        .summernote({
                                            toolbar: [
                                                ['style', ['bold', 'italic', 'underline', 'clear']],
                                                ['fontsize', ['fontsize']],
                                                ['color', ['color']]
                                            ],
                                            height: 200
                                        })
                                        .end()
                                        .find('.bsdDelete')
                                        .removeAttr('data-route')
                                        .end()
                                        .find('.normal_box_number')
                                        .text(function (index, text) {

                                            return text.replace('.', '') - 0 + 1;
                                        })
                                        .end()
                                        .find('.hidden')
                                        .removeClass('hidden')
                                        .end()
                                        .show()
                                        .appendTo(settingTarget);
                                    $('.note-btn-bold').removeClass('active');
                                });
                        },
                        deleteBSD = function () {
                            $('.baseSkillContainer')
                                .off('click.delBSD', '.bsdDelete')
                                .on('click.delBSD', '.bsdDelete', function (e) {

                                    e.preventDefault();
                                    var that = this,
                                        container = $(that).closest('.baseSkillContainer');
                                    var deleteDetailObj = $(that).closest('.base-skill-detail-row');
                                    if ($(that).data('route')) {
                                        //  削除する職能基準（小項目）IDを取得
                                        var deleteDetailId = deleteDetailObj[0].getAttribute("data-key").split('/').slice(-1);
                                        var deleteDetailIds = $('#deleteDetailIds');
                                        //  削除する職能基準（小項目）IDを配列に追加
                                        if(deleteDetailIds.val()){
                                            deleteDetailIds.val(deleteDetailIds.val() + ',' + deleteDetailId);
                                        }else{
                                            deleteDetailIds.val(deleteDetailId);
                                        }
                                    }
                                    deleteDetailObj.remove();
                                });
                        };
                        checkPass = function () {
                            $('#submitDetail')
                                .off('click.checkPass')
                                .on('click.checkPass', function (e) {
                                    var that = this;
                                    $('#passDetailModal')
                                        .modal('show')
                                        .off('click.ok', '#submitDetailPass')
                                        .on('click.ok', '#submitDetailPass', function () {
                                            jQuery.ajaxSetup({
                                                header: jQuery('meta[name="csrf-token"]').attr('content')
                                            });
                                            var pass = $('#SubmitPassword').val();
                                                
                                            $.ajax({
                                                type: 'GET',
                                                url: '{{route("get.basicEvaluation.confirm.check")}}',
                                                data: {pass:pass},
                                                dataType: 'json',
                                                success: function(data){
                                                    if(data == true){
                                                        $(that).closest('form').submit();
                                                    }else{
                                                        $('#passErrDetailModal').modal('show');
                                                    }
                                                }
                                            });
                                        });
                                    
                                });
                        };
                        copyButton = function () {
                            $('.baseSkillContainer')
                                .off('click.copy', '.copy_button')
                                .on('click.copy', '.copy_button', function (e) {
                                    e.preventDefault();
                                    $('#copySubcategory')
                                        .modal('show');

                                    // Popupにデータを渡す
                                    var target = $(this).parents('.base-skill-detail-row').data('key');
                                    $('#targetKey').val(target);
                                });
                        };

                    return {
                        summernoteSkill: summernoteSkill,
                        searchByCS: searchByCS,
                        toggleBS: toggleBS,
                        addBSD: addBSD,
                        deleteBSD: deleteBSD,
                        checkPass: checkPass,
                        copyButton: copyButton,
                    };
                }
            )();

            skillModule.summernoteSkill();
            skillModule.searchByCS();
            skillModule.toggleBS();
            skillModule.addBSD();
            skillModule.deleteBSD();
            skillModule.checkPass();
            skillModule.copyButton();
        });

        function randomNumber() {
            return Math.random().toString(36).substr(2, 9);
        }

    </script>
@append