@extends('Admin.include.app')
@section('content')

<!-- Main content -->

<style>
    .permissionModule .col-form-label {
        flex: 30%;
        width: 100%;
    }

    .permissionModule .form-control {
        flex: 1;
    }

    .permissionModule .chk-txt {
        width: 80%;
        text-align: left;
        font-weight: bold;
    }

    .permissionModule .card .card-body .col-form-label.pb-15 {
        padding-bottom: 15px;
    }

    .permissionModule .nav-pills.nav-pills-rose .nav-item .nav-link.active,
    .permissionModule .nav-pills.nav-pills-rose .nav-item .nav-link.active:focus,
    .permissionModule .nav-pills.nav-pills-rose .nav-item .nav-link.active:hover {
        background-color: #55acee;
    }

    .permissionModule .nav-pills .nav-item .nav-link:hover {
        background-color: #55acee;
        color: white;
    }

    .permissionModule .nav-pills .nav-item .nav-link {
        border: 1px solid #55acee;
        border-radius: 0.25rem;
    }

    .permissionModule .btn-save {
        height: 40px;
        padding: 10px 30px;
    }

    .permissionModule .tab-content>.active {
        display: flex;
        flex-wrap: wrap;
    }
</style>
<div class="content permissionModule">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card">
                    <div class="card-header card-header-rose card-header-icon">
                        <div class="card-icon">
                            <i class="fas fa-shield-alt text-info"></i>
                        </div>
                        <h4 class="card-title">Edit Permission</h4>
                    </div>

                    <div class="card-body">
                        <form name="addForm" id="addForm" method="POST" action="{{route('permission.update',$role->id)}}">
                            @csrf
                            @method("PATCH")
                            <div class="row">
                                <label for="name" class="col-sm-2 col-form-label">Role Name</label>
                                <div class="col-sm-6">
                                    <input id="name" type="text" class="form-control @error('name') is-invalid @enderror" name="name" value="{{ $role->name }}" required readonly autocomplete="name" autofocus>
                                    @error('name')
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $message }}</strong>
                                    </span>
                                    @enderror
                                </div>
                            </div>
                            <div class="row">
                                <!-- <h3>Permission</h3> -->
                                <div class="col-md-12">
                                    <div class="card ">
                                        <div class="card-header ">
                                            <h3 class="card-title pb-2" style="border-bottom: 1px solid #bebebe;">Permission</h4>
                                        </div>
                                        <div class="card-body ">
                                            <div class="row">
                                                <div class="col-md-12">
                                                    <ul class="nav nav-pills nav-pills-rose flex-row" role="tablist">
                                                        @php $labelString = ""; @endphp
                                                        @if(count($permission) > 0)
                                                            @foreach($permission as $k=>$v)
                                                                @if($k == 0)
                                                                    @php $prefixExplode = explode(".",$v->name); @endphp
                                                                @else
                                                                    @php $prefixExplode = explode(".",$permission[$k-1]->name); @endphp
                                                                @endif

                                                                @php $currentPrefixExplode = explode(".",$v->name); @endphp
                                                                @if((trim($currentPrefixExplode[0]) != trim($prefixExplode[0])) || $k == 0)
                                                                    @php $activeShow = ''; @endphp
                                                                    @if($k == 0)
                                                                        @php $activeShow = 'active show'; @endphp
                                                                    @endif


                                                                    @if($k != 0)
                                                                        @php $labelString .= '</div>'; @endphp
                                                                    @endif
                                                                    @php $labelString .= '<div class="tab-pane '.$activeShow.'" id="'.ucfirst($currentPrefixExplode[0]).'">'; @endphp
                                                                    @php $labelString .= '<label class="col-md-4 col-form-label d-flex align-items-center pb-15">';@endphp
                                                                    @php $isCheckable = in_array($v->id, $rolePermissions) ? "checked" : ""; @endphp

                                                                    @php $labelString .= '<input type="checkbox" class="form-control col-md-2" name="permission[]" value="'.$v->id.'" '.$isCheckable.'>';@endphp

                                                                    @php $labelString .= '<span class="chk-txt col-md-10">'.$v->name.'</span></label>';
                                                                    @endphp

                                                                    <li class="nav-item mb-2 ml-0 mr-2">
                                                                        <a class="nav-link {{ $activeShow }}" data-toggle="tab" href="#{{ ucfirst($currentPrefixExplode[0]) }}" role="tablist">
                                                                            {{ ucfirst($currentPrefixExplode[0]) }}
                                                                        </a>
                                                                    </li>
                                                                @else

                                                                    @php $labelString .= '<label class="col-md-4 col-form-label d-flex align-items-center pb-15">';@endphp
                                                                    @php $isCheckable = in_array($v->id, $rolePermissions) ? "checked" : ""; @endphp

                                                                    @php $labelString .= '<input type="checkbox" class="form-control col-md-2" name="permission[]" value="'.$v->id.'" '.$isCheckable.'>';@endphp

                                                                    @php $labelString .= '<span class="chk-txt col-md-10">'.$v->name.'</span></label>';
                                                                    @endphp
                                                                    @if($k == count($permission))
                                                                        @php $labelString .= '</div>'; @endphp
                                                                    @endif


                                                                @endif

                                                            @endforeach
                                                    </ul>
                                                </div>
                                                        @endif
                                            <div class="col-md-12 mt-5">
                                                <div class="tab-content">
                                                    @php echo $labelString; @endphp

                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="col-md-12 d-flex flex-wrap">
                                @error('permission')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                                @enderror
                            </div>
                            <div class="col-md-12 justify-content-center form-group row mb-0">
                                <button type="submit" class="btn btn-primary">
                                    {{ __('Submit') }}
                                </button>
                            </div>
                    </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

@endsection
@section('script')

<script type="text/javascript">
    $(function() {
        $(document).ready(function() {
            $.validator.methods.isJSON = function(value, element) {
                if (typeof(value) !== 'string') {
                    return false;
                }
                try {
                    JSON.parse(value);
                    return true;
                } catch (e) {
                    return false;
                }
            }
            $("#addForm").validate({
                rules: {
                    name: {
                        required: true
                    },
                },
                messages: {
                    name: {
                        required: "Please provide a role name"
                    },
                },
                errorElement: "em",
                errorPlacement: function(error, element) {
                    // Add the `help-block` class to the error element
                    error.addClass("help-block");

                    if (element.prop("type") === "checkbox") {
                        error.insertAfter(element.parent("label"));
                    } else {
                        error.insertAfter(element);
                    }
                },
                highlight: function(element, errorClass, validClass) {
                    $(element).parents(".col-sm-5").addClass("has-error").removeClass("has-success");
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).parents(".col-sm-5").addClass("has-success").removeClass("has-error");
                }
            });
        });
    });
</script>

@endsection