@extends('layouts.dashboard.app')

@section('content')
<div class="container">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb" style="background-color: rgba(100,100,100,0.1);">
            <a href="{{config('app.url')}}" class="btn btn-sm btn-warning btn-x"><i class="fas fa-home"></i><span class="pl-2">@lang('common.btn_home')</span></a><i class="fas fa-angle-right pt-2 mx-2"></i>
            <a href="{{config('app.url').'/roles/'}}" class="btn btn-sm btn-warning btn-x"><i class="fas fa-user-shield"></i><span class="pl-2">@lang('role.btn_roles')</span></a>
        </ol>
    </nav>
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card card-shadow sharp-corners center-card" >
                <div class="card-header my-form-header">
                    <h2 class="my-form-heading"><i class="fas fa-cogs pr-2"></i>@lang('rolepermission.lbl_heading') - {{ $role->rolename }}</h2>
                </div>
                <div class="card-body">
                    <div class="card">
                        <div class="card-body">
                            <div class="row">
                                <div class="col">
                                    <label for="id">@lang('rolepermission.lbl_permission')</label>
                                </div>
                            </div>
                            <form  class="form" method="POST" action="{{ route('rolepermission.add', $role->id) }}">
                            @csrf
                                <div class="row">
                                    <div class="col-9">
                                        <div class="form-group">
                                            <select class="js-example-basic-single form-control form-control-sm" name="id" id="id">
                                                @foreach ($permissions as $permission)
                                                    @unless($role->permissions->contains($permission))
                                                        <option value="{{ $permission->id }}">{{ $permission->permission_id }}</option>
                                                    @endunless
                                                @endforeach
                                            </select>
                                            @if ($errors->has('id'))
                                                <span class="invalid-feedback">
                                                    <strong>{{ $errors->first('id') }}</strong>
                                                </span>
                                            @endif
                                        </div>
                                    </div>
                                    <div class="col-3">
                                        <button id="btnGrant" type="submit" class="btn btn-warning btn-sm float-right btn-x px-3 btn-block" disabled><i class="fas fa-lock-open"></i><span class="pl-2">@lang('common.btn_grant')</span></button>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="card-body pt-0">
                            <h5>@lang('rolepermission.lbl_grantedpermissions')</h5>
                            <div class="row pt-2">
                                <div class="col-12">
                                    <div class="table-responsive">
                                        <form id="frmpermissions" class="form" >
                                        @csrf
                                            <table class="table table-hover table-sm">
                                                <thead>
                                                    <tr>
                                                        <th scope="col" style="width:5%;"></th>
                                                        <th scope="col" style="width:40%;">@lang('rolepermission.lbl_permissionid')</th>
                                                        <th scope="col" style="width:55%;">@lang('rolepermission.lbl_description')</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    @foreach ($role->permissions as $permission)
                                                    <tr>
                                                        <td><input type="checkbox" class="chk_per_ids" name="del_rows[]" value="{{ $permission->id }}"></td>
                                                        <td scope="row">{{ $permission->permission_id }}</td>
                                                        <td>{{ $permission->description }}</td>
                                                    </tr>
                                                    @endforeach
                                                </tbody>
                                            </table>
                                            <button type="button" class="btn btn-warning btn-outline-light btn-sm float-right" id="deletepermissions" disabled><i class="far fa-trash-alt mr-2"></i>@lang('rolepermission.btn_rem-sel-per')</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    $(function() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $("#deletepermissions").click(function(){
            var myData = $('#frmpermissions').serialize();
            request = $.ajax({
                url: "{{route('rolepermission.delete', $role->id)}}",
                type: "post",
                data: myData
            });

                request.done(function (response, textStatus, jqXHR){
                // Log a message to the console
                window.location.replace("{{route('rolepermission.index', $role->id)}}");
            });

            // Callback handler that will be called on failure
            request.fail(function (jqXHR, textStatus, errorThrown){
                // Log the error to the console
                console.error(
                    "The following error occurred: "+
                    textStatus, errorThrown
                );
            });
        });

        var checkDeletable = function() {
            var n = $("input:checked").length;
            if (n > 0) {
                $('#deletepermissions').removeClass("btn-outline-light text-dark").addClass("btn-danger");
                $('#deletepermissions').prop('disabled', false);
            }
            else {
                $('#deletepermissions').removeClass("btn-danger").addClass("btn-outline-light text-dark");
                $('#deletepermissions').prop('disabled', true);
            }
        };
        checkDeletable();

        $( ".chk_per_ids" ).on("click", checkDeletable );
    });

    $(document).ready(function(){ 
        if(document.getElementById('id').options[document.getElementById('id').selectedIndex].value =='NULL'){            
            $('#btnGrant').attr("disabled","disabled");
        }           
        else{
            $('#btnGrant').removeAttr("disabled");
        }
    });

</script>

@endsection