<style>
    .module_text{
        text-align: left;
        padding-left: 30%;
    }
    .submodule_text{
        text-align: right;
        padding-right: 40%;
    }

    @media screen and (max-width: 800px) {
        .module_text{
            text-align: left;
            padding-left: 1%;
        }
        .submodule_text{
            text-align: right;
            padding-right: 1%;
        }
    }

</style>
<div class="row table-responsive">
    <label class="text">Permission</label>
    <table id="permission-table" class="table table-bordered rolebase-tbl" >
        <thead>
        <tr>
        <th>Module</th>
        <th>SubModule</th>
        </tr>
        </thead>
        <tbody>
        @foreach($moduleSubmoduleAssoc as $ms)
            <tr class="tr-height">
                <td class="text" >
                    <div  class="module_text">
                    <label class="label-text">{{$ms->name}}</label>
                    </div>
                </td>
                <td>
                    @foreach($ms->submodules as $submodule)

                        @php
                              $checked = '';
                              if(!empty($employee_permission) && in_array($submodule['id'],$employee_permission->toArray()))
                                  $checked = 'checked';
                        @endphp

                        <div class="form-check submodule_text"  id="sub_module_panel">
                            <label>
                               {{$submodule['name']}}  <input type="checkbox" {{$checked}}  name="userRole[]" value="{{$submodule['id']}}"> <span class="label-text"></span>
                            </label>
                        </div>

                    @endforeach
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>
</div>

@push('css')
    <style>
        .rolebase-tbl label{
            position: relative;
            cursor: pointer;
            color: #666;
            font-size: 15px;
        }

        .rolebase-tbl input[type="checkbox"], input[type="radio"]{
            position: absolute;
            right: 9000px;
        }

        /*Check box*/
        .rolebase-tbl  input[type="checkbox"] + .label-text:before{
            content: "\f096";
            font-family: "FontAwesome";
            speak: none;
            font-style: normal;
            font-weight: normal;
            font-variant: normal;
            text-transform: none;
            line-height: 1;
            -webkit-font-smoothing:antialiased;
            width: 1em;
            display: inline-block;
            margin-right: 5px;
        }

        .rolebase-tbl input[type="checkbox"]:checked + .label-text:before{
            content: "\f14a";
            color: #2980b9;
            animation: effect 250ms ease-in;
        }

        .rolebase-tbl input[type="checkbox"]:disabled + .label-text{
            color: #aaa;
        }

        .rolebase-tbl input[type="checkbox"]:disabled + .label-text:before{
            content: "\f0c8";
            color: #ccc;
        }


        @keyframes effect{
            0%{transform: scale(0);}
            25%{transform: scale(1.3);}
            75%{transform: scale(1.4);}
            100%{transform: scale(1);}
        }
    </style>
@endpush






