@extends('ecommerce::frontend.layout.main2')

@section('title') {{ $ecommerce_setting->site_title ?? 'My Wishlist' }} @endsection

@section('description') {{ $ecommerce_setting->site_description ?? '' }} @endsection

@section('content')
<style>
    /* Wishlist Card Styles */
    .wishlist-card {
        background: #fff;
        border: 1px solid #e1e1e1;
        border-radius: 8px;
        overflow: hidden;
        transition: all 0.3s ease;
        height: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
    }
    .wishlist-card:hover {
        border-color: #c8102e;
        box-shadow: 0 5px 20px rgba(0,0,0,0.08);
        transform: translateY(-3px);
    }
    
    .wishlist-img-wrapper {
        position: relative;
        overflow: hidden;
        padding-top: 100%; /* 1:1 Aspect Ratio */
        background: #f9f9f9;
    }
    .wishlist-img-wrapper img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }
    .wishlist-card:hover .wishlist-img-wrapper img {
        transform: scale(1.05);
    }

    /* Remove Button */
    .btn-remove-wishlist {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
        background: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #777;
        cursor: pointer;
        z-index: 2;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        transition: all 0.3s;
        border: 1px solid #eee;
    }
    .btn-remove-wishlist:hover {
        background: #c8102e;
        color: #fff;
        border-color: #c8102e;
    }

    /* Card Content */
    .wishlist-content {
        padding: 20px;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .product-name {
        font-size: 16px;
        font-weight: 600;
        color: #222;
        margin-bottom: 8px;
        display: block;
        line-height: 1.4;
        transition: color 0.3s;
    }
    .product-name:hover {
        color: #c8102e;
    }
    .unit-badge {
        font-size: 12px;
        color: #999;
        margin-bottom: 10px;
        display: block;
    }
    
    /* Price Section */
    .price-box {
        margin-bottom: 15px;
    }
    .price-new {
        font-size: 18px;
        font-weight: 700;
        color: #222;
    }
    .price-old {
        font-size: 14px;
        color: #999;
        text-decoration: line-through;
        margin-left: 8px;
    }

    /* Action Buttons */
    .btn-add-cart-list {
        background-color: #c8102e;
        color: #fff;
        width: 100%;
        padding: 10px;
        border: none;
        border-radius: 4px;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: 0.5px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: background 0.3s;
    }
    .btn-add-cart-list:hover {
        background-color: #a00b24;
        color: #fff;
    }
    .btn-add-cart-list.out-of-stock {
        background-color: #e9ecef;
        color: #adb5bd;
        cursor: not-allowed;
    }
    
     .sidebar-menu-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .sidebar-menu-list li {
        margin-bottom: 10px;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
    }
    .sidebar-menu-list li:last-child {
        border-bottom: none;
    }
    .sidebar-menu-list a {
        color: #555;
        text-decoration: none;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
        transition: color 0.3s;
    }
    .sidebar-menu-list a:hover, .sidebar-menu-list a.active {
        color: #c8102e;
        padding-left: 5px;
    }
</style>

<!-- Breadcrumb Area -->
<div style="padding-top:50px;" class="tf-page-title flat-spacing pb-0">
    <div class="container">
        <div class="row">
            <div class="col-12 text-center">
                <div class="text-start">
                    <h1 class="text-display fw-medium">{{trans('file.My Wishlist')}}</h1>
                    <ul class="breadcrumb-list d-flex align-items-center">
                        <li><a href="{{url('/')}}" class="link">{{trans('file.Home')}}</a></li>
                        <li class="separator mx-2">/</li>
                        <li><a href="{{url('customer/profile')}}" class="link">{{trans('file.dashboard')}}</a></li>
                        <li class="separator mx-2">/</li>
                        <li class="active text-main fw-medium">{{trans('file.My Wishlist')}}</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Main Content -->
<section style="padding-top:50px;" class="flat-spacing">
    <div class="container">
        <div class="row">
            
            <!-- Sidebar -->
            <div class="col-lg-3 col-md-4 mb-md-0 mb-4">
                <div class="sidebar-wrapper">
                    <div class="widget-account-nav">
                        <h3 class="widget-title h5 fw-bold text-uppercase mb-4 pb-2 border-bottom">{{trans('Menu')}}</h3>
                        @include('ecommerce::frontend.customer-menu')
                    </div>
                </div>
            </div>

            <!-- Wishlist Content -->
            <div class="col-lg-9 col-md-8">
                
                @if(count($products) > 0)
                    <div class="row g-4">
                        @foreach($products as $product)
                        <!-- Wrapper ID needed for JS remove function -->
                        <div id="{{$product->id}}" class="col-xl-4 col-md-6 col-6">
                            <div class="wishlist-card">
                                
                                <!-- Remove Icon -->
                                <a class="remove-from-wishlist btn-remove-wishlist" data-id="{{$product->id}}">
                                    <i class="icon icon-close" style="font-size: 12px;"></i>
                                </a>

                                <!-- Product Image -->
                                <div class="wishlist-img-wrapper">
                                    @if($product->image !== null)
                                        @php
                                            $images = explode(',', $product->image);
                                            $product->image = $images[0];
                                        @endphp
                                        <a href="{{url('product')}}/{{$product->slug}}/{{$product->id}}" class="w-100 h-100">
                                            <img src="{{ asset('public/images/product/') }}/{{ $product->image }}" alt="{{ $product->name }}">
                                        </a>
                                    @else
                                        <a href="{{url('product')}}/{{$product->slug}}/{{$product->id}}" class="w-100 h-100">
                                            <img src="https://dummyimage.com/300x300/e5e8ec/cccccc&text=No+Image" alt="{{ $product->name }}">
                                        </a>
                                    @endif
                                </div>

                                <!-- Product Info -->
                                <div class="wishlist-content">
                                    <div>
                                        <a href="{{url('product')}}/{{$product->slug}}/{{$product->id}}" class="product-name">
                                            {{ $product->name }}
                                        </a>
                                        @if(isset($product->unit))
                                            <span class="unit-badge">Unit: {{ $product->unit->unit_name }}</span>
                                        @endif

                                        <!-- Price Logic -->
                                        <div class="price-box">
                                            @if(($product->promotion == 1) && (($product->last_date > date('Y-m-d')) || !isset($product->last_date)))
                                                <span class="price-new">{{$currency->symbol ?? $currency->code}}{{ number_format($product->promotion_price, 2) }}</span>
                                                <span class="price-old">{{$currency->symbol ?? $currency->code}}{{ number_format($product->price, 2) }}</span>
                                            @else
                                                <span class="price-new">{{$currency->symbol ?? $currency->code}}{{ number_format($product->price, 2) }}</span>
                                            @endif
                                        </div>
                                    </div>

                                    <!-- Action Logic -->
                                    @if($product->in_stock == 1)
                                        @if(is_null($product->is_variant))
                                            <form method="post" id="add_to_cart_{{ $product->id }}">
                                                @csrf
                                                <input type="hidden" name="qty" class="input-number" value="1" min="1" max="{{ $product->qty }}">
                                                <button data-id="{{ $product->id }}" type="submit" class="btn-add-cart-list">
                                                    <i class="icon icon-shopping-cart-simple"></i> {{trans('file.Add to cart')}}
                                                </button>
                                            </form>
                                        @else
                                            <div class="text-center">
                                                <a href="{{url('/')}}/product/{{$product->slug}}/{{$product->id}}" class="btn-add-cart-list" style="background-color: #333;">
                                                    {{trans('file.Select Options')}}
                                                </a>
                                            </div>
                                        @endif
                                    @else
                                        <button class="btn-add-cart-list out-of-stock" disabled>
                                            {{trans('file.Out of stock')}}
                                        </button>
                                    @endif

                                </div>
                            </div>
                        </div>
                        @endforeach
                    </div>
                @else
                    <!-- Empty State -->
                    <div class="card-dashboard text-center py-5">
                        <div class="mb-3">
                            <i class="icon icon-heart" style="font-size: 48px; color: #e5e5e5;"></i>
                        </div>
                        <h3 class="fw-bold mb-2">{{trans('file.You have not added anything to wishlist yet')}}</h3>
                        <a href="{{ url('shop') }}" class="btn-add-cart-list" style="max-width: 200px; margin: 0 auto;">
                            Continue Shopping
                        </a>
                    </div>
                @endif

            </div>
        </div>
    </div>
</section>
@endsection

@section('script')
<script type="text/javascript">
    "use strict";

    $('.remove-from-wishlist').on('click', function(e) {
        e.preventDefault();
        var product_id = $(this).data('id');
        
        // Visual feedback - fade out the card
        $('#'+product_id).fadeOut(300, function() {
            $(this).remove();
        });

        $.ajax({
            type: "get",
            url: "{{url('customer/wishlist/delete')}}/" + product_id,
            success: function(data) {
                $('.alert').addClass('alert-custom show');
                $('.alert-custom .message').html('{{trans("file.Product removed from wishlist")}}');
                setTimeout(function() {
                    $('.alert').removeClass('show');
                }, 4000);
            },
            error: function() {
                // Optional: Show error or restore card if needed
                $('.alert').addClass('alert-custom show');
                $('.alert-custom .message').html('Error removing product');
            }
        })  
    });

    $(document).on('click', '.add-to-cart', function(e) {
        e.preventDefault();
        var id = $(this).data('id');
        var parent = '#add_to_cart_' + id;

        var qty = $(parent + " input[name=qty]").val();

        var route = "{{ route('addToCart') }}";

        var btn = $(this);

        var btn_text = $(this).html();

        $(this).html('<span class="spinner-border spinner-border-sm" role="status"><span class="sr-only">...</span></span>');

        $.ajax({
            url: route,
            type: "POST",
            data: {
                product_id: id,
                qty: qty,
                _token: "{{ csrf_token() }}"
            },
            success: function(response) {
                if (response) {
                    $('.alert').addClass('alert-custom show');
                    $('.alert-custom .message').html(response.success);
                    // Update header cart count if the class exists
                    if($('.cart-count').length > 0) {
                        $('.cart-count').html(response.total_qty);
                    }
                    if($('.cart__menu .cart_qty').length > 0) {
                        $('.cart__menu .cart_qty').html(response.total_qty);
                    }
                    
                    $(btn).html('<i class="icon icon-check"></i> Added');
                    setTimeout(function() {
                        $('.alert').removeClass('show');
                        $(btn).html(btn_text);
                    }, 3000);
                }
            },
            error: function() {
                $(btn).html(btn_text);
                $('.alert').addClass('alert-custom show');
                $('.alert-custom .message').html('Error adding to cart');
                setTimeout(function() {
                    $('.alert').removeClass('show');
                }, 4000);
            }
        });
    })
</script>
@endsection