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

<style>
.role-dropdown {
    left: 15px;
    width: 92% !important;
}
</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 Dues Payment</h6>
    </div>
    <div class="d-flex flex-wrap align-items-center justify-content-end gap-3 mb-3">
        <a type="button" href="dues_payment.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="row gy-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <h6 class="mb-4 text-xl">Add Dues Payment</h6> <br />
                    <form id="modelform" action="" method="post">
                        <div class="row gy-3">
                            <div class="col-sm-4 position-relative">
                                <label class="form-label">Member Name<span class="text-danger">*</span></label>
                                <input type="text" placeholder="Search for Member Name" class="form-control dropdown-search" autocomplete="off" required />
                                <ul id="roleDropdown" class="role-dropdown">
                                    <li>Rahul Patel</li>
                                    <li>Neha Shah</li>
                                    <li>Dev Mistry</li>
                                </ul>
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label">Flat/Unit<span class="text-danger">*</span></label>
                                <input type="text" name="flat" class="form-control" placeholder="Enter Flat/Unit" value="" required />
                            </div>
                            <div class="col-sm-4 position-relative">
                                <label class="form-label">Month<span class="text-danger">*</span></label>
                                <input type="text" placeholder="Search for Month" class="form-control dropdown-search" autocomplete="off" required />
                                <ul id="roleDropdown" class="role-dropdown">
                                    <li>January</li>
                                    <li>February</li>
                                    <li>March</li>
                                    <li>April</li>
                                    <li>May</li>
                                    <li>June</li>
                                    <li>July</li>
                                    <li>August</li>
                                    <li>September</li>
                                    <li>October</li>
                                    <li>November</li>
                                    <li>December</li>
                                </ul>
                            </div>
                            <div class="col-sm-4 position-relative">
                                <label class="form-label">Payment Status<span class="text-danger">*</span></label>
                                <input type="text" placeholder="Search for Payment Status" class="form-control dropdown-search" autocomplete="off" required />
                                <ul id="roleDropdown" class="role-dropdown">
                                    <li>Paid</li>
                                    <li>Pending</li>
                                </ul>
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label">Payment Date<span class="text-danger">*</span></label>
                                <input type="text" id="singleDate" class="form-control" placeholder="dd-mm-yyyy" readonly required />
                            </div>
                            <div class="col-sm-4 position-relative">
                                <label class="form-label">Payment Mode<span class="text-danger">*</span></label>
                                <input type="text" placeholder="Search for Payment Mode" class="form-control dropdown-search" autocomplete="off" required />
                                <ul id="roleDropdown" class="role-dropdown">
                                    <li>Cash</li>
                                    <li>UPI</li>
                                    <li>Cheque</li>
                                </ul>
                            </div>
                            <div class="col-sm-4 position-relative">
                                <label class="form-label">Payment Type<span class="text-danger">*</span></label>
                                <input type="text" placeholder="Search for Payment Type" class="form-control dropdown-search" autocomplete="off" required />
                                <ul id="roleDropdown" class="role-dropdown">
                                    <li>Maintenance</li>
                                    <li>Water Bill</li>
                                    <li>Parking</li>
                                    <li>Electricity</li>
                                    <li>Other</li>
                                </ul>
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label">Amount<span class="text-danger">*</span></label>
                                <input type="number" name="amount" class="form-control" placeholder="Enter Amount" value="" required />
                            </div>
                            <div class="col-sm-4">
                                <label class="form-label">Mobile No<span class="text-danger">*</span></label>
                                <input type="text" name="mobile" class="form-control" placeholder="Enter Mobile No" maxlength="10" pattern="^\d{10}$" inputmode="numeric" oninput="this.value = this.value.replace(/[^0-9]/g, '')" required>
                            </div>
                            <div class="form-group text-end mt-4">
                                <button type="submit" class="btn btn-primary-600 px-32">
                                    <i class="bi bi-floppy"></i>
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Role Dropdown Search & Selection -->
<script>
document.addEventListener("DOMContentLoaded", function () {

    const dropdownInputs = document.querySelectorAll(".dropdown-search");

    dropdownInputs.forEach(function(input){

        const dropdown = input.nextElementSibling;
        const items = dropdown.querySelectorAll("li");

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

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

        input.addEventListener("focus", showDropdown);
        input.addEventListener("click", showDropdown);

        input.addEventListener("input", function(){

            let value = this.value.toLowerCase();

            items.forEach(function(item){

                if(item.textContent.toLowerCase().includes(value)){
                    item.style.display = "block";
                } else {
                    item.style.display = "none";
                }

            });

        });

        items.forEach(function(item){

            item.addEventListener("click", function(){

                input.value = this.textContent;
                hideDropdown();

            });

        });

        document.addEventListener("click", function(e){

            if(!input.contains(e.target) && !dropdown.contains(e.target)){
                hideDropdown();
            }

        });

    });

});
</script>
<!--date picker-->
<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/bundle.js"></script>
<!--date picker-->
<script>
    new Litepicker({
    element: document.getElementById('singleDate'),
    singleMode: true,
    format: 'DD-MM-YYYY',

    // ✅ month & year popup enabled
    dropdowns: {
      months: true,
      years: true
    }
  });
</script>

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