@extends('layouts.front.main_layout')
@section('content')
<br><br><br>
<div class="container">
<div class="row justify-content-center">
@include('user.sidebar')
<div class="col-lg-10 col-md-10 col-sm-12 col-12">
<div class="account_manuRight">
<div class="form-content profiletab_content">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-12">
<p class="ms-3 mb-3">Wishlist</p>
</div>
</div>
<div class="search-about-wrap">
<div id="template-list" class="row">
{{-- @foreach ($templates as $template)
<div class="col-lg-4 col-md-6 col-sm-6 col-12">
<div class="about_col-0">
<div class="wishlist"><a href="" class="heart-icons">
<i class="fas fa-heart"></i>
</a></div>
<a href="{{route('template.detail', $template->id)}}">
@if ($template->hasMedia('main_image'))
<img src="{{ $template->getFirstMediaUrl('main_image') }}" alt="Main Image"
width="300" />
@endif
</a>
<div class="about_col-wrap">
<h6><a href="{{route('template.detail', $template->id)}}">
{{$template->title}}
</a>
</h6>
<span class="span-text-1"><a href="{{route('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="" class="btn prev-1">Select</a>
<a href="{{route('template.detail', $template->id)}}" class="btn prev-2">Live Preview</a>
</div>
</div>
</div>
</div>
@endforeach --}}
</div>
</div>
<div class="pagination">
<ul class="pagination justify-content-center">
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('script')
<script>
$(document).ready(function() {
performWishlistSearch(1);
function performWishlistSearch(page = 1) {
$.ajax({
url: '{{ route('user.wishlist') }}',
method: 'GET',
data: {
current_page: page
},
success: function(response) {
console.log(response);
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) {
performWishlistSearch(page);
}
});
} else {
templateList.append('<p>No templates in your wishlist.</p>');
}
},
error: function(xhr) {
console.error('Error:', xhr.responseText);
}
});
}
$(document).on('click', '.heart-icons', function() {
const templateId = $(this).data('template-id');
const heartIcon = $(this).find('i');
// Perform AJAX request to add/remove from wishlist
$.ajax({
url: '{{ route('add.template.wishlist') }}',
method: 'POST',
data: {
template_id: templateId,
_token: '{{ 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();
location.reload(); // Reload the page
}, 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);
}
});
});
});
</script>
@endsection