@extends('../layout/' . $layout)
 
@section('subhead')
    <title>Atarud MIS - Roles List</title>
    <link href="{{ asset('dist/css/dataTables.min.css') }}" rel="stylesheet">
@endsection

@section('subcontent')
    <div class="flex items-center mt-8">

        <a href="{{ route('roles.create')}}" data-tw-toggle="modal" data-tw-target="#new-role" class="btn btn-primary w-24 ml-auto">
            <i data-lucide="plus-circle" class="w-4 h-4 mr-1"></i> Add
        </a>
    </div>

    <div class="flex items-center mt-8">
        <h2 class="intro-y text-lg font-medium mr-auto">Roles List</h2>
    </div>

    <div class="container">
        <div class="row">
            <div class="box col-12 table-responsive">
                <table class=" table table-bordered account_datatable" id="table_export">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Name</th>
                            <th >Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @php
                         $cn = 0;
                        @endphp
                        @foreach ($roles as $row)
                        
                            <tr>
                                <td>{{ ++$cn }}</td>
                                <td>{{ $row->name }}</td>
                                <td>  <a class="flex items-center mr-3" href="{{ route('roles.edit', $row->id) }}">
                                      <i data-lucide="check-square" class="w-7 h-7 mr-1"></i> Edit
                                      </a>
                                </td>
                            </tr>
                        @endforeach

                    </tbody>
                </table>
            </div>
        </div>
    </div>
    {{-- @include('../pages/systemAdmin/roles/create') --}}
@endsection


@section('script')
    <script src="{{ asset('dist/js/jquery.js') }}"></script>
    <script src="{{ asset('dist/js/dataTables.min.js') }}"></script>
@endsection