@extends('web.layouts.app')

@section('title', 'المفضلة')
@section('page_heading', 'المفضلة')

@section('content')
<div class="content">


    <div class="user-info-page">
        <div class="container">

            <div class="row">

                @include('web.layouts.inc.user_sidebar')

                <div class="col-lg-9">
                    <div class="user-info-content">

                        <div class="section-header">
                            <div class="section-header-info">
                                <h3>قائمة المفضلة</h3>
                                <p>تصفح المنتجات المضافة الى قائمة المفضلة</p>
                            </div>
                        </div>

                        <div class="shop-cards">

                            @forelse ($favorites as $favorite)
                                <div class="shop-card" id="favorite-{{ $favorite->id }}">
                                    <div class="dropdown-box-list-item">
                                        <div class="cart-item-preview">
                                            <a class="cart-item-preview-image" href="{{ route('products.details', $favorite->product->id) }}">
                                                <img src="{{ Storage::url($favorite->product->main_image) }}" alt="{{ $favorite->product->name }}">
                                            </a>
                                            <div class="cart-item-preview-text">{{ $favorite->product->category->name }}</div>
                                            <div class="cart-item-preview-title">{{ $favorite->product->name }}</div>
                                        </div>

                                        <div class="item-price">
                                            <h6>{{ $favorite->product->price }}<span class="highlighted">L.E</span></h6>
                                        </div>

                                        <div class="item-action reorder">
                                            <button class="btn btn-primary add-to-card-btn" data-product-id="{{ $favorite->product->id }}">أضف للسلة</button>
                                            <button type="button" class="toggle-favorite" data-product-id="{{ $favorite->product->id }}">
                                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="{{ $favorite->product->isFavorited() ? 'favorited' : '' }}">
                                                    <path d="M16.5 3C19.5376 3 22 5.5 22 9C22 16 14.5 20 12 21.5C9.5 20 2 16 2 9C2 5.5 4.5 3 7.5 3C9.35997 3 11 4 12 5C13 4 14.64 3 16.5 3ZM12.9339 18.6038C13.8155 18.0485 14.61 17.4955 15.3549 16.9029C18.3337 14.533 20 11.9435 20 9C20 6.64076 18.463 5 16.5 5C15.4241 5 14.2593 5.56911 13.4142 6.41421L12 7.82843L10.5858 6.41421C9.74068 5.56911 8.5759 5 7.5 5C5.55906 5 4 6.6565 4 9C4 11.9435 5.66627 14.533 8.64514 16.9029C9.39 17.4955 10.1845 18.0485 11.0661 18.6038C11.3646 18.7919 11.6611 18.9729 12 19.1752C12.3389 18.9729 12.6354 18.7919 12.9339 18.6038Z"></path>
                                                </svg>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            @empty
                                <div class="alert alert-info" role="alert">
                                    لا توجد لديك منتجات في قائمة المفضلة.
                                </div>
                            @endforelse

                        </div>

                    </div>
                </div>

            </div>

        </div>
    </div>

</div>
@endsection


@section('scripts')
    <script>
        $(document).ready(function() {
            // إضافة إلى السلة
            $('.add-to-card-btn').click(function(e) {
                e.preventDefault();
                let productId = $(this).data('product-id');
                $.ajax({
                    url: "{{ route('cart.add', ['product_id' => ':productId']) }}".replace(':productId',
                        productId),
                    type: "POST",
                    data: {
                        "_token": "{{ csrf_token() }}",
                        "quantity": 1
                    },
                    success: function(response) {
                        $('#notification').remove();
                        // عرض إشعار Bootstrap
                        $('body').append(
                            '<div id="notification" class="alert alert-success" role="alert" style="position: fixed; top: 20px; right: 20px; z-index: 1050;">' +
                            response.message +
                            '</div>'
                        );
                        // إخفاء الإشعار بعد 3 ثواني
                        setTimeout(function() {
                            $('#notification').alert('close');
                        }, 3000);
                    },
                    error: function(xhr) {
                        $('#notification').remove();
                        let errorMessage = xhr.responseJSON && xhr.responseJSON.message ? xhr
                            .responseJSON.message : 'حدث خطأ ما';
                        // عرض إشعار Bootstrap
                        $('body').append(
                            '<div id="notification" class="alert alert-danger" role="alert" style="position: fixed; top: 20px; right: 20px; z-index: 1050;">' +
                            errorMessage +
                            '</div>'
                        );
                        // إخفاء الإشعار بعد 3 ثواني
                        setTimeout(function() {
                            $('#notification').alert('close');
                        }, 3000);
                    }
                });
            });

            // التحقق من حالة تسجيل الدخول قبل إرسال طلب AJAX
            $('.toggle-favorite').click(function(e) {
                e.preventDefault();

                @auth
                    let productId = $(this).data('product-id');
                    let button = $(this);
                    let icon = button.find('svg');

                    // التحقق مما إذا كان المنتج مفضلاً
                    let isFavorite = icon.hasClass('favorited');

                    let url, method, successMessage;

                    if (isFavorite) {
                        url = "{{ route('favorites.remove', ['productId' => ':productId']) }}".replace(
                            ':productId', productId);
                        method = 'DELETE';
                        successMessage = 'تمت إزالة المنتج من المفضلة بنجاح';
                    } else {
                        url = "{{ route('favorites.add', ['productId' => ':productId']) }}".replace(':productId',
                            productId);
                        method = 'POST';
                        successMessage = 'تمت إضافة المنتج إلى المفضلة بنجاح';
                    }

                    $.ajax({
                        url: url,
                        type: method,
                        data: {
                            "_token": "{{ csrf_token() }}",
                        },
                        success: function(response) {
                            // تحديث حالة الأيقونة
                            if (isFavorite) {
                                icon.removeClass('favorited');
                                // إزالة العنصر من الصفحة
                                $('#favorite-' + productId).remove();
                            } else {
                                icon.addClass('favorited');
                            }

                            // عرض إشعار Bootstrap
                            $('#notification').remove();
                            $('body').append(
                                '<div id="notification" class="alert alert-success" role="alert" style="position: fixed; top: 20px; right: 20px; z-index: 1050;">' +
                                successMessage +
                                '</div>'
                            );
                            // إخفاء الإشعار بعد 3 ثواني
                            setTimeout(function() {
                                $('#notification').alert('close');
                            }, 3000);
                        },
                        error: function(xhr) {
                            let errorMessage = 'حدث خطأ ما';
                            if (xhr.status === 404) {
                                errorMessage = 'المنتج غير موجود';
                            } else if (xhr.status === 409) {
                                errorMessage = 'المنتج موجود بالفعل في المفضلة';
                            }

                            // عرض إشعار Bootstrap
                            $('#notification').remove();
                            $('body').append(
                                '<div id="notification" class="alert alert-danger" role="alert" style="position: fixed; top: 20px; right: 20px; z-index: 1050;">' +
                                errorMessage +
                                '</div>'
                            );
                            // إخفاء الإشعار بعد 3 ثواني
                            setTimeout(function() {
                                $('#notification').alert('close');
                            }, 3000);
                        }
                    });
                @else
                    // عرض رسالة للمستخدم إذا لم يكن مسجلاً
                    $('#notification').remove();
                    $('body').append(
                        '<div id="notification" class="alert alert-warning" role="alert" style="position: fixed; top: 20px; right: 20px; z-index: 1050;">' +
                        'الرجاء تسجيل الدخول لإضافة المنتجات إلى المفضلة.' +
                        '</div>'
                    );
                    // إخفاء الإشعار بعد 3 ثواني
                    setTimeout(function() {
                        $('#notification').alert('close');
                    }, 3000);
                @endauth
            });
        });
    </script>

    <style>
        .toggle-favorite svg.favorited {
            fill: red;
            /* أو أي لون تفضله */
        }
    </style>
@endsection