@extends('adminlte::page')

@section('title', '権限設定登録')

@section('content_header')
    <h5><label class="title-underbar">権限設定登録</label></h5>
@stop
@section('content')
    <div id="error_affiliate_id" class="alert alert-danger" style="display:none;"></div>
    <div id="error_position_id" class="alert alert-danger" style="display:none;"></div>
    <div id="error_rows" class="alert alert-danger" style="display:none;"></div>
    <div id="system_error" class="alert alert-danger" style="display:none;"></div>
    <div class="card" style="margin-top:0.5rem;">
        <form method="post" action="{{ route('admin.permission.store') }}">
        @csrf
            <div class="card-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="row">
                            <div class="col-md-12"><b>部署</b></div>
                        </div>
                        <div class="row">
                            <div class="col-md-12"><select name="affiliate_id" id="affiliate_id" class="custom-select"></select></div>
                        </div>
                        <div class="row" style="margin-top:0.5rem;">
                            <div class="col-md-12"><b>役職</b></div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <select name="position_id" id="position_id" class="custom-select" style="margin-left:-2px;">
                                @foreach (EmployeeHelper::positionsForForm() as $key => $val)
                                    @if (isset($inputs['position_id']) && (string) $key === $inputs['position_id'])
                                        <option value="{{ $key }}" selected>{{ $val }}</option>
                                    @else
                                        @if($key)
                                            <option value="{{ $key }}">{{ $val }}</option>
                                        @else
                                            <option value="{{ $key }}">役職を選択してください</option>
                                        @endif
                                    @endif
                                @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-end" style="margin-top:1rem; margin-bottom:0.5rem;">
                    <div class="col-mb-12" style="padding:0px 7.5px;">
                        <button type="button" id="add_row" class="btn btn-sm btn-block button-go rounded-pill">追加</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <table class="tbl-r04 table">
                            <thead class="thead-light medium-heading">
                                <tr class="thead">
                                  <th width="45%">機能</th>
                                  <th width="45%">権限</th>
                                  <th width="10%">削除</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr data-index="1">
                                    <td class="col_function">
                                        <select name="oasys_function_id[]" class="custom-select">
                                        @foreach (EmployeeHelper::oasysFunctionsForForm() as $key => $val)
                                                <option value="{{ $key }}">{{ $val }}</option>
                                        @endforeach
                                        </select>
                                    </td>
                                    <td class="col_operation_type">
                                        <select name="operation_type_id[]" class="custom-select">
                                        @foreach (EmployeeHelper::operationTypesForForm() as $key => $val)
                                                <option value="{{ $key }}">{{ $val }}</option>
                                        @endforeach
                                        </select>
                                    </td>
                                    <td class="col_delete" align="center">
                                        <button type="button" class="delete_row btn btn-sm btn-block button-go rounded-pill">削除</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <button type="button" onclick="location.href='{{ route('admin.permission.index') }}'" class="btn btn-sm btn-block button-back rounded-pill">キャンセル</button>
                    </div>
                    <div class="col-md-6">
                        <button id="register" type="submit" class="btn btn-sm btn-block button-go rounded-pill">登録</button>
                    </div>
                </div>
            </div>
        </form>
        <div style="display:none;">
            <table>
                <tr id="template_row" data-index="0">
                    <td class="col_function">
                        <select name="oasys_function_id[]" class="custom-select">
                        @foreach (EmployeeHelper::oasysFunctionsForForm() as $key => $val)
                                <option value="{{ $key }}">{{ $val }}</option>
                        @endforeach
                        </select>
                    </td>
                    <td class="col_operation_type">
                        <select name="operation_type_id[]" class="custom-select">
                        @foreach (EmployeeHelper::operationTypesForForm() as $key => $val)
                                <option value="{{ $key }}">{{ $val }}</option>
                        @endforeach
                        </select>
                    </td>
                    <td class="col_delete" align="center">
                        <button type="button" class="delete_row btn btn-sm btn-block button-go rounded-pill">削除</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
@stop

@section('js')
<script type="text/javascript" src="/vendor/select2/select2.min.js"></script>
<script type="text/javascript" src="/vendor/select2/ja.js"></script>
<script>
$(function() {
    // 役職選択プルダウン初期化
    $('select#position_id').select2({
        width: '100%',
        placeholder: "役職を選択してください", //プレースホルダーを設定
        language: 'ja', // Select2のメッセージに使用する言語を指定
        allowClear: true
    });

    // 部署選択プルダウン初期化
    $('select#affiliate_id').select2({
        width: '100%',
        minimumInputLength: 1,
        placeholder: "部署を選択してください", //プレースホルダーを設定
        language: 'ja', // Select2のメッセージに使用する言語を指定
        allowClear: true,
        ajax: {
            url: "{{ route('admin.permission.affiliateSearch') }}",
            type:'POST',
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            },
            dataType: 'json',
            delay: 250, //# 入力から検索開始までの待ち時間
            data: function(params) {
                return {
                    q: params.term,
                }
            },
            processResults: function(data, params){
                var results = [];
                data.forEach(function(val){
                    results.push({id: val['id'] , text: val['department']});
                });
                return {
                    results: results
                };
            }
        },
    });

    // 行追加ボタン押下時処理
    $('button#add_row').click(function(){
        let row = $('tr#template_row').clone();
        let lastTrElement = $('table.tbl-r04 tbody tr:last');
        let indexLastRow = 0;
        if(lastTrElement.length > 0){
            indexLastRow = $(lastTrElement).attr('data-index');
        }
        $(row).attr('data-index', Math.trunc(indexLastRow) + 1).attr('id', '');
        $(row).show().appendTo('table.tbl-r04 tbody');
        $('button.delete_row').off();
        $('button.delete_row').click(deleteRow);
    });

    // 行削除ボタン押下時処理
    function deleteRow(){
        $(this).parents('tbody tr').remove();
    }
    $('button.delete_row').click(deleteRow);

    $('form').submit(function(event){
        $('div.alert').empty().hide();
        $('button#register').prop('disabled', true);
        $.ajax({
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            },
            dataType: "json",
            data: $(this).serialize(),
        }).done(function(results) {
            if(results.isCompleted && results.isCompleted == true){
                // 完了画面へリダイレクト
                location.href = '{{ route('admin.permission.completeStore') }}';
            }else{
                // バリデーションエラーメッセージを表示
                if(results.error.affiliate_id){
                    $('div#error_affiliate_id').text(results.error.affiliate_id).show();
                }
                if(results.error.position_id){
                    $('div#error_position_id').text(results.error.position_id).show();
                }
                if(results.error.oasys_function_id){
                    $('div#error_rows').text(results.error.oasys_function_id).show();
                }
            }
            return false;
        }).fail(function(results) {
            console.log(results);
            $('div#system_error').text('権限設定の登録に失敗しました。').show();
        }).always(() => {
            $('button#register').prop('disabled', false);
            return false;
        });
        return false;
    });
});
</script>
@stop

@section('css')
<link rel="stylesheet" href="/css/admin_custom.css">
<link rel="stylesheet" href="/vendor/select2/select2.min.css">
<link rel="stylesheet" href="/vendor/select2/select2-bootstrap4.min.css">
<style>
    @media screen and (max-width: 768px) {
        .tbl-r04 {
            width: 100%;
        } 
        .tbl-r04 .thead {
            display: none;
        }
        .tbl-r04 tr,
        .tbl-r04 td{
            text-align: center;
            display: block;
            width: 100%;
            position: relative;
        }
        .tbl-r04 td:first-child {
            color: #495057;
            background-color: #e9ecef;
            border-color: #dee2e6;
            font-weight: bold;
            text-align: center;
        }
        .tbl-r04 tr {
            margin-bottom: 40px;
        }
    }
    .select2-selection__rendered {
        line-height: 28px !important;
    }
    .select2-container .select2-selection--single {
        height: 38px !important;
    }
    .select2-selection__arrow {
        height: 34px !important;
    }

</style>
@stop