@extends('layout')


@push('styles')
    <style>
        .delete-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            justify-content: center;
            align-items: center;
            animation: fadeIn 0.3s ease;
            z-index: 2000;
        }

        .delete-modal-content {
            background: #fff;
            padding: 25px;
            border-radius: 8px;
            text-align: center;
            width: 350px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            animation: scaleIn 0.3s ease;
        }

        .delete-modal-actions {
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
        }

        .btn-cancel,
        .btn-delete {
            padding: 8px 18px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        .btn-cancel {
            background: #ccc;
        }

        .btn-delete {
            background: #e63946;
            color: #fff;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes scaleIn {
            from {
                transform: scale(0.9);
                opacity: 0;
            }

            to {
                transform: scale(1);
                opacity: 1;
            }
        }
    </style>
@endpush



@section('content')
    @if (session('success'))
        <div id="customSuccessModal"
            style="display:flex; position:fixed; top:0; left:0; width:100%; height:100%;
                background:rgba(0,0,0,0.4); justify-content:center; align-items:center;
                z-index:9999; opacity:0; transition:opacity 0.4s ease;">
            <div id="popupContent"
                style="background:#fff; padding:25px; border-radius:12px; width:380px;
                    text-align:center; box-shadow:0 5px 25px rgba(0,0,0,0.4);
                    position:relative; transform:scale(0.7); transition:transform 0.4s ease;">
                <span onclick="closePopup()"
                    style="position:absolute; top:10px; right:15px; font-size:20px;
                         cursor:pointer; font-weight:bold;">&times;</span>
                <h3 style="margin-bottom:10px; color:#2ecc71; font-size:22px;">Success!</h3>
                <p style="margin:0; font-size:16px; color:#333;">{{ session('success') }}</p>
            </div>
        </div>

        <script>
            function openPopup() {
                let modal = document.getElementById('customSuccessModal');
                let content = document.getElementById('popupContent');
                modal.style.opacity = '1';
                content.style.transform = 'scale(1)';
            }

            function closePopup() {
                let modal = document.getElementById('customSuccessModal');
                let content = document.getElementById('popupContent');
                modal.style.opacity = '0';
                content.style.transform = 'scale(0.7)';
                setTimeout(() => {
                    modal.style.display = 'none';
                }, 400);
            }

            window.onload = function() {
                setTimeout(openPopup, 100); // Smooth open
            };
        </script>
    @endif


    <div class="dashboard_main-content">
        <div class="dashboard_main-header">
            <div class="dashboard_main-header_info">
                <h1 class="dashboard_main-title">All Roles</h1>
                <ul class="dashboard_main-breadcrumb">
                    <li><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li><a href="{{ route('roles.index') }}">Roles</a></li>
                </ul>
            </div>
            <div class="dashboard_main-actions">
                <a href="{{ route('roles.create') }}" class="dashboard_main-btn">Add New Role</a>
            </div>
        </div>

        <div class="dashboard_main-body">
            <div class="dashboard_main-card">
                <div class="table-header">
                    <h2 class="table-title">
                        Roles & Permission Settings
                        <p>
                            Manage user access levels and system
                            permissions.
                        </p>
                    </h2>
                </div>

                {{-- Filters --}}
                <div class="table-top_filters"
                    style="margin:10px; display:flex; flex-wrap:wrap; gap:0.75rem; align-items:center; padding: 0 1rem 1rem;">

                    <form id="filtersForm" action="{{ route('roles.index') }}" method="GET"
                        style="display:flex; flex-wrap:wrap; gap:0.75rem; align-items:center; width:100%;">

                        {{-- Search --}}
                        <input type="search" name="q" id="searchInput" class="table-search_input"
                            placeholder="Search by Role or Permission" value="{{ request('q') }}"
                            style="padding:0.5rem 0.75rem; padding-left:2.5rem; flex:1 1 220px; min-width:200px;" />

                        {{-- Sort --}}
                        <select name="sort" id="sortSelect" class="table-sort_select"
                            onchange="document.getElementById('filtersForm').submit()"
                            style="padding:0.5rem; flex:1 1 120px; min-width:120px;">
                            <option value="">Sort By</option>
                            <option value="id" {{ request('sort') === 'id' ? 'selected' : '' }}>ID</option>
                            <option value="name" {{ request('sort') === 'name' ? 'selected' : '' }}>Role Name</option>
                            <option value="created_at" {{ request('sort') === 'created_at' ? 'selected' : '' }}>Created Date
                            </option>
                        </select>

                        {{-- Direction --}}
                        <select name="direction" id="directionSelect" class="table-sort_select"
                            onchange="document.getElementById('filtersForm').submit()"
                            style="padding:0.5rem; flex:1 1 100px; min-width:100px;">
                            <option value="desc" {{ request('direction', 'desc') === 'desc' ? 'selected' : '' }}>Desc
                            </option>
                            <option value="asc" {{ request('direction') === 'asc' ? 'selected' : '' }}>Asc</option>
                        </select>

                        {{-- Date --}}
                        <input type="date" name="date" id="dateFilter" class="table-date_input"
                            value="{{ request('date') }}" onchange="document.getElementById('filtersForm').submit()"
                            style="padding:0.35rem; flex:1 1 140px; min-width:140px;" />

                        <div style="display:flex; gap:0.5rem; flex:0 0 auto;">
                            <button type="submit" class="dashboard_main-btn">Apply</button>
                            <a href="{{ route('roles.index') }}" class="dashboard_main-btn"
                                style="background:#eee; color:#333; text-decoration:none; padding:0.45rem 0.75rem;">Reset</a>
                        </div>
                    </form>
                </div>

                {{-- Table --}}
                <div class="table-body">
                    <div class="table-content">
                        <div class="table-responsive">
                            <table class="table" id="dashboardTable" style="width:100%; border-collapse:collapse;">
                                <thead>
                                    <tr>
                                        <th style="width:40px;"><label class="table-checkbox"><input
                                                    type="checkbox" /></label></th>
                                        <th>Role Name</th>
                                        <th>Permission</th>
                                        <th>Created Date</th>
                                        <th>Assign User</th>
                                        <th>Status</th>
                                        <th style="width:80px;"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse($roles as $role)
                                        <tr>
                                            <td><label class="table-checkbox"><input type="checkbox" /></label></td>

                                            <td onclick="window.location='{{ route('roles.show', $role->id) }}'"
                                                style="cursor:pointer;">
                                                <div class="table-vendor">
                                                    <span class="icon">
                                                        <img loading="lazy"
                                                            src="{{ asset('assets/images/icons/user.svg') }}"
                                                            alt="icon" class="svg" />
                                                    </span>
                                                    <p class="text">
                                                        {{ ucfirst($role->name) }}
                                                        <span class="id">ID-{{ $role->id }}</span>
                                                    </p>
                                                </div>
                                            </td>






                                            <td class="permissions-cell"
                                                data-role-permissions='@json($role->permissions->groupBy(fn($perm) => explode('.', $perm->name)[0])->map(fn($group) => $group->pluck('name')))'>

                                                @if ($role->permissions->count())
                                                    @php
                                                        $groupedPermissions = $role->permissions->groupBy(
                                                            fn($perm) => explode('.', $perm->name)[0],
                                                        );
                                                    @endphp

                                                    <div class="permission-badges">
                                                        @foreach ($groupedPermissions->take(3) as $module => $perms)
                                                            <span class="table-status active_status permission-badge"
                                                                data-module="{{ $module }}">
                                                                {{ ucfirst($module) }}
                                                            </span>
                                                        @endforeach

                                                        @if ($groupedPermissions->count() > 3)
                                                            <span
                                                                class="table-status draft">+{{ $groupedPermissions->count() - 3 }}
                                                                more</span>
                                                        @endif
                                                    </div>
                                                @else
                                                    <span class="table-status inactive">No Permissions</span>
                                                @endif

                                                {{-- Popup modal --}}
                                                <div class="permissions-popup hidden" id="permissionsPopup">
                                                    <div class="popup-content">
                                                        <div class="popup-header">
                                                            <h3 id="popupTitle"></h3>
                                                            <button id="closePopup" title="Close">&times;</button>
                                                        </div>
                                                        <ul id="popupList"></ul>
                                                    </div>
                                                </div>
                                            </td>
                                            <style>
                                                .permissions-cell {
                                                    position: relative;
                                                }

                                                /* ✅ Arrange badges side by side neatly */
                                                .permission-badges {
                                                    display: flex;
                                                    flex-wrap: wrap;
                                                    gap: 6px;
                                                }

                                                .table-status {
                                                    display: inline-block;
                                                    padding: 5px 10px;
                                                    border-radius: 12px;
                                                    font-size: 13px;
                                                    cursor: pointer;
                                                    transition: all 0.2s ease;
                                                    white-space: nowrap;
                                                }

                                                .active_status {
                                                    background-color: #e3f2fd;
                                                    color: #0d47a1;
                                                    border: 1px solid #90caf9;
                                                }

                                                .active_status:hover {
                                                    background-color: #bbdefb;
                                                    transform: scale(1.05);
                                                }

                                                .draft {
                                                    background-color: #fff3e0;
                                                    color: #e65100;
                                                    border: 1px solid #ffcc80;
                                                }

                                                .inactive {
                                                    background-color: #f5f5f5;
                                                    color: #9e9e9e;
                                                    border: 1px solid #e0e0e0;
                                                }

                                                /* ✅ Popup styling */
                                                .permissions-popup {
                                                    position: fixed;
                                                    inset: 0;
                                                    background-color: rgba(0, 0, 0, 0.5);
                                                    display: flex;
                                                    align-items: center;
                                                    justify-content: center;
                                                    z-index: 9999;
                                                    animation: fadeIn 0.2s ease-in-out;
                                                }

                                                .permissions-popup.hidden {
                                                    display: none;
                                                }

                                                .popup-content {
                                                    background: #fff;
                                                    padding: 20px;
                                                    border-radius: 16px;
                                                    width: 90%;
                                                    max-width: 420px;
                                                    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
                                                    animation: slideUp 0.25s ease-out;
                                                }

                                                .popup-header {
                                                    display: flex;
                                                    align-items: center;
                                                    justify-content: space-between;
                                                    margin-bottom: 15px;
                                                    border-bottom: 1px solid #eee;
                                                    padding-bottom: 8px;
                                                }

                                                .popup-header h3 {
                                                    font-size: 18px;
                                                    color: #0d47a1;
                                                    margin: 0;
                                                }

                                                #closePopup {
                                                    background: none;
                                                    border: none;
                                                    font-size: 22px;
                                                    color: #999;
                                                    cursor: pointer;
                                                    transition: color 0.2s;
                                                }

                                                #closePopup:hover {
                                                    color: #0d47a1;
                                                }

                                                .popup-content ul {
                                                    list-style: none;
                                                    padding: 0;
                                                    margin: 0;
                                                }

                                                .popup-content li {
                                                    padding: 8px 0;
                                                    border-bottom: 1px solid #f0f0f0;
                                                    font-size: 14px;
                                                    text-transform: capitalize;
                                                    color: #333;
                                                }

                                                .popup-content li:last-child {
                                                    border-bottom: none;
                                                }

                                                /* ✅ Animations */
                                                @keyframes fadeIn {
                                                    from {
                                                        opacity: 0;
                                                    }

                                                    to {
                                                        opacity: 1;
                                                    }
                                                }

                                                @keyframes slideUp {
                                                    from {
                                                        transform: translateY(20px);
                                                        opacity: 0;
                                                    }

                                                    to {
                                                        transform: translateY(0);
                                                        opacity: 1;
                                                    }
                                                }

                                                /* ✅ Responsive fix */
                                                @media (max-width: 600px) {
                                                    .popup-content {
                                                        width: 95%;
                                                        padding: 15px;
                                                    }

                                                    .table-status {
                                                        font-size: 12px;
                                                        padding: 4px 8px;
                                                    }
                                                }
                                            </style>

                                            <script>
                                                document.addEventListener('DOMContentLoaded', function() {
                                                    const popup = document.getElementById('permissionsPopup');
                                                    const popupTitle = document.getElementById('popupTitle');
                                                    const popupList = document.getElementById('popupList');
                                                    const closeBtn = document.getElementById('closePopup');

                                                    document.querySelectorAll('.permissions-cell').forEach(cell => {
                                                        const permissionsData = JSON.parse(cell.dataset.rolePermissions);

                                                        cell.querySelectorAll('.permission-badge').forEach(badge => {
                                                            badge.addEventListener('click', function() {
                                                                const module = this.dataset.module;
                                                                const modulePermissions = permissionsData[module] || [];

                                                                popupTitle.textContent =
                                                                    `${module.charAt(0).toUpperCase() + module.slice(1)} Permissions`;
                                                                popupList.innerHTML = modulePermissions
                                                                    .map(name => {
                                                                        const parts = name.split('.');
                                                                        const action = parts[1] ?? name;
                                                                        return `<li>${action}</li>`;
                                                                    })
                                                                    .join('');

                                                                popup.classList.remove('hidden');
                                                            });
                                                        });
                                                    });

                                                    closeBtn.addEventListener('click', () => popup.classList.add('hidden'));
                                                    popup.addEventListener('click', e => {
                                                        if (e.target === popup) popup.classList.add('hidden');
                                                    });
                                                });
                                            </script>









                                            <td>{{ $role->created_at->format('d M, Y') }}</td>

                                            <td>{{ $role->users_count }}</td> {{-- 👈 Here --}}


                                            <td>
                                                <span class="table-status active_status">{{ $role->status }}</span>
                                            </td>

                                            <td>
                                                <div class="table-item_actions" style="position: relative;">
                                                    <button type="button" class="table-item_btn action-toggle"
                                                        style="background:none; border:none; cursor:pointer;">
                                                        <img loading="lazy"
                                                            src="{{ asset('assets/images/icons/action.svg') }}"
                                                            alt="actions" class="svg" />
                                                    </button>

                                                    <div class="action-menu">
                                                        <a href="{{ route('roles.edit', $role->id) }}">
                                                            <i class="icon"><img
                                                                    src="{{ asset('assets/images/icons/edit.svg') }}"
                                                                    alt="icon" class="svg" /></i>
                                                            Edit
                                                        </a>
                                                        <form action="{{ route('roles.destroy', $role->id) }}"
                                                            method="POST"
                                                            onsubmit="event.preventDefault(); openDeleteModal(this);">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button type="submit">
                                                                <i class="icon"><img
                                                                        src="{{ asset('assets/images/icons/trash-alt.svg') }}"
                                                                        alt="icon" class="svg" /></i>
                                                                Delete
                                                            </button>
                                                        </form>
                                                    </div>

                                                    <div id="deleteModal" class="delete-modal">
                                                        <div class="delete-modal-content">
                                                            <h3>Are you sure?</h3>
                                                            <p>This action cannot be undone.</p>
                                                            <div class="delete-modal-actions">
                                                                <button class="btn-cancel"
                                                                    onclick="closeDeleteModal()">Cancel</button>
                                                                <button class="btn-delete"
                                                                    onclick="confirmDelete()">Delete</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td colspan="8" style="text-align:center; padding:2rem;">No roles found.
                                            </td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    {{-- Pagination --}}
                    <div class="table-navigations">
                        <form method="GET" action="{{ route('roles.index') }}">
                            @foreach (request()->except('per_page') as $key => $value)
                                <input type="hidden" name="{{ $key }}" value="{{ $value }}">
                            @endforeach
                            <select name="per_page" id="itemsCountSelect" class="table-count_select"
                                onchange="this.form.submit()">
                                <option value="10" {{ $perPage == 10 ? 'selected' : '' }}>10 per page</option>
                                <option value="20" {{ $perPage == 20 ? 'selected' : '' }}>20 per page</option>
                                <option value="30" {{ $perPage == 30 ? 'selected' : '' }}>30 per page</option>
                                <option value="50" {{ $perPage == 50 ? 'selected' : '' }}>50 per page</option>
                            </select>
                        </form>

                        <div class="table-paginations">
                            <p class="table-pagination">
                                Page <span>{{ $roles->currentPage() }}</span> of <span>{{ $roles->lastPage() }}</span>
                            </p>
                            <div class="table-arrows">
                                @if ($roles->onFirstPage())
                                    <button class="table-navigation disabled">
                                        <img src="{{ asset('assets/images/icons/angle_left.svg') }}" alt="icon"
                                            class="svg" />
                                    </button>
                                @else
                                    <a href="{{ $roles->previousPageUrl() }}" class="table-navigation">
                                        <img src="{{ asset('assets/images/icons/angle_left.svg') }}" alt="icon"
                                            class="svg" />
                                    </a>
                                @endif

                                @if ($roles->currentPage() == $roles->lastPage())
                                    <button class="table-navigation disabled">
                                        <img src="{{ asset('assets/images/icons/angle_right.svg') }}" alt="icon"
                                            class="svg" />
                                    </button>
                                @else
                                    <a href="{{ $roles->nextPageUrl() }}" class="table-navigation">
                                        <img src="{{ asset('assets/images/icons/angle_right.svg') }}" alt="icon"
                                            class="svg" />
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>


    {{-- Scripts --}}
    <script>
        document.getElementById('searchInput')?.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
                e.preventDefault();
                document.getElementById('filtersForm').submit();
            }
        });
    </script>

    <script>
        document.addEventListener('click', function(e) {
            const toggle = e.target.closest('.action-toggle');
            const clickedFlyout = e.target.closest('.action-flyout') || e.target.closest('.action-menu');
            if (!toggle && clickedFlyout) return;
            if (!toggle) {
                document.querySelectorAll('.action-flyout').forEach(f => f.remove());
                return;
            }
            const existing = document.querySelectorAll('.action-flyout');
            existing.forEach(f => f.remove());
            const originalMenu = toggle.parentElement.querySelector('.action-menu');
            if (!originalMenu) return;
            const flyout = originalMenu.cloneNode(true);
            flyout.classList.add('action-flyout');
            flyout.style.display = 'block';
            flyout.style.position = 'absolute';
            document.body.appendChild(flyout);

            function place() {
                const rect = toggle.getBoundingClientRect();
                const fw = flyout.offsetWidth;
                const fh = flyout.offsetHeight;
                let top = rect.bottom + window.scrollY + 6;
                let left = rect.right + window.scrollX - fw;
                if (top + fh > window.scrollY + window.innerHeight) {
                    top = rect.top + window.scrollY - fh - 6;
                }
                if (left < window.scrollX + 6) {
                    left = rect.left + window.scrollX;
                }
                flyout.style.top = top + 'px';
                flyout.style.left = left + 'px';
            }
            setTimeout(place, 0);
            const removeHandlers = () => {
                if (flyout && flyout.parentElement) flyout.remove();
                window.removeEventListener('resize', removeHandlers);
                window.removeEventListener('scroll', removeHandlers, true);
            };
            window.addEventListener('resize', removeHandlers);
            window.addEventListener('scroll', removeHandlers, true);
        });
    </script>

    <script>
        let deleteForm = null;

        function openDeleteModal(form) {
            deleteForm = form;
            document.getElementById('deleteModal').style.display = 'flex';
        }

        function closeDeleteModal() {
            document.getElementById('deleteModal').style.display = 'none';
        }

        function confirmDelete() {
            if (deleteForm) deleteForm.submit();
        }
    </script>
@endsection