@extends('layouts.front-layout')
@section('title') Wishlist @endsection
@section('content')

    <style>
        /* Default transparent heart */
        .far.fa-heart {
            color: transparent;  /* Transparent heart */
            transition: color 0.3s ease;  /* Smooth color transition */
        }

        /* Filled heart when the product is in the wishlist */
        .filled-heart {
            color: black;  /* Black heart when Active */
        }

    </style>
    <section class="product-banner">
    <img src="{{ pagesSingleImage('Product', 'top_banner_image') }}" class="w-100" alt="img">
        <div class="overlay">
            <div class="container">
                <h2><i class="fal fa-long-arrow-left"></i>{{ $pageData['Product']['top_banner_title'] ?? '' }}</h2>
                <ul class="beef-list">
                    @forelse($get_categories as $category)
                        <li>
                            <a href="{{ route('category.wise.product', ['slug' => $category->slug ?: '']) }}">
                                <span>{{ $category->category_name ?: '' }}</span>
                                {{ $category->product_count }} Products
                            </a>
                        </li>
                    @empty
                        <h3>Category Data Not Available</h3>
                    @endforelse
                </ul>
            </div>
        </div>
    </section>


    <section class="product-main">
        <div class="container">
            <div class="row">
                <!-- <div class="col-md-3">
                    <div class="filter-price">
                        <h2>Stock Status</h2>
                        <div class="sale-select">
                            <input type="checkbox" id="on-sale" class="custom-checkbox">
                            <label for="on-sale" class="checkbox-label">On Sale</label>
                        </div>
                        <div class="sale-select">
                            <input type="checkbox" id="in-stock" class="custom-checkbox">
                            <label for="in-stock" class="checkbox-label">In Stock</label>
                        </div>
                    </div>
                    <div class="top-rated">
                        <div class="rated-head">
                            <h5>Top Rated Products</h5>
                        </div>
                        @foreach($topRatedProducts as $product)
                            <div class="product-cntnt">

                                <img src="{{ $product->productImage('product_image') ?: asset('upload/images/default.png') }}" class="img-fluid" alt="{{ $product->product_name }}">
                                <div class="prod-info">
                                    <h6>{{ $product->product_name }}</h6>
                                    <p>${{ number_format($product->product_price, 2) }}</p>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div> -->
                <div class="col-md-9">
                    <div class="bredcum-flex">
                        <div class="breadcumb">
                            <ul>
                                <li><a href="#">Home</a></li>
                                <li><span class="clr">/</span></li>
                                <li><span>Wishlist</span></li>
                            </ul>
                        </div>
                        <!-- <div class="pagination"> -->
                            <!-- <ul>
                                <li>
                                    <label>Show :</label>
                                    <a href="#">9</a>
                                    <span>/</span>
                                    <a href="#" class="active">12</a>
                                    <span>/</span>
                                    <a href="#">18</a>
                                    <span>/</span>
                                    <a href="#">24</a>
                                    <span>/</span>
                                </li>
                                <li>
                                    <a href="#"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="19px" height="19px" viewBox="0 0 19 19" enable-background="new 0 0 19 19" xml:space="preserve">
                                            <path d="M7,2v5H2V2H7 M9,0H0v9h9V0L9,0z"></path>
                                            <path d="M17,2v5h-5V2H17 M19,0h-9v9h9V0L19,0z"></path>
                                            <path d="M7,12v5H2v-5H7 M9,10H0v9h9V10L9,10z"></path>
                                            <path d="M17,12v5h-5v-5H17 M19,10h-9v9h9V10L19,10z"></path>
                                        </svg></a>
                                    <a href="#"><svg version="1.1" id="Layer_1" class="active" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="19px" height="19px" viewBox="0 0 19 19" enable-background="new 0 0 19 19" xml:space="preserve">
                                            <rect width="5" height="5"></rect>
                                            <rect x="7" width="5" height="5"></rect>
                                            <rect x="14" width="5" height="5"></rect>
                                            <rect y="7" width="5" height="5"></rect>
                                            <rect x="7" y="7" width="5" height="5"></rect>
                                            <rect x="14" y="7" width="5" height="5"></rect>
                                            <rect y="14" width="5" height="5"></rect>
                                            <rect x="7" y="14" width="5" height="5"></rect>
                                            <rect x="14" y="14" width="5" height="5"></rect>
                                        </svg></a>
                                    <a href="#"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="19px" height="19px" viewBox="0 0 19 19" enable-background="new 0 0 19 19" xml:space="preserve">
                                            <rect width="4" height="4"></rect>
                                            <rect x="5" width="4" height="4"></rect>
                                            <rect x="10" width="4" height="4"></rect>
                                            <rect x="15" width="4" height="4"></rect>
                                            <rect y="5" width="4" height="4"></rect>
                                            <rect x="5" y="5" width="4" height="4"></rect>
                                            <rect x="10" y="5" width="4" height="4"></rect>
                                            <rect x="15" y="5" width="4" height="4"></rect>
                                            <rect y="15" width="4" height="4"></rect>
                                            <rect x="5" y="15" width="4" height="4"></rect>
                                            <rect x="10" y="15" width="4" height="4"></rect>
                                            <rect x="15" y="15" width="4" height="4"></rect>
                                            <rect y="10" width="4" height="4"></rect>
                                            <rect x="5" y="10" width="4" height="4"></rect>
                                            <rect x="10" y="10" width="4" height="4"></rect>
                                            <rect x="15" y="10" width="4" height="4"></rect>
                                        </svg></a>
                                </li>
                                <li>
                                    <select>
                                        <option>Default Sorting</option>
                                    </select>
                                </li>
                            </ul> -->
                        <!-- </div> -->
                    </div>
                    <div class="row no-gutters">
                        @forelse($wishlist_product as $product)
                            <div class="col-md-4" id="product-{{ $product->id }}">
                                <div class="mostCard propgBox">
                                    <div class="proBox">
                                        <figure>
                                        <img src="{{ $product->product->productImage('product_image') ?: asset('upload/images/default.png') }}" class="img-fluid" alt="img">

                                            <ul>
                                                <li><a href="#"><i class="far fa-random"></i></a></li>
                                            </ul>
                                        </figure>
                                        <div class="proContent">
                                            <h2>{{ $product->product->product_name ?? '' }}</h2>
                                            <h3> {!! \Illuminate\Support\Str::limit(strip_tags($product->product->description), 80, '...') !!}</h3>
                                            <span>${{ $product->product->product_price ?? '' }}</span>
                                            <div class="proHide">
                                                <ul>
                                                    <li>
                                                        <a href="#" class="wishlist" data-wishlist-id="{{ $product->id }}">
                                                            <i class="fas fa-heart {{ $product->wishlist_status == 'Active' ? '' : 'far' }}"></i>
                                                        </a>
                                                    </li>


                                                    <li><a href="{{ route('product.detail', ['slug' => $product->product->slug ?? '']) }}" class="themeBtn">Add to cart</a></li>
                                                    <li><a href="#"><i class="far fa-search"></i></a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <h3>No Wishlist Product</h3>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@section('script')
    <script>
        document.querySelectorAll('.wishlist').forEach(function(item) {
            item.addEventListener('click', function(event) {
                event.preventDefault(); // Prevent the default link behavior

                var wishlist_id = this.getAttribute('data-wishlist-id');
                var productElement = document.getElementById('product-' + wishlist_id);

                $.ajax({
                    url: '{{ route('wishlist.remove') }}',
                    method: 'POST',
                    data: {
                        id: wishlist_id,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        // console.log(response);
                        toastr.success('Product removed successfully');

                        if (productElement) {
                            productElement.remove();
                        }
                    },
                    error: function(error) {
                        console.log(error);
                        toastr.error('Something went wrong!');

                        // alert('Something went wrong!');
                    }
                });
            });
        });
    </script>
@endsection