@extends('backend.layouts.app')
@section('content')
    <div class="content d-flex flex-column flex-column-fluid" id="kt_content">
        <div class="toolbar" id="kt_toolbar">
            <div id="kt_toolbar_container" class="container-fluid d-flex flex-stack">
                <div data-kt-swapper="true" data-kt-swapper-mode="prepend"
                    data-kt-swapper-parent="{default: '#kt_content_container', 'lg': '#kt_toolbar_container'}"
                    class="page-title d-flex align-items-center flex-wrap me-3 mb-5 mb-lg-0">
                    <h1 class="d-flex align-items-center text-dark fw-bolder fs-3 my-1">{{ TranslationManager::translate('Roles List') }}</h1>
                    <span class="h-20px border-gray-200 border-start mx-4"></span>
                    <ul class="breadcrumb breadcrumb-separatorless fw-bold fs-7 my-1">
                        <li class="breadcrumb-item text-muted">
                            <a href="{{ route('admin.index') }}"
                                class="text-muted text-hover-primary">{{ TranslationManager::translate('Home') }}</a>
                        </li>
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-200 w-5px h-2px"></span>
                        </li>
                        <li class="breadcrumb-item text-muted">{{ TranslationManager::translate('Roles') }}</li>
                        <li class="breadcrumb-item">
                            <span class="bullet bg-gray-200 w-5px h-2px"></span>
                        </li>
                        <li class="breadcrumb-item text-dark">{{ TranslationManager::translate('Roles List') }}</li>
                    </ul>
                </div>
                <div class="d-flex align-items-center py-1">
                    <a href="{{ route('admin.roles.index') }}" class="btn btn-sm btn-primary"
                        id="kt_toolbar_primary_button">{{ TranslationManager::translate('All Roles') }}</a>
                </div>
            </div>
        </div>
        <!--end::Toolbar-->
        <div class="post d-flex flex-column-fluid" id="kt_post">
            <div id="kt_content_container" class="container-xxl">
                <div class="d-flex flex-column flex-xl-row">
                    <div class="flex-column flex-lg-row-auto w-100 w-lg-300px mb-10">
                        <div class="card card-flush">
                            <div class="card-header">
                                <div class="card-title">
                                    <h2 class="mb-0">{{ $role->getName() }}</h2>
                                </div>
                            </div>
                            <div class="card-body p-0">
                                <div class="d-flex flex-column text-gray-600">
                                </div>
                            </div>
                            <div class="card-footer pt-0">
                                <button type="button" class="btn btn-light btn-active-primary" data-bs-toggle="modal"
                                    data-bs-target="#kt_modal_update_role_{{ $key = $role->id }}">{{ TranslationManager::translate('Edit Role') }}</button>
                            </div>
                            <!--end::Card footer-->
                        </div>
                        @include('backend.roles.edit-modal')

                    </div>
                    <div class="flex-lg-row-fluid ms-lg-10">
                        <div class="card card-flush mb-6 mb-xl-9">
                            <div class="card-header pt-5">
                                <div class="card-title">
                                    <h2 class="d-flex align-items-center">{{ TranslationManager::translate('Users Assigned') }}
                                        <span class="text-gray-600 fs-6 ms-1">({{ $role->getCountOfRoleUser() }})</span>
                                    </h2>
                                </div>
                            </div>
                            <div class="card-body p-0">
                                <table class="table align-middle table-row-dashed fs-6 gy-5 mb-0" id="kt_roles_view_table">
                                    <thead>
                                        <tr class="text-start text-muted fw-bolder fs-7 text-uppercase gs-0">
                                            <th class="min-w-50px">{{ TranslationManager::translate('ID') }}</th>
                                            <th class="min-w-150px">{{ TranslationManager::translate('Email') }}</th>
                                            <th class="min-w-125px">{{ TranslationManager::translate('Joined Date') }}</th>
                                            <th class="text-end min-w-100px">{{ TranslationManager::translate('Actions') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody class="fw-bold text-gray-600">
                                        @foreach ($users as $user)
                                            <tr>
                                                <td>{{ $user->id }}</td>
                                                <td class="d-flex align-items-center">
                                                    <div class="symbol symbol-circle symbol-50px overflow-hidden me-3">
                                                        <a href="#">
                                                            <div class="symbol-label">
                                                                <img src="{{ $user->getAvatar() }}" alt="Emma Smith"
                                                                    class="w-100" />
                                                            </div>
                                                        </a>
                                                    </div>
                                                    <div class="d-flex flex-column">
                                                        <a href="#"
                                                            class="text-gray-800 text-hover-primary mb-1">{{ $user->getName() }}</a>
                                                        <span>{{ $user->getEmail() }}</span>
                                                    </div>
                                                </td>
                                                <td>{{ $user->getCreatedAt() }}</td>
                                                <td class="text-end">
                                                    <form
                                                        action="{{ route('admin.roles.unseat-user', ['role' => $role]) }}"
                                                        method="post">
                                                        @csrf
                                                        @method('DELETE')
                                                        <button type="submit" class="btn btn-danger menu-link px-3">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </form>

                                                    <div class="menu menu-sub menu-sub-dropdown menu-column menu-rounded menu-gray-600 menu-state-bg-light-primary fw-bold fs-7 w-125px py-4"
                                                        data-kt-menu="true">
                                                        <!--begin::Menu item-->
                                                        <div class="menu-item px-3">
                                                            <a href="../../demo1/dist/apps/user-management/users/view.html"
                                                                class="menu-link px-3">View</a>
                                                        </div>
                                                        <div class="menu-item px-3">
                                                            <button type="submit" class="btn btn-danger menu-link px-3"> <i
                                                                    class="fas fa-trash"></i> </button>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection