{{-- Extends layout --}}
@extends('layout.default')

{{-- Content --}}
@section('content')

   <!--begin::Card-->
                                @if(session('success'))
                                    <div class="alert alert-success" role="alert">
                                        {{ session('success') }}   
                                    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                    </div>
                                @endif
                                <div class="card card-custom gutter-b">                            
                                    <div class="card-header flex-wrap border-0 pt-6 pb-0">
                                        <div class="card-title">
                                            <h3 class="card-label">Roles List
                                            <!-- <span class="d-block text-muted pt-2 font-size-sm">row selection and group actions</span> --></h3>
                                        </div>
                                        <div class="card-toolbar">
                                            @can('create role')
                                            <!--begin::Button-->
                                            <a href="/roles/create" class="btn btn-primary font-weight-bolder">
                                            <span class="svg-icon svg-icon-md">
                                                <!--begin::Svg Icon | path:assets/media/svg/icons/Design/Flatten.svg-->
                                                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1">
                                                    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                                        <rect x="0" y="0" width="24" height="24" />
                                                        <circle fill="#000000" cx="9" cy="15" r="6" />
                                                        <path d="M8.8012943,7.00241953 C9.83837775,5.20768121 11.7781543,4 14,4 C17.3137085,4 20,6.6862915 20,10 C20,12.2218457 18.7923188,14.1616223 16.9975805,15.1987057 C16.9991904,15.1326658 17,15.0664274 17,15 C17,10.581722 13.418278,7 9,7 C8.93357256,7 8.86733422,7.00080962 8.8012943,7.00241953 Z" fill="#000000" opacity="0.3" />
                                                    </g>
                                                </svg>
                                                <!--end::Svg Icon-->
                                            </span>Add Role</a>
                                            <!--end::Button-->
                                            @endcan
                                        </div>
                                    </div>
                                    <div class="card-body">
                                        <!--begin: Search Form-->
                                        <!--begin::Search Form-->
                                        <div class="mb-7">
                                            <div class="row align-items-center">
                                                <div class="col-lg-9 col-xl-8">
                                                    <div class="row align-items-center">
                                                        <div class="col-md-4 my-2 my-md-0">
                                                            <div class="input-icon">
                                                                <input type="text" class="form-control" placeholder="Search..." id="generalSearch" />
                                                                <span>
                                                                    <i class="flaticon2-search-1 text-muted"></i>
                                                                </span>
                                                            </div>
                                                        </div>
                                                        <!-- <div class="col-md-4 my-2 my-md-0">
                                                            <div class="d-flex align-items-center">
                                                                <label class="mr-3 mb-0 d-none d-md-block">Status:</label>
                                                                <select class="form-control" id="kt_datatable_search_status">
                                                                    <option value="">All</option>
                                                                    <option value="1">Pending</option>
                                                                    <option value="2">Delivered</option>
                                                                    <option value="3">Canceled</option>
                                                                    <option value="4">Success</option>
                                                                    <option value="5">Info</option>
                                                                    <option value="6">Danger</option>
                                                                </select>
                                                            </div>
                                                        </div> -->
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <!--end::Search Form-->
                                        <!--end: Search Form-->
                                        <!--begin: Selected Rows Group Action Form-->
                                        <div class="mt-10 mb-5 collapse" id="kt_datatable_group_action_form">
                                            <div class="d-flex align-items-center">
                                                <div class="font-weight-bold text-danger mr-3">Selected
                                                <span id="kt_datatable_selected_records">0</span>records:</div>
                                                <div class="dropdown mr-2">
                                                    <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">Update status</button>
                                                    <div class="dropdown-menu dropdown-menu-sm">
                                                        <ul class="nav nav-hover flex-column">
                                                            <li class="nav-item">
                                                                <a href="#" class="nav-link">
                                                                    <span class="nav-text">Pending</span>
                                                                </a>
                                                            </li>
                                                            <li class="nav-item">
                                                                <a href="#" class="nav-link">
                                                                    <span class="nav-text">Delivered</span>
                                                                </a>
                                                            </li>
                                                            <li class="nav-item">
                                                                <a href="#" class="nav-link">
                                                                    <span class="nav-text">Canceled</span>
                                                                </a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <button class="btn btn-sm btn-danger mr-2" type="button" id="kt_datatable_delete_all">Delete All</button>
                                                <button class="btn btn-sm btn-success" type="button" data-toggle="modal" data-target="#kt_datatable_fetch_modal">Fetch Selected Records</button>
                                            </div>
                                        </div>
                                        <!--end: Selected Rows Group Action Form-->
                                        <!--begin: Datatable-->
                                        <div class="datatable datatable-bordered datatable-head-custom" id="kt_datatable"></div>
                                        <!--end: Datatable-->
                                    </div>
                                </div>
                                <!--end::Card-->
                                <!--begin::Modal-->
                                <div class="modal fade" id="kt_datatable_fetch_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1" aria-hidden="true">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <h5 class="modal-title" id="exampleModalLabel1">Selected Records</h5>
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                    <i aria-hidden="true" class="ki ki-close"></i>
                                                </button>
                                            </div>
                                            <div class="modal-body">
                                                <div class="scroll" data-scroll="true" data-height="200">
                                                    <ul id="kt_datatable_fetch_display"></ul>
                                                </div>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-light-primary font-weight-bold" data-dismiss="modal">Close</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--end::Modal-->

@endsection

{{-- Styles Section --}}
@section('styles')

@endsection

{{-- Scripts Section --}}
@section('scripts')

<script src="{{ asset('/js/roles/roles.js') }}" type="text/javascript"></script>
<!-- <script src="{{ asset('js/offcanvas/admin_users.js') }}" type="text/javascript"></script> -->
@endsection