@extends('user.layouts.app', ['title' => 'Available Roles'])

@push('head')
    <style>
        .available-roles-tag {
            border: 1px solid rgba(16, 185, 129, 0.18);
            background:
                radial-gradient(circle at top right, rgba(16, 185, 129, 0.16), transparent 34%),
                linear-gradient(135deg, #f2fffb 0%, #ddf7ec 100%);
            color: #0f766e !important;
            max-width: 100%;
            white-space: normal;
            word-break: break-word;
            box-shadow: 0 12px 24px rgba(16, 185, 129, 0.08);
        }

        .available-roles-tag span {
            min-width: 0;
        }

        .available-roles-action-btn {
            border-color: #0f766e;
            background: linear-gradient(135deg, #0f766e 0%, #0f9a8a 100%);
            color: #f8fffe;
            box-shadow: 0 14px 28px rgba(15, 118, 110, 0.18);
        }

        .available-roles-action-btn:hover,
        .available-roles-action-btn:focus {
            border-color: #0d5f59;
            background: linear-gradient(135deg, #0d5f59 0%, #0f766e 100%);
            color: #f8fffe;
        }

        .mobile-table-list {
            padding: 1rem;
        }

        .mobile-table-card {
            min-width: 0;
            overflow: hidden;
            border: 1px solid rgba(148, 163, 184, 0.14);
            border-radius: 1.25rem;
            background: var(--bs-body-bg);
            box-shadow: 0 12px 26px rgba(15, 23, 42, 0.06);
        }

        .mobile-table-card + .mobile-table-card {
            margin-top: 1rem;
        }

        .mobile-table-card .d-flex > *:first-child {
            min-width: 0;
        }

        .mobile-table-card .fw-bold,
        .mobile-table-card .small,
        .mobile-table-card div,
        .mobile-table-card span,
        .mobile-table-card a,
        .mobile-table-card button {
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        @media (max-width: 767.98px) {
            .available-roles-action-btn {
                padding: 0.6rem 1rem;
                font-size: 0.95rem;
            }
        }

        @media (max-width: 575.98px) {
            .available-roles-tag {
                display: flex;
                align-items: flex-start;
                width: 100%;
                border-radius: 1rem;
            }
        }

        html[data-theme="dark"] .available-roles-tag {
            border-color: rgba(45, 212, 191, 0.24);
            background:
                radial-gradient(circle at top right, rgba(45, 212, 191, 0.16), transparent 34%),
                linear-gradient(135deg, rgba(15, 118, 110, 0.34) 0%, rgba(17, 94, 89, 0.28) 100%);
            color: #ccfbf1 !important;
            box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);
        }

        html[data-theme="dark"] .available-roles-action-btn {
            border-color: rgba(45, 212, 191, 0.24);
            background: linear-gradient(135deg, #115e59 0%, #0f766e 100%);
            box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22);
        }

        html[data-theme="dark"] .available-roles-action-btn:hover,
        html[data-theme="dark"] .available-roles-action-btn:focus {
            border-color: rgba(94, 234, 212, 0.3);
            background: linear-gradient(135deg, #0f766e 0%, #14b8a6 100%);
            color: #f8fffe;
        }
    </style>
@endpush

@section('content')
    @php
        $permissionCount = $accessibilities->count();
    @endphp

    <div class="d-grid gap-3">
        <section class="card admin-card border-0">
            <div class="card-body p-4 p-lg-4">
                <div class="d-inline-flex align-items-center gap-2 px-3 py-2 rounded-pill bg-primary-subtle text-primary small fw-bold text-uppercase available-roles-tag">
                    <i class="bi bi-person-gear"></i>
                    <span>Roles And Permission / Available Roles</span>
                </div>

                <div class="mt-3 d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3">
                    <div>
                        <h1 class="h3 fw-bold mb-2">Available Roles</h1>
                        <p class="text-muted mb-0">Manage visible roles, review coverage quickly, and open the add role popup from this same screen.</p>
                    </div>
                    <button type="button" class="btn btn-primary btn-lg text-nowrap align-self-start align-self-lg-auto available-roles-action-btn" data-bs-toggle="modal" data-bs-target="#addRoleModal">
                        <i class="bi bi-plus-circle me-2"></i>Add Role
                    </button>
                </div>

                <div class="row g-3 mt-1">
                    <div class="col-12 col-md-6 col-xl-4">
                        <div class="rounded-4 p-3 bg-body-tertiary h-100">
                            <div class="small text-muted mb-1 text-nowrap">Total Roles</div>
                            <div class="fs-4 fw-bold">{{ $roles->count() }}</div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 col-xl-4">
                        <div class="rounded-4 p-3 bg-body-tertiary h-100">
                            <div class="small text-muted mb-1 text-nowrap">Active Roles</div>
                            <div class="fs-4 fw-bold">{{ $activeRoles }}</div>
                        </div>
                    </div>
                    <div class="col-12 col-md-6 col-xl-4">
                        <div class="rounded-4 p-3 bg-body-tertiary h-100">
                            <div class="small text-muted mb-1 text-nowrap">Access Items</div>
                            <div class="fs-4 fw-bold">{{ $permissionCount }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="card admin-card border-0">
            <div class="card-header bg-primary text-white border-0 py-3">
                <div class="fw-bold text-nowrap">Roles Table</div>
                <div class="small text-white-50">{{ $inactiveRoles }} inactive roles visible in this sample module</div>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive d-none d-md-block">
                    <table class="table align-middle mb-0 text-nowrap">
                        <thead class="table-light">
                            <tr>
                                <th class="px-4 py-3 small text-muted text-uppercase">SL.</th>
                                <th class="px-4 py-3 small text-muted text-uppercase">Name</th>
                                <th class="px-4 py-3 small text-muted text-uppercase">Status</th>
                                <th class="px-4 py-3 small text-muted text-uppercase text-end">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($roles as $index => $role)
                                <tr>
                                    <td class="px-4 py-3">{{ $index + 1 }}</td>
                                    <td class="px-4 py-3">
                                        <div class="fw-bold">{{ $role['name'] }}</div>
                                        <div class="small text-muted">{{ count($role['permissions']) }} access items enabled</div>
                                    </td>
                                    <td class="px-4 py-3">
                                        <span class="badge text-bg-{{ $role['status'] ? 'success' : 'secondary' }}">{{ $role['status'] ? 'ON' : 'OFF' }}</span>
                                    </td>
                                    <td class="px-4 py-3 text-end">
                                        <div class="d-inline-flex flex-column flex-sm-row gap-2">
                                            <button type="button" class="btn btn-outline-secondary btn-sm rounded-pill px-3 text-nowrap">View Access</button>
                                            <button type="button" class="btn btn-dark btn-sm rounded-pill px-3 text-nowrap">Edit Role</button>
                                        </div>
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="d-grid d-md-none mobile-table-list">
                    @foreach ($roles as $index => $role)
                        <article class="mobile-table-card p-4">
                            <div class="d-flex align-items-start justify-content-between gap-3 mb-3">
                                <div>
                                    <div class="small text-muted text-uppercase">SL {{ $index + 1 }}</div>
                                    <div class="fw-bold mt-1">{{ $role['name'] }}</div>
                                    <div class="small text-muted">{{ count($role['permissions']) }} access items enabled</div>
                                </div>
                                <span class="badge text-bg-{{ $role['status'] ? 'success' : 'secondary' }}">{{ $role['status'] ? 'ON' : 'OFF' }}</span>
                            </div>
                            <div class="d-grid gap-2">
                                <button type="button" class="btn btn-outline-secondary btn-sm rounded-pill">View Access</button>
                                <button type="button" class="btn btn-dark btn-sm rounded-pill">Edit Role</button>
                            </div>
                        </article>
                    @endforeach
                </div>
            </div>
        </section>
    </div>

    <div class="modal fade" id="addRoleModal" tabindex="-1" aria-labelledby="addRoleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable modal-fullscreen-sm-down">
            <div class="modal-content border-0 rounded-4 overflow-hidden">
                <div class="modal-header bg-primary text-white border-0">
                    <h2 class="modal-title fs-4 fw-bold" id="addRoleModalLabel">Add Roles</h2>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body p-4">
                    <form>
                        <div class="row g-3">
                            <div class="col-12 col-md-7">
                                <label class="form-label small text-muted">Name</label>
                                <input type="text" class="form-control form-control-lg rounded-pill" placeholder="Name">
                            </div>
                            <div class="col-12 col-md-5">
                                <label class="form-label small text-muted">Status</label>
                                <div class="btn-group w-100 shadow-sm d-none d-sm-flex" role="group" aria-label="Status">
                                    <input type="radio" class="btn-check" name="role_status" id="role-status-off" autocomplete="off">
                                    <label class="btn btn-outline-secondary rounded-start-pill fw-semibold" for="role-status-off">OFF</label>

                                    <input type="radio" class="btn-check" name="role_status" id="role-status-on" autocomplete="off" checked>
                                    <label class="btn btn-primary rounded-end-pill fw-semibold" for="role-status-on">ON</label>
                                </div>
                                <div class="d-grid gap-2 d-sm-none">
                                    <input type="radio" class="btn-check" name="role_status_mobile" id="role-status-off-mobile" autocomplete="off">
                                    <label class="btn btn-outline-secondary fw-semibold" for="role-status-off-mobile">OFF</label>

                                    <input type="radio" class="btn-check" name="role_status_mobile" id="role-status-on-mobile" autocomplete="off" checked>
                                    <label class="btn btn-primary fw-semibold" for="role-status-on-mobile">ON</label>
                                </div>
                            </div>
                        </div>

                        <div class="mt-4 rounded-4 border overflow-hidden">
                            <div class="bg-body-tertiary px-3 py-3 fw-bold text-secondary">Accessibility</div>
                            <div class="p-3 p-lg-4">
                                <div class="row g-3">
                                    @foreach ($accessibilities as $access)
                                        <div class="col-12 col-md-6 col-lg-4">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value="{{ $access }}" id="access-{{ \Illuminate\Support\Str::slug($access) }}">
                                            <label class="form-check-label text-break" for="access-{{ \Illuminate\Support\Str::slug($access) }}">
                                                {{ $access }}
                                            </label>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>

                        <div class="d-flex justify-content-end gap-2 mt-4 flex-column flex-sm-row">
                            <button type="button" class="btn btn-dark rounded-pill px-4 text-nowrap" data-bs-dismiss="modal">Close</button>
                            <button type="button" class="btn btn-secondary rounded-pill px-4 text-nowrap">Save</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection