@extends('adminlte::page')

@section('title', '権限設定一覧')

@section('content_header')
    <h5><label class="title-underbar">権限設定一覧</label></h5>
@stop
@section('content')
    <x-admin.success-flush-message />
    <x-admin.error-flush-message />
    <x-admin.validation-message />
    <div class="row">
        <div class="col-md-12">
            <form method="POST" action="{{ route('admin.permission.index') }}">
            @csrf
                <div class="row">
                    <div class="col-md-12">
                        <div class="input-group-append">
                            <select name="affiliate_id" id="affiliate_id" class="custom-select">
                            @if(!empty($affiliateId))
                                    @php
                                        $aryAffiliateId = explode('_', $affiliateId);
                                    @endphp
                                    <option value="{{$aryAffiliateId[0] . '_' . $aryAffiliateId[1]}}">{{$aryAffiliateId[1]}}</option>
                            @endif
                            </select>
                            <select name="position_id" id="position_id" class="custom-select" style="margin-left:-2px;">
                            @foreach (EmployeeHelper::positionsForForm() as $key => $val)
                                @if (!empty($positionId) && (string) $key === $positionId)
                                    <option value="{{ $key }}" selected>{{ $val }}</option>
                                @else
                                    @if($key)
                                        <option value="{{ $key }}">{{ $val }}</option>
                                    @else
                                        <option value="{{ $key }}">役職を選択してください</option>
                                    @endif
                                @endif
                            @endforeach
                            </select>
                            <div class="input-group-append">
                                <button class="btn button-go" type="submit" style="margin-top:0px; margin-left:-2px;">
                                    <i class="fas fa-search"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="card" style="margin-top:0.5rem;">
                <div class="card-body">
                    <div class="row justify-content-end">
                        <div class="col-mb-12">
                            <a href="{{ route('admin.permission.create') }}" class="btn btn-sm btn-block button-go rounded-pill">新規登録</a>
                        </div>
                    </div>
                    <div class="row" style="margin-top:0.5rem;">
                        <div class="col-md-12" style="padding:0;">
                            <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>
                                @if($positions->count() > 0)
                                    @foreach($positions as $position)
                                    <tr>
                                      <td>{{ $position->department }}</td>
                                      <td>{{ $position->name }}</td>
                                      <td align="center">
                                          <a href="{{ route('admin.permission.edit', ['affiliate_id' => $position->affiliate_id, 'position_id' => $position->position_id]) }}" class="btn btn-sm btn-block button-go rounded-pill">編集</a>
                                      </td>
                                    </tr>
                                    @endforeach
                                @else
                                    <tr>
                                        <td colspan="4" style="text-align: center;">
                                            登録されていません。
                                        </td>
                                    </tr>
                                @endif
                                </tbody>
                            </table>
                        </div>
                    </div>
                    @if ($positions->count() > 0)
                    <div class="row">
                        <div style="margin: 0 auto;">
                            {{ $positions->appends(request()->query())->links() }}
                        </div>
                    </div>
                    @endif
                </div>
            </div>
        </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'] + '_' + val['department'] , text: val['department']});
                });
                return {
                    results: results
                };
            }
        },
    });

    // 前回選択した部署を選択状態に設定
    @if(!empty($affiliateId))
        @php
            $aryAffiliateId = explode('_', $affiliateId);
        @endphp
        let results = [];
        results.push('{{$aryAffiliateId[0] . '_' . $aryAffiliateId[1]}}');
        if(results.length > 0){
            $('select#affiliate_id').val(results);
            $('select#affiliate_id').trigger('change');
        }
    @endif
});
</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