@extends('layouts.app')

@section('content')
    <div class="container">

        <header class="row">
            @include('layouts.includes.header')
        </header>

        <div id="main">

            <!-- sidebar content -->
            <div id="sidebar" class="col-md-4">
                @include('layouts.includes.sidebar')
            </div>

            <!-- main content -->
            <div id="content" class="col-md-8">
                @if (session('success'))
                    <div class="alert alert-success">
                        {{ session('success') }}
                    </div>
                @endif
                @if (session('warning'))
                    <div class="alert alert-warning">
                        {{ session('warning') }}
                    </div>
                @endif
                    <div class="row clearfix">
                        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="card">
                                <div class="header">
                                   <div class="row">
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                        <h2>
                                            User Roles
                                        </h2>
                                    </div>
                                    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
                                    </div>
                                </div>
                                <div class="body">
                                    <div class="table-responsive">
                                        <table class="table table-bordered table-striped table-hover dataTable js-exportable" id="example">
                                            <thead>
                                                <tr>
                                                    <th>Sr no.</th>
                                                    <th>Name</th>
                                                    <th>Status</th>
                                                    <th>Action</th>
                                                </tr>
                                            </thead>
                                            <tfoot>
                                                <tr>
                                                    <th>Sr no.</th>
                                                    <th>Name</th>
                                                    <th>Status</th>
                                                    <th>Action</th>
                                                </tr>
                                            </tfoot>
                                            <tbody>
                                                @foreach($roles as $role)
                                                    <tr>
                                                        <td>{{$role->id}}</td>
                                                        <td>{{$role->name}}</td>
                                                        <td>
                                                            @if($role->status == '1')
                                                                <span class="label label-success">Active</span>
                                                            @else
                                                                <span class="label label-default">Inactive</span>
                                                            @endif 
                                                            </td>
                                                        <td>
                                                            <a class="btn btn-primary" href="role/view/{{$role->id}}"> <i class="fa fa-eye" aria-hidden="true"></i></a>
                                                            <a class="btn btn-success" href="role/edit/{{$role->id}}"> <i class="fa fa-pencil" aria-hidden="true"></i></a>
                                                            <a class="btn btn-danger" href="role/destroy/{{$role->id}}"> <i class="fa fa-trash" aria-hidden="true"></i></a>
                                                        </td>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- #END# Exportable Table -->
            </div>
        </div>

        <footer class="row">
            @include('layouts.includes.footer')
        </footer>
    </div>
@endsection

@section('extra-script')

        {{Html::script('https://code.jquery.com/jquery-3.3.1.js')}}
        {{Html::script('https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js')}}
        {{Html::script('https://cdn.datatables.net/1.10.19/js/dataTables.material.min.js')}}
        
        <script type="text/javascript">
             $(document).ready(function() {
                $('#example').DataTable( {
                    columnDefs: [
                        {
                            targets: [ 0, 1, 2 ],
                            className: 'mdl-data-table__cell--non-numeric'
                        }
                    ]
                });
            });
        </script>

@endsection