{{> head}}

<style>
/* Critical CSS for immediate render */
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f5f7fa; }
        .sidebar { position: fixed; left: 0; top: 0; width: 260px; height: 100vh; background: #1f2937; z-index: 1040; }
        .main-wrapper { margin-left: 260px; min-height: 100vh; transition: margin-left 0.3s ease; }
        .top-navbar { background: white; height: 60px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); padding: 0 1rem; }
        .dashboard-content { padding: 24px; }

        /* Loading animation */
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
        .loading { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; background: #e5e7eb; }
</style>

{{> sidebar}}

<!-- Main Content Wrapper -->
<div class="main-wrapper" id="mainWrapper">
    {{> header}}

    <!-- Main Content -->
    <main class="dashboard-content" id="main-content">
        <div class="container-fluid">
<!-- Page Header -->
            <div class="mb-3">
                <h1 class="h3 font-bold">Dual List Box</h1>
                <p class="text-muted text-sm">Transfer items between lists with advanced functionality</p>
            </div>

            <!-- Dual List Box Content -->
            <div class="dashboard-row">
                <div class="dashboard-grid grid-cols-1">
                    <!-- Basic Dual List Box -->
                    <div class="dashboard-card">
                        <div class="dashboard-card-header">
                            <h5 class="dashboard-card-title mb-0">Course Assignment</h5>
                            <p class="text-muted small mb-0">Select and assign courses to students</p>
                        </div>
                        <div class="dashboard-card-body">
                            <div class="row">
                                <div class="col-md-5">
                                    <h6 class="mb-3">Available Courses</h6>
                                    <div class="form-group mb-3">
                                        <input type="text" class="form-control" id="searchLeft" placeholder="Search available courses...">
                                    </div>
                                    <select id="leftList" class="form-select" size="10" multiple>
                                        <option value="cs101">CS 101 - Introduction to Programming</option>
                                        <option value="cs201">CS 201 - Data Structures</option>
                                        <option value="cs301">CS 301 - Algorithms</option>
                                        <option value="math101">MATH 101 - Calculus I</option>
                                        <option value="math201">MATH 201 - Calculus II</option>
                                        <option value="phys101">PHYS 101 - Physics I</option>
                                        <option value="phys201">PHYS 201 - Physics II</option>
                                        <option value="chem101">CHEM 101 - General Chemistry</option>
                                        <option value="eng101">ENG 101 - English Composition</option>
                                        <option value="hist101">HIST 101 - World History</option>
                                    </select>
                                </div>

                                <div class="col-md-2 d-flex flex-column justify-content-center align-items-center">
                                    <button type="button" class="btn btn-primary mb-2" id="moveRight">
                                        <i class="bi bi-chevron-right"></i>
                                    </button>
                                    <button type="button" class="btn btn-primary mb-2" id="moveAllRight">
                                        <i class="bi bi-chevron-double-right"></i>
                                    </button>
                                    <button type="button" class="btn btn-secondary mb-2" id="moveLeft">
                                        <i class="bi bi-chevron-left"></i>
                                    </button>
                                    <button type="button" class="btn btn-secondary" id="moveAllLeft">
                                        <i class="bi bi-chevron-double-left"></i>
                                    </button>
                                </div>

                                <div class="col-md-5">
                                    <h6 class="mb-3">Selected Courses</h6>
                                    <div class="form-group mb-3">
                                        <input type="text" class="form-control" id="searchRight" placeholder="Search selected courses...">
                                    </div>
                                    <select id="rightList" class="form-select" size="10" multiple>
                                        <!-- Selected items will appear here -->
                                    </select>
                                </div>
                            </div>

                            <div class="mt-4">
                                <button type="button" class="btn btn-success me-2">
                                    <i class="bi bi-check-circle me-2"></i>Save Assignment
                                </button>
                                <button type="button" class="btn btn-outline-secondary" onclick="resetLists()">
                                    <i class="bi bi-arrow-clockwise me-2"></i>Reset
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Advanced Dual List Box -->
            <div class="dashboard-row">
                <div class="dashboard-grid grid-cols-1">
                    <div class="dashboard-card">
                        <div class="dashboard-card-header">
                            <h5 class="dashboard-card-title mb-0">Student Role Assignment</h5>
                            <p class="text-muted small mb-0">Manage student roles and permissions</p>
                        </div>
                        <div class="dashboard-card-body">
                            <div class="row">
                                <div class="col-md-5">
                                    <h6 class="mb-3">Available Roles</h6>
                                    <div class="form-group mb-3">
                                        <input type="text" class="form-control" id="searchRolesLeft" placeholder="Search available roles...">
                                    </div>
                                    <select id="rolesLeftList" class="form-select" size="8" multiple>
                                        <option value="student" data-category="basic">Student</option>
                                        <option value="teaching_assistant" data-category="advanced">Teaching Assistant</option>
                                        <option value="tutor" data-category="advanced">Tutor</option>
                                        <option value="lab_assistant" data-category="advanced">Lab Assistant</option>
                                        <option value="study_group_leader" data-category="leadership">Study Group Leader</option>
                                        <option value="class_representative" data-category="leadership">Class Representative</option>
                                        <option value="peer_mentor" data-category="mentoring">Peer Mentor</option>
                                        <option value="student_ambassador" data-category="special">Student Ambassador</option>
                                    </select>
                                    <div class="mt-2">
                                        <small class="text-muted">
                                            <span class="badge bg-light text-dark me-1">Basic</span>
                                            <span class="badge bg-primary me-1">Advanced</span>
                                            <span class="badge bg-success me-1">Leadership</span>
                                            <span class="badge bg-info me-1">Mentoring</span>
                                            <span class="badge bg-warning text-dark">Special</span>
                                        </small>
                                    </div>
                                </div>

                                <div class="col-md-2 d-flex flex-column justify-content-center align-items-center">
                                    <button type="button" class="btn btn-primary mb-2" id="moveRoleRight">
                                        <i class="bi bi-chevron-right"></i>
                                    </button>
                                    <button type="button" class="btn btn-primary mb-2" id="moveAllRoleRight">
                                        <i class="bi bi-chevron-double-right"></i>
                                    </button>
                                    <button type="button" class="btn btn-secondary mb-2" id="moveRoleLeft">
                                        <i class="bi bi-chevron-left"></i>
                                    </button>
                                    <button type="button" class="btn btn-secondary" id="moveAllRoleLeft">
                                        <i class="bi bi-chevron-double-left"></i>
                                    </button>
                                </div>

                                <div class="col-md-5">
                                    <h6 class="mb-3">Assigned Roles</h6>
                                    <div class="form-group mb-3">
                                        <input type="text" class="form-control" id="searchRolesRight" placeholder="Search assigned roles...">
                                    </div>
                                    <select id="rolesRightList" class="form-select" size="8" multiple>
                                        <!-- Selected roles will appear here -->
                                    </select>
                                    <div class="mt-2">
                                        <small class="text-success">
                                            <i class="bi bi-info-circle me-1"></i>
                                            Selected roles will be applied to the student profile
                                        </small>
                                    </div>
                                </div>
                            </div>

                            <div class="mt-4 d-flex justify-content-between align-items-center">
                                <div>
                                    <button type="button" class="btn btn-success me-2">
                                        <i class="bi bi-person-check me-2"></i>Apply Roles
                                    </button>
                                    <button type="button" class="btn btn-outline-secondary" onclick="resetRoles()">
                                        <i class="bi bi-arrow-clockwise me-2"></i>Reset
                                    </button>
                                </div>
                                <div>
                                    <small class="text-muted">
                                        <span id="selectedRoleCount">0</span> roles selected
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>        </div>
    </main>

    {{> footer}}
</div>

{{> scripts}}

<script>
document.addEventListener('DOMContentLoaded', function() {
            // Basic Dual List Box functionality
            const leftList = document.getElementById('leftList');
            const rightList = document.getElementById('rightList');
            const searchLeft = document.getElementById('searchLeft');
            const searchRight = document.getElementById('searchRight');

            // Move items functions
            document.getElementById('moveRight').addEventListener('click', function() {
                moveSelectedItems(leftList, rightList);
            });

            document.getElementById('moveLeft').addEventListener('click', function() {
                moveSelectedItems(rightList, leftList);
            });

            document.getElementById('moveAllRight').addEventListener('click', function() {
                moveAllItems(leftList, rightList);
            });

            document.getElementById('moveAllLeft').addEventListener('click', function() {
                moveAllItems(rightList, leftList);
            });

            // Roles Dual List Box functionality
            const rolesLeftList = document.getElementById('rolesLeftList');
            const rolesRightList = document.getElementById('rolesRightList');
            const searchRolesLeft = document.getElementById('searchRolesLeft');
            const searchRolesRight = document.getElementById('searchRolesRight');

            document.getElementById('moveRoleRight').addEventListener('click', function() {
                moveSelectedItems(rolesLeftList, rolesRightList);
                updateRoleCount();
            });

            document.getElementById('moveRoleLeft').addEventListener('click', function() {
                moveSelectedItems(rolesRightList, rolesLeftList);
                updateRoleCount();
            });

            document.getElementById('moveAllRoleRight').addEventListener('click', function() {
                moveAllItems(rolesLeftList, rolesRightList);
                updateRoleCount();
            });

            document.getElementById('moveAllRoleLeft').addEventListener('click', function() {
                moveAllItems(rolesRightList, rolesLeftList);
                updateRoleCount();
            });

            // Search functionality
            searchLeft.addEventListener('input', function() {
                filterList(leftList, this.value);
            });

            searchRight.addEventListener('input', function() {
                filterList(rightList, this.value);
            });

            searchRolesLeft.addEventListener('input', function() {
                filterList(rolesLeftList, this.value);
            });

            searchRolesRight.addEventListener('input', function() {
                filterList(rolesRightList, this.value);
            });

            // Helper functions
            function moveSelectedItems(fromList, toList) {
                const selectedOptions = Array.from(fromList.selectedOptions);
                selectedOptions.forEach(option => {
                    toList.appendChild(option);
                });
            }

            function moveAllItems(fromList, toList) {
                Array.from(fromList.options).forEach(option => {
                    toList.appendChild(option);
                });
            }

            function filterList(list, searchTerm) {
                Array.from(list.options).forEach(option => {
                    const text = option.textContent.toLowerCase();
                    const matches = text.includes(searchTerm.toLowerCase());
                    option.style.display = matches ? '' : 'none';
                });
            }

            function updateRoleCount() {
                const count = rolesRightList.options.length;
                document.getElementById('selectedRoleCount').textContent = count;
            }

            // Double-click to move items
            leftList.addEventListener('dblclick', function() {
                moveSelectedItems(leftList, rightList);
            });

            rightList.addEventListener('dblclick', function() {
                moveSelectedItems(rightList, leftList);
            });

            rolesLeftList.addEventListener('dblclick', function() {
                moveSelectedItems(rolesLeftList, rolesRightList);
                updateRoleCount();
            });

            rolesRightList.addEventListener('dblclick', function() {
                moveSelectedItems(rolesRightList, rolesLeftList);
                updateRoleCount();
            });

            // Initialize role count
            updateRoleCount();
        });

        // Reset functions
        function resetLists() {
            const leftList = document.getElementById('leftList');
            const rightList = document.getElementById('rightList');

            // Move all items back to left list
            Array.from(rightList.options).forEach(option => {
                leftList.appendChild(option);
            });

            // Clear search fields
            document.getElementById('searchLeft').value = '';
            document.getElementById('searchRight').value = '';
        }

        function resetRoles() {
            const rolesLeftList = document.getElementById('rolesLeftList');
            const rolesRightList = document.getElementById('rolesRightList');

            // Move all roles back to left list
            Array.from(rolesRightList.options).forEach(option => {
                rolesLeftList.appendChild(option);
            });

            // Clear search fields
            document.getElementById('searchRolesLeft').value = '';
            document.getElementById('searchRolesRight').value = '';

            // Update count
            document.getElementById('selectedRoleCount').textContent = '0';
        }
</script>