<?php $__env->startSection('content'); ?>
<section class="search-heading">
<div class="container">
<div class="row">
<div class="col-12">
<div class="search-heading">
<div>
<h6><a href="index.html">Home Page</a></h6>
</div>
<div class="search-heading-gap"></div>
<div>
<h6><a href="search-page.html">Search</a></h6>
</div>
</div>
</div>
</div>
</section>
<div id="flash-message" style="display: none;"></div>
<section class="fields">
<div class="container">
<div class="row">
<div class="col-12">
<div class="fields-2">
<div class="search-form-inner-field">
<input type="text" class="form-control formm1" name="your-message"
placeholder="Enter keyword" required>
<button class="btn formm1-icon" id="search-button">Search</button>
</div>
<button class="clear-button-1 d-lg-block d-md-block d-none">Clear All</button>
</div>
</div>
</div>
</div>
</section>
<!-- Mobile view -->
<section class="search-buttons-section d-lg-none d-md-none d-sm-block">
<div class="container">
<div class="row">
<div class="col-12">
<div class="search-buttons">
<div class="search-buttons-text">
<div id="industry-content">
<div class="category">
<div class="accordion" id="accordionExample01">
<div class="accordion-item">
<h2 class="accordion-header" id="heading111">
<button class="accordion-button bttnn" type="button"
data-bs-toggle="collapse" data-bs-target="#collapse111"
aria-expanded="true" aria-controls="collapse111">
<a href="">
<h5>Industry</h5>
</a>
</button>
</h2>
<div id="collapse111" class="accordion-collapse collapse show"
aria-labelledby="heading111" data-bs-parent="#accordionExample01">
<div class="accordion-body-1">
<?php $__currentLoopData = $industries; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $industry): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<div class="form-check">
<input class="form-check-input" type="checkbox"
name="industry[]" value="<?php echo e($industry->id); ?>"
id="industry-<?php echo e($industry->id); ?>">
<label class="form-check-label"
for="industry-<?php echo e($industry->id); ?>">
<?php echo e($industry->title); ?>
</label>
</div>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>
</div>
</div>
<hr>
<div class="accordion-item">
<h2 class="accordion-header" id="heading222">
<button class="accordion-button collapsed bttnn" type="button"
data-bs-toggle="collapse" data-bs-target="#collapse222"
aria-expanded="false" aria-controls="collapse222">
<a href="">
<h5>Price</h5>
</a>
</button>
</h2>
<div id="collapse222" class="accordion-collapse collapse"
aria-labelledby="heading222" data-bs-parent="#accordionExample01">
<div class="accordion-body-1">
<form action="">
<div class="search-filters-range">
<div class="search-filters-range_component">
<span class="search-filters-range_component__prefix">
$
</span>
<input type="text" name="price_min"
class="search-filters-range_component__input"
placeholder="3" title="Enter price as a whole number"
pattern="^\d*$" data-analytics-label-id="min"
data-length-format-target="input" value="">
</div>
<span class="search-filters-range_component__spacer">-</span>
<div class="search-filters-range_filter_component">
<span class="search-filters-range_component__prefix">
$
</span>
<input type="text" name="price_max"
class="search-filters-range_component__input"
placeholder="10000"
title="Enter price as a whole number" pattern="^\d*$"
data-analytics-label-id="max"
data-length-format-target="input" value="">
</div>
<button type="submit" aria-label="submit"
class="search-filters-range_component__button">
<span class="search-filters-range_chevron">
<i class="fas fa-angle-right"></i>
</span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="search-buttons-group">
<label for="buttons-group">Sort by:</label>
<select name="buttons-group" id="buttons-group">
<option value="Best match">Best match</option>
<option value="Newes">Newest</option>
<option value="Trending">Trending</option>
</select>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- desktop view -->
<section class="search-about">
<div class="container">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-12 col-12">
<div class="category d-lg-block d-md-block d-none">
<div class="accordion" id="accordionExample01">
<div class="accordion-item">
<h2 class="accordion-header" id="heading111">
<button class="accordion-button bttnn" type="button" data-bs-toggle="collapse"
data-bs-target="#collapse111" aria-expanded="true" aria-controls="collapse111">
<a href="">
<h5>Industry</h5>
</a>
</button>
</h2>
<div id="collapse111" class="accordion-collapse collapse show"
aria-labelledby="heading111" data-bs-parent="#accordionExample01">
<div class="accordion-body-1">
<!-- "All Types" checkbox -->
<!-- Industry checkboxes loop -->
<?php $__currentLoopData = $industries; $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $industry): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>
<div class="form-check">
<input class="form-check-input industry-checkbox" type="checkbox"
name="industry[]" value="<?php echo e($industry->id); ?>"
id="industry-<?php echo e($industry->id); ?>"
<?php echo e(in_array($industry->id, old('industry', [])) ? 'checked' : ''); ?>>
<label class="form-check-label"
for="industry-<?php echo e($industry->id); ?>"><?php echo e($industry->title); ?></label>
</div>
<?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-10 col-md-10 col-sm-12 col-12">
<div class="search-about-wrap">
<div id="template-list" class="row">
</div>
</div>
</div>
</div>
</div>
<div class="pagination">
<ul class="pagination justify-content-center">
</ul>
</div>
</div>
</section>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('script'); ?>
<script>
$(document).ready(function() {
var user_logged_in = <?php echo json_encode(Auth::check(), 15, 512) ?>;
performSearch();
$('.industry-checkbox, input[name="your-message"]').on('change keyup', function(e) {
if ($(e.target).attr('name') === 'your-message') {
$('.industry-checkbox').prop('checked', false);
}
performSearch();
});
$('.clear-button-1').on('click', function() {
$('input[name="your-message"]').val('');
performSearch();
});
function performSearch(page = 1) {
let selectedIndustries = [];
let searchTerm = $('input[name="your-message"]').val().toLowerCase();
$('.industry-checkbox:checked').each(function() {
const value = $(this).val();
if (value) {
selectedIndustries.push(value);
}
});
$.ajax({
url: '<?php echo e(route('template')); ?>',
method: 'GET',
data: {
industry: selectedIndustries,
search: searchTerm,
current_page: page,
},
success: function(response) {
console.log(response.data);
const templateList = $('#template-list');
templateList.empty();
if (response.templates.length > 0) {
response.templates.forEach(template => {
templateList.append(`
<div class="col-lg-4 col-md-6 col-sm-6 col-12">
<div class="about_col-0">
<div class="wishlist">
<a href="javascript:void(0)" class="heart-icons" data-template-id="${template.id}">
${template.is_in_wishlist
? '<i class="fas fa-heart"></i>'
: '<i class="far fa-heart"></i>'}
</a>
</div>
<a href="#">
${template.image_url ? `<img src="${template.image_url}" alt="Main Image" width="300">` : ''}
</a>
<div class="about_col-wrap">
<h6><a href="/template/detail/${template.id}">${template.title}</a></h6>
<span class="span-text-1"><a href="/template/detail/${template.id}"> by Inclusion in Ecommerce</a></span>
</div>
<div class="rating-details">
<div class="rating">
<a href="">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
<span class="rating-no">(180)</span><br>
<span class="rating-no">3.5k used</span>
</a>
</div>
<div class="rating-buttons">
<a href="javascript:void(0)" class="btn prev-1 selectBtn" data-template-id="${template.id}">Select</a>
<a href="/template/detail/${template.id}" class="btn prev-2">View</a>
</div>
</div>
</div>
</div>
`);
});
const paginationContainer = $('.pagination ul');
paginationContainer.empty();
if (response.current_page > 1) {
paginationContainer.append(`
<li class="page-item">
<a class="page-link" href="#" data-page="${response.current_page - 1}">
<i class="fas fa-angle-left"></i>
</a>
</li>
`);
} else {
paginationContainer.append(`
<li class="page-item disabled">
<a class="page-link" href="#"><i class="fas fa-angle-left"></i></a>
</li>
`);
}
for (let i = 1; i <= response.last_page; i++) {
if (i == response.current_page) {
paginationContainer.append(`
<li class="page-item active">
<a class="page-link" href="#">${i}</a>
</li>
`);
} else {
paginationContainer.append(`
<li class="page-item">
<a class="page-link" href="#" data-page="${i}">${i}</a>
</li>
`);
}
}
if (response.current_page < response.last_page) {
paginationContainer.append(`
<li class="page-item">
<a class="page-link" href="#" data-page="${response.current_page + 1}">
<i class="fas fa-angle-right"></i>
</a>
</li>
`);
} else {
paginationContainer.append(`
<li class="page-item disabled">
<a class="page-link" href="#"><i class="fas fa-angle-right"></i></a>
</li>
`);
}
$('.pagination ul').on('click', '.page-link', function(e) {
e.preventDefault();
const page = $(this).data('page');
if (page) {
performSearch(page);
}
});
} else {
templateList.append(
'<p>No templates found for the selected industries or search term.</p>'
);
}
},
error: function(xhr) {
console.error('Error:', xhr.responseText);
}
});
}
// Click event for the heart icon (to add/remove from wishlist)
$(document).on('click', '.heart-icons', function() {
const templateId = $(this).data('template-id');
const heartIcon = $(this).find('i');
if (user_logged_in) {
$.ajax({
url: '<?php echo e(route('add.template.wishlist')); ?>',
method: 'POST',
data: {
template_id: templateId,
_token: '<?php echo e(csrf_token()); ?>'
},
success: function(response) {
if (response.success) {
if (response.is_in_wishlist) {
heartIcon.removeClass('far fa-heart').addClass(
'fas fa-heart');
} else {
heartIcon.removeClass('fas fa-heart').addClass(
'far fa-heart');
}
$('#flash-message').html(
'<div class="alert alert-success">' + response
.message + '</div>').show();
} else {
$('#flash-message').html(
'<div class="alert alert-danger">' + response
.message + '</div>').show();
}
setTimeout(function() {
$('#flash-message').fadeOut();
}, 3000);
},
error: function(xhr) {
$('#flash-message').html(
'<div class="alert alert-danger">Something went wrong. Please try again later.</div>'
).show();
setTimeout(function() {
$('#flash-message').fadeOut();
}, 3000);
}
});
} else {
var currentUrl = "<?php echo e(Route::current()->getName()); ?>";
console.log(currentUrl);
$('#exampleModal0 #next_request').val(currentUrl);
$('#exampleModal0').modal('show');
}
});
});
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.front.main_layout', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /var/www/html/spion/resources/views/front/pages/template.blade.php ENDPATH**/ ?>