@extends('layouts.app')

@section('content')
<div class="mb-4 d-flex">
    <h3 class="text-muted my-auto"><b><i class="fas fa-users mr-2"></i>Roles</b></h3>
    <a href="javascript:void();" onclick="showFormBar()" class="btn btn-primary ml-auto">Add Role</a>
</div>
<div class="card">
    <div class="card-body">
        <table id="datatable" class="datatable table table-hover table-center mb-0">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Status</th>
                    <th class="text-right">Action</th>
                </tr>
            </thead>
        </table>
    </div>
</div>
@endsection

@section('form-bar')
<h4>Add role</h4>
<form action="{{ isset($id)? route('roles.update', $id) : route('roles.store') }}" method="POST">
    @csrf
    @if(isset($id))
        @method('PUT')
    @endif

    <div class="form-group">
        <label for="">Name</label>
        <input type="text" name="name" class="form-control" value="{{ isset($id)? $role->name : '' }}" required>
    </div>
    <div class="form-group">
        <label for="">Status</label>
        <select id="status" name="status" class="form-control">
            <option value="active">Active</option>
            <option value="inactive">Inactive</option>
        </select>
    </div>
    <h6 class="mt-4"><b>Assign Permissions</b></h6>
    <hr>
    @foreach(App\Module::where('include_in_navigation', 1)->orderBy('sort_order', 'ASC')->get() as $module)
    <div class="form-group">
        <label class="col-md-4 form-check-label">
            <input type="checkbox" id="booking" name="permissions[]" value="{{ $module->permission_front_name }}"@if(isset($id)) @if(in_array($module->permission_front_name, $getPermissions)) checked @endif @endif>
               {{ $module->name }} 
        </label>
    </div>
    @endforeach
    <button type="submit" class="btn btn-primary ml-2">Save</button>
    <a @if(isset($id)) href="{{ route('roles.index') }}" @else onclick="hideFormBar();" @endif class="btn btn-primary ml-auto text-light">Close</a>
</form>
@endsection

@section('script')
<script>
    var table = $('#datatable').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ URL::to('roles') }}",
        columns: [
            {data: 'name', name: 'name'},
            {data: 'status', name: 'status'},
            {data: 'action', name: 'action'}
        ]
    });
</script>
@if(isset($id))
<script>
    $(document).ready(function(){
        var formBar = $('.form-bar');
        var formBarOverlay = $('.form-bar-overlay');

        formBar.addClass('show-form-bar'); 
        formBarOverlay.addClass('show-form-bar-overlay');

        $('#status').val('{{ $role->status }}')
    });
</script>
@endif
@endsection