@extends('template.layouts.template-base')
@section('title', 'View User Role')

@section('styles')
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css" />
    <script src="https://cdn.ckeditor.com/4.21.0/standard/ckeditor.js"></script>
    <script>
        CKEDITOR.config.removePlugins = 'notification,notificationaggregator';
    </script>

@endsection

@section('content')
    <section class="product-page">
        <!-- Header -->
        <div class="page-header">
            <div class="container-fluid">
                <div class="row align-items-center">
                    <div class="col">
                        <div class="page-title">
                            <a href="{{ route('backend.user-management.index') }}">User Management / <span
                                    class="breadcrumb-link">View User Role</span></a>
                        </div>
                    </div>
                    <div class="col-auto cate-top-btns">
                        <button class="btn-delete-category" data-bs-toggle="modal" data-bs-target=".remove-role-name">
                            Delete <i class='bx bxs-trash fs-5'></i>
                        </button>

                        <a class="btn-export-category" href="{{ route('backend.user-management.duplicate', $role->id) }}">
                            Duplicate <i class='bx bxs-copy fs-5'></i>
                        </a>

                        <a class="btn-add-category" href="{{ route('backend.user-management.edit', $role->id) }}">
                            Edit<i class=" ri-edit-fill fs-5"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Container -->
        <div class="container-fluid p-0">
            <div class="add-product-section">
                <h2 class="section-title">Role Information</h2>

                <div class="row">
                    <div class="col-lg-4">
                        <label>Role Name</label>
                        <input type="text" value="{{ $role->name }}" disabled />
                    </div>

                    <div class="col-lg-4">
                        <label>Remarks</label>
                        <input type="text" value="{{ $role->remarks ?? 'N/A' }}" disabled />
                    </div>

                    <div class="col-lg-4">
                        <label class="form-label">Status</label>
                        <div>
                            <span class="badge {{ $role->status == 1 ? 'bg-success' : 'bg-danger' }}">
                                {{ $role->status == 1 ? 'Active' : 'Inactive' }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="container-fluid product-table-sec user-management-page">
            <div class="content-wrapper">
                <div class="filter-section">
                    <div class="col">
                        <div class="page-title">
                            <a href="javascript:void(0);">Permissions</a>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <div class="table-responsive table-card">
                        <table class="table align-middle mb-0 orders-table-container">
                            <thead class="custom-table-header">
                                <tr>
                                    <th scope="col">Modules</th>
                                    <th scope="col">Permissions</th>
                                </tr>
                            </thead>
                            <tbody id="categoryList">
                                @foreach ($permissions as $page => $group)
                                    <tr>
                                        <td class="text-capitalize">{{ str_replace('_', ' ', $page) }}</td>
                                        <td>
                                            <div class="d-flex flex-wrap gap-3">
                                                @foreach ($group as $permission)
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" disabled
                                                            @if ($role->permissions->contains('id', $permission->id)) checked @endif>
                                                        <label class="form-check-label">
                                                            {{ $permission->name }}
                                                        </label>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <!-- Action Buttons -->
        <div class="action-buttons py-4 text-end">
            <a href="{{ route('backend.user-management.index') }}" class="btn btn-secondary">Back to List</a>
        </div>

    </section>

    <div class="modal fade remove-role-name forgot-popup-screen" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content rounded-4">
                <div class="modal-header">
                    <div class="modal-icon-box">
                        <i class="bx bxs-trash"></i>
                    </div>
                    <h5>Delete Role?</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body inquiry-preview-modal p-4">
                    <div class="row form-row edit-category">
                        <div class="col-lg-12 col-md-12">
                            <p>Are you sure you want to delete <strong>{{ $role->name }}</strong>? This role will be
                                permanently removed. This action cannot be undone. If any users are assigned to this role,
                                you must reassign them before deleting.</p>
                        </div>
                    </div>

                    <div class="hstack gap-2 w-100 mt-4 justify-content-end">
                        <button type="button" data-bs-dismiss="modal" class="btn cancel-btn">Cancel</button>
                        <form action="{{ route('backend.user-management.destroy', $role->id) }}" method="POST">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn delete-btn">Delete</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('template.layouts.error-modal')
@endsection

@section('scripts')
@endsection