<?php include 'header.php'; ?>

<style>
    .tabs .nav-link {
        border: none;
        padding: 12px 20px;
        font-weight: 500;
        color: #6c757d;
    }

    .tabs .nav-link.active {
        color: #0d6efd;
        border-bottom: 3px solid #0d6efd;
    }

</style>

<div class="dashboard-main-body">
   <div class="d-flex flex-wrap align-items-center justify-content-between gap-3 mb-24">
        <h6 class="fw-semibold mb-0">Add Facility Booking</h6>
    </div>
    <div class="d-flex flex-wrap align-items-center justify-content-end gap-3 mb-3">
        <a type="button" href="facility_book.php" class="tooltip-button btn bg-primary-600 text-white border border-primary-600 radius-8 px-12 py-11 d-flex align-items-center" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-custom-class="tooltip-primary" title="Listing">
            <iconify-icon icon="ic:baseline-arrow-back" class="icon text-xl line-height-1"></iconify-icon>
        </a>
    </div>

    
<div class="container-fluid mt-3">

    <div class="card">

        <div class="card-body">

            <h6 class="mb-4 text-xl">
                Add Facility Booking
            </h6>

            <form method="post" id="facilityForm">

                <div class="row gy-3 mt-4">

                    <!-- Amenity -->
                    <div class="col-sm-4">

                        <label class="form-label">
                            Amenity <span class="text-danger">*</span>
                        </label>

                        <select name="amenity"
                                class="form-select"
                                required>

                            <option value="">Select Amenity</option>
                            <option value="Club House">Club House</option>
                            <option value="Swimming Pool">Swimming Pool</option>
                            <option value="Party Hall">Party Hall</option>
                            <option value="Gym">Gym</option>
                            <option value="Garden Area">Garden Area</option>
                            <option value="Meeting Hall">Meeting Hall</option>

                        </select>

                    </div>

                    <!-- Booked By -->
                    <div class="col-sm-4">

                        <label class="form-label">
                            Booked By <span class="text-danger">*</span>
                        </label>

                        <input type="text"
                               name="booked_by"
                               class="form-control"
                               placeholder="Enter Booked By"
                               required>

                    </div>

                    <!-- Booking Date -->
                    <div class="col-sm-4">

                        <label class="form-label">
                            Booking Date <span class="text-danger">*</span>
                        </label>

                        <input type="date"
                               name="booking_date"
                               class="form-control"
                               required>

                    </div>

                    <!-- Purpose -->
                    <div class="col-sm-4">

                        <label class="form-label">
                            Purpose <span class="text-danger">*</span>
                        </label>

                        <input type="text"
                               name="purpose"
                               class="form-control"
                               placeholder="Enter Purpose"
                               required>

                    </div>

                    <!-- Start Time -->
                    <div class="col-sm-4">

                        <label class="form-label">
                            Start Time <span class="text-danger">*</span>
                        </label>

                        <input type="time"
                               name="start_time"
                               class="form-control"
                               required>

                    </div>

                    <!-- Charges -->
                    <div class="col-sm-4">

                        <label class="form-label">
                            Charges <span class="text-danger">*</span>
                        </label>

                        <input type="number"
                               name="charges"
                               class="form-control"
                               placeholder="Enter Charges"
                               required>

                    </div>

                    <!-- Approve Status -->
                    <div class="col-12">

                        <label class="form-label d-block mb-2">
                            Approve Status
                            <span class="text-danger">*</span>
                        </label>

                        <div class="d-flex flex-wrap gap-4">

                            <!-- Pending -->
                            <div class="form-check">

                                <input class="form-check-input"
                                       type="radio"
                                       name="approve_status"
                                       id="pending"
                                       value="Pending"
                                       checked>

                                <label class="form-check-label"
                                       for="pending">

                                    Pending

                                </label>

                            </div>

                            <!-- Approved -->
                            <div class="form-check">

                                <input class="form-check-input"
                                       type="radio"
                                       name="approve_status"
                                       id="approved"
                                       value="Approved">

                                <label class="form-check-label"
                                       for="approved">

                                    Approved

                                </label>

                            </div>

                            <!-- Rejected -->
                            <div class="form-check">

                                <input class="form-check-input"
                                       type="radio"
                                       name="approve_status"
                                       id="rejected"
                                       value="Rejected">

                                <label class="form-check-label"
                                       for="rejected">

                                    Rejected

                                </label>

                            </div>

                        </div>

                    </div>

                    <!-- SAVE BUTTON -->
                    <div class="col-12 text-end mt-4">

                        <button type="submit"
                                class="btn btn-primary-600">

                            <i class="bi bi-floppy"></i> Save

                        </button>

                    </div>

                </div>

            </form>

        </div>

    </div>



    
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Password toggle functionality
        const togglePassword = document.getElementById('togglePassword');
        const passwordInput = document.getElementById('password');

        if (togglePassword && passwordInput) {
            togglePassword.addEventListener('click', function () {
                const isPassword = passwordInput.type === 'password';
                passwordInput.type = isPassword ? 'text' : 'password';
                this.classList.toggle('bi-eye');
                this.classList.toggle('bi-eye-slash');
            });
        }

        // Role dropdown functionality
        const search = document.getElementById('search');
        const dropdown = document.getElementById('roleDropdown');
        const roleItems = dropdown ? dropdown.querySelectorAll('li') : [];

        let selectedRole = '';

        function showDropdown() {
            if (dropdown) {
                dropdown.style.display = 'block';
            }
        }

        function hideDropdown() {
            if (dropdown) {
                dropdown.style.display = 'none';
            }
        }

        function showAllItems() {
            roleItems.forEach(item => item.style.display = 'block');
        }

        function filterDropdown() {
            const value = search.value.toLowerCase().trim();

            if (!dropdown) return;

            if (value === '') {
                hideDropdown();
                return;
            }

            let visibleCount = 0;
            roleItems.forEach(item => {
                if (item.textContent.toLowerCase().includes(value)) {
                    item.style.display = 'block';
                    visibleCount++;
                } else {
                    item.style.display = 'none';
                }
            });

            dropdown.style.display = visibleCount ? 'block' : 'none';
        }

        if (search && dropdown) {
            // Open on focus or click
            search.addEventListener('focus', () => {
                showAllItems();
                showDropdown();
            });

            search.addEventListener('click', () => {
                showAllItems();
                showDropdown();
            });

            // Typing
            search.addEventListener('input', filterDropdown);

            // Select role
            roleItems.forEach(item => {
                item.addEventListener('click', function () {
                    search.value = this.textContent;
                    selectedRole = this.textContent;
                    hideDropdown();
                    markRoleFieldAsValid();
                });
            });

            // Click outside → close
            document.addEventListener('click', function (e) {
                if (!e.target.closest('#search') && !e.target.closest('#roleDropdown')) {
                    hideDropdown();
                }
            });
        }

        // Form validation
        const form = document.getElementById('modelform');
        const nameInput = document.querySelector('[name="name"]');
        const mobileInput = document.querySelector('[name="mobile"]');
        const emailInput = document.querySelector('[name="email"]');

        // Helper function to show error
        function showError(input, message) {
            // Remove existing error
            const existingError = input.parentNode.querySelector('.error-message');
            if (existingError) {
                existingError.remove();
            }


            // Create error message element
            const errorDiv = document.createElement('div');
            errorDiv.className = 'error-message text-danger mt-1 small';
            errorDiv.textContent = message;

            // Insert after input
            input.parentNode.appendChild(errorDiv);

            // Focus on the input
            input.focus();
        }

        // Helper function to clear error
        function clearError(input) {
            const errorDiv = input.parentNode.querySelector('.error-message');
            if (errorDiv) {
                errorDiv.remove();
            }

        }

        // Mark role field as valid
        function markRoleFieldAsValid() {
            if (search) {
                search.style.borderColor = '#28a745';
            }
        }


        // Real-time validation
        if (nameInput) {
            nameInput.addEventListener('blur', validateName);
            nameInput.addEventListener('input', function () {
                if (this.value.trim()) clearError(this);
            });
        }

        if (mobileInput) {
            mobileInput.addEventListener('blur', validateMobile);
            mobileInput.addEventListener('input', function () {
                this.value = this.value.replace(/[^0-9]/g, '');
                if (this.value.length === 10) clearError(this);
            });
        }

        if (emailInput) {
            emailInput.addEventListener('blur', validateEmail);
            emailInput.addEventListener('input', function () {
                if (this.value.trim()) clearError(this);
            });
        }

        if (passwordInput) {
            passwordInput.addEventListener('blur', validatePassword);
            passwordInput.addEventListener('input', function () {
                if (this.value.trim() && this.value.length >= 6) clearError(this);
            });
        }

        if (search) {
            search.addEventListener('blur', validateRole);
            search.addEventListener('input', function () {
                if (this.value.trim()) clearError(this);
            });
        }

        // Form submission
        form.addEventListener('submit', function (e) {
            e.preventDefault();

            // Validate all fields
            const isNameValid = validateName();
            const isMobileValid = validateMobile();
            const isEmailValid = validateEmail();
            const isPasswordValid = validatePassword();
            const isRoleValid = validateRole();

            if (isNameValid && isMobileValid && isEmailValid && isPasswordValid && isRoleValid) {
                // Show success message
                Swal.fire({
                    icon: 'success',
                    title: 'Success!',
                    text: 'User added successfully',
                    confirmButtonColor: '#4a63ff',
                    timer: 2000,
                    timerProgressBar: true
                }).then(() => {
                    // Submit the form
                    form.submit();
                });
            } else {
                // Show error message
                Swal.fire({
                    icon: 'error',
                    title: 'Validation Error',
                    text: 'Please fix all errors before submitting',
                    confirmButtonColor: '#dc3545'
                });
            }
        });

        // Prevent form submission on Enter key in role search
        if (search) {
            search.addEventListener('keydown', function (e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    validateRole();
                }
            });
        }
    });
</script>

<?php include 'footer.php'; ?>