<?php																																										

// Include necessary files
include_once("header.php");
include_once("sidebar.php");
?>

<style>
    /* Style for the modal */
.modal {
    display: none; /* Hide the modal by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Semi-transparent background */
    z-index: 1;
}

.modal-content {
    background-color: white;
    padding: 20px;
    border-radius: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
}

/* Styling for form elements */
.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="date"] {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

button[type="submit"] {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

/* Styling for the "Add Member" button */
#addMemberButton {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

#addMemberButton:hover {
    background-color: #218838;
}


/* Styling for the dropdown */
#member {
    width: 70%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

/* Styling for the submit button */
input[type="submit"] {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

input[type="submit"]:hover {
    background-color: #0056b3;
}

</style>

<section>
    <div class="column">
    <?php
// Check if there's an error parameter in the URL
if (isset($_GET['error'])) {
    $errorMessage = "";

    // Determine the error based on the parameter
    switch ($_GET['error']) {
        case "active_booking":
            $errorMessage = "You already have an active booking. Please wait until your current booking ends.";
            break;
        case "query_preparation":
            $errorMessage = "Error during query preparation. Please try again.";
            break;
        case "query_execution":
            $errorMessage = "Error during query execution. Please try again.";
            break;
        default:
            $errorMessage = "An error occurred. Please try again.";
    }

    // Display the error message
    echo "<p class='error-message'>$errorMessage</p>";
}
?>

<form action="process_advance.php" method="post">
    <div>

<select name="member" id="member" required style="width: 80%;">
    <option value="" disabled selected>Select Existing Member</option> <!-- Placeholder option -->
    <?php
    // Fetch and populate member options
    $members = getExistingMembers(); // Define this function to fetch members
    foreach ($members as $member) {
        echo "<option value='{$member['memberid']}'>{$member['firstname']} {$member['lastname']}</option>";
    }
    ?>
</select>
<!-- Initialize Select2 -->
<script>
    $(document).ready(function() {
        $('#member').select2({
            placeholder: "Select Existing Member",
            allowClear: true
        });
    });
</script>
        <button type="button" id="addMemberButton" style="width: 19%;">Add Member</button>
    </div>
<div>
    <br>
<!-- Include Select2 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />

<!-- Dropdown with inline search -->
<select name="package" id="package" style="width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box;" required>
    <option value="" disabled selected>Select Package</option>
    <?php
    // Fetch and populate package options
    $packages = getExistingPackages(); // Define this function to fetch packages

    // Define the membership categories (category_id => category_name)
    $categories = [
        1 => 'Common',
        2 => 'Dedicated',
        3 => 'Board',
        4 => 'Whole Venue'
        // Add more categories as needed
    ];

    foreach ($packages as $package) {
        $categoryId = $package['category'];
        $categoryName = isset($categories[$categoryId]) ? $categories[$categoryId] : 'Unknown Category';
        echo "<option value='{$package['packageid']}'>{$package['packagename']} / {$package['price']} ({$categoryName})</option>";
    }
    ?>
</select>

<!-- Include jQuery and Select2 JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

<!-- Initialize Select2 -->
<script>
    $(document).ready(function() {
        $('#package').select2({
            placeholder: "Select Package",
            allowClear: true
        });
    });
</script>
</div>
    <br>
    <!-- New Start Date field for advanced booking -->
    <div>
        <label for="start_date">Start Date:</label>
        <!-- You can also use type="date" if you only need the date (no time). -->
        <input 
            type="datetime-local" 
            name="start_date" 
            id="start_date" 
            required
            style="padding: 10px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; width:100%;">
    </div>
    <div>
        <input type="submit" value="Book">
    </div>
</form>

<div id="addMemberModal" class="modal" style="display: none;">
    <div class="modal-content">
        <h2>Add Member</h2>
        <form id="addMemberForm">
            <div class="form-group">
                  <label for="rfid">Member ID:</label>
                   <input type="text" id="rfid" name="rfid">
            </div>
            <div class="form-group">
                <label for="firstname">First Name:</label>
                <input type="text" id="firstname" name="firstname" required>
            </div>
            <div class="form-group">
                <label for="lastname">Last Name:</label>
                <input type="text" id="lastname" name="lastname" required>
            </div>
            <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" >
            </div>
            <div class="form-group">
                <label for="number">Number:</label>
                <input type="text" id="number" name="number" >
            </div>
            <div class="form-group">
                <label for="birthday">Birthday:</label>
                <input type="date" id="birthday" name="birthday" >
            </div>
            <div class="form-group">
                <button type="submit">Add Member</button>
            </div>
        </form>
    </div>
</div>


<script>

    const addMemberButton = document.getElementById('addMemberButton');
    const addMemberModal = document.getElementById('addMemberModal');
    const addMemberForm = document.getElementById('addMemberForm');

    // Show modal when "Add Member" button is clicked
    addMemberButton.addEventListener('click', function() {
        addMemberModal.style.display = 'block';
    });

    // Hide modal when clicking outside of the modal content
    window.addEventListener('click', function(event) {
        if (event.target === addMemberModal) {
            addMemberModal.style.display = 'none';
        }
    });

// Handle form submission
addMemberForm.addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent the default form submission

    // Get form input values including RFID
    const firstname = addMemberForm.querySelector('#firstname').value;
    const lastname = addMemberForm.querySelector('#lastname').value;
    const email = addMemberForm.querySelector('#email').value;
    const number = addMemberForm.querySelector('#number').value;
    const birthday = addMemberForm.querySelector('#birthday').value;
    const rfid = addMemberForm.querySelector('#rfid').value;

    // Perform the form submission using AJAX
    const xhr = new XMLHttpRequest();
    xhr.open('POST', 'add_member_ajax.php'); // Adjust the URL
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // Handle the response (if needed)

            // Get the ID of the newly added member from the response
            const newMemberId = xhr.responseText;

            // Create a new option element for the newly added member
            const newMemberOption = document.createElement('option');
            newMemberOption.value = newMemberId; // The ID of the newly added member
            newMemberOption.text = `${firstname} ${lastname}`; // Display name
            newMemberOption.selected = true; // Select the new member

            // Add the new option to the dropdown
            memberDropdown.appendChild(newMemberOption);

            // Hide the modal after successful submission
            addMemberModal.style.display = 'none';
        }
    };

    // Send the form data including RFID
    const formData = `firstname=${firstname}&lastname=${lastname}&email=${email}&number=${number}&birthday=${birthday}&rfid=${rfid}`;
    xhr.send(formData);
    });


    const memberDropdown = document.getElementById('member');
    let optionsArray = Array.from(memberDropdown.options);

    memberDropdown.addEventListener('input', function () {
        const searchValue = this.value.toLowerCase();

        optionsArray.forEach(option => {
            const optionText = option.text.toLowerCase();
            option.style.display = optionText.includes(searchValue) ? '' : 'none';
        });
    });
</script>



 </div>      
</section>

</body>
</html>