<%- include('../partials/header', { title, user }) %>
<%- include('../partials/sidebar', { path }) %>

<main class="main-content">
    <div id="rooms-section" class="content-section active">
        <div class="section-header">
            <h2 class="page-title">
                <i class="fas fa-door-open"></i>
                Room Management
            </h2>
            <button class="btn-primary" id="btn-add-room">
                <i class="fas fa-plus"></i> Add Room
            </button>
        </div>

        <!-- Statistics Cards -->
        <div class="stats-grid" id="room-stats">
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-door-open"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-label">Total Rooms</div>
                    <div class="stat-value" id="stat-total-rooms">0</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-globe"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-label">Public Rooms</div>
                    <div class="stat-value" id="stat-public-rooms">0</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-lock"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-label">Private Rooms</div>
                    <div class="stat-value" id="stat-private-rooms">0</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">
                    <i class="fas fa-check-circle"></i>
                </div>
                <div class="stat-content">
                    <div class="stat-label">Active Rooms</div>
                    <div class="stat-value" id="stat-active-rooms">0</div>
                </div>
            </div>
        </div>

        <!-- Game Filter Tabs -->
        <div class="room-filters">
            <div class="game-filter-tabs" id="game-filter-tabs">
                <button class="filter-tab active" data-game="all">
                    <i class="fas fa-th"></i>
                    <span>All Games</span>
                    <span class="filter-badge" id="badge-all">0</span>
                </button>
                <!-- Dynamically populated game tabs -->
            </div>
        </div>

        <!-- Search and Filters Bar -->
        <div class="rooms-toolbar">
            <div class="search-container">
                <i class="fas fa-search"></i>
                <input 
                    type="text" 
                    id="room-search" 
                    class="search-input" 
                    placeholder="Search rooms by name..."
                >
            </div>
            <div class="filter-controls">
                <select id="filter-room-type" class="filter-select">
                    <option value="">All Types</option>
                    <option value="public">Public</option>
                    <option value="private">Private</option>
                </select>
                <select id="filter-room-status" class="filter-select">
                    <option value="">All Status</option>
                    <option value="active">Active</option>
                    <option value="inactive">Inactive</option>
                    <option value="archived">Archived</option>
                </select>
            </div>
        </div>

        <!-- Rooms Table -->
        <div class="section-card rooms-table-container">
            <div class="table-loading" id="rooms-loading" style="display: none;">
                <i class="fas fa-spinner fa-spin"></i>
                <span>Loading rooms...</span>
            </div>
            <div class="table-responsive">
                <table class="data-table rooms-table" id="rooms-table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Game</th>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Password</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody id="rooms-table-body">
                        <!-- Dynamically populated -->
                    </tbody>
                </table>
            </div>
            <div class="empty-state" id="rooms-empty-state" style="display: none;">
                <i class="fas fa-inbox"></i>
                <p>No rooms found</p>
                <small>Try adjusting your search or filters</small>
            </div>
            
            <!-- Pagination Controls -->
            <div class="pagination-controls" id="rooms-pagination" style="display: none;">
                <div class="page-info">
                    <span id="rooms-page-info">Showing 0-0 of 0 rooms</span>
                </div>
                <div class="pagination-buttons">
                    <button id="rooms-prev-page" class="btn-sm btn-secondary" disabled>
                        <i class="fas fa-chevron-left"></i> Previous
                    </button>
                    <span id="rooms-page-numbers"></span>
                    <button id="rooms-next-page" class="btn-sm btn-secondary" disabled>
                        Next <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
                <div class="page-size-selector">
                    <label for="rooms-page-size">Items per page:</label>
                    <select id="rooms-page-size" class="filter-select">
                        <option value="10">10</option>
                        <option value="25" selected>25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                </div>
            </div>
        </div>
    </div>
</main>

<!-- Add Room Modal -->
<div id="add-room-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3><i class="fas fa-plus-circle"></i> Add New Room</h3>
            <button class="modal-close" id="close-add-room">&times;</button>
        </div>
        <form id="add-room-form">
            <div class="modal-body">
                <div class="form-group">
                    <label for="new-game-type">Game Type</label>
                    <select id="new-game-type" required>
                        <option value="">Select Game...</option>
                        <!-- Dynamically populated -->
                    </select>
                </div>
                <div class="form-group">
                    <label for="new-room-name">Room Name</label>
                    <input type="text" id="new-room-name" required placeholder="e.g., Jungle, Mountain">
                </div>
                <div class="form-group">
                    <label for="new-room-password">Password (Optional)</label>
                    <input type="text" id="new-room-password" placeholder="Leave blank for no password">
                </div>
                <div class="form-group">
                    <label for="new-room-type">Type</label>
                    <select id="new-room-type" required>
                        <option value="public">Public</option>
                        <option value="private">Private</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="new-room-status">Status</label>
                    <select id="new-room-status" required>
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                    </select>
                </div>
            </div>
            <div class="form-actions">
                <button type="button" class="btn-secondary" id="cancel-add-room">Cancel</button>
                <button type="submit" class="btn-primary">Create Room</button>
            </div>
        </form>
    </div>
</div>

<!-- Edit Room Modal -->
<div id="edit-room-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h3><i class="fas fa-edit"></i> Edit Room</h3>
            <button class="modal-close" id="close-edit-room">&times;</button>
        </div>
        <form id="edit-room-form">
            <input type="hidden" id="edit-room-id">
            <div class="modal-body">
                <div class="form-group">
                    <label for="edit-game-type">Game Type</label>
                    <input type="text" id="edit-game-type" readonly>
                </div>
                <div class="form-group">
                    <label for="edit-room-name">Room Name</label>
                    <input type="text" id="edit-room-name" required>
                </div>
                <div class="form-group">
                    <label for="edit-room-password">Password</label>
                    <input type="text" id="edit-room-password" placeholder="Leave blank for no password">
                </div>
                <div class="form-group">
                    <label for="edit-room-type">Type</label>
                    <select id="edit-room-type" required>
                        <option value="public">Public</option>
                        <option value="private">Private</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="edit-room-status">Status</label>
                    <select id="edit-room-status" required>
                        <option value="active">Active</option>
                        <option value="inactive">Inactive</option>
                    </select>
                </div>
            </div>
            <div class="form-actions">
                <button type="button" class="btn-secondary" id="cancel-edit-room">Cancel</button>
                <button type="submit" class="btn-primary">Save Changes</button>
            </div>
        </form>
    </div>
</div>

<%- include('../partials/footer') %>
