File: /mnt/data/dreamsai-wp/wp-content/dreams-ai/templates/search-form.php
<?php
/**
* Tour Search Form
*/
?>
<!-- Tour Search -->
<div class="card">
<div class="card-body">
<div class="banner-form">
<form class="d-lg-flex" id="tour-search-form" action="<?php echo esc_url(get_permalink()); ?>" method="get">
<div class="d-flex form-info">
<div class="form-item dropdown">
<div data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" role="menu">
<label class="form-label fs-14 text-default mb-1">Where would like to go?</label>
<input type="text" class="form-control" name="destination" value="<?php echo isset($_GET['destination']) ? esc_attr($_GET['destination']) : ''; ?>" placeholder="Enter destination">
<p class="fs-12 mb-0">Enter destination</p>
</div>
</div>
<div class="form-item">
<label class="form-label fs-14 text-default mb-1">Check In</label>
<input type="text" class="form-control datetimepicker" name="check_in" value="<?php echo isset($_GET['check_in']) ? esc_attr($_GET['check_in']) : ''; ?>" placeholder="Check-in date">
<p class="fs-12 mb-0">Select date</p>
</div>
<div class="form-item dropdown">
<div data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" role="menu">
<label class="form-label fs-14 text-default mb-1">Duration (Days)</label>
<input type="text" class="form-control" id="durationInput" name="duration" placeholder="Select duration" readonly value="<?php echo isset($_GET['duration']) ? esc_attr($_GET['duration']) : ''; ?>">
<input type="hidden" id="durationIdInput" name="tour_duration_days" value="<?php echo isset($_GET['tour_duration_days']) ? esc_attr($_GET['tour_duration_days']) : ''; ?>">
<p class="fs-12 mb-0">Select duration in days</p>
</div>
<div class="dropdown-menu dropdown-md p-0">
<ul id="durationList">
<!-- Add an option to clear selection -->
<li class="border-bottom">
<a class="dropdown-item" href="javascript:void(0);" data-value="" data-name="">Clear selection</a>
</li>
<?php
// Fetch all duration terms
$duration_days = get_terms(array(
'taxonomy' => 'tour_duration_days',
'hide_empty' => false,
));
if (!empty($duration_days) && !is_wp_error($duration_days)) {
// Sort numerically based on the numeric part in the term name
usort($duration_days, function ($a, $b) {
$a_num = (int) filter_var($a->name, FILTER_SANITIZE_NUMBER_INT);
$b_num = (int) filter_var($b->name, FILTER_SANITIZE_NUMBER_INT);
return $a_num - $b_num;
});
// Display the sorted terms
foreach ($duration_days as $term) {
$selected = (isset($_GET['tour_duration_days']) && $_GET['tour_duration_days'] == $term->term_id) ? 'selected' : '';
echo '<li class="border-bottom">
<a class="dropdown-item ' . esc_attr($selected) . '" href="javascript:void(0);"
data-value="' . esc_attr($term->term_id) . '"
data-name="' . esc_attr($term->name) . '">' . esc_html($term->name) . '</a>
</li>';
}
}
?>
</ul>
</div>
</div>
<div class="form-item dropdown w-100">
<div data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" role="menu" class="w-100">
<label class="form-label fs-14 text-default mb-1">Travellers</label>
<h6 class="mb-0"><span class="traveller-count"><?php echo isset($_GET['travellers']) ? intval($_GET['travellers']) : 1; ?></span> <span class="fw-normal fs-14">Persons</span></h6>
<p class="fs-12 mb-0"><span class="adult-count"><?php echo isset($_GET['adults']) ? intval($_GET['adults']) : 1; ?></span> Adult</p>
<input type="hidden" name="travellers" id="travellers-input" value="<?php echo isset($_GET['travellers']) ? intval($_GET['travellers']) : 1; ?>">
<input type="hidden" name="adults" id="adults-input" value="<?php echo isset($_GET['adults']) ? intval($_GET['adults']) : 1; ?>">
<input type="hidden" name="children" id="children-input" value="<?php echo isset($_GET['children']) ? intval($_GET['children']) : 0; ?>">
</div>
<!-- Traveller dropdown menu -->
<div class="dropdown-menu dropdown-menu-end dropdown-xl p-3">
<h5 class="mb-3">Select Travelers & Class</h5>
<!-- Adults -->
<div class="mb-3 border br-10 info-item pb-1">
<div class="col-md-12">
<div class="mb-3 d-flex align-items-center justify-content-between">
<label class="form-label text-gray-9 mb-2">Adults</label>
<div class="custom-increment">
<div class="input-group">
<span class="input-group-btn float-start">
<button type="button" class="quantity-left-minus btn btn-light btn-number" data-type="minus" data-field="adults">
<span><i class="isax isax-minus"></i></span>
</button>
</span>
<input type="text" name="adults_count" class="input-number adults-count" value="<?php echo isset($_GET['adults']) ? intval($_GET['adults']) : 1; ?>" min="1" max="20">
<span class="input-group-btn float-end">
<button type="button" class="quantity-right-plus btn btn-light btn-number" data-type="plus" data-field="adults">
<span><i class="isax isax-add"></i></span>
</button>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="mb-3 d-flex align-items-center justify-content-between">
<label class="form-label text-gray-9 mb-2">Children <span class="text-default fw-normal">( 2-12 Yrs )</span></label>
<div class="custom-increment">
<div class="input-group">
<span class="input-group-btn float-start">
<button type="button" class="quantity-left-minus btn btn-light btn-number" data-type="minus" data-field="children">
<span><i class="isax isax-minus"></i></span>
</button>
</span>
<input type="text" name="children_count" class="input-number children-count" value="<?php echo isset($_GET['children']) ? intval($_GET['children']) : 0; ?>" min="0" max="10">
<span class="input-group-btn float-end">
<button type="button" class="quantity-right-plus btn btn-light btn-number" data-type="plus" data-field="children">
<span><i class="isax isax-add"></i></span>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-end">
<a href="javascript:void(0);" class="btn btn-light btn-sm me-2 cancel-travellers">Cancel</a>
<button type="button" class="btn btn-primary btn-sm apply-travellers">Apply</button>
</div>
</div>
</div>
</div>
<button type="submit" class="btn btn-primary search-btn rounded">Search</button>
</form>
</div>
</div>
</div>
<!-- /Tour Search -->
<script>
jQuery(document).ready(function($) {
$('#durationList .dropdown-item').click(function(e) {
e.preventDefault();
var termId = $(this).data('value');
var termName = $(this).data('name');
// Update the visible input field
$('#durationInput').val(termName);
// Update the hidden input field with term ID
$('#durationIdInput').val(termId);
// Close the dropdown
$(this).closest('.dropdown-menu').removeClass('show');
});
// Handle increment/decrement buttons
// Apply traveler selection
$('.apply-travellers').click(function(){
var adults = parseInt($('.adults-count').val()) || 1;
var children = parseInt($('.children-count').val()) || 0;
var total = adults + children;
// Update display
$('.traveller-count').text(total);
$('.adult-count').text(adults);
// Update hidden inputs
$('#travellers-input').val(total);
$('#adults-input').val(adults);
$('#children-input').val(children);
// Close dropdown
$('.form-item.dropdown .dropdown-menu').removeClass('show');
});
// Cancel traveler selection
$('.cancel-travellers').click(function(){
$('.form-item.dropdown .dropdown-menu').removeClass('show');
});
});
</script>