{include file="sections/header.tpl"}

<style>
.custom-select {
    position: relative;
    display: inline-block;
    width: 100%;
}

.custom-select-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.custom-select-options {
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 200px;
    overflow-y: auto;
}

.custom-select-options li {
    padding: 8px;
    cursor: pointer;
}

.custom-select-options li:hover {
    background-color: #f4f4f4;
}


</style>


  <div class="content-body">
            <!-- container starts -->
            <div class="container-fluid">
				
                <!-- row -->
				<div class="element-area">





<div class="col-xl-10 col-lg-6 mx-auto">
    <div class="card">
        <div class="card-header">
            <h4 class="card-title">Send sms to user</h4>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-8">
                    <div class="basic-form">
                        <form method="post" action="{$_url}notifications/single-send-post">
                            <div class="form-group row">
                                <label class="col-md-4 control-label text-right" for="selectedUserId">Select User</label>
                                <div class="col-md-8">
                                    <div class="custom-select">
                                        <input type="text" class="custom-select-input form-control" placeholder="Select..." required>
                                        <ul class="custom-select-options" name="user"></ul>
                                    </div>
                                    <input type="hidden" id="selectedUserId" name="id_customer" required>
                                </div>
                            </div>
                            <p></p>

                            <div class="form-group row">
                                <label class="col-md-4 control-label text-right" for="inlineFormCustomSelect">Send via</label>
                                <div class="col-md-8">
                                    <select class="me-sm-2 default-select form-control wide" name="method" required>
                                        <option value="sms" selected>SMS</option>
                                        <option value="whatsapp">Whatsapp</option>
                                        <option value="both">Both</option>
                                    </select>
                                </div>
                            </div>
<p></p>
                            <div class="form-group row">
                                <label class="col-md-4 control-label text-right" for="description">Message</label>
                                <div class="col-md-8">
                                    <textarea class="form-control" id="description" name="message" rows="4" required></textarea>
                                </div>
                            </div>
<p></p>
                            <div class="form-group row">
                                <div class="col-md-8 offset-md-4">
                                    <button class="btn btn-success" type="submit">Send</button>
                                    Or <a href="{$_url}dashboard">{$_L['Cancel']}</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="placeholders">
                        <p><strong>Use placeholders:</strong></p>
                        <p>[[name]] - Customer Name</p>
                        <p>[[user_name]] - Customer Username</p>
                        <p>[[phone]] - Customer Phone</p>
                        <p>[[company_name]] - Your Company Name</p>
                    </div>
                </div>
            </div>
        </div>
    </div>












</div>

<style>
    .form-group .control-label {
        text-align: right;
    }
    .placeholders {
        padding: 10px;
        background-color: ;
    }
    .placeholders p {
        margin: 5px 0;
    }
</style>




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






















</div>

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

</div>
</div>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>






















<script>



var PostUrl="{$_url}";

















{literal}




















document.addEventListener("DOMContentLoaded", function() {
    const selectInput = document.querySelector('.custom-select-input');
    const optionsList = document.querySelector('.custom-select-options');
    const selectedUserIdInput = document.getElementById('selectedUserId');
    const textInput = document.querySelector('.form-control-sm');

    // Function to fetch options based on search input
    function fetchOptions(searchTerm) {
        fetch( PostUrl+`plugin/getusers&username=${encodeURIComponent(searchTerm)}`)
            .then(response => response.json())
            .then(data => {
                // Clear previous options
                optionsList.innerHTML = '';

                if (data === null || data.length === 0) {
                    // If data is null or empty, replace with "user not found"
                    const li = document.createElement('li');
                    li.textContent = "User not found";
                    optionsList.appendChild(li);
                } else {
                    // Populate options list
                    data.forEach(option => {
                        const li = document.createElement('li');
                        li.textContent = option.label;
                        li.setAttribute('data-value', option.id); // Use id as data-value attribute
                        li.setAttribute('id', option.router_id); // Use router_id as id attribute
                        optionsList.appendChild(li);
                    });
                }
            })
            .catch(error => {
                console.error('Error fetching options:', error);
            });
    }

    // Select option
    optionsList.addEventListener('click', function(event) {
        const selectedOption = event.target.closest('li');
        if (selectedOption) {
            const routerId = selectedOption.getAttribute('id');
            const selectedone = selectedOption.getAttribute('data-value');
            const routerName = selectedOption.textContent.trim();
            selectInput.value = routerName;
            optionsList.style.display = 'none';

            // Update the hidden input field value with the selected user's ID
            selectedUserIdInput.value = selectedone;
            textInput.value = routerId ;
        }
    });

    // Show/hide options list
    selectInput.addEventListener('input', function() {
        const searchTerm = this.value.trim();
        if (searchTerm.length > 0) {
            fetchOptions(searchTerm);
            optionsList.style.display = 'block';
        } else {
            optionsList.style.display = 'none';
        }
    });

    // Hide options list when clicking outside
    document.addEventListener('click', function(event) {
        if (!event.target.closest('.custom-select')) {
            optionsList.style.display = 'none';
        }
    });
});
{/literal}




</script>









 {include file="sections/user-footer.tpl"}