<?php defined('BASEPATH') or exit('No direct script access allowed'); ?>

<div class="account-wishlist-container">
    <h1><?= ucfirst(lang('wishlist_title')) ?></h1>
    <p><?= ucfirst(lang('wishlist_sub_title')) ?></p>

    <ul class="wishlist-list" id="wishlistList">
        <?php if (!empty($wishlists)): ?>
            <?php foreach ($wishlists as $wishlist): ?>
                <li class="wishlist-item">
                    <div class="wishlist-header">
                        <span class="wishlist-date"><?= lang('wishlist_liked_on') ?> <?= date('d M Y', strtotime($wishlist->created_at)) ?></span>
                        <!-- <span class="wishlist-id">Wishlist ID: <?= $wishlist->id_wishlists ?></span> -->
                    </div>
                    <div class="wishlist-detail">
                        <a href="<?= base_url('product/' . $wishlist->alias) ?>">
                            <img src="<?= base_url('uploads/product/' .  $wishlist->product_image) ?>" alt="<?= $wishlist->product_title ?>" class="wishlist-product-thumbnail" />
                        </a>
                        <div class="wishlist-product-details" data-product-id="<?= $wishlist->product_id ?>" data-product-detail-id="<?= $wishlist->product_detail_id ?>">
                            <span class="wishlist-item-name"><a href="<?= base_url('product/' . $wishlist->alias) ?>"><?= $wishlist->product_title ?></a></span>
                            <!-- <span class="wishlist-item-variant"><?= $wishlist->variant ?></span> -->
                        </div>
                    </div>
                    <div class="wishlist-actions">
                        <button class="wishlist-remove-btn">
                            <i data-feather="trash"></i>
                        </button>
                        <!-- <button class="wishlist-add-to-cart-btn">
                            <?= lang('product_add_to_cart') ?>
                        </button> -->
                    </div>
                </li>
            <?php endforeach; ?>
        <?php else: ?>
            <li class="empty-wishlist">
                <p class="empty-wishlist-text">Belum ada wishlist.</p>
            </li>
        <?php endif; ?>
    </ul>
</div>

<script>
    $(document).ready(function() {
        const notyf = new Notyf({
            duration: 3000,
            position: {
                x: 'right',
                y: 'top'
            },
            types: [{
                    type: 'success',
                    background: '#7A4397',
                    icon: {
                        className: 'fas fa-check',
                        tagName: 'i',
                        color: 'white'
                    }
                },
                {
                    type: 'error',
                    background: '#dc3545',
                    icon: {
                        className: 'fas fa-times',
                        tagName: 'i',
                        color: 'white'
                    }
                }
            ]
        });
        // Fungsi untuk menangani animasi dan removal dari DOM
        function handleWishlistItemRemoval($item) {
            $item.fadeOut(300, function() {
                $(this).remove();

                if ($('.wishlist-item').length === 0) {
                    const emptyTemplate = `
                        <li class="empty-wishlist">
                            <p class="empty-wishlist-text">Belum ada wishlist.</p>
                        </li>
                    `;
                    $('#wishlistList').html(emptyTemplate);
                }
            });
        }

        // Handler untuk tombol remove
        $('.wishlist-remove-btn').on('click', function(e) {
            e.preventDefault();

            const $button = $(this);
            const $wishlistItem = $button.closest('.wishlist-item');
            const $icon = $button.find('i[data-feather="trash"]');

            // Ambil product id dan detail id dari dataset
            const productId = $wishlistItem.find('.wishlist-product-details').data('product-id');
            const productDetailId = $wishlistItem.find('.wishlist-product-details').data('product-detail-id');

            // Disable button dan tambah loading state
            $button.prop('disabled', true);

            // Tambahkan class loading dan ubah opacity untuk indikasi visual
            $button.css('opacity', '0.7');
            $icon.addClass('loading');

            const csrfName = '<?= $this->security->get_csrf_token_name(); ?>';
            const csrfHash = '<?= $this->security->get_csrf_hash(); ?>';

            $.ajax({
                url: '<?= base_url("account/remove_from_wishlist") ?>',
                type: 'POST',
                dataType: 'json',
                data: {
                    product_id: productId,
                    product_detail_id: productDetailId,
                    [csrfName]: csrfHash
                },
                success: function(response) {
                    if (response.status === 'success') {
                        notyf.success(response.message);
                        handleWishlistItemRemoval($wishlistItem);
                    } else {
                        notyf.error(response.message);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('Error:', error);
                    notyf.error('Failed to remove item from wishlist');
                },
                complete: function() {
                    // Reset button state
                    $button.prop('disabled', false);
                    $button.css('opacity', '1');
                    $icon.removeClass('loading');
                }
            });
        });
    });
</script>