@extends('layouts.general')

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

@section('optionalCss')
    <link href="{!! asset('css/numclass/index.css') !!}" rel="stylesheet">
    <link href="{!! asset('css/career/style.css') !!}" rel="stylesheet">
    <link href="{!! asset('css/common/common.css') !!}" rel="stylesheet">
    <style>
        .link-click {
            float: right;
            width: 90px;
        }

        .td-1 {
            width: 50px !important;
        }

        .td-2 {
            width: 110px !important;
        }

        .td-3 {
            width: 365px !important;
        }
        input.input-time{
			width: 65px !important;
		}
    </style>
@stop

@section('content')

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

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

        <div class="col-xs-12">
            <h4><strong>研修・訓練受講実績一括入力</strong></h4>
        </div>

        <form
                method="post"
                action="{{route('post.career.collectionInput.insert')}}"
                class="form-inline ajaxValidateFrm"
                name="ResultInputForm"
                id="ResultInputForm">

            {{csrf_field()}}

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

                <div class="col-xs-12 form-date">
                    <h5 class="line-form-date">研修・訓練<br/>受講終了日</h5>
                    <div class="input-group date mb-emd5 datepicker" id="datepicker1">
                        <input type="text" class="form-control date_input" id="date_input" name="date_input">
                        <span class="input-group-addon">
					<span class="glyphicon glyphicon-calendar"></span>
				</span>
                    </div>
                    <h5 class="title_time">時間数</h5>
                    <input type="number" max="500" min="0" value="0" class="form-control input-time" name="time_input"
                           id="time_input"/>
                    <h5 class="title-between">時間</h5>
                    <input type="number" max="59" min="0" value="0" class="form-control input-time"
                           name="attending_time"/>
                    <h5 class="title-end">分</h5>

                </div>

                <div class="col-xs-12 category">
                    <h5 class="title-category">研修会<br/>カテゴリ</h5>
                    {!! Form::n_select( 'LectureCategory', $LectureCategory, $Category,  Message::get('C00001',['a']) , ['id' => 'LectureCategory', 'class' => 'form-control', 'onChange' => 'changeLectureCategory()' ], null) !!}
                </div>

                <div class="col-xs-12 category-result">
                    <h5 class="title-category">研修会名</h5>
                    <span class="selectLectureWithCat">

                        <select name="LectureResult" id="LectureResult" class="form-control width-405">

                            <option value="">{{Message::get('C00001', ['a'])}}</option>

                            @foreach($LectureResult as $each)
                                <option value="{{$each['id']}}">{{$each['name'].'（'.$each['promoter'].'）'}}</option>
                            @endforeach
                        </select>

			        </span>
                </div>

                <div class="col-xs-12 text-right">
                    <div class="link-click">
                        <a href="{{route('get.career.lecture.register')}}"><h5 class="color-link">研修会の追加</h5></a>
                    </div>
                </div>

                <div class="col-xs-12 form-search" id="formSearch">

                    <div class="col-xs-3 text-center legend-form-search">
                        <h5 class="title-form"><strong>該当者絞り込み</strong></h5>
                    </div>

                    <div class="col-xs-12 row-form">
                        <h5 class="title-name-search">職　位</h5>
                        {!! Form::n_select('PositionJob_1', $PositionJob, $Position, Message::get('C00001', ['a']), ['id' => 'PositionJob_1', 'class' => 'form-control width-180'], null) !!}
                        <label class="label-search">
                            　～　
                        </label>
                        {!! Form::n_select('PositionJob_2', $PositionJob, $Position, Message::get('C00001', ['a']), ['id' => 'PositionJob_2', 'class' => 'form-control width-180'], null) !!}
                    </div>

                    <div class="col-xs-12 row-form">
                        <h5 class="title-name-search">勤続年数</h5>
                        {{ Form::n_select('year_1', $NumberYear, $NumYear, Message::get('C00001', ['a']), ['id'=> 'year_1', 'class' => 'form-control width-180' ], null) }}
                        <label class="label-search">
                            　～　
                        </label>
                        {{ Form::n_select('year_2', $NumberYear, $NumYear, Message::get('C00001', ['a']), ['id'=> 'year_2', 'class' => 'form-control width-180'], null) }}
                    </div>

                    <div class="col-xs-12 row-form">
                        <div class="col-xs-12 row-form">
                            <h5 class="title-name-search">職能区分</h5>
                            {!! Form::n_select('SkillClass', $SkillClass, $Skill, Message::get('C00001', ['a']), ['id' => 'SkillClass', 'class' => 'form-control width-250'], null) !!}
                        </div>
                    </div>

                    <div class="col-xs-12 inner-col-content row-form">
                        <h5 class="title-career">雇用状況</h5>
                        <label class="label-career-title-3">
                            <input type="radio" name="employment_status" value="1" checked="checked"/>現職者
                        </label>
                        <label class="label-career-title"><input type="radio" name="employment_status" value="2"/>現職者（正規）</label>
                        <label class="label-career-title-2"><input type="radio" name="employment_status" value="3"/>現職者（非正規）</label>
                    </div>

                    <div class="col-xs-12 inner-col-content row-form">
                        <h5 class="title-career"></h5>
                        <label class="label-career-title-3"><input type="radio" name="employment_status" value="4"/>休職者
                        </label>
                        <label class="label-career-title"><input type="radio" name="employment_status" value="5"/>異動（転出）</label>
                        <label class="label-career-title"><input type="radio" name="employment_status" value="6"/>異動（除籍）</label>
                    </div>

                    <div class="col-xs-12 inner-col-content row-form">
                        <h5 class="title-career"></h5>
                        <label class="label-career-title-3"><input type="radio" name="employment_status" value="7"/>退職者
                        </label>
                        <label class="label-career-title"><input type="radio" name="employment_status" value="8"/>すべて</label>
                    </div>

                    <div class="col-xs-12 button-search">
                        <div class="col-xs-12 text-right">
                            <div class="col-xs-9 text-right clear-form-search">
                                <h5><span id="reset_form_search">検索条件をクリア</span></h5>
                            </div>
                            {!! Form::button('検 索',['class'=>'btn btn-primary width-105', 'id'=>'searchForm' ])!!}
                        </div>
                    </div>

                </div>

            </div>
            <div class="col-xs-5">
                <input name="Action" type="button" class="btn btn-primary width-80" value="全選択"
                       onclick="toggle_(true)"
                       id="checkAll">
                <input name="Action" type="button" class="btn btn-primary width-80" value="全解除"
                       onclick="toggle_(false)"
                       id="uncheckAll">
                <table class="table table-striped maintable ">
                    <thead class="listViewHead">
                    <th class="td-1">
                        <center>適用</center>
                    </th>
                    <th class="td-2">
                        <center>氏名</center>
                    </th>
                    <th class="td-3">
                        <center>備考</center>
                    </th>
                    </thead>
                    <tbody class="bodyData listView">
                    @foreach($ListStaffs as $ListStaff)
                        <tr>
                            <td class="td-1">
                                <center><input class="checkitem" id="listSearchs" name="listSearchs[]" type="checkbox"
                                               value="{{ $ListStaff->trz_member_id }}"></center>
                            </td>
                            <td class="td-2 label_break">
                                <center><strong>{{ $ListStaff->name }}</strong></center>
                            </td>
                            <td class="td-3">
                                {{Form::textarea("note_$ListStaff->trz_member_id", null, [
                                        "class" => "form-control textarea-control",
                                        "style" => "height: 35px;"
                                    ]
                                )}}
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                </table>


            </div>
            <div class="col-xs-12 text-right ">
                <input name="Action" type="button" id="buttonBack" class="btn btn-primary width-125 backToMenu"
                       value="メニューへ戻る">
                <input
                        data-ajaxurl="{{route('post.career.collectionInput.ajaxValidateForm')}}"
                        @click="onSubmit"
                        name="Action"
                        type="button"
                        class="btn btn-primary width-105 submitResult"
                        value="確 定">
            </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 () {

            $('#datepicker1').datetimepicker({
                format: 'YYYY/MM/DD',
                locale: 'ja'
            });

            $('#searchForm')
                .off('click.search')
                .on('click.search', function (e) {

                    e.preventDefault();

                    $.ajax({
                        type: "POST",
                        url: "{{route('post.career.collectionInput.search') }}",
                        data: $('#ResultInputForm').serialize(),
                        dataType: 'json',
                        success: function (data) {
                            var html = '';
                            $('#editionMsg').html(html);
                            if (data.length > 0) {
                                for (var i = 0; i < data.length; i++) {
                                    if (data[i].name != null && data[i].trz_member_id != null) {
                                        html += '<tr>';
                                        html += '<td class="td-1"><center><input class="checkitem" id="listSearchs" name="listSearchs[]" type="checkbox" value="' + data[i].trz_member_id + '"></td>';
                                        html += '<td class="td-2 label_break"><center><strong>' + data[i].name + '</strong></center></td>';
                                        html += '<td class="td-3"><textarea class="form-control textarea-control" style="height:35px;" name="note_' + data[i].trz_member_id + '"></textarea></td>';
                                        html += '</tr>';
                                    }
                                }
                            }

                            $('tbody').html(html);
                        },
                        error: function (data) {
                        }
                    })

                });

            $('#reset_form_search')
                .off('click.reset')
                .on('click.reset', function () {

                    $(this)
                        .closest('#formSearch')
                        .find('textarea, select')
                        .val('')
                        .end()
                        .find(':radio:first')
                        .prop('checked', true)
                        .end();
                });

            $('#buttonBack')
                .off('click.back_to_career')
                .on('click.back_to_career', function () {
                    $('#ReturnModal').modal('show')
                })

            $('#returnBtnOK').on('click',function(){
                window.location.href = "{{ route('getCareerIndex') }}";
            })

            // 保存ポップアップ「はい」押下時
            // 多重サブミット防止処理
            $('#btnOK').on('click', function () {
                $('#btnOK').prop("disabled", true);
                $('.ajaxValidateFrm').submit();
            });
        });

        function toggle_(source) {

            var checkboxes = $(':checkbox[name="listSearchs[]"]');
            $(checkboxes)
                .each(function (index, ele) {
                    $(ele).prop('checked', source);
                });
        }

        function changeLectureCategory() {

            var dataObj = {
                'category': $("#LectureCategory").val(),
                '_token': '{{ csrf_token() }}'
            };

            jQuery.ajaxSetup({
                header: jQuery('meta[name="csrf-token"]').attr('content')
            });

            
            $.ajax({
                type: "POST",
                url: "{{route('post.career.collectionInput.lecture_result')}}",
                data: dataObj,
                dataType: 'json',
                success: function (data) {
                     var html = '<select id="LectureResult" class="form-control width-405" name="LectureResult">';
                          + '<option value="" select="selected">選択して下さい</option>';
                        html +='<option value="">{{Message::get('C00001', ['a'])}}</option>';
                    for (var i = 0; i < data.length; i++) {
                        html += '<option value="' + data[i].id + '">' + data[i].name + '（' + data[i].promoter + '）' + '</option>';
                    }
                    html += '</select>';

                    jQuery('.selectLectureWithCat').html(html);
                },
                error: function (data) {
                }
            })
        }

    </script>
@append