<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="styles.css">
    <title>ENU Open Day - UX form</title>
</head>
<body>
    <div class="container text-center">
        <h1>Edinburgh Napier University - Open day 2023</h1>
        <p>Please drag the items from left and drop them on the right for reordering them</p>
        <div class="row">
            <div id="draggable-area" class="col">
                <!-- Draggable items go here -->
                <div class="draggable-item list-group-item" data-item="Banner image">Banner image</div>
                <div class="draggable-item list-group-item" data-item="Social share links">Social share links</div>
                <div class="draggable-item list-group-item" data-item="Overview">Overview</div>
                <div class="draggable-item list-group-item" data-item="Apply button">Apply button</div>
                <div class="draggable-item list-group-item" data-item="How to apply">How to apply</div>
                <div class="draggable-item list-group-item" data-item="Contact us button">Contact us button</div>
                <div class="draggable-item list-group-item" data-item="Student stories">Student stories</div>
                <div class="draggable-item list-group-item" data-item="Course details">Course details</div>
                <div class="draggable-item list-group-item" data-item="Industry accreditations">Industry accreditations</div>
                <div class="draggable-item list-group-item" data-item="Entry requirements">Entry requirements</div>
                <div class="draggable-item list-group-item" data-item="Fees & funding">Fees & funding</div>
                <div class="draggable-item list-group-item" data-item="Careers">Careers</div>
                <div class="draggable-item list-group-item" data-item="Course specific stats">Course specific stats</div>
                <div class="draggable-item list-group-item" data-item="Related courses">Related courses</div>
                <div class="draggable-item list-group-item" data-item="Testimonials">Testimonials</div>
                <div class="draggable-item list-group-item" data-item="Environmental considerations">Environmental considerations</div>
                <div class="draggable-item list-group-item" data-item="Favourite/Save for later button">Favourite/Save for later button</div>
            </div>
            <div id="droppable-area" class="col">
            <!-- Dropped items will go here -->
            </div>
        </div>
    </div>
    
    <div class="form-container">
        <form action="submit.php" method="post" id="sortable-form">
            <div class="form-group">
                <!-- Hidden input to store the order -->
                <input type="hidden" name="order" id="order">
            </div>
            
            <div class="form-group">
                <!-- First select option (required) -->
                <label for="participant">Participant</label>
                <select name="participant" id="participant" class="form-control" required>
                    <option value="" disabled selected hidden>Select</option>
                    <option value="UG student">UG student</option>
                    <option value="PG student">PG Student</option>
                    <option value="Parents">Parents</option>
                </select>
                
                <!-- Second select option (required) -->
                <label for="campus">Campus</label>
                <select name="campus" id="campus" class="form-control" required>
                    <option value="" disabled selected hidden>Select</option>
                    <option value="Sighthill">Sighthill</option>
                    <option value="Craiglockhart">Craiglockhart</option>
                    <!--<option value="Merchiston">Merchiston</option>-->
                </select>
            </div>
    
            <div class="form-group">
                <!-- Textarea (optional) -->
                <label for="comments">Comments (optional):</label>
                <textarea name="comments" id="comments" class="form-control" rows="3"></textarea>
            </div>
    
            <button type="submit" class="btn btn-success">Submit</button>
        </form>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="jquery-ui.min.js"></script>
    <script src="jqueryui-touch.js"></script>
    <script src="script.js"></script>
    <script>
        $(document).ready(function () {
            $("#droppable-area").sortable();
        });
    </script>

</body>
</html>
