<?php include_once('header.php'); ?>
<style>

.filter-box {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
}

.btn-purple {
    background: #3b0a57;
    color: #fff;
}

.btn-orange {
    background: #ff8c00;
    color: #fff;
}

.modal-content {
    border-radius: 15px;
}

.category-list {
    max-height: 300px;
    overflow-y: auto;
}
</style>
</head>

<body>

<div class="container mt-4">
    <div class="row">

        <!-- Sidebar -->
        <div class="col-md-3">
            <div class="filter-box">

                <h5>Filter</h5>

                <!-- Selected Category -->
                <div class="mb-3">
                    <label class="form-label">Course Category:</label>
                    <div class="badge bg-light text-dark">Art ✕</div>
                </div>

                <button class="btn btn-purple w-100 mb-3">Clear Filters ✕</button>

                <!-- Search -->
                <div class="mb-3">
                    <label>Search</label>
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Search">
                        <button class="btn btn-purple">🔍</button>
                    </div>
                </div>

                <!-- Dropdown -->
                <div class="mb-3">
                    <label>Course Category</label>
                    <select class="form-select" data-bs-toggle="modal" data-bs-target="#categoryModal">
                        <option>Art</option>
                    </select>
                </div>

            </div>
        </div>

        <!-- Content Area -->
        <div class="col-md-9">
            <div class="p-5 bg-dark text-white rounded">
                <h3>Tight Timeline?</h3>
                <p>Get on the Fast Track!</p>
                <button class="btn btn-orange">View Courses</button>
            </div>
        </div>

    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="categoryModal">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content p-4">

            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5>Course Category</h5>
                <button class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="row category-list">

                <!-- Left Column -->
                <div class="col-md-6">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" checked>
                        <label class="form-check-label">Art</label>
                    </div>

                    <div class="form-check">
                        <input class="form-check-input" type="checkbox">
                        <label class="form-check-label">Course Bundles</label>
                    </div>

                    <div class="form-check">
                        <input class="form-check-input" type="checkbox">
                        <label class="form-check-label">Early Childhood</label>
                    </div>

                    <div class="form-check">
                        <input class="form-check-input" type="checkbox">
                        <label class="form-check-label">EdTech</label>
                    </div>
                </div>

                <!-- Right Column -->
                <div class="col-md-6">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox">
                        <label class="form-check-label">Science/STEM</label>
                    </div>

                    <div class="form-check">
                        <input class="form-check-input" type="checkbox">
                        <label class="form-check-label">Social Studies</label>
                    </div>

                    <div class="form-check">
                        <input class="form-check-input" type="checkbox">
                        <label class="form-check-label">Special Education</label>
                    </div>
                </div>

            </div>

            <!-- Buttons -->
            <div class="mt-4 text-end">
                <button class="btn btn-purple">Clear ✕</button>
                <button class="btn btn-orange">Apply</button>
            </div>

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

<?php include_once('footer.php'); ?>