@php
    use Illuminate\Support\Collection;
@endphp

@extends('layouts.general')

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

@section('optionalCss')
    <link href="{!! asset('css/career/prom/index.css?20190305-1400') !!}" rel="stylesheet">
    <link href="{!! asset('css/common/common.css') !!}" rel="stylesheet">
@stop

@section('content')

    <div class="container" id="app">

        {{--If have no mst_position show popup--}}
        @if(!$positions->count() )
            <script>
                $(document).ready(function () {
                    $('#EmptyDataModal').modal('show');

                    $('.backAboutMenu, button.close').on('click', function (e) {
                        e.preventDefault();
                        history.go(-1);
                    });
                });

            </script>
        @else

            {{--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 class="error-ul">
                            <li v-for="(value, key, index) in form.errors.errors">@{{form.errors.get(key)}}</li>
                        </ul>
                    </div>
                </div>
            </div>
            {{--End validate message--}}

            <form action="{{route('updatePostPromotionCareer')}}" method="post" id="ajaxValidateFrm"
                  class="ajaxValidateFrm">

                {{csrf_field()}}

                <input id="delete_template" type="hidden" name="Delete[type][]" value=""/>

                <div class="col-xs-12">
                    <h4><strong>職位の昇級・昇格要件の新規登録・編集</strong></h4>
                </div>
                <div class="col-xs-12" style="margin-bottom: 5px;padding:0px">
                    <div class="col-xs-3">
                        <h5><strong>職位一覧</strong></h5>
                    </div>
                    <div class="col-xs-6" style="padding-left:111px;">
                        <h5 style="display:inline-flex">
                            <strong>
                                @if(!TnHelper::isHighestPosition($positions, $promotionList))
                                    @if(empty($mst_grade_up_req = $promotionList['mst_grade_up_req']))
                                        {{'新規登録'}}
                                    @else
                                        {{sprintf('%s「%s」の昇級要件', TnHelper::getPositionJP($positions, $promotionList), $promotionList['name'])}}
                                    @endif
                                @endif
                            </strong>
                        </h5>
                    </div>
                </div>

                <div class="col-xs-12" id="left-body">
                    @php
                        $mst_grade_up_req = $promotionList->count() ? $promotionList['mst_grade_up_req'] : null;
                        $mst_position_up_req = $promotionList->count() ? $promotionList['mst_position_up_req'] : null;

                        $mst_position_id = $promotionList['id'];
                        $mst_grade_up_req_id = isset($mst_grade_up_req) ? $mst_grade_up_req['id'] : -1;
                        $mst_position_up_req_id = isset($mst_position_up_req) ? $mst_position_up_req['id'] : -1;
                        $firstPosDisp = false;
                    @endphp

                    {{--Render Position widget--}}
                    @include('widget.position')

                    <div
                            data-position_id="{{$mst_position_id}}"
                            data-position_up_req_id="{{$mst_position_up_req_id}}"
                            class="col-xs-7 rightbox"
                            id="promotionRightContainer">
                        @if(!TnHelper::isHighestPosition($positions, $promotionList))
                            @include('career.promotion.partial.mst_grade_up_req', [
                                'mst_grade_up_req' => isset($mst_grade_up_req) ? $mst_grade_up_req : null
                            ])

                            <div class="col-xs-12" style="margin-top:20px; ">
                                <h5 style="margin-right:5px; ">
                                    @if(isset($promotionList))
                                        {{
                                        sprintf(
                                        '%s「%s」から %s 「%s」の昇格要件',
                                            TnHelper::getPositionJP($positions, $promotionList),
                                            $promotionList['name'],
                                            TnHelper::getPositionJP($positions, TnHelper::getPrevItemOfCollection($positions, $promotionList)),
                                            TnHelper::getPrevItemOfCollection($positions, $promotionList)->name
                                        )
                                        }}
                                    @endif
                                </h5>
                            </div>

                            <div class="col-xs-12" style="margin-top:5px;">

                                @include('career.promotion.partial.mst_position_up_req')

                                {{--Begin add/edit/delete exp child row--}}
                                <div
                                        class="col-xs-12 mst_position_up_req_child_container"
                                        style="padding-left:30px; background-color:#f9f9f9; margin-bottom:5px;">
                                    @if(!empty($mst_position_up_req_exps = $promotionList['mst_position_up_req_exps']))

                                        @foreach($mst_position_up_req_exps as $mst_position_up_req_exp)
                                            @if ($loop->first)
                                            	@php $isMainfirstExp = true; @endphp
                                            @else
                                            	@php $isMainfirstExp = false; @endphp
            								@endif
                                            @include('career.promotion.partial.mst_position_up_req_exp')
                                        @endforeach
                                        @unset($mst_position_up_req_exp)

                                    @else
                                        @php $isMainfirstExp = true; @endphp
                                        @include('career.promotion.partial.mst_position_up_req_exp')
                                    @endif
                                </div>
                                {{--End add/edit/delete exp child row--}}

                                {{--Begin add/edit/delete skill child row--}}
                                <div
                                        class="col-xs-12 mst_position_up_req_child_container"
                                        style="padding-left:30px; background-color:#f9f9f9; margin-bottom:5px;">
                                    @if(!empty($mst_position_up_req_skills = $promotionList['mst_position_up_req_skills']))

                                        @foreach($mst_position_up_req_skills as $mst_position_up_req_skill)
                                            @if ($loop->first)
                                            	@php $isMainfirstSkil = true; @endphp
                                            @else
                                            	@php $isMainfirstSkil = false; @endphp
            								@endif
                                            @include('career.promotion.partial.mst_position_up_req_skill')
                                        @endforeach
                                        @unset($mst_position_up_req_skill)

                                    @else
                                        @php $isMainfirstSkil = true; @endphp
                                        @include('career.promotion.partial.mst_position_up_req_skill')
                                    @endif
                                </div>
                                {{--End add/edit/delete skill child row--}}

                                {{--Begin add/edit/delete lecture child row--}}
                                <div
                                        class="col-xs-12 mst_position_up_req_child_container"
                                        style="padding-left:30px; background-color:#f9f9f9; margin-bottom:5px;">
                                    @if(!empty($mst_position_up_req_lectures = $promotionList['mst_position_up_req_lectures']))

                                        @foreach($mst_position_up_req_lectures as $mst_position_up_req_lecture)
                                            @if ($loop->first)
                                            	@php $isMainfirstLec = true; @endphp
                                            @else
                                            	@php $isMainfirstLec = false; @endphp
            								@endif
                                            @include('career.promotion.partial.mst_position_up_req_lecture')
                                        @endforeach
                                        @unset($mst_position_up_req_lecture)

                                    @else
                                        @php $isMainfirstLec = true; @endphp
                                        @include('career.promotion.partial.mst_position_up_req_lecture')
                                    @endif
                                </div>
                                {{--End add/edit/delete lecture child row--}}

                                {{--Begin add/edit/delete qualification child row--}}
                                <div
                                        class="col-xs-12 mst_position_up_req_child_container"
                                        style="padding-left:30px; background-color:#f9f9f9; margin-bottom:5px;">
                                    @if(!empty($mst_position_up_req_qualifications = $promotionList['mst_position_up_req_qualifications']))

                                        @foreach($mst_position_up_req_qualifications as $mst_position_up_req_qualification)
                                        @if ($loop->first)
                                            	@php $isMainfirstQual = true; @endphp
                                            @else
                                            	@php $isMainfirstQual = false; @endphp
            								@endif
                                            @include('career.promotion.partial.mst_position_up_req_qualification')
                                        @endforeach
                                        @unset($mst_position_up_req_qualification)

                                    @else
                                        @php $isMainfirstQual = true; @endphp
                                        @include('career.promotion.partial.mst_position_up_req_qualification')
                                    @endif
                                </div>
                                {{--End add/edit/delete qualification child row--}}

                            </div>
                        @endif

                        <div class="col-xs-12" style="margin-top: 15px;padding: 0px;padding-left:46px">
                            <div class="col-md-7"></div>
                            <div class="col-md-5">
                                <a class="btn btn-primary color" href="{{route('getCareerIndex')}}">戻る</a>
                                @if(!TnHelper::isHighestPosition($positions, $promotionList))
                                    <button name="action"
                                           type="submit"
                                           class="btn btn-primary color"
                                           style="WIDTH: 105px !important;"
                                           @click="onSubmit"
                                           data-ajaxurl="{{route('ajaxPostValidateFormPromotionCareer')}}">確定
                                    </button>
                                @else
                                    <button name="action"
                                           type="submit"
                                           class="btn btn-primary color disabled disabled-btn">確定
                                    </button>
                                @endif
                            </div>
                        </div>

                    </div>
                </div>
            </form>
            {{--End container--}}

        @endif

    </div>
@stop

@section('modal')
    @include('layouts.modal')
@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 () {
            var promotionModule = (function () {

                var addChildRow = function () {

                        $('.mst_position_up_req_child_container')
                            .off('click.addChild', '.positionUpChildAdd')
                            .on('click.addChild', '.positionUpChildAdd', function (e) {

                                var that = this,
                                    container = $(that).closest('.mst_position_up_req_child_container'),
                                    template = $('.mst_position_up_req_child_row:last', container).clone();

                                $(template)
                                    .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;

                                        $(template).data('old-key', key);
                                        return arrKey.join('/');
                                    })
                                    .find('.input-select > select, input')
                                    .each(function (index, el) {

                                        var that = this;
                                        $(that)
                                            .attr('name', function (index, name) {
                                                return name.replace($(template).data('old-key'), $(template).data('key'));
                                            })
                                            .prop('selectedIndex', 0)
                                            .prop('checked', false);

                                        // セレクトボックスの内容に合わせて行の内容を変更する。
                                        necessary1 = $(that).closest('.mst_position_up_req_child_row').find('.necessary1'),
                                        necessary2 = $(that).closest('.mst_position_up_req_child_row').find('.necessary2');
                                        necessary1.show();
                                        necessary2.hide();

                                    })
                                    .end()
                                    .find('.proUpReqGrandChildRow')
                                    .each(function (index, el) {

                                        var that = this;

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

                                                var parent_old_key = $(template).data('old-key'),
                                                    parent_new_key = $(template).data('key'),
                                                    arrKey = key.replace(parent_old_key, parent_new_key).split('/');

                                                arrKey[arrKey.length - 1] = arrKey[arrKey.length - 1] > 0 ? -1 : arrKey[arrKey.length - 1] - 1;

                                                $(that).data('old-key', key);

                                                return arrKey.join('/');
                                            });
                                    })
                                    .find('select, input')
                                    .each(function (index, el) {

                                        var that = this,
                                            proUpReqGrandChildRow = $(that).closest('.proUpReqGrandChildRow');

                                        $(that)
                                            .attr('name', function (index, name) {
                                                if(name){
                                                    return name.replace(
                                                        $(proUpReqGrandChildRow).data('old-key'),
                                                        $(proUpReqGrandChildRow).data('key')
                                                    );
                                                }
                                                return name;
                                            })
                                            .val('')
                                            .prop('selected', true);
                                    })
                                    .end()
                                    .end()
                                    .find('.proUpReqGrandChildRow:not(:first)')
                                    .remove()
                                    .end()
                                    .find('.grandchild_item_display_container')
                                    .children(':not(:last)')
                                    .remove()
                                    .end()
                                    .end()
                                    .find('.deleteChildBtn1')
                                    .addClass("deleteChildBtn")
                                    .removeClass("deleteChildBtn1")
                                    .end()
                                    .find('.deleteChildBtn')
                                    .removeAttr('data-id')
                                    .end()
                                    .find('.glyphicon-main-trash1')
                                    .addClass("glyphicon-trash")
                                    .addClass("glyphicon")
                                    .removeClass("glyphicon-main-trash1")
                                    .end()
                                    .appendTo(container);
                            });
                    },
                    addGrandChildRow = function () {

                        $('.mst_position_up_req_child_container')
                            .off('click.addGrandChild', '.positionUpGrandChildAdd')
                            .on('click.addGrandChild', '.positionUpGrandChildAdd', function (e) {
                                var that = this,
                                    container = $(that).closest('.positionUpGrandChildContainer'),
                                    lastGrandChildRow = $('.proUpReqGrandChildRow:last', container),
                                    template = lastGrandChildRow.clone();
                                $(template)
                                    .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;

                                        $(template).attr('data-old-key', key);
                                        return arrKey.join('/');
                                    })
                                    .find('select, input')
                                    .each(function (index, el) {

                                        var that = this,
                                            name = $(that).attr('name'),
                                            name = typeof undefined !== typeof  name ? name : $(that).attr('data-name');

                                        $(that)
                                            .attr('data-name', name.replace($(template).attr('data-old-key'), $(template).attr('data-key')))
                                            .removeAttr('name')
                                            .val('')
                                            .prop('selected', true);
                                    })
                                    .end()
                                    .find('.deleteGrandChildBtn1')
                                    .addClass("deleteGrandChildBtn")
                                    .removeClass("deleteGrandChildBtn1")
                                    .end()
                                    .find('.glyphicon-trash1')
                                    .addClass("glyphicon-trash")
                                    .addClass("glyphicon")
                                    .removeClass("glyphicon-trash1")
                                    .end()
                                    .find('.deleteGrandChildBtn')
                                    .removeAttr('data-id')
                                    .end()
                                    .find('.grand_child_header')
                                    .remove()
                                    .end()
                                    .insertAfter(lastGrandChildRow);
                            });
                    },
                    saveGrandChild = function () {
                        $('.mst_position_up_req_child_container')
                            .off('click.saveGrandChild', '.saveGrandChild')
                            .on('click.saveGrandChild', '.saveGrandChild', function () {

                                var that = this,
                                    container = $(that).closest('.positionUpGrandChildContainer');

                                var oldSize = $(that)
                                .closest('.mst_position_up_req_child_row')
                                .find('.grandchild_item_display_container li').length - 1;
                                
                                var oldUl = [];
                                $(that)
                                .closest('.mst_position_up_req_child_row')
                                .find('.grandchild_item_display_container')
                                .children(':not(".grandchild_item_display_template")')
                                .find('div').each(function(){
                                	oldUl.push($(this).text().replace(/\s+/g, ''));
                                });

                                $(that)
                                    .closest('.mst_position_up_req_child_row')
                                    .find('.grandchild_item_display_container')
                                    .children(':not(".grandchild_item_display_template")')
                                    .remove();

                                $($('.proUpReqGrandChildRow', container).get().reverse())
                                    .each(function (index, ele) {

                                        var that = this,
                                            grandchild_item_display_container = $(that).closest('.mst_position_up_req_child_row').find('.grandchild_item_display_container'),
                                            grandchild_item_display_template = $('.grandchild_item_display_template', grandchild_item_display_container)
                                                .clone()
                                                .removeClass('grandchild_item_display_template');

                                        $('select, input', that)
                                            .each(function (index, el) {

                                                var that = this;

                                                if ($(el).data('name')) {
                                                    $(el).attr('name', $(el).data('name'));
                                                }
                                                $(grandchild_item_display_template)
                                                    .find('.' + $(el).data('item-display'))
                                                    .text(function (index, text) {
                                                        return $('option:selected', that).text() + text;
                                                    });
                                            });

                                        $(grandchild_item_display_template)
                                            .prependTo(grandchild_item_display_container)
                                            .show();
                                    });

                                var newSize = $(that)
                                .closest('.mst_position_up_req_child_row')
                                .find('.grandchild_item_display_container li').length - 1;
                                
								var newUl = [];
								$(that)
                                .closest('.mst_position_up_req_child_row')
                                .find('.grandchild_item_display_container')
                                .children(':not(".grandchild_item_display_template")')
                                .find('div').each(function(){
                                	newUl.push($(this).text().replace(/\s+/g, ''));
                                });
								
								if(oldSize !== newSize){
									 $(that).closest('.mst_position_up_req_child_row')
	                    		 	 .find('.checkitem')
	                    		 	 .prop('checked', true);
								}else if($(oldUl).not(newUl).length !== 0 || $(newUl).not(oldUl).length !== 0){
									 $(that).closest('.mst_position_up_req_child_row')
	                    		 	 .find('.checkitem')
	                    		 	 .prop('checked', true);
								}

                                $(that)
                                    .closest('.modal')
                                    .modal('hide');
                            });

                    },
                    showHideNeccessary = function () {

                        $('.mst_position_up_req_child_container')
                            .find('.necessary2')
                            .hide()
                            .end()
                            .off('change.showHideNeccessary changeWhenload.trigger', 'select.pattern')
                            .on('change.showHideNeccessary changeWhenload.trigger', 'select.pattern', function () {

                                var that = this,
                                    necessary1 = $(that).closest('.mst_position_up_req_child_row').find('.necessary1'),
                                    necessary2 = $(that).closest('.mst_position_up_req_child_row').find('.necessary2');

                                if (1 == $(that).val()) {
                                    necessary1.show();
                                    necessary2.hide();
                                } else {
                                    necessary1.hide();
                                    necessary2.show();
                                }

                            });
                    },
                    editChildRow = function () {
                        $('.mst_position_up_req_child_container')
                            .off('click.editChild', '.positionUpChildEdit')
                            .on('click.editChild', '.positionUpChildEdit', function (e) {
                                var that = this,
                                    row = $(that).closest('.mst_position_up_req_child_row'),
                                    modal = $('.modal', row);
                                modal.modal('show');
                            });
                    },
                    deleteChild = function () {
                        $('.mst_position_up_req_child_container')
                            .off('click.delpro', '.deleteChildBtn')
                            .on('click.delpro', '.deleteChildBtn', function (e) {

                                e.preventDefault();

                                var that = this;

                                if ($(that).data('id')) {

                                    var delete_template = $('#delete_template'),
                                        child_delete_template = $(delete_template).clone();

                                    $(child_delete_template)
                                        .removeAttr('id')
                                        .attr('name', function (index, name) {

                                            return name.replace('type', $(that).data('type'));
                                        })
                                        .val($(that).data('id'))
                                        .insertAfter(delete_template);

                                    $(that)
                                        .closest('.mst_position_up_req_child_row')
                                        .remove();

                                } else if (typeof  undefined == typeof  $(that).data('route')) {
                                    $(that).closest('.mst_position_up_req_child_row').remove();
                                }
                            });
                    },
                    deleteGrandChild = function () {
                        $('.mst_position_up_req_child_container')
                            .off('click.delpro', '.deleteGrandChildBtn')
                            .on('click.delpro', '.deleteGrandChildBtn', function (e) {

                                e.preventDefault();

                                var that = this;

                                if ($(that).data('id')) {

                                    var delete_template = $('#delete_template'),
                                        child_delete_template = $(delete_template).clone();

                                    $(child_delete_template)
                                        .removeAttr('id')
                                        .attr('name', function (index, name) {

                                            return name.replace('type', $(that).data('type'));
                                        })
                                        .val($(that).data('id'))
                                        .insertAfter(delete_template);

                                    $(that)
                                        .closest('.proUpReqGrandChildRow')
                                        .remove();

                                } else if (typeof  undefined == typeof  $(that).data('route')) {
                                    $(that).closest('.proUpReqGrandChildRow').remove();
                                }
                            });
                    },
                    showScore1 = function () {
                        $('.container')
                            .off('change.showScore1 paste.showScore1 keyup.showScore1', '#score1')
                            .on('change.showScore1 paste.showScore1 keyup.showScore1', '#score1', function (e) {
                                var that = this;
                                $('#showScore1', '.container').text($(that).val());
                            });
                    },
                    showScore2 = function () {
                        $('.container')
                            .off('change.showScore2 paste.showScore2 keyup.showScore2', '#score2')
                            .on('change.showScore2 paste.showScore2 keyup.showScore2', '#score2', function (e) {
                                var that = this;
                                $('#showScore2', '.container').text($(that).val());
                            });
                    },
                    showHideNeccessaryOnLoad = function () {
                        $('select.pattern', '.mst_position_up_req_child_container').trigger('changeWhenload.trigger');
                    };

                return {
                    addChildRow: addChildRow,
                    showHideNeccessary: showHideNeccessary,
                    editChildRow: editChildRow,
                    deleteChild: deleteChild,
                    addGrandChildRow: addGrandChildRow,
                    saveGrandChild: saveGrandChild,
                    deleteGrandChild: deleteGrandChild,
                    showScore1: showScore1,
                    showScore2: showScore2,
                    showHideNeccessaryOnLoad: showHideNeccessaryOnLoad
                };
            })();
            promotionModule.addChildRow();
            promotionModule.showHideNeccessary();
            promotionModule.editChildRow();
            promotionModule.deleteChild();
            promotionModule.addGrandChildRow();
            promotionModule.saveGrandChild();
            promotionModule.deleteGrandChild();
            promotionModule.showScore1();
            promotionModule.showScore2();
            promotionModule.showHideNeccessaryOnLoad();
        });

        function getKey(string) {
            var found = [],
                pattern = /\[(.*?)\]/g,
                currentMatch;
            while (currentMatch = pattern.exec(string)) {
                found.push(currentMatch[1]);
            }
            return found;
        }
    </script>
@append