<?php $__env->startSection('content'); ?>
    <br><br><br>
    <div class="container">
        <div class="row justify-content-center">
            <?php echo $__env->make('user.sidebar', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?>

            <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">
                                


                            </div>
                        </div>
                        <div class="pagination">
                            <ul class="pagination justify-content-center">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<?php $__env->stopSection(); ?>
<?php $__env->startSection('script'); ?>
    <script>
        $(document).ready(function() {
            performWishlistSearch(1);

            function performWishlistSearch(page = 1) {
                $.ajax({
                    url: '<?php echo e(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: '<?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();
                            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>
<?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/user/wishlist.blade.php ENDPATH**/ ?>