@extends('adminlte::page')

@section('title', '権限設定編集')

@section('content_header')
    <h5><label class="title-underbar">権限設定編集</label></h5>
@stop
@section('content')
@php
    $oasysFunctions = EmployeeHelper::oasysFunctionsForForm();
    $operationTypes = EmployeeHelper::operationTypesForForm();
@endphp
    <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 id="updateForm" method="post" action="{{ route('admin.permission.update') }}">
        @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">
                                <p>{{ $affiliate->department }}</p>
                                <input type="hidden" name="affiliate_id" value="{{ $affiliate->id }}">
                            </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">
                                <p>{{ $position->name }}</p>
                                <input type="hidden" name="position_id" value="{{ $position->id }}">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row justify-content-end" style="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>
                            @php
                                $index = 1;
                            @endphp
                            @foreach($operatePermissions as $operatePermission)
                                <tr data-index="{{ $index }}">
                                    <td class="col_function">
                                        <select name="oasys_function_id[]" class="custom-select">
                                        @foreach ($oasysFunctions as $key => $val)
                                            @if($key == $operatePermission->oasys_function_id)
                                                <option value="{{ $key }}" selected="selected">{{ $val }}</option>
                                            @else
                                                <option value="{{ $key }}">{{ $val }}</option>
                                            @endif
                                        @endforeach
                                        </select>
                                    </td>
                                    <td class="col_operation_type">
                                        <select name="operation_type_id[]" class="custom-select">
                                        @foreach ($operationTypes as $key => $val)
                                            @if($key == $operatePermission->operation_type_id)
                                                <option value="{{ $key }}" selected="selected">{{ $val }}</option>
                                            @else
                                                <option value="{{ $key }}">{{ $val }}</option>
                                            @endif
                                        @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>
                                @php
                                    $index = $index + 1;
                                @endphp
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-4">
                        <button type="button" onclick="location.href='{{ route('admin.permission.index') }}'" class="btn btn-lg btn-block button-back rounded-pill">キャンセル</button>
                    </div>
                    <div class="col-md-4">
                        <button id="register" type="submit" class="btn btn-lg btn-block button-go rounded-pill">更新する</button>
                    </div>
                    <div class="col-md-4">
                        <button type="button" class="btn btn-lg btn-block button-red rounded-pill" data-toggle="modal" data-target="#delete">削除する</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 ($oasysFunctions 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 ($operationTypes 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>
@include('admin.permission.modal.delete', ['affiliate_id' => $affiliate->id, 'position_id' => $position->id])
@stop

@section('js')
<script>
$(function() {
    // 行追加ボタン押下時処理
    $('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#updateForm').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.completeUpdate') }}';
            }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">
<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