@extends('admin.layouts.master')
@section('content')
    @include('admin.roles.partials.delete')
    @include('admin.roles.partials.bulk-delete-modal')
    <div class="row">
        <div class="col">
            <form action="{{route('admin.roles.bulk-delete')}}" method="POST" id="bulk-delete-roles-form">
                @csrf
                @method("DELETE")
                <div class="card">
                    <div class="card-header d-flex justify-content-between">
                        <h5 class="card-title mb-0">
                            {{__("dashboard.roles")}}
                        </h5>
                        <div class="d-flex align-items-center gap-3">
                            <a href="{{route('admin.roles.create')}}" class='btn btn-primary'>
                                {{__("dashboard.create-role")}}
                            </a>
                            <div class='dropdown'>
                                <button class='btn btn-primary dropdown-toggle' data-bs-toggle='dropdown'>
                                    {{__("dashboard.bulk-options")}}
                                    <i class='mdi mdi-chevron-down fs-17 align-middle'></i>
                                </button>
                                <div class='dropdown-menu dropdown-menu-animated'>
                                    <button type="button" class='dropdown-item text-danger' data-bs-toggle='modal'
                                            data-bs-target="#bulkDeleteRolesModal">
                                        <div class='dropdown-icon'>
                                            <i class='bi bi-trash'></i>
                                        </div>
                                        <span class='dropdown-content mx-1'>
                                        {{__("dashboard.delete-selected")}}
                                    </span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <div class="mb-0">
                            <div id="datatable-buttons_wrapper" class="d-flex justify-content-center"></div>
                        </div>
                        <table class="table table-striped display nowrap" style="width: 100%;" id="roles-table">
                            <thead>
                            <tr>
                                <th>
                                    <input class="form-check-input m-0 check-all" id="check-all" type="checkbox"/>
                                    <label for="check-all" class="mx-2">
                                        {{__("dashboard.name")}}
                                    </label>
                                </th>
                                <th>{{__("dashboard.actions")}}</th>
                            </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </div>
                </div>
            </form>

        </div>
    </div>
@endsection
@section('script')
    <script>
        $(document).ready(function () {
            let rolesTable = initializeDataTable(
                "#roles-table",
                "{{ route('admin.roles.index') }}",
                [
                    {data: 'id', name: 'id', orderable: false, searchable: true},
                    {data: 'action', name: 'action', orderable: true, searchable: true},
                ],
                true,
                {},
                ['id']
            );
        });
    </script>
@endsection