@extends('layouts.app')
@section('content')
    <!--begin::Content wrapper-->
    <div class="d-flex flex-column flex-column-fluid">
        <!--begin::Toolbar-->
        <div id="kt_app_toolbar" class="app-toolbar py-3 py-lg-6">
            <div id="kt_app_toolbar_container" class="app-container container-xxl d-flex flex-stack">
                <!--begin::Page title-->
                <div class="page-title d-flex flex-column justify-content-center flex-wrap me-3">
                    <h1 class="page-heading d-flex text-dark fw-bold fs-3 flex-column justify-content-center my-0">
                        Role List</h1>
                    <ul class="breadcrumb breadcrumb-separatorless fw-semibold fs-7 my-0 pt-1">
                        <li class="breadcrumb-item text-muted">
                            <a href="{{ route('dashboard') }}" class="text-muted text-hover-primary">Home</a>
                        </li>
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <li class="breadcrumb-item text-hover-primary text-muted">Role Management</li>
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-400 w-5px h-2px"></span>
                        </li>
                        <li class="breadcrumb-item text-hover-primary text-muted">Roles</li>
                    </ul>
                </div>
            </div>
        </div>
        <!--end::Toolbar-->

        <!--begin::Content-->
        <div id="kt_app_content" class="app-content flex-column-fluid">
            <div id="kt_app_content_container" class="app-container container-xxl">
                <div class="card">
                    <div class="card-header brole-0 pt-6">
                        <form action="{{ route('role.list') }}" method="get">
                            <div class="card-title">
                                <div class="d-flex align-items-center position-relative my-1" style="padding-right: 10px">
                                    <span class="svg-icon svg-icon-1 position-absolute ms-6">
                                        <!-- Search Icon -->
                                    </span>
                                    <input type="text" class="form-control form-control-solid search-input w-250px ps-14"
                                        placeholder="Search Role" name="searchterm"
                                        value="{{ request()->searchterm ?? '' }}" />
                                </div>
                                <button class="btn btn-success search_retailer" type="submit" title="Search">
                                    <span class="fas fa-search"></span>
                                </button>
                                <a class="btn btn-warning refresh-page" href="{{ route('role.list') }}">
                                    <span class="fa fa-arrow-right-rotate"></span>
                                </a>
                            </div>
                        </form>

                        <div class="card-toolbar">
                            <!-- Show Add Role button if the user has 'role_add' permission -->
                            @can('role_add')
                                <button type="button" class="btn btn-light-primary" data-bs-toggle="modal"
                                    data-bs-target="#kt_modal_add_role">
                                    <span class="svg-icon svg-icon-3"></span>Add Role
                                </button>
                            @endcan
                        </div>
                    </div>

                    <div class="card-body py-4">
                        <table class="table align-middle table-row-dashed fs-6 gy-5" id="kt_table_users">
                            <thead>
                                <tr class="text-start text-muted fw-bold fs-7 text-uppercase gs-0">
                                    <th>#</th>
                                    <th>Role</th>
                                    <th>Permissions</th>
                                    <!-- Show Action column if the user has 'role_delete' or 'role_edit' permission -->
                                    @can('role_delete')
                                        <th class="text-end min-w-100px">Action</th>
                                    @endcan
                                </tr>
                            </thead>
                            <tbody class="text-gray-600 fw-semibold">
                                @forelse($roles as $key => $role)
                                    <tr>
                                        <td>{{ $loop->iteration }}</td>
                                        <td>{{ $role->name }}</td>
                                        <td>
                                            <a href="{{ route('role.permission.view', ['role' => $role->id]) }}" class="text-gray-800 text-hover-primary mb-1">
                                                View Permissions
                                            </a>
                                        </td>
                                        @can('role_delete')
                                            <td class="text-end">
                                                <!-- Show Delete button if the user has 'role_delete' permission -->
                                                @can('role_delete')
                                                   <button class="btn btn-icon btn-active-light-primary w-30px h-30px delete"
                                                    data-id="{{ $role->id }}" data-action="{{ route('delete') }}"
                                                    data-table="roles">
                                                    <!--begin::Svg Icon | path: icons/duotune/general/gen027.svg-->
                                                    <span class="svg-icon svg-icon-3">
                                                        <svg width="24" height="24" viewBox="0 0 24 24"
                                                            fill="none" xmlns="http://www.w3.org/2000/svg">
                                                            <path
                                                                d="M5 9C5 8.44772 5.44772 8 6 8H18C18.5523 8 19 8.44772 19 9V18C19 19.6569 17.6569 21 16 21H8C6.34315 21 5 19.6569 5 18V9Z"
                                                                fill="currentColor"></path>
                                                            <path opacity="0.5"
                                                                d="M5 5C5 4.44772 5.44772 4 6 4H18C18.5523 4 19 4.44772 19 5V5C19 5.55228 18.5523 6 18 6H6C5.44772 6 5 5.55228 5 5V5Z"
                                                                fill="currentColor"></path>
                                                            <path opacity="0.5"
                                                                d="M9 4C9 3.44772 9.44772 3 10 3H14C14.5523 3 15 3.44772 15 4V4H9V4Z"
                                                                fill="currentColor"></path>
                                                        </svg>
                                                    </span>
                                                    <!--end::Svg Icon-->
                                                </button>
                                                @endcan
                                                
                                            </td>
                                        @endcan
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="8" class="text-center">No matching records found</td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- Add Role Modal -->
            <div class="modal fade" id="kt_modal_add_role" tabindex="-1" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered mw-600px">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h2 class="fw-bold">Add Role</h2>
                            <div class="btn btn-icon btn-sm btn-active-icon-primary" data-kt-role-cancel-modal-action="close">
                                <span class="svg-icon svg-icon-1"></span>
                            </div>
                        </div>
                        <div class="modal-body scroll-y mx-5 my-7">
                            <form id="kt_modal_add_role_form" data-action="{{ route('role.add') }}" method="POST">
                                <div class="d-flex flex-column scroll-y me-n7 pe-7">
                                    <div class="fv-row mb-7">
                                        <div class="fv-row">
                                            <label class="required form-label">Role Name</label>
                                            <input type="text" class="form-control" id="name" name="name" required>
                                        </div>
                                    </div>
                                    <div class="text-center pt-15">
                                        <button type="reset" class="btn btn-light me-3"
                                            data-kt-role-cancel-modal-action="cancel">Discard</button>
                                        <button type="submit" class="btn btn-primary"
                                            data-kt-role-cancel-modal-action="submit">
                                            <span class="indicator-label">Submit</span>
                                            <span class="indicator-progress">Please wait...</span>
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--end::Content-->
    </div>
@endsection

@push('script')
    <script src="{{ asset('assets/js/common/delete.js') }}"></script>
    <script src="{{ asset('assets/js/common/document-detail.js') }}"></script>
    <script src="{{ asset('assets/js/role/add.js') }}"></script>
@endpush