<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>Super Admin - User Management | WEPESI HOTEL MANAGEMENT SOULUTION</title>
    
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 6 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- SweetAlert2 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
    
    <style>
        :root {
            --primary: #059669;
            --primary-dark: #047857;
            --primary-light: #10b981;
            --secondary: #64748b;
            --success: #10b981;
            --info: #3b82f6;
            --warning: #f59e0b;
            --danger: #ef4444;
            --purple: #8b5cf6;
            --orange: #f97316;
            --gray-50: #f8fafc;
            --gray-100: #f1f5f9;
            --gray-200: #e2e8f0;
            --gray-300: #cbd5e1;
            --gray-600: #475569;
            --gray-700: #334155;
            --gray-800: #1e293b;
            --gray-900: #0f172a;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background-color: var(--gray-50);
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            color: var(--gray-800);
        }
        
        /* Top Navigation */
        .top-nav {
            background: white;
            box-shadow: 0 4px 20px rgba(5, 150, 105, 0.1);
            padding: 1rem 2rem;
            position: sticky;
            top: 0;
            z-index: 1000;
            border-bottom: 3px solid var(--primary);
        }
        
        .nav-brand {
            font-size: 1.5rem;
            font-weight: 800;
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: flex;
            align-items: center;
            gap: 0.75rem;
        }
        
        .nav-brand i {
            font-size: 2rem;
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .back-to-dashboard {
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            color: white;
            padding: 0.6rem 1.5rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            transition: all 0.3s;
            border: none;
            box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
        }
        
        .back-to-dashboard:hover {
            background: linear-gradient(135deg, var(--primary-dark), var(--primary));
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(5, 150, 105, 0.4);
            color: white;
        }
        
        .logout-btn {
            background: none;
            border: none;
            color: var(--gray-600);
            font-size: 0.95rem;
            padding: 0.6rem 1.2rem;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            border-radius: 50px;
        }
        
        .logout-btn:hover {
            background: #fee2e2;
            color: var(--danger);
        }
        
        /* Main Content */
        .main-content {
            padding: 2rem;
            max-width: 1600px;
          
             margin-left:220px;
            margin-right:220px;
        }
        
        /* Page Header */
        .page-header {
            margin-bottom: 2rem;
            padding-bottom: 1.5rem;
            border-bottom: 3px solid var(--primary-light);
            background: white;
            border-radius: 20px;
            padding: 1.5rem 2rem;
            box-shadow: 0 4px 12px rgba(5, 150, 105, 0.08);
        }
        
        .page-title {
            color: var(--gray-800);
            font-weight: 800;
            font-size: 2.2rem;
            margin: 0;
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        
        .page-title i {
            color: var(--primary);
            font-size: 2.5rem;
        }
        
        .breadcrumb {
            background: transparent;
            padding: 0;
            margin: 0.5rem 0 0 0;
        }
        
        .breadcrumb-item a {
            color: var(--primary);
            text-decoration: none;
            font-weight: 500;
        }
        
        .breadcrumb-item a:hover {
            color: var(--primary-dark);
            text-decoration: underline;
        }
        
        .breadcrumb-item.active {
            color: var(--gray-600);
        }
        
        /* Action Buttons */
        .action-buttons {
            display: flex;
            gap: 1rem;
        }
        
        .btn-primary-custom {
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            color: white;
            border: none;
            padding: 0.75rem 1.8rem;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            transition: all 0.3s;
            box-shadow: 0 4px 12px rgba(5, 150, 105, 0.2);
        }
        
        .btn-primary-custom:hover {
            background: linear-gradient(135deg, var(--primary-dark), var(--primary));
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(5, 150, 105, 0.3);
            color: white;
        }
        
        .btn-outline-custom {
            background: white;
            border: 2px solid var(--primary-light);
            color: var(--primary);
            padding: 0.75rem 1.8rem;
            border-radius: 50px;
            font-weight: 600;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
            gap: 0.75rem;
            transition: all 0.3s;
        }
        
        .btn-outline-custom:hover {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
            transform: translateY(-2px);
        }
        
        /* Quick Actions */
        .quick-actions {
            background: white;
            border-radius: 20px;
            padding: 1.5rem;
            margin-bottom: 2rem;
            border: 1px solid var(--gray-200);
            display: flex;
            gap: 0.75rem;
            flex-wrap: wrap;
            box-shadow: 0 4px 12px rgba(5, 150, 105, 0.05);
        }
        
        .quick-action-btn {
            background: var(--gray-100);
            border: 1px solid var(--gray-200);
            border-radius: 50px;
            padding: 0.6rem 1.2rem;
            color: var(--gray-700);
            font-weight: 600;
            font-size: 0.9rem;
            display: flex;
            align-items: center;
            gap: 0.6rem;
            transition: all 0.2s;
            cursor: pointer;
            text-decoration: none;
        }
        
        .quick-action-btn:hover {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
            transform: translateY(-2px);
        }
        
        .quick-action-btn.active {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* Stats Cards */
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
            margin-bottom: 2rem;
        }
        
        .stat-card {
            background: white;
            border-radius: 20px;
            padding: 1.5rem;
            border: 1px solid var(--gray-200);
            border-bottom: 4px solid;
            transition: all 0.3s;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(5, 150, 105, 0.05);
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 24px rgba(5, 150, 105, 0.15);
        }
        
        .stat-card.total { border-bottom-color: var(--primary); }
        .stat-card.super-admin { border-bottom-color: var(--purple); }
        .stat-card.director { border-bottom-color: var(--info); }
        .stat-card.manager { border-bottom-color: var(--warning); }
        
        .stat-icon {
            position: absolute;
            right: 1.5rem;
            top: 1.5rem;
            font-size: 3rem;
            opacity: 0.15;
            color: var(--primary);
        }
        
        .stat-label {
            color: var(--gray-600);
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            font-weight: 600;
            margin-bottom: 0.5rem;
        }
        
        .stat-value {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--gray-800);
            line-height: 1.2;
            margin-bottom: 0.25rem;
        }
        
        .stat-desc {
            color: var(--gray-600);
            font-size: 0.85rem;
        }
        
        /* Filter Section */
        .filter-section {
            background: white;
            border-radius: 20px;
            padding: 2rem;
            margin-bottom: 2rem;
            border: 1px solid var(--gray-200);
            box-shadow: 0 4px 12px rgba(5, 150, 105, 0.05);
        }
        
        .filter-label {
            color: var(--gray-700);
            font-weight: 600;
            font-size: 0.9rem;
            margin-bottom: 0.75rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .filter-label i {
            color: var(--primary);
        }
        
        .form-select-custom, .form-control-custom {
            border: 2px solid var(--gray-200);
            border-radius: 12px;
            padding: 0.6rem 1rem;
            font-size: 0.95rem;
            transition: all 0.2s;
        }
        
        .form-select-custom:focus, .form-control-custom:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 4px rgba(5, 150, 105, 0.1);
            outline: none;
        }
        
        /* Search Bar */
        .search-wrapper {
            background: white;
            border-radius: 20px;
            padding: 1.5rem;
            margin-bottom: 2rem;
            border: 1px solid var(--gray-200);
            box-shadow: 0 4px 12px rgba(5, 150, 105, 0.05);
        }
        
        .search-input-group {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .search-input-group .input-group-text {
            background: white;
            border: 2px solid var(--gray-200);
            border-right: none;
            border-radius: 12px 0 0 12px;
            color: var(--primary);
            padding: 0.6rem 1rem;
        }
        
        .search-input-group .form-control {
            border: 2px solid var(--gray-200);
            border-left: none;
            border-radius: 0 12px 12px 0;
            padding: 0.6rem 1rem;
            font-size: 0.95rem;
        }
        
        .search-input-group .form-control:focus {
            border-color: var(--primary);
            box-shadow: none;
        }
        
        /* Active Filters */
        .active-filters {
            background: white;
            border-radius: 12px;
            padding: 1rem 1.5rem;
            margin-bottom: 2rem;
            border: 1px solid var(--gray-200);
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 0.75rem;
        }
        
        .filter-badge {
            background: var(--primary-light);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 50px;
            font-size: 0.9rem;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .filter-badge a {
            color: white;
            opacity: 0.8;
            transition: opacity 0.2s;
        }
        
        .filter-badge a:hover {
            opacity: 1;
        }
        
        /* Enhanced Hotel Columns Grid */
        .hotels-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
            gap: 1.5rem;
            margin-top: 1.5rem;
        }
        
        .hotel-column {
            background: white;
            border-radius: 20px;
            border: 2px solid var(--gray-200);
            overflow: hidden;
            transition: all 0.3s;
            box-shadow: 0 4px 12px rgba(5, 150, 105, 0.05);
            height: fit-content;
            max-height: 750px;
            display: flex;
            flex-direction: column;
        }
        
        .hotel-column:hover {
            border-color: var(--primary-light);
            box-shadow: 0 8px 24px rgba(5, 150, 105, 0.15);
        }
        
        .hotel-column-header {
            background: linear-gradient(135deg, var(--gray-50), white);
            padding: 1.5rem;
            border-left: 6px solid var(--primary);
            border-bottom: 2px solid var(--gray-200);
            flex-shrink: 0;
        }
        
        .hotel-column-header h3 {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--gray-800);
            margin: 0;
            line-height: 1.3;
        }
        
        .hotel-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            color: var(--gray-600);
            font-size: 0.85rem;
            margin-top: 0.75rem;
        }
        
        .hotel-meta span {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .hotel-meta i {
            color: var(--primary);
            width: 16px;
        }
        
        .hotel-stats {
            display: flex;
            gap: 1rem;
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--gray-200);
        }
        
        .hotel-stat-item {
            text-align: center;
            flex: 1;
        }
        
        .hotel-stat-item .value {
            font-size: 1.2rem;
            font-weight: 800;
            color: var(--primary);
            line-height: 1.2;
        }
        
        .hotel-stat-item .label {
            font-size: 0.7rem;
            color: var(--gray-600);
            text-transform: uppercase;
        }
        
        /* Enhanced Users List with Custom Scrollbar */
        .users-list {
            max-height: 450px;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 1rem;
            scrollbar-width: thin;
            scrollbar-color: var(--primary-light) var(--gray-200);
            flex: 1;
        }
        
        .users-list::-webkit-scrollbar {
            width: 6px;
        }
        
        .users-list::-webkit-scrollbar-track {
            background: var(--gray-200);
            border-radius: 10px;
        }
        
        .users-list::-webkit-scrollbar-thumb {
            background: var(--primary-light);
            border-radius: 10px;
        }
        
        .users-list::-webkit-scrollbar-thumb:hover {
            background: var(--primary);
        }
        
        /* Add User Button */
        .add-user-btn {
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            color: white;
            border: none;
            padding: 0.6rem 1rem;
            border-radius: 50px;
            font-size: 0.85rem;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.2s;
            margin-top: 1rem;
            width: 100%;
            justify-content: center;
            cursor: pointer;
        }
        
        .add-user-btn:hover {
            background: linear-gradient(135deg, var(--primary-dark), var(--primary));
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
        }
        
        .add-user-btn i {
            font-size: 0.9rem;
        }
        
        /* User Card */
        .user-card {
            background: var(--gray-50);
            border-radius: 12px;
            padding: 1rem;
            margin-bottom: 0.75rem;
            border: 1px solid var(--gray-200);
            transition: all 0.2s;
        }
        
        .user-card:last-child {
            margin-bottom: 0;
        }
        
        .user-card:hover {
            background: white;
            border-color: var(--primary-light);
            transform: translateX(4px);
            box-shadow: 0 4px 12px rgba(5, 150, 105, 0.1);
        }
        
        .user-card-header {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            margin-bottom: 0.75rem;
        }
        
        .user-avatar-sm {
            width: 36px;
            height: 36px;
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: 600;
            font-size: 0.9rem;
            flex-shrink: 0;
        }
        
        .user-name {
            flex: 1;
        }
        
        .user-name .full-name {
            font-weight: 600;
            color: var(--gray-800);
            font-size: 0.95rem;
        }
        
        .user-name .user-id {
            font-size: 0.7rem;
            color: var(--gray-600);
        }
        
        .user-card-details {
            margin-bottom: 0.75rem;
        }
        
        .user-detail-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 0.85rem;
            color: var(--gray-600);
            margin-bottom: 0.35rem;
        }
        
        .user-detail-item i {
            color: var(--primary);
            width: 16px;
            font-size: 0.8rem;
        }
        
        .user-detail-item span {
            flex: 1;
            word-break: break-all;
        }
        
        .user-card-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 0.75rem;
            padding-top: 0.75rem;
            border-top: 1px solid var(--gray-200);
        }
        
        .role-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 50px;
            font-size: 0.7rem;
            font-weight: 600;
            display: inline-block;
        }
        
        .role-super_admin {
            background: linear-gradient(135deg, var(--purple), #7c3aed);
            color: white;
        }
        
        .role-director {
            background: linear-gradient(135deg, var(--info), #2563eb);
            color: white;
        }
        
        .role-manager {
            background: linear-gradient(135deg, var(--warning), #d97706);
            color: white;
        }
        
        .role-front_desk {
            background: linear-gradient(135deg, var(--success), #059669);
            color: white;
        }
        
        .role-housekeeping {
            background: linear-gradient(135deg, var(--danger), #dc2626);
            color: white;
        }
        
        .role-food_beverage {
            background: linear-gradient(135deg, var(--orange), #ea580c);
            color: white;
        }
        
        .role-maintenance {
            background: linear-gradient(135deg, var(--secondary), #4b5563);
            color: white;
        }
        
        .role-accountant {
            background: linear-gradient(135deg, #6b7280, #4b5563);
            color: white;
        }
        
        .status-badge {
            padding: 0.2rem 0.6rem;
            border-radius: 50px;
            font-size: 0.7rem;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 0.3rem;
        }
        
        .status-active {
            background: #d1fae5;
            color: #065f46;
        }
        
        .status-pending {
            background: #fef3c7;
            color: #92400e;
        }
        
        .action-group {
            display: flex;
            gap: 0.25rem;
        }
        
        .btn-icon {
            width: 28px;
            height: 28px;
            border-radius: 6px;
            border: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            cursor: pointer;
            background: white;
            font-size: 0.8rem;
        }
        
        .btn-icon:hover {
            transform: translateY(-2px);
        }
        
        .btn-icon-view { color: var(--info); border: 1px solid var(--info); }
        .btn-icon-edit { color: var(--success); border: 1px solid var(--success); }
        .btn-icon-key { color: var(--warning); border: 1px solid var(--warning); }
        .btn-icon-delete { color: var(--danger); border: 1px solid var(--danger); }
        
        .btn-icon-view:hover { background: var(--info); color: white; }
        .btn-icon-edit:hover { background: var(--success); color: white; }
        .btn-icon-key:hover { background: var(--warning); color: white; }
        .btn-icon-delete:hover { background: var(--danger); color: white; }
        
        /* Empty State */
        .empty-hotel {
            text-align: center;
            padding: 2.5rem 1rem;
            color: var(--gray-600);
            background: var(--gray-50);
            border-radius: 12px;
        }
        
        .empty-hotel i {
            font-size: 3rem;
            color: var(--gray-300);
            margin-bottom: 1rem;
        }
        
        .empty-hotel h5 {
            color: var(--gray-700);
            margin-bottom: 0.5rem;
        }
        
        .empty-hotel p {
            margin-bottom: 1rem;
            color: var(--gray-500);
        }
        
        /* Modal Styles */
        .modal-custom {
            border-radius: 24px;
            overflow: hidden;
            border: none;
        }
        
        .modal-header-custom {
            background: linear-gradient(135deg, var(--primary), var(--primary-light));
            color: white;
            padding: 1.5rem 2rem;
            border: none;
        }
        
        .modal-header-custom .btn-close {
            filter: brightness(0) invert(1);
        }
        
        .modal-body-custom {
            padding: 2rem;
            max-height: 70vh;
            overflow-y: auto;
        }
        
        .modal-footer-custom {
            border-top: 2px solid var(--gray-200);
            padding: 1.5rem 2rem;
        }
        
        .detail-card {
            background: var(--gray-50);
            border-radius: 16px;
            padding: 1.5rem;
            margin-bottom: 1.5rem;
        }
        
        .detail-row {
            display: flex;
            margin-bottom: 1rem;
            padding-bottom: 1rem;
            border-bottom: 1px solid var(--gray-200);
        }
        
        .detail-row:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }
        
        .detail-label {
            width: 140px;
            font-weight: 600;
            color: var(--gray-700);
        }
        
        .detail-value {
            flex: 1;
            color: var(--gray-800);
        }
        
        .detail-value .badge {
            font-size: 0.85rem;
            padding: 0.4rem 0.8rem;
        }
        
        /* Activity Timeline */
        .activity-timeline {
            max-height: 200px;
            overflow-y: auto;
            padding-right: 10px;
        }
        
        .activity-item {
            background: var(--gray-50);
            border-radius: 12px;
            padding: 1rem;
            margin-bottom: 0.75rem;
            border-left: 3px solid var(--primary);
        }
        
        .activity-item .time {
            font-size: 0.75rem;
            color: var(--gray-600);
        }
        
        .activity-item .action {
            font-weight: 600;
            color: var(--primary);
        }
        
        /* Loading Overlay */
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(255, 255, 255, 0.9);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            backdrop-filter: blur(4px);
        }
        
        .loading-spinner {
            width: 60px;
            height: 60px;
            border: 5px solid var(--gray-200);
            border-top-color: var(--primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            to { transform: rotate(360deg); }
        }
        
        /* Responsive */
        @media (max-width: 1200px) {
            .stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }
        
        @media (max-width: 768px) {
            .main-content {
                padding: 1rem;
            }
            
            .stats-grid {
                grid-template-columns: 1fr;
            }
            
            .hotels-grid {
                grid-template-columns: 1fr;
            }
            
            .detail-row {
                flex-direction: column;
            }
            
            .detail-label {
                width: 100%;
                margin-bottom: 0.25rem;
            }
        }
        /* 2026 elegance refresh */
        body {
            background:
                radial-gradient(circle at 9% 3%, rgba(16, 185, 129, 0.09), transparent 34%),
                radial-gradient(circle at 95% 8%, rgba(5, 150, 105, 0.08), transparent 31%),
                #f4f8f5;
        }

        .navbar,
        .top-nav {
            box-shadow: 0 10px 28px rgba(5, 150, 105, 0.2);
        }

        .page-header {
            background: rgba(255, 255, 255, 0.82);
            border: 1px solid rgba(5, 150, 105, 0.11);
            border-radius: 16px;
            padding: 1.1rem 1.3rem;
            backdrop-filter: blur(6px);
        }

        .card,
        .stat-card {
            border-radius: 16px !important;
            border: 1px solid rgba(5, 150, 105, 0.1) !important;
            box-shadow: 0 12px 26px rgba(5, 150, 105, 0.1) !important;
        }

        .table thead th {
            background: #ecfdf5 !important;
            color: #065f46 !important;
        }

        .btn {
            border-radius: 999px;
            font-weight: 600;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('css/admin-elegant-theme.css') }}">
</head>
<body class="super-admin-elegant">
    <!-- Loading Overlay -->
    <div class="loading-overlay" id="loadingOverlay">
        <div class="loading-spinner"></div>
    </div>

    <!-- Top Navigation -->
    <nav class="top-nav">
        <div class="d-flex justify-content-between align-items-center">
            <div class="d-flex align-items-center gap-3">
                <a href="{{ route('super.admin.dashboard') }}" class="back-to-dashboard">
                    <i class="fas fa-arrow-left"></i>
                    <span>Back to Dashboard</span>
                </a>
                
                <form method="POST" action="{{ route('logout') }}" class="m-0">
                    @csrf
                    <button type="submit" class="logout-btn">
                        <i class="fas fa-sign-out-alt"></i>
                        <span>Logout</span>
                    </button>
                </form>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <div class="main-content">
        <!-- Page Header -->
        <div class="page-header d-flex justify-content-between align-items-center">
            <div>
                <h1 class="page-title">
                    <i class="fas fa-users"></i>
                    User Management
                </h1>
                <nav aria-label="breadcrumb">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('super.admin.dashboard') }}">Dashboard</a></li>
                        <li class="breadcrumb-item active">Users</li>
                    </ol>
                </nav>
            </div>
            <div class="action-buttons">
                <button class="btn btn-primary-custom" onclick="openAddUserModal()">
                    <i class="fas fa-plus-circle"></i>
                    Add User
                </button>
                <button class="btn btn-outline-custom" onclick="openImportModal()">
                    <i class="fas fa-upload"></i>
                    Import
                </button>
                <button class="btn btn-outline-custom" onclick="exportUsers()">
                    <i class="fas fa-download"></i>
                    Export
                </button>
            </div>
        </div>

        <!-- Quick Actions -->
        <div class="quick-actions">
            <a href="{{ route('super.admin.users.index', array_merge(request()->except('role'), ['role' => 'all'])) }}" 
               class="quick-action-btn {{ !request('role') || request('role') == 'all' ? 'active' : '' }}">
                <i class="fas fa-users"></i> All Users
            </a>
            <a href="{{ route('super.admin.users.index', array_merge(request()->except('role'), ['role' => 'super_admin'])) }}" 
               class="quick-action-btn {{ request('role') == 'super_admin' ? 'active' : '' }}">
                <i class="fas fa-crown"></i> Super Admins
            </a>
            <a href="{{ route('super.admin.users.index', array_merge(request()->except('role'), ['role' => 'director'])) }}" 
               class="quick-action-btn {{ request('role') == 'director' ? 'active' : '' }}">
                <i class="fas fa-user-tie"></i> Directors
            </a>
            <a href="{{ route('super.admin.users.index', array_merge(request()->except('role'), ['role' => 'manager'])) }}" 
               class="quick-action-btn {{ request('role') == 'manager' ? 'active' : '' }}">
                <i class="fas fa-user-tie"></i> Managers
            </a>
            <a href="{{ route('super.admin.users.index', array_merge(request()->except('role'), ['role' => 'front_desk'])) }}" 
               class="quick-action-btn {{ request('role') == 'front_desk' ? 'active' : '' }}">
                <i class="fas fa-user"></i> Front Desk
            </a>
            <a href="{{ route('super.admin.users.index', array_merge(request()->except('role'), ['role' => 'housekeeping'])) }}" 
               class="quick-action-btn {{ request('role') == 'housekeeping' ? 'active' : '' }}">
                <i class="fas fa-broom"></i> Housekeeping
            </a>
            <a href="{{ route('super.admin.users.index', array_merge(request()->except('role'), ['role' => 'food_beverage'])) }}" 
               class="quick-action-btn {{ request('role') == 'food_beverage' ? 'active' : '' }}">
                <i class="fas fa-utensils"></i> F&B
            </a>
            <a href="{{ route('super.admin.users.index', array_merge(request()->except('role'), ['role' => 'maintenance'])) }}" 
               class="quick-action-btn {{ request('role') == 'maintenance' ? 'active' : '' }}">
                <i class="fas fa-wrench"></i> Maintenance
            </a>
            <a href="{{ route('super.admin.users.index', array_merge(request()->except('role'), ['role' => 'accountant'])) }}" 
               class="quick-action-btn {{ request('role') == 'accountant' ? 'active' : '' }}">
                <i class="fas fa-calculator"></i> Accountant
            </a>
            <a href="{{ route('super.admin.users.index') }}" class="quick-action-btn">
                <i class="fas fa-sync-alt"></i> Refresh
            </a>
        </div>

        <!-- Statistics -->
        <div class="stats-grid">
            <div class="stat-card total" onclick="window.location.href='{{ route('super.admin.users.index', ['role' => 'all']) }}'">
                <div class="stat-icon">
                    <i class="fas fa-users"></i>
                </div>
                <div class="stat-label">Total Users</div>
                <div class="stat-value">{{ $stats['total_users'] ?? 0 }}</div>
                <div class="stat-desc">Registered accounts</div>
            </div>
            
            <div class="stat-card super-admin" onclick="window.location.href='{{ route('super.admin.users.index', ['role' => 'super_admin']) }}'">
                <div class="stat-icon">
                    <i class="fas fa-crown"></i>
                </div>
                <div class="stat-label">Super Admins</div>
                <div class="stat-value">{{ $stats['super_admins'] ?? 0 }}</div>
                <div class="stat-desc">Full access</div>
            </div>
            
            <div class="stat-card director" onclick="window.location.href='{{ route('super.admin.users.index', ['role' => 'director']) }}'">
                <div class="stat-icon">
                    <i class="fas fa-user-tie"></i>
                </div>
                <div class="stat-label">Directors</div>
                <div class="stat-value">{{ $stats['directors'] ?? 0 }}</div>
                <div class="stat-desc">Hotel directors</div>
            </div>
            
            <div class="stat-card manager" onclick="window.location.href='{{ route('super.admin.users.index', ['role' => 'manager']) }}'">
                <div class="stat-icon">
                    <i class="fas fa-user-tie"></i>
                </div>
                <div class="stat-label">Managers</div>
                <div class="stat-value">{{ $stats['managers'] ?? 0 }}</div>
                <div class="stat-desc">Hotel managers</div>
            </div>
        </div>

        <!-- Filter Section -->
        <div class="filter-section">
            <form method="GET" action="{{ route('super.admin.users.index') }}" id="filterForm">
                <div class="row">
                    <div class="col-md-3">
                        <div class="filter-label">
                            <i class="fas fa-filter"></i>
                            Filter by Role
                        </div>
                        <select name="role" class="form-select form-select-custom" onchange="this.form.submit()">
                            <option value="all" {{ request('role', 'all') == 'all' ? 'selected' : '' }}>All Users</option>
                            <option value="super_admin" {{ request('role') == 'super_admin' ? 'selected' : '' }}>Super Admins</option>
                            <option value="director" {{ request('role') == 'director' ? 'selected' : '' }}>Directors</option>
                            <option value="manager" {{ request('role') == 'manager' ? 'selected' : '' }}>Managers</option>
                            <option value="front_desk" {{ request('role') == 'front_desk' ? 'selected' : '' }}>Front Desk</option>
                            <option value="housekeeping" {{ request('role') == 'housekeeping' ? 'selected' : '' }}>Housekeeping</option>
                            <option value="food_beverage" {{ request('role') == 'food_beverage' ? 'selected' : '' }}>Food & Beverage</option>
                            <option value="maintenance" {{ request('role') == 'maintenance' ? 'selected' : '' }}>Maintenance</option>
                            <option value="accountant" {{ request('role') == 'accountant' ? 'selected' : '' }}>Accountants</option>
                        </select>
                    </div>
                    
                    <div class="col-md-3">
                        <div class="filter-label">
                            <i class="fas fa-check-circle"></i>
                            Verification
                        </div>
                        <select name="verified" class="form-select form-select-custom" onchange="this.form.submit()">
                            <option value="all" {{ request('verified', 'all') == 'all' ? 'selected' : '' }}>All Users</option>
                            <option value="verified" {{ request('verified') == 'verified' ? 'selected' : '' }}>Verified Only</option>
                            <option value="unverified" {{ request('verified') == 'unverified' ? 'selected' : '' }}>Unverified Only</option>
                        </select>
                    </div>
                    
                    <div class="col-md-3">
                        <div class="filter-label">
                            <i class="fas fa-hotel"></i>
                            Hotel
                        </div>
                        <select name="hotel_id" class="form-select form-select-custom" onchange="this.form.submit()">
                            <option value="all">All Hotels</option>
                            @foreach($hotels ?? [] as $hotel)
                                <option value="{{ $hotel->id }}" {{ request('hotel_id') == $hotel->id ? 'selected' : '' }}>
                                    {{ $hotel->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    
                    <div class="col-md-3">
                        <div class="filter-label">
                            <i class="fas fa-sort"></i>
                            Sort By
                        </div>
                        <select name="sort" class="form-select form-select-custom" onchange="this.form.submit()">
                            <option value="newest" {{ request('sort', 'newest') == 'newest' ? 'selected' : '' }}>Newest First</option>
                            <option value="oldest" {{ request('sort') == 'oldest' ? 'selected' : '' }}>Oldest First</option>
                            <option value="name_asc" {{ request('sort') == 'name_asc' ? 'selected' : '' }}>Name (A-Z)</option>
                            <option value="name_desc" {{ request('sort') == 'name_desc' ? 'selected' : '' }}>Name (Z-A)</option>
                        </select>
                    </div>
                </div>
            </form>
        </div>

        <!-- Search Bar -->
        <div class="search-wrapper">
            <form method="GET" action="{{ route('super.admin.users.index') }}">
                <div class="search-input-group">
                    <span class="input-group-text">
                        <i class="fas fa-search"></i>
                    </span>
                    <input type="text" class="form-control" name="search" 
                           placeholder="Search by name, email, phone, or hotel..." 
                           value="{{ request('search') }}">
                    <button class="btn btn-primary-custom" type="submit">
                        <i class="fas fa-search"></i> Search
                    </button>
                    @if(request('search'))
                        <a href="{{ route('super.admin.users.index', array_merge(request()->except(['search', 'page']))) }}" 
                           class="btn btn-outline-custom">
                            <i class="fas fa-times"></i> Clear
                        </a>
                    @endif
                </div>
            </form>
        </div>

        <!-- Active Filters -->
        @if(request('role') && request('role') != 'all' || request('verified') && request('verified') != 'all' || request('hotel_id') && request('hotel_id') != 'all' || request('search'))
        <div class="active-filters">
            <span class="text-muted me-2">Active filters:</span>
            
            @if(request('role') && request('role') != 'all')
                <span class="filter-badge" style="background: var(--primary);">
                    Role: {{ ucfirst(str_replace('_', ' ', request('role'))) }}
                    <a href="{{ route('super.admin.users.index', array_merge(request()->except(['role', 'page']))) }}">
                        <i class="fas fa-times"></i>
                    </a>
                </span>
            @endif
            
            @if(request('verified') && request('verified') != 'all')
                <span class="filter-badge" style="background: var(--info);">
                    Status: {{ ucfirst(request('verified')) }}
                    <a href="{{ route('super.admin.users.index', array_merge(request()->except(['verified', 'page']))) }}">
                        <i class="fas fa-times"></i>
                    </a>
                </span>
            @endif
            
            @if(request('hotel_id') && request('hotel_id') != 'all')
                @php
                    $hotelName = '';
                    foreach($hotels ?? [] as $hotel) {
                        if($hotel->id == request('hotel_id')) {
                            $hotelName = $hotel->name;
                            break;
                        }
                    }
                @endphp
                <span class="filter-badge" style="background: var(--success);">
                    Hotel: {{ $hotelName }}
                    <a href="{{ route('super.admin.users.index', array_merge(request()->except(['hotel_id', 'page']))) }}">
                        <i class="fas fa-times"></i>
                    </a>
                </span>
            @endif
            
            @if(request('search'))
                <span class="filter-badge" style="background: var(--warning);">
                    Search: "{{ request('search') }}"
                    <a href="{{ route('super.admin.users.index', array_merge(request()->except(['search', 'page']))) }}">
                        <i class="fas fa-times"></i>
                    </a>
                </span>
            @endif
            
            <a href="{{ route('super.admin.users.index') }}" class="btn btn-outline-secondary btn-sm ms-2">
                <i class="fas fa-times me-1"></i>Clear All
            </a>
        </div>
        @endif

        <!-- Hotels Grid View -->
        @php
            // Group users by hotel
            $usersByHotel = [];
            $usersWithNoHotel = [];
            
            foreach($users as $user) {
                if ($user->hotel_id && $user->hotel) {
                    $hotelId = $user->hotel_id;
                    if (!isset($usersByHotel[$hotelId])) {
                        $usersByHotel[$hotelId] = [
                            'hotel' => $user->hotel,
                            'users' => []
                        ];
                    }
                    $usersByHotel[$hotelId]['users'][] = $user;
                } else {
                    $usersWithNoHotel[] = $user;
                }
            }
            
            // Get all hotels for display
            $allHotels = \App\Models\Hotel::withCount('users')->orderBy('name')->get();
        @endphp

        <div class="hotels-grid">
            <!-- Hotels with users -->
            @forelse($allHotels as $hotel)
                <div class="hotel-column" id="hotel-column-{{ $hotel->id }}">
                    <div class="hotel-column-header">
                        <div class="d-flex justify-content-between align-items-start">
                            <h3>
                                <i class="fas fa-hotel me-2" style="color: var(--primary);"></i>
                                {{ $hotel->name }}
                            </h3>
                            <span class="badge bg-light text-dark">
                                <i class="fas fa-users me-1"></i>
                                {{ $hotel->users_count }} total
                            </span>
                        </div>
                        <div class="hotel-meta">
                            <span><i class="fas fa-map-marker-alt"></i>{{ $hotel->city ?? 'N/A' }}</span>
                            <span><i class="fas fa-envelope"></i>{{ $hotel->email }}</span>
                        </div>
                        <div class="hotel-stats">
                            <div class="hotel-stat-item">
                                <div class="value">{{ isset($usersByHotel[$hotel->id]) ? count($usersByHotel[$hotel->id]['users']) : 0 }}</div>
                                <div class="label">Showing</div>
                            </div>
                            <div class="hotel-stat-item">
                                <div class="value">{{ $hotel->users_count }}</div>
                                <div class="label">Total</div>
                            </div>
                            <div class="hotel-stat-item">
                                <div class="value">{{ $hotel->max_users ?? '∞' }}</div>
                                <div class="label">Max Allowed</div>
                            </div>
                        </div>
                        
                        <!-- Add User Button for this Hotel -->
                        <button class="add-user-btn" onclick="openAddUserModalForHotel('{{ $hotel->id }}', '{{ addslashes($hotel->name) }}')">
                            <i class="fas fa-plus-circle"></i>
                            Add User to {{ Str::limit($hotel->name, 20) }}
                        </button>
                    </div>
                    
                    <div class="users-list">
                        @if(isset($usersByHotel[$hotel->id]) && count($usersByHotel[$hotel->id]['users']) > 0)
                            @foreach($usersByHotel[$hotel->id]['users'] as $user)
                                <div class="user-card" id="user-card-{{ $user->id }}">
                                    <div class="user-card-header">
                                        <div class="user-avatar-sm">
                                            {{ strtoupper(substr($user->first_name ?? 'U', 0, 1)) }}{{ strtoupper(substr($user->last_name ?? 'S', 0, 1)) }}
                                        </div>
                                        <div class="user-name">
                                            <div class="full-name">{{ $user->first_name }} {{ $user->last_name }}</div>
                                            <div class="user-id">ID: #{{ $user->id }}</div>
                                        </div>
                                    </div>
                                    
                                    <div class="user-card-details">
                                        <div class="user-detail-item">
                                            <i class="fas fa-envelope"></i>
                                            <span>{{ $user->email }}</span>
                                        </div>
                                        <div class="user-detail-item">
                                            <i class="fas fa-phone"></i>
                                            <span>{{ $user->phone ?? 'N/A' }}</span>
                                        </div>
                                    </div>
                                    
                                    <div class="user-card-footer">
                                        <div>
                                            @php
                                                $roleClass = 'role-' . str_replace('_', '-', $user->role);
                                            @endphp
                                            <span class="role-badge {{ $roleClass }}">
                                                {{ ucfirst(str_replace('_', ' ', $user->role)) }}
                                            </span>
                                            
                                            @if($user->email_verified_at)
                                                <span class="status-badge status-active ms-1">
                                                    <i class="fas fa-check-circle"></i> Verified
                                                </span>
                                            @else
                                                <span class="status-badge status-pending ms-1">
                                                    <i class="fas fa-clock"></i> Pending
                                                </span>
                                            @endif
                                        </div>
                                        
                                        <div class="action-group">
                                            <button class="btn-icon btn-icon-view" title="View" onclick="viewUser({{ $user->id }})">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            <button class="btn-icon btn-icon-edit" title="Edit" onclick="editUser({{ $user->id }})">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button class="btn-icon btn-icon-key" title="Reset Password" onclick="resetPassword({{ $user->id }})">
                                                <i class="fas fa-key"></i>
                                            </button>
                                            @if($user->role !== 'super_admin')
                                            <button class="btn-icon btn-icon-delete" title="Delete" onclick="deleteUser({{ $user->id }})">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                            @endif
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        @else
                            <div class="empty-hotel">
                                <i class="fas fa-user-plus fa-3x mb-3"></i>
                                <h5>No Users Yet</h5>
                                <p>Click the "Add User" button above to create the first user for this hotel.</p>
                            </div>
                        @endif
                    </div>
                </div>
            @empty
                <div class="col-12 text-center py-5">
                    <i class="fas fa-hotel fa-4x mb-3" style="color: var(--gray-300);"></i>
                    <h5>No Hotels Found</h5>
                    <p class="text-muted">There are no hotels in the system yet.</p>
                </div>
            @endforelse
            
            <!-- Users without hotel column -->
            @if(count($usersWithNoHotel) > 0)
                <div class="hotel-column">
                    <div class="hotel-column-header" style="border-left-color: var(--gray-600);">
                        <div class="d-flex justify-content-between align-items-start">
                            <h3>
                                <i class="fas fa-users me-2" style="color: var(--gray-600);"></i>
                                Users Without Hotel
                            </h3>
                            <span class="badge bg-light text-dark">
                                <i class="fas fa-users me-1"></i>
                                {{ count($usersWithNoHotel) }} users
                            </span>
                        </div>
                        <div class="hotel-meta">
                            <span><i class="fas fa-user"></i>Unaffiliated users</span>
                        </div>
                    </div>
                    
                    <div class="users-list">
                        @foreach($usersWithNoHotel as $user)
                            <div class="user-card" id="user-card-{{ $user->id }}">
                                <div class="user-card-header">
                                    <div class="user-avatar-sm">
                                        {{ strtoupper(substr($user->first_name ?? 'U', 0, 1)) }}{{ strtoupper(substr($user->last_name ?? 'S', 0, 1)) }}
                                    </div>
                                    <div class="user-name">
                                        <div class="full-name">{{ $user->first_name }} {{ $user->last_name }}</div>
                                        <div class="user-id">ID: #{{ $user->id }}</div>
                                    </div>
                                </div>
                                
                                <div class="user-card-details">
                                    <div class="user-detail-item">
                                        <i class="fas fa-envelope"></i>
                                        <span>{{ $user->email }}</span>
                                    </div>
                                    <div class="user-detail-item">
                                        <i class="fas fa-phone"></i>
                                        <span>{{ $user->phone ?? 'N/A' }}</span>
                                    </div>
                                </div>
                                
                                <div class="user-card-footer">
                                    <div>
                                        @php
                                            $roleClass = 'role-' . str_replace('_', '-', $user->role);
                                        @endphp
                                        <span class="role-badge {{ $roleClass }}">
                                            {{ ucfirst(str_replace('_', ' ', $user->role)) }}
                                        </span>
                                        
                                        @if($user->email_verified_at)
                                            <span class="status-badge status-active ms-1">
                                                <i class="fas fa-check-circle"></i> Verified
                                            </span>
                                        @else
                                            <span class="status-badge status-pending ms-1">
                                                <i class="fas fa-clock"></i> Pending
                                            </span>
                                        @endif
                                    </div>
                                    
                                    <div class="action-group">
                                        <button class="btn-icon btn-icon-view" title="View" onclick="viewUser({{ $user->id }})">
                                            <i class="fas fa-eye"></i>
                                        </button>
                                        <button class="btn-icon btn-icon-edit" title="Edit" onclick="editUser({{ $user->id }})">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="btn-icon btn-icon-key" title="Reset Password" onclick="resetPassword({{ $user->id }})">
                                            <i class="fas fa-key"></i>
                                        </button>
                                        @if($user->role !== 'super_admin')
                                        <button class="btn-icon btn-icon-delete" title="Delete" onclick="deleteUser({{ $user->id }})">
                                            <i class="fas fa-trash"></i>
                                        </button>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            @endif
        </div>

        <!-- Pagination -->
        @if(method_exists($users, 'hasPages') && $users->hasPages())
        <div class="d-flex justify-content-center mt-4">
            {{ $users->appends(request()->query())->links() }}
        </div>
        @endif
    </div>

    <!-- ==================== MODALS ==================== -->

    <!-- Add/Edit User Modal -->
    <div class="modal fade" id="userModal" tabindex="-1" aria-labelledby="userModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content modal-custom">
                <div class="modal-header modal-header-custom">
                    <h5 class="modal-title" id="userModalTitle">
                        <i class="fas fa-user-plus me-2"></i>
                        Add New User
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body modal-body-custom">
                    <form id="userForm">
                        @csrf
                        <input type="hidden" name="user_id" id="user_id">
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">First Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control form-control-custom" name="first_name" id="user_first_name" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">Last Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control form-control-custom" name="last_name" id="user_last_name" required>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">Email <span class="text-danger">*</span></label>
                                <input type="email" class="form-control form-control-custom" name="email" id="user_email" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">Phone</label>
                                <input type="tel" class="form-control form-control-custom" name="phone" id="user_phone">
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">Role <span class="text-danger">*</span></label>
                                <select class="form-select form-select-custom" name="role" id="user_role" required>
                                    <option value="">Select Role</option>
                                    <option value="super_admin">Super Admin</option>
                                    <option value="director">Director</option>
                                    <option value="manager">Manager</option>
                                    <option value="front_desk">Front Desk</option>
                                    <option value="housekeeping">Housekeeping</option>
                                    <option value="food_beverage">Food & Beverage</option>
                                    <option value="maintenance">Maintenance</option>
                                    <option value="accountant">Accountant</option>
                                </select>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">Hotel</label>
                                <select class="form-select form-select-custom" name="hotel_id" id="user_hotel_id">
                                    <option value="">Select Hotel</option>
                                    @foreach($hotels ?? [] as $hotel)
                                        <option value="{{ $hotel->id }}" 
                                                data-users-count="{{ $hotel->users_count }}" 
                                                data-max-users="{{ $hotel->max_users ?? 'Unlimited' }}">
                                            {{ $hotel->name }} ({{ $hotel->users_count }}/{{ $hotel->max_users ?? '∞' }} users)
                                        </option>
                                    @endforeach
                                </select>
                                <small class="text-muted" id="hotelCapacityInfo"></small>
                            </div>
                        </div>
                        
                        <div class="row" id="passwordFields">
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">Password <span class="text-danger">*</span></label>
                                <input type="password" class="form-control form-control-custom" name="password" id="user_password" minlength="8">
                                <small class="text-muted">Min 8 characters</small>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label class="form-label fw-bold">Confirm Password <span class="text-danger">*</span></label>
                                <input type="password" class="form-control form-control-custom" name="password_confirmation" id="user_password_confirmation">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer modal-footer-custom">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary-custom" id="saveUserBtn" onclick="saveUser()">
                        <i class="fas fa-save me-2"></i>Save User
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- View User Modal - Fully Integrated -->
    <div class="modal fade" id="viewUserModal" tabindex="-1" aria-labelledby="viewUserModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content modal-custom">
                <div class="modal-header modal-header-custom">
                    <h5 class="modal-title">
                        <i class="fas fa-user-circle me-2"></i>
                        User Details
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body modal-body-custom" id="viewUserContent">
                    <div class="text-center py-4">
                        <div class="spinner-border text-primary" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <p class="mt-2">Loading user details...</p>
                    </div>
                </div>
                <div class="modal-footer modal-footer-custom">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary-custom" onclick="editUserFromView()" id="editFromViewBtn">
                        <i class="fas fa-edit me-2"></i>Edit User
                    </button>
                    <button type="button" class="btn btn-warning" onclick="resetPasswordFromView()" id="resetPwdFromViewBtn">
                        <i class="fas fa-key me-2"></i>Reset Password
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content modal-custom">
                <div class="modal-header" style="background: linear-gradient(135deg, var(--danger), #dc2626); color: white;">
                    <h5 class="modal-title">
                        <i class="fas fa-exclamation-triangle me-2"></i>
                        Confirm Delete
                    </h5>
                    <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body modal-body-custom">
                    <p class="mb-3">Are you sure you want to delete this user?</p>
                    <div class="alert alert-danger">
                        <i class="fas fa-exclamation-circle me-2"></i>
                        <strong>Warning:</strong> This action cannot be undone. All data associated with this user will be permanently removed.
                    </div>
                    <div id="deleteUserInfo" class="p-3 bg-light rounded"></div>
                </div>
                <div class="modal-footer modal-footer-custom">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="confirmDeleteBtn">
                        <i class="fas fa-trash me-2"></i>Delete Permanently
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        // CSRF Token Setup
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                'X-Requested-With': 'XMLHttpRequest'
            }
        });

        // Loading Overlay
        function showLoading() {
            document.getElementById('loadingOverlay').style.display = 'flex';
        }
        
        function hideLoading() {
            document.getElementById('loadingOverlay').style.display = 'none';
        }

        // User Functions
        function openAddUserModal() {
            $('#userModalTitle').html('<i class="fas fa-user-plus me-2"></i>Add New User');
            $('#userForm')[0].reset();
            $('#user_id').val('');
            $('#passwordFields').show();
            $('#user_password').prop('required', true);
            $('#user_password_confirmation').prop('required', true);
            $('#userModal').modal('show');
        }

        function openAddUserModalForHotel(hotelId, hotelName) {
            $('#userModalTitle').html('<i class="fas fa-user-plus me-2"></i>Add User to ' + hotelName);
            $('#userForm')[0].reset();
            $('#user_id').val('');
            $('#user_hotel_id').val(hotelId);
            $('#passwordFields').show();
            $('#user_password').prop('required', true);
            $('#user_password_confirmation').prop('required', true);
            
            // Check capacity
            let selected = $('#user_hotel_id option:selected');
            let usersCount = selected.data('users-count') || 0;
            let maxUsers = selected.data('max-users') || 'Unlimited';
            
            if (maxUsers !== 'Unlimited' && usersCount >= maxUsers) {
                $('#hotelCapacityInfo').html('<span class="text-danger"><i class="fas fa-exclamation-triangle me-1"></i>This hotel has reached its user limit!</span>');
                $('#saveUserBtn').prop('disabled', true);
            } else {
                $('#hotelCapacityInfo').html('');
                $('#saveUserBtn').prop('disabled', false);
            }
            
            $('#userModal').modal('show');
        }

        function viewUser(id) {
            showLoading();
            
            $('#viewUserModal').modal('show');
            
            $.ajax({
                url: '/super-admin/users/' + id,
                method: 'GET',
                success: function(response) {
                    let user = response.user || response;
                    
                    // Format dates
                    let lastLogin = user.last_login_at ? new Date(user.last_login_at).toLocaleString() : 'Never logged in';
                    let joinDate = user.created_at ? new Date(user.created_at) : null;
                    let joinFormatted = joinDate ? joinDate.toLocaleDateString('en-US', { 
                        month: 'short', 
                        day: '2-digit', 
                        year: 'numeric' 
                    }) : 'N/A';
                    
                    // Calculate days ago
                    let daysAgo = '';
                    if (joinDate) {
                        let diffTime = Math.abs(new Date() - joinDate);
                        let diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
                        daysAgo = diffDays + (diffDays === 1 ? ' day ago' : ' days ago');
                    }
                    
                    let hotelInfo = user.hotel ? 
                        `<strong>${user.hotel.name}</strong><br><small class="text-muted">${user.hotel.city || ''}</small>` : 
                        '<span class="text-muted">No Hotel Assigned</span>';
                    
                    let roleBadge = `<span class="role-badge role-${user.role.replace('_', '-')}">${user.role.replace('_', ' ').toUpperCase()}</span>`;
                    
                    let verifiedStatus = user.email_verified_at ? 
                        '<span class="badge bg-success">Verified</span>' : 
                        '<span class="badge bg-warning">Pending</span>';
                    
                    // Get activities if available
                    let activities = response.activities || [];
                    let activitiesHtml = '';
                    
                    if (activities.length > 0) {
                        activitiesHtml = '<div class="activity-timeline mt-3">';
                        activities.forEach(activity => {
                            let activityDate = activity.created_at ? new Date(activity.created_at) : new Date();
                            activitiesHtml += `
                                <div class="activity-item">
                                    <div class="d-flex justify-content-between">
                                        <span class="action">${activity.action || 'Activity'}</span>
                                        <span class="time">${activityDate.toLocaleString()}</span>
                                    </div>
                                    <div class="mt-1">${activity.description || ''}</div>
                                </div>
                            `;
                        });
                        activitiesHtml += '</div>';
                    }
                    
                    let html = `
                        <div class="row">
                            <div class="col-md-6">
                                <div class="detail-card">
                                    <h6 class="text-primary mb-3"><i class="fas fa-user me-2"></i>Personal Info</h6>
                                    <div class="detail-row">
                                        <div class="detail-label">Name:</div>
                                        <div class="detail-value"><strong>${user.first_name} ${user.last_name}</strong></div>
                                    </div>
                                    <div class="detail-row">
                                        <div class="detail-label">Email:</div>
                                        <div class="detail-value">${user.email}</div>
                                    </div>
                                    <div class="detail-row">
                                        <div class="detail-label">Phone:</div>
                                        <div class="detail-value">${user.phone || 'Not provided'}</div>
                                    </div>
                                    <div class="detail-row">
                                        <div class="detail-label">Role:</div>
                                        <div class="detail-value">${roleBadge}</div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="col-md-6">
                                <div class="detail-card">
                                    <h6 class="text-primary mb-3"><i class="fas fa-building me-2"></i>Assignment</h6>
                                    <div class="detail-row">
                                        <div class="detail-label">Hotel:</div>
                                        <div class="detail-value">${hotelInfo}</div>
                                    </div>
                                    <div class="detail-row">
                                        <div class="detail-label">Status:</div>
                                        <div class="detail-value">${verifiedStatus}</div>
                                    </div>
                                    <div class="detail-row">
                                        <div class="detail-label">Last Login:</div>
                                        <div class="detail-value">${lastLogin}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mt-3">
                            <div class="col-12">
                                <div class="detail-card">
                                    <h6 class="text-primary mb-3"><i class="fas fa-calendar me-2"></i>Timeline</h6>
                                    <div class="row">
                                        <div class="col-md-6">
                                            <div class="mb-2">
                                                <small class="text-muted">Joined Date</small>
                                                <div class="fw-bold">${joinFormatted}</div>
                                                <small class="text-muted">${daysAgo}</small>
                                            </div>
                                        </div>
                                        <div class="col-md-6">
                                            <div class="mb-2">
                                                <small class="text-muted">Last Login</small>
                                                ${user.last_login_at ? 
                                                    `<div class="fw-bold">${new Date(user.last_login_at).toLocaleDateString()}</div>
                                                     <small class="text-muted">${new Date(user.last_login_at).toLocaleTimeString()}</small>` : 
                                                    '<div class="text-muted">Never logged in</div>'
                                                }
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        ${activitiesHtml ? `
                        <div class="row mt-3">
                            <div class="col-12">
                                <div class="detail-card">
                                    <h6 class="text-primary mb-3"><i class="fas fa-history me-2"></i>Recent Activity</h6>
                                    ${activitiesHtml}
                                </div>
                            </div>
                        </div>
                        ` : ''}
                    `;
                    
                    $('#viewUserContent').html(html);
                    window.currentViewingUserId = id;
                    hideLoading();
                },
                error: function(xhr) {
                    hideLoading();
                    let errorMsg = xhr.responseJSON?.message || 'Failed to load user details';
                    
                    let errorHtml = `
                        <div class="text-center py-4">
                            <i class="fas fa-exclamation-circle fa-4x text-danger mb-3"></i>
                            <h5>Error Loading User</h5>
                            <p class="text-muted">${errorMsg}</p>
                        </div>
                    `;
                    
                    $('#viewUserContent').html(errorHtml);
                }
            });
        }

        function editUser(id) {
            showLoading();
            
            $.ajax({
                url: '/super-admin/users/' + id + '/edit',
                method: 'GET',
                success: function(response) {
                    let user = response.user || response;
                    
                    $('#userModalTitle').html('<i class="fas fa-edit me-2"></i>Edit User');
                    $('#user_id').val(user.id);
                    $('#user_first_name').val(user.first_name);
                    $('#user_last_name').val(user.last_name);
                    $('#user_email').val(user.email);
                    $('#user_phone').val(user.phone || '');
                    $('#user_role').val(user.role);
                    $('#user_hotel_id').val(user.hotel_id || '');
                    $('#passwordFields').hide();
                    $('#user_password').prop('required', false);
                    $('#user_password_confirmation').prop('required', false);
                    
                    hideLoading();
                    $('#userModal').modal('show');
                },
                error: function(xhr) {
                    hideLoading();
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: xhr.responseJSON?.message || 'Failed to load user data'
                    });
                }
            });
        }

        function editUserFromView() {
            $('#viewUserModal').modal('hide');
            setTimeout(() => {
                editUser(window.currentViewingUserId);
            }, 500);
        }

        function resetPasswordFromView() {
            $('#viewUserModal').modal('hide');
            setTimeout(() => {
                resetPassword(window.currentViewingUserId);
            }, 500);
        }

        function saveUser() {
            let formData = $('#userForm').serialize();
            let userId = $('#user_id').val();
            let url = userId ? '/super-admin/users/' + userId : '/super-admin/users';
            let method = userId ? 'PUT' : 'POST';
            
            // Validate for new users
            if (!userId) {
                let password = $('#user_password').val();
                let confirmPassword = $('#user_password_confirmation').val();
                
                if (!password || password.length < 8) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Validation Error',
                        text: 'Password must be at least 8 characters long'
                    });
                    return;
                }
                
                if (password !== confirmPassword) {
                    Swal.fire({
                        icon: 'error',
                        title: 'Validation Error',
                        text: 'Passwords do not match'
                    });
                    return;
                }
            }
            
            showLoading();
            
            $.ajax({
                url: url,
                method: method,
                data: formData,
                success: function(response) {
                    hideLoading();
                    $('#userModal').modal('hide');
                    
                    Swal.fire({
                        icon: 'success',
                        title: 'Success!',
                        text: response.message || 'User saved successfully',
                        timer: 2000
                    }).then(() => {
                        location.reload();
                    });
                },
                error: function(xhr) {
                    hideLoading();
                    
                    if (xhr.status === 419) {
                        Swal.fire({
                            icon: 'error',
                            title: 'Session Expired',
                            text: 'Please refresh the page and try again.',
                            confirmButtonText: 'Refresh Now'
                        }).then(() => {
                            location.reload();
                        });
                        return;
                    }
                    
                    let errors = xhr.responseJSON?.errors;
                    let errorMessage = '';
                    
                    if (errors) {
                        errorMessage = '<ul>';
                        for (let field in errors) {
                            errorMessage += '<li>' + errors[field][0] + '</li>';
                        }
                        errorMessage += '</ul>';
                    } else {
                        errorMessage = xhr.responseJSON?.message || 'Failed to save user';
                    }
                    
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        html: errorMessage
                    });
                }
            });
        }

        function resetPassword(id) {
            Swal.fire({
                title: 'Reset Password',
                text: 'A temporary password will be sent to the user\'s email. Continue?',
                icon: 'question',
                showCancelButton: true,
                confirmButtonColor: '#059669',
                cancelButtonColor: '#6b7280',
                confirmButtonText: 'Yes, Reset Password'
            }).then((result) => {
                if (result.isConfirmed) {
                    showLoading();
                    
                    $.ajax({
                        url: '/super-admin/users/' + id + '/reset-password',
                        method: 'POST',
                        success: function(response) {
                            hideLoading();
                            Swal.fire({
                                icon: 'success',
                                title: 'Password Reset!',
                                text: response.message || 'Temporary password has been sent',
                                timer: 2000
                            });
                        },
                        error: function(xhr) {
                            hideLoading();
                            Swal.fire({
                                icon: 'error',
                                title: 'Error',
                                text: xhr.responseJSON?.message || 'Failed to reset password'
                            });
                        }
                    });
                }
            });
        }

        let deleteUserId = null;

        function deleteUser(id) {
            deleteUserId = id;
            
            $.ajax({
                url: '/super-admin/users/' + id + '/edit',
                method: 'GET',
                success: function(response) {
                    let user = response.user || response;
                    $('#deleteUserInfo').html(`
                        <strong>User:</strong> ${user.first_name} ${user.last_name}<br>
                        <strong>Email:</strong> ${user.email}<br>
                        <strong>Role:</strong> ${user.role.replace('_', ' ')}
                    `);
                }
            });
            
            $('#deleteModal').modal('show');
        }

        $('#confirmDeleteBtn').click(function() {
            if (!deleteUserId) return;
            
            showLoading();
            $('#deleteModal').modal('hide');
            
            $.ajax({
                url: '/super-admin/users/' + deleteUserId,
                method: 'DELETE',
                success: function(response) {
                    hideLoading();
                    Swal.fire({
                        icon: 'success',
                        title: 'Deleted!',
                        text: response.message || 'User has been deleted',
                        timer: 2000
                    }).then(() => {
                        location.reload();
                    });
                },
                error: function(xhr) {
                    hideLoading();
                    Swal.fire({
                        icon: 'error',
                        title: 'Error',
                        text: xhr.responseJSON?.message || 'Failed to delete user'
                    });
                }
            });
        });

        function openImportModal() {
            Swal.fire({
                icon: 'info',
                title: 'Coming Soon',
                text: 'Import feature will be available soon!'
            });
        }

        function exportUsers() {
            window.location.href = '/super-admin/users/export?' + $.param({
                role: '{{ request('role') }}',
                verified: '{{ request('verified') }}',
                hotel_id: '{{ request('hotel_id') }}',
                search: '{{ request('search') }}'
            });
        }

        // Document Ready
        $(document).ready(function() {
            // Capacity checking on hotel selection change
            $('#user_hotel_id').change(function() {
                let selected = $(this).find('option:selected');
                let usersCount = selected.data('users-count') || 0;
                let maxUsers = selected.data('max-users') || 'Unlimited';
                
                if (maxUsers !== 'Unlimited' && usersCount >= maxUsers) {
                    $('#hotelCapacityInfo').html('<span class="text-danger"><i class="fas fa-exclamation-triangle me-1"></i>This hotel has reached its user limit!</span>');
                    $('#saveUserBtn').prop('disabled', true);
                } else {
                    $('#hotelCapacityInfo').html('');
                    $('#saveUserBtn').prop('disabled', false);
                }
            });
            
            // Reset capacity info when modal is hidden
            $('#userModal').on('hidden.bs.modal', function() {
                $('#hotelCapacityInfo').html('');
                $('#saveUserBtn').prop('disabled', false);
            });
        });
    </script>
</body>
</html>