@extends('layout.app')
@section('title')
    Edit Role | {{env('APP_NAME')}}
@endsection
@section('content')
    <div class="m-grid__item m-grid__item--fluid m-wrapper">
        <div class="m-content">
            <div class="row">
                <div class="col-12">
                    <div class="m-portlet m-portlet--primary m-portlet--head-solid-bg m-portlet--head-sm" m-portlet="true" id="data">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">
                                    <span class="m-portlet__head-icon">
                                        <i class="flaticon-users"></i>
                                    </span>
                                    <h3 class="m-portlet__head-text">
                                        Edit Role
                                    </h3>
                                </div>
                            </div>
                            <div class="m-portlet__head-tools">
                                <ul class="m-portlet__nav">
                                    <li class="m-portlet__nav-item">
                                        <a href="javascript:void(0)" m-portlet-tool="toggle" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-angle-down"></i></a>
                                    </li>
                                    <li class="m-portlet__nav-item">
                                        <a href="javascript:void(0)" m-portlet-tool="fullscreen" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-expand"></i></a>
                                    </li>
                                    <li class="m-portlet__nav-item">
                                        <a href="javascript:void(0)" m-portlet-tool="remove" class="m-portlet__nav-link m-portlet__nav-link--icon"><i class="la la-close"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="m-portlet__body">
                            <div class="m-section">
                                <div class="m-section__content">
                                    <form action="{{ route('role-store') }}" class="form-horizontal" method="post">
                                        {{ csrf_field() }}
                                        <div class="form-group">
                                            <label class="control-label col-md-12">Role</label>
                                            <div class="col-md-6">
                                                <input type="text" class="form-control" name="role" value="{{ $data->role }}"/>
                                            </div>
                                        </div>
                                        
                                        <input type="text" name="action_form" value="edit" hidden="" />
                                        <input type="text" name="id" value="{{ $data->id }}" hidden=""/>

                                        <div class="form-group">
                                            <label class="control-label"></label>
                                            <div class="col-md-12">
                                                <button type="submit" class="btn btn-success">submit</button>
                                            </div>
                                        </div>

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


@endsection
@section('css')
    <link href="{{asset('assets/vendors/custom/datatables/datatables.bundle.css')}}" rel="stylesheet" type="text/css" />
@endsection
@section('js')
    <!--begin::Page Vendors -->
    <script src="{{asset('assets/vendors/custom/datatables/datatables.bundle.js')}}" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {
            $('#tabel').DataTable({
                "processing": true,
                "serverSide": true,
                "ajax": "{{ route('role-json') }}",
                "columns": [
                    {data: 'role',orderable: true, searchable: true},
                    {data: 'menu', orderable: false, searchable: false}
                ]
            });

        });
    </script>
@endsection