@extends('layouts.general')

@section('link')

    <link href="{!! asset('css/career/requirement/index.css?20190306-1030') !!}" rel="stylesheet">
    <link href="{!! asset('css/common/common.css') !!}" rel="stylesheet">

    <link rel="stylesheet" type="text/css" href="{!! asset('css/career/requirement/style.css?20190315-1500') !!}">

@stop

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

@section('content')

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

        @php
            $mst_duty_id = $requirementList->count() ? $requirementList['id'] : -1;
        @endphp

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

        <div class="col-xs-12">
            <h4><strong>職責とその就任要件 の新規登録・編集</strong></h4>
        </div>

        <div class="col-xs-12">
            <div class="flash-message" id="editionMsg">

            </div>
        </div>

        <div class="col-xs-12">
            @if( Session::has('checkAuth') )
                <script type="text/javascript">
                    $(function () {
                        $('#myModalError').modal('show');
                    })
                </script>
            @endif
        </div>

        <form id="requirement_modify_frm" method="post" action="{{route('post.career.requirement.modify.update')}}"
              class="ajaxValidateFrm">

            {{csrf_field()}}

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

            <input type="hidden" id="do_not_create_duty_and_duty_items" name="do_not_create_duty_and_duty_items"
                   value="0"/>

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

                <div class="col-xs-3">
                    <h5><strong>職責一覧</strong></h5>
                </div>

                <div class="col-xs-5 title-form">
                    <input class="form-control"
                           name="MstDuty[{{sprintf('%s', $mst_duty_id)}}][name]" id="duty_name"
                           maxlength="20"
                           value="{{$requirementList['name'] or ''}}"/>
                    <h5 class="name-title"><strong>の就任要件</strong></h5>
                </div>

                <div class="col-xs-4  text-right">
                    <a
                            href="{{route('get.career.requirement.modify.index')}}"
                            class="btn btn-primary color">新規職責登録</a>
                </div>

            </div>

            <div class="col-xs-12" id="left-body">

                <div class="col-xs-4 info-left">

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

                        <table class="table table-striped ">

                            <thead>
                            <tr>
                                <th class="th-left"></th>
                                <th class="text-center"></th>

                                <th class="text-center"></th>
                                <th class="text-center"></th>
                            </tr>
                            </thead>

                            <tbody>

                            @foreach( $ListDutys as $key => $ListDuty)
                                <tr>

                                    <td class="label_break">{{ $ListDuty->name }}</td>

                                    <td>
                                        <a href="{{route('get.career.requirement.modify.index', [
                                            'id' => $ListDuty->id
                                        ])}}">
                                            <span class="glyphicon glyphicon-pencil pencil-duty"
                                                  data-id="{{ $ListDuty->id }}"></span>
                                        </a>
                                    </td>

                                    <td>
                                        @if(!$loop->first)

                                            <a href="{{route('get.career.requirement.modify.changeOrder', [
                                                'id' => $ListDutys->get($key),
                                                'anotherId' => $ListDutys->get($key - 1),
                                            ])}}">
                                                <span class="glyphicon glyphicon-arrow-up"></span>
                                            </a>

                                        @else
                                            <a href="#" style="visibility: hidden;">
                                                <span class="glyphicon glyphicon-arrow-up"></span>
                                            </a>

                                        @endif
                                    </td>

                                    <td>
                                        @if(!$loop->last)

                                            <a href="{{route('get.career.requirement.modify.changeOrder', [
                                                'id' => $ListDutys->get($key),
                                                'anotherId' => $ListDutys->get($key + 1),
                                            ])}}">
                                                <span class="glyphicon glyphicon-arrow-down"></span>
                                            </a>

                                        @else
                                            <a href="#" style="visibility: hidden;">
                                                <span class="glyphicon glyphicon-arrow-down"></span>
                                            </a>

                                        @endif
                                    </td>

                                </tr>
                            @endforeach
                            </tbody>

                        </table>

                    </div>

                </div>

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

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

                        {{--req_apply_position--}}

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

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

                                <div class="col-xs-12">
                                    <h6 style=" margin-bottom:0px; margin-left: -7px !important;">適用</h6>
                                </div>

                                <div
                                        class="col-xs-1"
                                        style="display: inline-flex; padding: 0px 0px 0px 20px; margin-top: 5px;margin-left: -5px !important;">
                                    <input
                                            {{$requirementList->count() && (1 == $requirementList['req_apply_position']) ? 'checked' : '' }}
                                            class="checkitem"
                                            name="MstDuty[{{sprintf('%s', $mst_duty_id)}}][req_apply_position]"
                                            type="checkbox" id="req_apply_position">
                                </div>

                                <div class="col-xs-11">
                                    @if($requirementList->count() && count($mst_duty_req_positions = $requirementList['mst_duty_req_positions']))
                                        @foreach($mst_duty_req_positions as $mst_duty_req_position)
                                            @include('career.requirement.partial.mst_duty_req_position')
                                        @endforeach
                                        @unset($mst_duty_req_position)

                                    @else
                                        @include('career.requirement.partial.mst_duty_req_position')

                                    @endif

                                </div>
                            </div>

                        </div>

                        {{--req_apply_skill--}}
                        <div class="col-xs-12 info-center">

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

                                @if($requirementList->count() && count($mst_duty_req_skills = $requirementList['mst_duty_req_skills']))
                                    @foreach($mst_duty_req_skills as $mst_duty_req_skill)
                                        @if ($loop->first)
                                         	@php $isMainfirstSkil = true; @endphp
                                        @else
                                          	@php $isMainfirstSkil = false; @endphp
            						    @endif
                                        @include('career.requirement.partial.mst_duty_req_skill')
                                    @endforeach
                                    @unset($mst_duty_req_skill)

                                @else
                                    @php $isMainfirstSkil = true; @endphp
                                    @include('career.requirement.partial.mst_duty_req_skill')

                                @endif

                            </div>

                        </div>

                        {{--req_apply_lecture--}}
                        <div class="col-xs-12 info-center">

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

                                @if($requirementList->count() && count($mst_duty_req_lectures = $requirementList['mst_duty_req_lectures']))
                                    @foreach($mst_duty_req_lectures as $mst_duty_req_lecture)
                                        @if ($loop->first)
                                            @php $isMainfirstLec = true; @endphp
                                        @else
                                          	@php $isMainfirstLec = false; @endphp
            						    @endif
                                        @include('career.requirement.partial.mst_duty_req_lecture')
                                    @endforeach
                                    @unset($mst_duty_req_lecture)

                                @else
                                    @php $isMainfirstLec = true; @endphp
                                    @include('career.requirement.partial.mst_duty_req_lecture')

                                @endif

                            </div>


                        </div>

                        {{--req_apply_qualification--}}
                        <div class="col-xs-12 info-center">

                            <div class="col-xs-12 mst_duty_req_child_container">
                                @if($requirementList->count() && count($mst_duty_req_qualifications = $requirementList['mst_duty_req_qualifications']))
                                    @foreach($mst_duty_req_qualifications as $mst_duty_req_qualification)
                                        @if ($loop->first)
                                            @php $isMainfirstQual = true; @endphp
                                        @else
                                          	@php $isMainfirstQual = false; @endphp
            						    @endif
                                        @include('career.requirement.partial.mst_duty_req_qualification')
                                    @endforeach
                                    @unset($mst_duty_req_qualification)

                                @else
                                    @php $isMainfirstQual = true; @endphp
                                    @include('career.requirement.partial.mst_duty_req_qualification')
                                @endif
                            </div>


                        </div>

                        {{--button list--}}
                        <div class="col-xs-12" style="position: relative;margin-top: 50px !important;">

                            <div style="position: absolute; bottom: 0; right: 0;">

                                @isset(request()->id)
                                    <a
                                            class="btn"
                                            data-route="{{route('post.career.requirement.modify.delete', [
                                            'type' => 'duty',
                                            'id' => $mst_duty_id
                                           ])}}"
                                            id="btnDelete">
                                        <span class="color-link">職責の削除</span>
                                    </a>
                                @endisset

                                <a
                                        href="{{route('getCareerIndex')}}"
                                        class="btn btn-primary color">メニューへ戻る</a>

                                <input
                                        @click="onSubmit"
                                        data-ajaxurl="{{route('post.career.requirement.modify.ajaxValidateForm')}}"
                                        type="submit"
                                        class="btn btn-primary color"
                                        value="確定"/>
                            </div>

                        </div>

                    </div>

                </div>
            </div>

        </form>

    </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 type="text/javascript">
        $(document).ready(function () {

            var requirementModule = (function () {

                var addChild = function () {
                        $('.mst_duty_req_child_container')
                            .off('click.addChild', '.add_child')
                            .on('click.addChild', '.add_child', function () {

                                var that = this,
                                    container = $(that).closest('.mst_duty_req_child_container'),
                                    template = $('.mst_duty_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, element) {

                                        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_duty_req_child_row').find('.necessary1'),
                                        necessary2 = $(that).closest('.mst_duty_req_child_row').find('.necessary2');
                                        necessary1.show();
                                        necessary2.hide();

                                    })
                                    .end()
                                    .find('.mst_duty_req_grand_child_row')
                                    .each(function (index, ele) {

                                        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,
                                            mst_duty_req_grand_child_row = $(that).closest('.mst_duty_req_grand_child_row'),
                                            name = $(that).attr('name'),
                                            name = typeof undefined !== typeof  name ? name : $(that).attr('data-name');

                                        $(that)
                                            .val('')
                                            .prop('selected', true)
                                            .attr('data-name',
                                                name.replace(
                                                    $(mst_duty_req_grand_child_row).data('old-key'),
                                                    $(mst_duty_req_grand_child_row).data('key')
                                                )
                                            )
                                            .removeAttr('name');

                                    })
                                    .end()
                                    .end()
                                    .find('.mst_duty_req_grand_child_row:not(:first)')
                                    .remove()
                                    .end()
                                    .find('.grandchild_item_display_container')
                                    .children(':not(:last)')
                                    .remove()
                                    .end()
                                    .end()
                                    .find('.deleteChildBtn')
                                    .removeAttr('data-id')
                                    .end()
                                    .find('.deleteChildBtn1')
                                    .addClass("deleteChildBtn")
                                    .removeClass("deleteChildBtn1")
                                    .end()
                                    .find('.glyphicon-main-trash1')
                                    .addClass("glyphicon-trash")
                                    .addClass("glyphicon")
                                    .removeClass("glyphicon-main-trash1")
                                    .end()
                                    .appendTo(container);
                            });
                    },
                    addGrandChild = function () {
                        $('.mst_duty_req_child_container')
                            .off('click.addChild', '.add_grand_child')
                            .on('click.addChild', '.add_grand_child', function () {

                                var that = this,
                                    container = $(that).closest('.mst_duty_req_grand_child_container'),
                                    template = $('.mst_duty_req_grand_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).attr('data-old-key', key);
                                        return arrKey.join('/');
                                    })
                                    .find('select, input')
                                    .each(function (index, element) {

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

                                        $(that)
                                            .val('')
                                            .prop('selected', true)
                                            .attr('data-name',
                                                name.replace(
                                                    $(template).attr('data-old-key'),
                                                    $(template).attr('data-key')
                                                )
                                            )
                                            .removeAttr('name');
                                    })
                                    .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()
                                    .appendTo(container);
                            });
                    },
                    saveGrandChild = function () {
                        $('.mst_duty_req_child_container')
                            .off('click.saveGrandChild', '.saveGrandChild')
                            .on('click.saveGrandChild', '.saveGrandChild', function () {

                                var that = this,
                                    container = $(that).closest('.mst_duty_req_child_row'),
                                    form = $('#requirement_modify_frm'),
                                    unique_vals = $.unique($('.check_condition_skill', container).map(function () {
                                        return $(this).val();
                                    }).get().sort()),
                                    unique_vals2 = $.unique($('.check_condition_lecture', container).map(function () {
                                        return $(this).val();
                                    }).get().sort()),
                                    unique_vals3 = $.unique($('.check_condition_qualification', container).map(function () {
                                        return $(this).val();
                                    }).get().sort());

                                if (unique_vals.length != $('.check_condition_skill', container).length) {

                                    $('#UniqueCondition').modal('show');
                                    return false;
                                }
                                if (unique_vals2.length != $('.check_condition_lecture', container).length) {

                                    $('#UniqueCondition').modal('show');
                                    return false;
                                }
                                if (unique_vals3.length != $('.check_condition_qualification', container).length) {

                                    $('#UniqueCondition').modal('show');
                                    return false;
                                }

                                var oldSize = $(that)
                                .closest('.mst_duty_req_child_row')
                                .find('.grandchild_item_display_container li').length - 1;
                                
                                var oldUl = [];
                                $(that)
                                .closest('.mst_duty_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, ''));
                                });

                                $(container)
                                    .find('.grandchild_item_display_container')
                                    .children(':not(".grandchild_item_display_template")')
                                    .remove()
                                    .end()
                                    .end();

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

                                        var that = this,
                                            grandchild_item_display_container = $('.grandchild_item_display_container', 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_duty_req_child_row')
                                .find('.grandchild_item_display_container li').length - 1;
                                
								var newUl = [];
								$(that)
                                .closest('.mst_duty_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_duty_req_child_row')
	                    		 	 .find('.checkitem')
	                    		 	 .prop('checked', true);
								}else if($(oldUl).not(newUl).length !== 0 || $(newUl).not(oldUl).length !== 0){
									 $(that).closest('.mst_duty_req_child_row')
	                    		 	 .find('.checkitem')
	                    		 	 .prop('checked', true);
								}
								
                                $(that)
                                    .closest('.modal')
                                    .modal('hide');
                            });

                    },
                    deleteChild = function () {
                        $('.mst_duty_req_child_container')
                            .off('click.delete_requirement', '.deleteChildBtn')
                            .on('click.delete_requirement', '.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_duty_req_child_row ')
                                        .remove();

                                } else if (typeof  undefined == typeof  $(that).data('route')) {
                                    $(that).closest('.mst_duty_req_child_row').remove();
                                }
                            });
                    },
                    deleteGrandChild = function () {
                        $('.mst_duty_req_child_container')
                            .off('click.delete_requirement', '.deleteGrandChildBtn')
                            .on('click.delete_requirement', '.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('.mst_duty_req_grand_child_row')
                                        .remove();

                                } else if (typeof  undefined == typeof  $(that).data('route')) {
                                    $(that).closest('.mst_duty_req_grand_child_row').remove();
                                }
                            });
                    },
                    showHideGrandChild = function () {

                        $('.mst_duty_req_child_container')
                            .off('click.showHideGrandChild', '.show_grand_child_modal')
                            .on('click.showHideGrandChild', '.show_grand_child_modal', function (e) {

                                var that = this;

                                $(that)
                                    .closest('.mst_duty_req_child_row')
                                    .find('.modal')
                                    .modal('show');

                            });
                    },
                    showHideNeccessary = function () {

                        $('.mst_duty_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_duty_req_child_row').find('.necessary1'),
                                    necessary2 = $(that).closest('.mst_duty_req_child_row').find('.necessary2');

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

                            });
                    },
                    showHideNeccessaryOnLoad = function () {
                        $('select.pattern', '.mst_duty_req_child_container').trigger('changeWhenload.trigger');
                    },
                    checkCannotAddSameCondition = function () {

                        $('.ajaxValidateFrm')
                            .off('submit.checkCondition')
                            .on('submit.checkCondition', function (e) {


                                if ($('#requirement_modify_frm').find('.necessary_select[data-necessary_num_validate="false"]').length > 0) {

                                    $('#NecessaryValLessThanConditionCount').modal('show');
                                    return false;
                                }

                                if (0 == $('.grandchild_item_display_container li:not(".grandchild_item_display_template")').length) {

                                    $('#do_not_create_duty_and_duty_items')
                                        .val(1);
                                }


                            });
                    },
                    necessaryValueLessThanConditionCount = function (e) {

                        $('#requirement_modify_frm')
                            .off('click.necessary_num_validate', '.saveGrandChild')
                            .on('click.necessary_num_validate', '.saveGrandChild', function () {

                                var that = this;

                                $(that)
                                    .closest('.mst_duty_req_child_container')
                                    .find('.necessary_select')
                                    .trigger('necessary_num_validate');
                            })
                            .off('change.checkNecessary', '.pattern')
                            .on('change.checkNecessary', '.pattern', function () {

                                var that = this;

                                $(that)
                                    .closest('.mst_duty_req_child_container')
                                    .find('.necessary_select')
                                    .trigger('necessary_num_validate');
                            })
                            .off('change.checkNecessary necessary_num_validate', '.necessary_select')
                            .on('change.checkNecessary necessary_num_validate', '.necessary_select', function () {

                                var that = this,
                                    row_container = $(that).closest('.mst_duty_req_child_container'),
                                    pattern_select = $('.pattern', row_container),
                                    condition_count = $('.grandchild_item_display_container li:not(".grandchild_item_display_template")', row_container).length;

                                if ($(that).val() > condition_count && 2 == $('option:selected', pattern_select).val()) {
                                    $(that).attr('data-necessary_num_validate', false);
                                } else {
                                    $(that).removeAttr('data-necessary_num_validate')
                                }

                            });
                    },
                    deleteRequirement = function () {
                        $('#btnDelete')
                            .off('click.delete_duty')
                            .on('click.delete_duty', function (e) {

                                e.preventDefault();

                                var that = this;

                                $('#deleteModal')
                                    .modal('show')
                                    .off('click.ok', '#btnOK')
                                    .on('click.ok', '#btnOK', function () {
                                        $('#requirement_modify_frm')
                                            .attr('action', $(that).data('route'))
                                            .append($('<input type="hidden" name="currentPassword" />').val($('#DeletePassword').val()))
                                            .submit();
                                    });

                            });
                    };
                return {
                    addChild: addChild,
                    addGrandChild: addGrandChild,
                    saveGrandChild: saveGrandChild,
                    deleteChild: deleteChild,
                    deleteGrandChild: deleteGrandChild,
                    showHideGrandChild: showHideGrandChild,
                    showHideNeccessary: showHideNeccessary,
                    showHideNeccessaryOnLoad: showHideNeccessaryOnLoad,
                    checkCannotAddSameCondition: checkCannotAddSameCondition,
                    necessaryValueLessThanConditionCount: necessaryValueLessThanConditionCount,
                    deleteRequirement: deleteRequirement
                };
            })();

            requirementModule.addChild();
            requirementModule.addGrandChild();
            requirementModule.saveGrandChild();
            requirementModule.deleteChild();
            requirementModule.deleteGrandChild();
            requirementModule.showHideGrandChild();
            requirementModule.showHideNeccessary();
            requirementModule.showHideNeccessaryOnLoad();
            requirementModule.checkCannotAddSameCondition();
            requirementModule.necessaryValueLessThanConditionCount();
            requirementModule.deleteRequirement();
        });

    </script>

@append