@extends('layouts.master')

@section('link')
<link href="{!! asset('css/corporate/member_edit.css') !!}?20220729-1100" rel="stylesheet">
<link href="{!! asset('css/corporate/bootstrap_helper.css') !!}?20210830-1100" rel="stylesheet">
<link href="{!! asset('css/corporate/loader.css') !!}?20210713-1300" rel="stylesheet">
@stop

@include('corporate.layouts.header')

@section('content')
<div class="c-loader"></div>

<div class="container">
    <div id="errorMessage" class="alert alert-danger" style="display: none"></div>

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

    <div class="row mb-10 ml-0">
        <div class="col-xs-4">
            @if ($staff->id)
                <h4 class="sub-header">
                    <strong>{{ $staff->last_name }} {{ $staff->first_name }}</strong>
                </h4>
                <h6 class="sub-header">
                    <strong>さん のページ</strong>
                </h6>
            @else
                <h4><strong>職員情報の新規登録</strong></h4>
            @endif
        </div>
        <div class="col-xs-8 text-right">
            @if ($staff->isJBlendConnected())
                @can('accessIfOverRegularMember')
                    <a class="btn btn-primary" href="{{ url("corporate/member/$staff->id/ticket") }}">チケットを配布する</a>
                @else
                    <span class="btn btn-primary disabled" title="この機能はご利用いただけません。" style="pointer-events:auto;">チケットを配布する</span>
                @endcan
            @endif
            @if ($staff->id)
                <a class="btn btn-primary" href="{{ url('corporate/member/create') }}">職員の新規登録</a>
            @endif
        </div>
    </div>

    {{Form::open(['id'=>'mainForm', 'method'=>'Post'])}}
        <div class="col-xs-6">
            <div class="col-xs-12 no-padding-div">
                <div class="col-xs-9 no-padding-div upper-info">
                    <div class="col-xs-12 left-div">
                        <h5 class="righ-label">氏　名 <sup class="required-field-mark">＊</sup></h5>
                        <input class="form-control short-control" name="last_name" type="text" value="{{ old('last_name', $staff->last_name) }}" required>
                        <span>　</span>
                        <input class="form-control short-control" name="first_name" type="text" value="{{ old('first_name', $staff->first_name) }}" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;" required>
                    </div>
                    <div class="col-xs-12 left-div">
                        <h5 class="righ-label">ふりがな <sup class="required-field-mark">＊</sup></h5>
                        <input class="form-control short-control" name="last_name_reading" type="text" value="{{ old('last_name_reading', $staff->last_name_reading) }}" required>
                        <span>　</span>
                        <input class="form-control short-control" name="first_name_reading" type="text" value="{{ old('first_name_reading', $staff->first_name_reading) }}" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABHklEQVQ4EaVTO26DQBD1ohQWaS2lg9JybZ+AK7hNwx2oIoVf4UPQ0Lj1FdKktevIpel8AKNUkDcWMxpgSaIEaTVv3sx7uztiTdu2s/98DywOw3Dued4Who/M2aIx5lZV1aEsy0+qiwHELyi+Ytl0PQ69SxAxkWIA4RMRTdNsKE59juMcuZd6xIAFeZ6fGCdJ8kY4y7KAuTRNGd7jyEBXsdOPE3a0QGPsniOnnYMO67LgSQN9T41F2QGrQRRFCwyzoIF2qyBuKKbcOgPXdVeY9rMWgNsjf9ccYesJhk3f5dYT1HX9gR0LLQR30TnjkUEcx2uIuS4RnI+aj6sJR0AM8AaumPaM/rRehyWhXqbFAA9kh3/8/NvHxAYGAsZ/il8IalkCLBfNVAAAAABJRU5ErkJggg==&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%;" required>
                    </div>
                    <div class="col-xs-12 left-div">
                        <h5 class="righ-label">配偶者の <sup class="required-field-mark">＊</sup><br>有無</h5>
                        <label class="spouse-label">
                            <input name="marital_status" type="radio" value="1" {{ old('marital_status', $staff->marital_status) == 1 ? 'checked' : '' }} required> 有
                        </label>
                        <label class="spouse-label2">
                            <input name="marital_status" type="radio" value="2" {{ old('marital_status', $staff->marital_status) == 2 ? 'checked' : '' }} required> 無
                        </label>
                        <label class="spouse-label0">
                            <input name="marital_status" type="radio" value="0" {{ old('marital_status', $staff->marital_status) == 0 ? 'checked' : '' }} required> 回答なし
                        </label>
                    </div>
                    <div class="col-xs-12 left-div">
                        <h5 class="righ-label">旧姓</h5>
                        <input class="form-control short-control" name="maiden_name" type="text" value="{{ old('maiden_name', $staff->maiden_name) }}">
                    </div>
                </div>
                <div class="col-xs-3 photo-holder">
                    <div class="col-xs-12 position-relative">
                        <img id="photo" src="{{ old('photo', $staff->photo ?? asset('img/photo.png')) }}" style="width: 100%">
                        <canvas class="photoCanvas" id="photoCanvas" width="100" height="120"></canvas>
                    </div>
                </div>
                <input type="hidden" name="photo" value="{{ old('photo', $staff->photo) }}">
                <input id="ImgInput" accept="image/*" type="file" onchange="loadPhoto(event)">
            </div>
            @if ($staff->id)
                <div class="col-xs-12 no-padding-div" id="j-blend-connect">
                    <h5>個人会員紐付け：{{ $staff->jblendConStatusName }}</h5>
                    @if ($staff->isJBlendConnected())
                        <button class="btn btn-primary" type="button" onclick="showModal('DisconnectJBlendModal')">個人会員情報の紐付けを解除する</button>
                    @elseif ($staff->safeJblendConStatus == 1)
                        <button class="btn btn-primary" type="button" onclick="showModal('CancelJBlendModal')">個人会員情報の紐付け申請を取り消す</button>
                    @elseif (!$staff->j_blend_con_status)
                        <button class="btn btn-primary" type="button" onclick="showModal('ConnectJBlendModal')">個人会員情報を紐付ける</button>
                    @endif
                </div>
            @endif
            <div class="col-xs-12 left-div gender-div">
                <h5 class="gender-header">性　別 <sup class="required-field-mark">＊</sup></h5>
                <label class="gender-label"><input name="sex" type="radio" value="1" {{ old('sex', $staff->sex) == 1 ? 'checked' : '' }} required>  女性</label>
                <label class="gender-label"><input name="sex" type="radio" value="2" {{ old('sex', $staff->sex) == 2 ? 'checked' : '' }} required>  男性</label>
                <label class="gender-label"><input name="sex" type="radio" value="0" {{ old('sex', $staff->sex) == 0 ? 'checked' : '' }} required>  回答なし</label>
            </div>
            <div class="col-xs-12 left-div">
                <h5 class="righ-label">生年月日</h5>
                <div class="input-group date mb-emd5 datepicker">
                    <input id="BirthDay" class="form-control short-control" name="birthday" type="text" value="{{ old('birthday', $staff->birthday) }}">
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
                <label class="birthday-text">年齢　歳</label>
            </div>
            <div class="col-xs-12 work-date-div">
                <h5 class="righ-label workStartDate-label">勤務　 <sup class="required-field-mark">＊</sup><br>開始日</h5>
                <div class="input-group date mb-emd5 datepicker">
                    <input id="WorkDate" class="form-control short-control" name="start_date" type="text" value="{{ old('start_date', $staff->start_date) }}" required>
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
                <label class="work-date-holder">勤続年数　</label>
            </div>
            <div class="col-xs-12 left-div">
                <h5 class="righ-label">雇用状況  <sup class="required-field-mark">＊</sup></h5>
                <label class="emp-status-1"><input name="employment_status" type="radio" value="1" {{ old('employment_status', $staff->employment_status) == 1 ? 'checked' : '' }} required> 現職者（正規） </label>
                <label class="emp-status-1"><input name="employment_status" type="radio" value="2" {{ old('employment_status', $staff->employment_status) == 2 ? 'checked' : '' }} required> 現職者（非正規）</label>
            </div>
            <div class="col-xs-12 left-div">
                <h5 class="righ-label"></h5>
                <label class="emp-status-1"><input name="employment_status" type="radio" value="5" {{ old('employment_status', $staff->employment_status) == 5 ? 'checked' : '' }} required> 異動（転出）　</label>
                <label class="emp-status-1 emp-code-6"><input name="employment_status" type="radio" value="6" {{ old('employment_status', $staff->employment_status) == 6 ? 'checked' : '' }} required> 異動（除籍）</label>
            </div>
            <div class="col-xs-4 left-div loop-group">
                <h5 class="righ-label"></h5>
                <label class="emp-status-2"><input name="employment_status" type="radio" value="3" {{ old('employment_status', $staff->employment_status) == 3 ? 'checked' : '' }} required> 休職者</label>
                <label>休職期間　</label>
            </div>
            <div class="col-xs-8 no-padding-div normal-div loop-group">
                @empty(old('absenceIds'))
                    @foreach ($absences as $i => $absence)
                        <div class="col-xs-12 left-div loop-group absenceRow">
                            <input type="hidden" name="absenceIds[]" value="{{ $absence->id }}">
                            <input type="hidden" name="absenceVersions[]" value="{{ $absence->version }}">
                            <div class="input-group date mb-emd5 datepicker">
                                <input class="retired-start form-control very-short-control" name="absenceStartDates[]" type="text" value="{{ $absence->start_date }}">
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                            <label class="tilde">&nbsp;&nbsp;&nbsp;&nbsp;～&nbsp;&nbsp;&nbsp;&nbsp;</label>
                            <div class="input-group date mb-emd5 datepicker">
                                <input class="retired-end form-control very-short-control" name="absenceEndDates[]" type="text" value="{{ $absence->end_date }}">
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                            @if ($i == 0)
                                <button class="btn btn-primary add-button" type="button" onclick="copyParent(this);">追加</button>
                            @else
                                <button class="btn add-button deletehover deletebuttonhover trash" type="button" onclick="removeParent(this)">
                                    <span class="glyphicon glyphicon-trash"></span>
                                    <span class="deleteonhover">削除</span>
                                </button>
                            @endif
                        </div>
                    @endforeach
                @else
                    @foreach (old('absenceIds') as $i => $absenceId)
                        <div class="col-xs-12 left-div loop-group absenceRow">
                            <input type="hidden" name="absenceIds[]" value="{{ old("absenceIds.{$i}") }}">
                            <input type="hidden" name="absenceVersions[]" value="{{ old("absenceVersions.{$i}") }}">
                            <div class="input-group date mb-emd5 datepicker">
                                <input class="retired-start form-control very-short-control" name="absenceStartDates[]" type="text" value="{{ old("absenceStartDates.{$i}") }}">
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                            <label class="tilde">&nbsp;&nbsp;&nbsp;&nbsp;～&nbsp;&nbsp;&nbsp;&nbsp;</label>
                            <div class="input-group date mb-emd5 datepicker">
                                <input class="retired-end form-control very-short-control" name="absenceEndDates[]" type="text" value="{{ old("absenceEndDates.{$i}") }}">
                                <span class="input-group-addon">
                                    <span class="glyphicon glyphicon-calendar"></span>
                                </span>
                            </div>
                            @if ($i == 0)
                                <button class="btn btn-primary add-button" type="button" onclick="copyParent(this);">追加</button>
                            @else
                                <button class="btn add-button deletehover deletebuttonhover trash" type="button" onclick="removeParent(this)">
                                    <span class="glyphicon glyphicon-trash"></span>
                                    <span class="deleteonhover">削除</span>
                                </button>
                            @endif
                        </div>
                    @endforeach
                @endempty
            </div>
            <div class="col-xs-12 emp-status-holder">
                <h5 class="righ-label"></h5>
                <label class="emp-status-2"><input name="employment_status" type="radio" value="4" {{ old('employment_status', $staff->employment_status) == 4 ? 'checked' : '' }} required> 退職者</label>
                <label id="SecondEmpStatus">退職日　</label>
                <div class="input-group date mb-emd5 datepicker">
                    <input class="form-control very-short-control" name="retirement_day" type="text" value="{{ old('retirement_day', $staff->retirement_day) }}">
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
            <div class="col-xs-12 zip-holder ">
                <h5 class="righ-label">郵便番号</h5>
                    <input class="form-control very-short-control" name="zip" type="text" value="{{ old('zip', $staff->zip) }}">
            </div>
            <div class="col-xs-12 left-div">
                <h5 class="righ-label">住　所</h5>
                <input id="Address" class="form-control long-control" name="address" type="text" value="{{ old('address', $staff->address) }}">
            </div>
            <div class="col-xs-12 left-div">
                <h5 class="phone-lable">電　話</h5>
                    <input id="Phone" class="form-control" name="tel" type="text" value="{{ old('tel', $staff->tel) }}">
                <label>（半角英数）</label>
                <h5>携帯電話</h5>
                    <input id="CellPhone" class="form-control" name="tel_mobile" type="text" value="{{ old('tel_mobile', $staff->tel_mobile) }}">
                <label>（半角英数）
                </label>
            </div>
            <div class="col-xs-12 left-div">
                <h5 class="righ-label">メール</h5>
                <input id="Email" class="form-control long-control" name="mail_address" type="text" value="{{ old('mail_address', $staff->mail_address) }}">
            </div>
            <div class="col-xs-12 left-div">
                <h5 class="righ-label"></h5>
            </div>
            <div class="col-xs-12">
                <div class="col-xs-12 left-div borderDiv">
                    <div class="col-xs-2 left-div">
                        <h5 class="righ-label">研修・訓練</h5>
                    </div>
                    @if ($staff->isJBlendConnected())
                        <div class="col-xs-10 no-padding-div user-courses" style="margin-top: 6px;">
                            @foreach ($lectures AS $lecture)
                                <div class="user-courses-row">
                                    <div class="col-xs-3 no-padding-div">
                                        <h5 class="left-div user-courses-date" style="margin: 0 0 4px">{{$lecture->attending_date}}</h5>
                                    </div>
                                    <div class="col-xs-9 no-padding-div">
                                        <h5 class="left-div user-courses-name" style="margin: 0 0 4px">{{$lecture->mst_name}}</h5>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="col-xs-10" style="color: #999"><h5>研修一覧の表示には個人会員の紐付けが必要です</h5></div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-xs-6 no-padding-div outer-holder">
            <div class="col-xs-12 right-div mt-0">
                <h5 class="right-h5" style="margin-right: -5px">緊急連絡先</h5>
                <input id="EmergencyContact" class="form-control" name="tel_emergency" type="text" value="{{ old('tel_emergency', $staff->tel_emergency) }}">
                <label class="ml-5 mr-5">続柄</label>
                <input class="form-control" name="tel_emergency_note" type="text" value="{{ old('tel_emergency_note', $staff->tel_emergency_note) }}">
            </div>
            <div class="col-xs-2 right-div-edu">
                <h5 class="right-h5">学　歴</h5>
            </div>
            <div class="col-xs-10 right-div normal-div outer-holder">
                @empty(old('gakurekiIds'))
                    @foreach ($gakurekies as $i => $gakureki)
                        <div class="gakurekiRow">
                            <input name="gakurekiIds[]" type="hidden" value="{{ $gakureki->id }}">
                            <input type="hidden" name="gakurekiVersions[]" value="{{ $gakureki->version }}">
                            <div class="col-xs-12 left-div outer-holder">
                                <div class="input-group date mb-emd5 datepicker">
                                    <input class="edu_start form-control very-short-control" name="gakurekiStartDates[]" type="text" value="{{ $gakureki->start_date }}" placeholder="開始日">
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                                <label class="tilde">
                                    　～&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                </label>
                                <div class="input-group date mb-emd5 datepicker" id="datepicker">
                                    <input class="edu_end form-control very-short-control" name="gakurekiEndDates[]" type="text" value="{{ $gakureki->end_date }}" placeholder="終了日">
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                            </div>
                            <div class="col-xs-12 left-div new-edu sp-loop-group inner-holder">
                                <div class="col-xs-12 right-div">
                                    <input class="SchoolNames form-control" name="gakurekiColleges[]" type="text" value="{{ $gakureki->college }}" placeholder="ポラリス大学">
                                    <label>
                                    　学部等&nbsp;&nbsp;&nbsp;&nbsp;
                                    </label>
                                    <input class="departments form-control" name="gakurekiDepartments[]" type="text" value="{{ $gakureki->department }}" placeholder="保育科">
                                    @if ($i == 0)
                                        <button class="btn btn-primary add-button" type="button" onclick="copyParentOfParentOfParent(this);">追加</button>
                                    @else
                                        <button class="btn add-button deletehover deletebuttonhover trash" type="button" onclick="removeParentOfParentOfParent(this)">
                                            <span class="glyphicon glyphicon-trash"></span>
                                            <span class="deleteonhover">削除</span>
                                        </button>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                @else
                    @foreach (old('gakurekiIds') as $i => $gakurekiId)
                        <div class="gakurekiRow">
                            <input name="gakurekiIds[]" type="hidden" value="{{ old("gakurekiIds.{$i}") }}">
                            <input type="hidden" name="gakurekiVersions[]" value="{{ old("gakurekiVersions.{$i}") }}">
                            <div class="col-xs-12 left-div outer-holder">
                                <div class="input-group date mb-emd5 datepicker">
                                    <input class="edu_start form-control very-short-control" name="gakurekiStartDates[]" type="text" value="{{ old("gakurekiStartDates.{$i}") }}" placeholder="開始日">
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                                <label class="tilde">
                                    　～&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                </label>
                                <div class="input-group date mb-emd5 datepicker" id="datepicker">
                                    <input class="edu_end form-control very-short-control" name="gakurekiEndDates[]" type="text" value="{{ old("gakurekiEndDates.{$i}") }}" placeholder="終了日">
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                            </div>
                            <div class="col-xs-12 left-div new-edu sp-loop-group inner-holder">
                                <div class="col-xs-12 right-div">
                                    <input class="SchoolNames form-control" name="gakurekiColleges[]" type="text" value="{{ old("gakurekiColleges.{$i}") }}" placeholder="ポラリス大学">
                                    <label>
                                    　学部等&nbsp;&nbsp;&nbsp;&nbsp;
                                    </label>
                                    <input class="departments form-control" name="gakurekiDepartments[]" type="text" value="{{ old("gakurekiDepartments.{$i}") }}" placeholder="保育科">
                                    @if ($i == 0)
                                        <button class="btn btn-primary add-button" type="button" onclick="copyParentOfParentOfParent(this);">追加</button>
                                    @else
                                        <button class="btn add-button deletehover deletebuttonhover trash" type="button" onclick="removeParentOfParentOfParent(this)">
                                            <span class="glyphicon glyphicon-trash"></span>
                                            <span class="deleteonhover">削除</span>
                                        </button>
                                    @endif
                                </div>
                            </div>
                        </div>
                    @endforeach
                @endempty
            </div>

            <div class="col-xs-2 right-div-career outer-holder">
                <h5 class="right-h5">職務経歴</h5>
            </div>
            <div class="col-xs-10 right-div normal-div outer-holder">
                @empty(old('careerIds'))
                    @foreach ($careers as $i => $career)
                        <div class="col-xs-12 right-main-div-career new-career sp-loop-group">
                            <input name="careerIds[]" type="hidden" value="{{ $career->id }}">
                            <input type="hidden" name="careerVersions[]" value="{{ $career->version }}">
                            <div class="col-xs-12 left-div new-career oop-group">
                                <div class="input-group date mb-emd5 datepicker">
                                    <input class="career-start very-short-control form-control" name="careerStartDates[]" type="text" value="{{ $career->start_date }}">
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                                <label class="tilde">
                                    　～&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                </label>
                                <div class="input-group date mb-emd5 datepicker">
                                    <input class="career-end very-short-control form-control" name="careerEndDates[]" type="text" value="{{ $career->end_date }}">
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                            </div>
                            <div class="col-xs-12 left-div">
                                <input class="jobDescription form-control" name="careerContents[]" type="text" value="{{ $career->content }}" placeholder="株式会社ポラリス">
                                @if ($i == 0)
                                    <a class="btn btn-primary add-button-edu" onclick="copyParentOfParent(this);">追加</a>
                                @else
                                    <button class="btn add-button deletehover deletebuttonhover trash" type="button" onclick="removeParentOfParent(this)">
                                        <span class="glyphicon glyphicon-trash"></span>
                                        <span class="deleteonhover">削除</span>
                                    </button>
                                @endif
                            </div>
                        </div>
                    @endforeach
                @else
                    @foreach (old('careerIds') as $i => $careerId)
                        <div class="col-xs-12 right-main-div-career new-career sp-loop-group">
                            <input name="careerIds[]" type="hidden" value="{{ old("careerIds.{$i}") }}">
                            <input type="hidden" name="careerVersions[]" value="{{ old("careerVersions.{$i}") }}">
                            <div class="col-xs-12 left-div new-career oop-group">
                                <div class="input-group date mb-emd5 datepicker">
                                    <input class="career-start very-short-control form-control" name="careerStartDates[]" type="text" value="{{ old("careerStartDates.{$i}") }}">
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                                <label class="tilde">
                                    　～&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                </label>
                                <div class="input-group date mb-emd5 datepicker">
                                    <input class="career-end very-short-control form-control" name="careerEndDates[]" type="text" value="{{ old("careerEndDates.{$i}") }}">
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                            </div>
                            <div class="col-xs-12 left-div">
                                <input class="jobDescription form-control" name="careerContents[]" type="text" value="{{ old("careerContents.{$i}") }}" placeholder="株式会社ポラリス">
                                @if ($i == 0)
                                    <a class="btn btn-primary add-button-edu" onclick="copyParentOfParent(this);">追加</a>
                                @else
                                    <button class="btn add-button deletehover deletebuttonhover trash" type="button" onclick="removeParentOfParent(this)">
                                        <span class="glyphicon glyphicon-trash"></span>
                                        <span class="deleteonhover">削除</span>
                                    </button>
                                @endif
                            </div>
                        </div>
                    @endforeach
                @endempty
            </div>
            <div style="width: 100%"></div>
            <div class="col-xs-2 right-div-family outer-holder">
                <h5 class="right-h5 family-label">家族構成</h5>
            </div>
            <div class="col-xs-10 right-div normal-div">
                @empty(old('familyIds'))
                    @foreach ($families as $i => $family)
                        <div class="col-xs-12 right-div loop-group new-family">
                            <input name="familyIds[]" type="hidden" value="{{ $family->id }}">
                            <input type="hidden" name="familyVersions[]" value="{{ $family->version }}">
                            <select class="form-control familyRelation" name="familyRelationships[]">
                                <option value="" selected="selected">続柄を選択</option>
                                @foreach (DB::table('mst_relationships')->get() as $relationship)
                                    <option value="{{ $relationship->id }}" {{ $family->mst_relationship_id == $relationship->id ? 'selected' : '' }}>{{ $relationship->name }}</option>
                                @endforeach
                            </select>
                            <label class="render-label-family">氏名</label>
                            <input class="form-control family-name" name="familyNames[]" type="text" value="{{ $family->name }}">
                            <label class="render-label-family">扶養<br>責任</label>
                            <select class="form-control familyDuty" name="familyResponsibilities[]">
                                <option value="">選択してください</option>
                                <option value="1" {{ $family->responsibility == 1 ? 'selected' : '' }}>有</option>
                                <option value="2" {{ $family->responsibility == 2 ? 'selected' : '' }}>無</option>
                            </select>
                            @if ($i == 0)
                                <a class="btn btn-primary add-button-family" onclick="copyParent(this);">追加</a>
                            @else
                                <button class="btn add-button deletehover deletebuttonhover trash" type="button" onclick="removeParent(this)">
                                    <span class="glyphicon glyphicon-trash"></span>
                                    <span class="deleteonhover">削除</span>
                                </button>
                            @endif
                        </div>
                    @endforeach
                @else
                    @foreach (old('familyIds') as $i => $familyId)
                        <div class="col-xs-12 right-div loop-group new-family">
                            <input name="familyIds[]" type="hidden" value="{{ old("familyIds.{$i}") }}">
                            <input type="hidden" name="familyVersions[]" value="{{ old("familyVersions.{$i}") }}">
                            <select class="form-control familyRelation" name="familyRelationships[]">
                                <option value="" {{ old("familyRelationships.{$i}") == "" ? 'selected' : '' }}>続柄を選択</option>
                                @foreach (DB::table('mst_relationships')->get() as $relationship)
                                    <option value="{{ $relationship->id }}" {{ old("familyRelationships.{$i}") == $relationship->id ? 'selected' : '' }}>{{ $relationship->name }}</option>
                                @endforeach
                            </select>
                            <label class="render-label-family">氏名</label>
                            <input class="form-control family-name" name="familyNames[]" type="text" value="{{ old("familyNames.{$i}") }}">
                            <label class="render-label-family">扶養<br>責任</label>
                            <select class="form-control familyDuty" name="familyResponsibilities[]">
                                <option value="" {{ old("familyResponsibilities.{$i}") == "" ? 'selected' : '' }}>選択してください</option>
                                <option value="1" {{ old("familyResponsibilities.{$i}") == 1 ? 'selected' : '' }}>有</option>
                                <option value="2" {{ old("familyResponsibilities.{$i}") == 2 ? 'selected' : '' }}>無</option>
                            </select>
                            @if ($i == 0)
                                <a class="btn btn-primary add-button-family" onclick="copyParent(this);">追加</a>
                            @else
                                <button class="btn add-button deletehover deletebuttonhover trash" type="button" onclick="removeParent(this)">
                                    <span class="glyphicon glyphicon-trash"></span>
                                    <span class="deleteonhover">削除</span>
                                </button>
                            @endif
                        </div>
                    @endforeach
                @endempty
            </div>
            <div class="col-xs-12 left-div">
                <div class="col-xs-2 right-div-trzMemberNumber outer-holder">
                    <h5 class="right-h5 trzMemberNumber-label">保育士証<br>登録番号</h5>
                </div>
                <div class="col-xs-10 left-div no-padding-div">
                    <select class="form-control render-Prefecture" name="trz_member_prefecture">
                        <option value="" selected="selected">都道府県を選択</option>
                        @foreach (DB::table('mst_prefectures')->get() as $prefecture)
                            <option value="{{ $prefecture->id }}" {{ old('trz_member_prefecture', $staff->trz_member_prefecture) == $prefecture->id ? 'selected' : '' }}>{{ $prefecture->name }}</option>
                        @endforeach
                    </select>
                    <label class="render-label-trzMemberNumber"> － </label>
                    <input class="form-control render-trzMemberNumber" maxlength="7" name="trz_member_number" type="text" value="{{ old('trz_member_number', $staff->trz_member_number) }}">
                </div>
            </div>
            <div class="col-xs-12 right-div" id="ReasonHolder">
                <h5 class="right-h5">志望動機<br>（応募時）</h5>
                <textarea rows="5" class="form-control" name="motivation" cols="50">{{ old('motivation', $staff->motivation) }}</textarea>
            </div>
            <div class="col-xs-12 left-div">
                <h5 class="right-h5">本人の希望<br>（応募時）</h5>
                <textarea rows="5" class="form-control" name="aspiration" cols="50">{{ old('aspiration', $staff->aspiration) }}</textarea>
            </div>
            <div class="col-xs-12 left-div">
                <h5 class="right-h5">特記事項</h5>
                <textarea rows="5" class="form-control" name="notices" cols="50">{{ old('notices', $staff->notices) }}</textarea>
            </div>
            <div class="col-xs-12 text-right mb-50 mt-30">
                <a class="mr-10" href="{{ url('corporate/memberList') }}">職員一覧へ戻る</a>
                <button class="btn btn-primary" type="button" onclick="showModal('SubmitModal')" id="member-save-btn" data-action="{{route('corporate.memberUpdate')}}">確 定</button>
                @if ($staff->id)
                    <button class="btn btn-primary" type="button" onclick="showModal('UpdateAndMoveModal')">確定して新規登録</button>
                    <button class="btn btn-danger" type="button" id="DeleteModalButton" data-action="{{route('corporate.memberDelete')}}">職員の削除</button>
                @endif
            </div>
        </div>
        <input type="hidden" name="id" value="{{ $staff->id }}">
        <input type="hidden" name="version" value="{{ $staff->version }}">
        <input type="hidden" name="password" id="password" value="">

        {{-- 登録関係のダイアログ --}}

        <div id="SubmitModal" class="modal fade" role="dialog" tabindex="-1">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">×</button>
                    </div>
                    <div class="modal-body">
                        <p>保存しますか？</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">いいえ</button>
                        <button type="submit" class="btn btn-primary" onclick="return update()">はい</button>
                    </div>
                </div>
            </div>
        </div>
        <div id="UpdateAndMoveModal" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 id="modalTitle" class="modal-title"></h4>
                    </div>
                    <div class="modal-body">
                        このデータを保存し、新規職員の登録を開始しますか？
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"></i>  いいえ</button>
                        <button type="submit" class="btn btn-primary" onclick="return update('{{ url('corporate/member/create') }}')">はい</a>
                    </div>
                </div>
            </div>
        </div>
    {{Form::close()}}
</div>

{{-- ここからダイアログ --}}

<div id="ConnectJBlendModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 id="modalTitle" class="modal-title">個人会員紐付け</h4>
            </div>
            <div class="modal-body">
                紐付け方法を選択してください。<br><br>
                <div>
                    <input type="radio" name="type" id="connect-modal-email" value="email" {{ $staff->mail_address ? '' : 'disabled' }} onclick="enableConnectButton()">
                    <label for="connect-modal-email">登録されたメールアドレス</label>
                    <input type="hidden" name="email" value="{{ $staff->mail_address }}">
                    <div>{{ $staff->mail_address ?? 'メールアドレスが登録されていません。' }}</div>
                </div>
                <div class="mt-5">
                    <input type="radio" name="type" id="connect-modal-customEmail" value="customEmail" onclick="enableConnectButton()">
                    <label for="connect-modal-customEmail">メールアドレスを入力</label>
                    <input class="form-control" type="text" name="customEmail">
                </div>
                <div class="mt-5">
                    <input type="radio" name="type" id="connect-modal-username" value="username" onclick="enableConnectButton()">
                    <label for="connect-modal-username">J-Learningユーザー名を入力</label>
                    <input class="form-control" type="text" name="username">
                </div>
            </div>
            <div class="modal-footer">
                <a id="NewClose" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"></i> キャンセル</a>
                <a id="ConnectJBlendBtn" onclick="connectJBlend('#ConnectJBlendModal')" class="btn btn-primary" disabled><i class="fa "></i> 紐付けする</a>
            </div>
        </div>
    </div>
</div>
<div id="CancelJBlendModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 id="modalTitle" class="modal-title">個人会員紐付け申請取消</h4>
            </div>
            <div class="modal-body">
                個人会員情報の紐付け申請を取り消しますか？<br><br>
                <p style="color: red">※編集中のデータは破棄されます</p>
            </div>
            <div class="modal-footer">
                <a id="NewClose" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"></i> キャンセル</a>
                <a onclick="cancelConnectingJBlend()" class="btn btn-primary" data-dismiss="modal">取り消す</a>
            </div>
        </div>
    </div>
</div>
<div id="DisconnectJBlendModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 id="modalTitle" class="modal-title">個人会員紐付け解除</h4>
            </div>
            <div class="modal-body">
                個人会員情報との紐付けを解除しますか？<br><br>
                <p style="color: red">※編集中のデータは破棄されます</p>
            </div>
            <div class="modal-footer">
                <a id="NewClose" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"></i> キャンセル</a>
                <a onclick="disconnectJBlend()" class="btn btn-primary" data-dismiss="modal">解除する</a>
            </div>
        </div>
    </div>
</div>
<div id="deleteStaffModal" class="modal fade in" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h4 id="modalTitle" class="modal-title">削除用パスワード入力</h4>
            </div>
            <div class="modal-body delete-modal-title">
                <div class="col-xs-12 inner-col-content delete-message">
                    *削除にはパスワードが必要です。

                </div>
                <div class="col-xs-12 inner-col-content delete-content">
                    <h5 id="DeleteHeader">パスワード</h5>
                    <input id="staffDeletePassword" type="password"  class=" form-control">
                </div>
            </div>
            <div class="modal-footer">
            <a id="DeleteBack" class="btn btn-default" data-dismiss="modal"><i class="fa fa-close"></i>  戻る</a>
            <a id="DeleteOK" onclick="" class="btn btn-primary" data-dismiss="modal"><i class="fa "></i>確定</a>
        </div>

        </div>
    </div>
</div>
@stop

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

@section('optionalJs')
<script src="{!! asset('js/corporate/jblend.js') !!}?20210823" type="text/javascript"></script>
<script>
    function resetDatepicker() {
        // 日付選択を有効にする
        $('.datepicker').datetimepicker({
           format: 'YYYY/MM/DD',
           locale: 'ja'
        })
    }

    function connectJBlend(selector) {
        var $form = $(selector)
        var data = {
            type: $form.find('input[name=type]:checked').val(),
            email: $form.find('input[name=email]').val(),
            customEmail: $form.find('input[name=customEmail]').val(),
            username: $form.find('input[name=username]').val(),
            id: {{ $staff->id ?? 'null' }}
        }
        console.log(data)
        // 送信
        $('.c-loader').fadeIn(200)
        postJblend('{{ url("corporate/member/connect") }}', data, '紐付け申請を送信しました。')
    }

    function disconnectJBlend() {
        postJblend('{{ url("corporate/member/disconnect") }}', {
            id: '{{ $staff->id }}'
        }, '解除完了しました。')
    }

    function cancelConnectingJBlend() {
        postJblend('{{ url("corporate/member/disconnect") }}', {
            id: '{{ $staff->id }}'
        }, '取り消し完了しました。')
    }

    function update(redirectUrl = null) {
        $('#mainForm').attr('action', $('#member-save-btn').data('action'));
        $('#mainForm').submit();
    }

    function loadPhoto(e) {
        var reader = new FileReader()
        reader.onload = function() {
            var image = new Image()
            image.src = reader.result
            image.onload = function () {
                var w = 100
                var ratio = w / image.width
                var h = image.height * ratio

                var canvas = document.getElementById("photoCanvas")
                var ctx = canvas.getContext('2d')
                $("#photoCanvas").attr("width", w)
                $("#photoCanvas").attr("height", h)
                ctx.drawImage(image, 0, 0, w, h)

                var dataUrl = canvas.toDataURL("image/png")
                $('input[name=photo]').val(dataUrl)
            }
        }
        reader.readAsDataURL(e.target.files[0])
    }

    // 追加ボタンを押した時の処理
    function copyParent(el) {
        var $parent = $(el).parent()
        var $newParent = $parent.clone()
        $newParent.find('input').val(null)
        $newParent.find('option').attr('selected', null)
        $newParent.find('.add-button,.add-button-edu,.add-button-family').hide()
        $newParent.find('.trash').show()
        $parent.parent().append($newParent)
        resetDatepicker();
    }

    function copyParentOfParent(el) {
       copyParent($(el).parent())
    }

    function copyParentOfParentOfParent(el) {
        copyParent($(el).parent().parent())
    }

    // 削除ボタンを押した時の処理
    function removeParent(el) {
        $(el).parent().remove()
    }
    function removeParentOfParent(el) {
        $(el).parent().parent().remove()
    }
    function removeParentOfParentOfParent(el) {
        $(el).parent().parent().parent().remove()
    }

    function enableConnectButton() {
        $('#ConnectJBlendBtn').attr('disabled', null)
    }
    function CalculateBirthDay(){
        var today = new Date();
        var birthDate = new Date($('#BirthDay').val());
        var age = today.getFullYear() - birthDate.getFullYear() +1;
        var m = today.getMonth() - birthDate.getMonth();
            if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate()))
        {
                age = age - 1;
        }
            age = age - 1;
        if(isNaN(age))
        {
            $('.birthday-text').text('年齢  歳');
            return;
        }
        if(age<0){
            $('.birthday-text').text('年齢 0歳')
        }else{
            $('.birthday-text').text('年齢 '+age+'歳')
        }
    }
    function CalculateWorkedhDay() {
        var today = new Date();
        var workDay = new Date($('#WorkDate').val());
        var m = today.getMonth() - workDay.getMonth() + (12 * (today.getFullYear() - workDay.getFullYear()));
        if(isNaN(m)){
            $('.work-date-holder').text('勤続年数');
            return;
        }
        var y=Math.floor(m/12);
        var m = m % 12;
        if(m<0) {
            $('.work-date-holder').text('勤続年数');
            return;
        }
        $('.work-date-holder').text('勤続年数 '+y+'年'+ m + 'か月');
    }

    $(function(){
        resetDatepicker();

        // 削除ボタン押下時処理
        $('#DeleteModalButton').on('click',function(){
            var self = this;
            $('#deleteStaffModal').modal('show')
            .off('click.ok', '#DeleteOK')
            .on('click.ok', '#DeleteOK', function () {
                $('#password').val($('#staffDeletePassword').val());
                $('#mainForm').attr('action', $(self).data('action'));
                $('#mainForm').submit();
            });
        })

        CalculateBirthDay();
        $('#BirthDay').on('blur', function() {
            CalculateBirthDay();
        });

        CalculateWorkedhDay();
        $('#WorkDate').on('blur', function() {
            CalculateWorkedhDay();
        });
    });
</script>
@stop