@extends('layouts.app')

@section('title', __('My Wishlist'))

@section('content')
    <div class="container py-4">
        <div class="row">
            <div class="col-12">
                <h1 class="h2 mb-4">{{ __('My Wishlist') }}</h1>

                @if(count($wishlistItems) > 0)
                    <div class="row">
                        <div class="col-lg-8">
                            <div class="card shadow-sm">
                                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                                    <h5 class="mb-0">{{ __('Wishlist Items') }}</h5>
                                    <div>
                                        <button class="btn btn-outline-primary btn-sm" onclick="moveSelectedToCart()">
                                            {{ __('Move Selected to Cart') }}
                                        </button>
                                        <button class="btn btn-outline-danger btn-sm" onclick="clearWishlist()">
                                            {{ __('Clear Wishlist') }}
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body p-0">
                                    @foreach($wishlistItems as $item)
                                        <div class="wishlist-item border-bottom p-3"
                                             data-product-id="{{ $item['id'] }}">
                                            <div class="row align-items-center">
                                                <div class="col-md-1">
                                                    <input type="checkbox" class="form-check-input item-checkbox"
                                                           value="{{ $item['id'] }}">
                                                </div>

                                                <div class="col-md-2">
                                                    @if($item['image'])
                                                        <img src="{{ asset('storage/' . $item['image']) }}"
                                                             alt="{{ $item['name'] }}"
                                                             class="img-fluid rounded">
                                                    @else
                                                        <div
                                                            class="bg-light rounded d-flex align-items-center justify-content-center"
                                                            style="height: 80px;">
                                                            <i class="fas fa-image text-muted"></i>
                                                        </div>
                                                    @endif
                                                </div>

                                                <div class="col-md-4">
                                                    <h6 class="mb-1">
                                                        <a href="{{ route('products.show', $item['slug']) }}"
                                                           class="text-decoration-none text-dark">
                                                            {{ $item['name'] }}
                                                        </a>
                                                    </h6>
                                                    <p class="text-muted small mb-0">
                                                        {{ __('Stock') }}: {{ $item['stock'] }} {{ __('items') }}
                                                    </p>
                                                    @if(!$item['is_available'])
                                                        <span class="badge bg-danger">{{ __('Out of Stock') }}</span>
                                                    @endif
                                                    @if($item['price_changed'])
                                                        <span class="badge bg-warning">{{ __('Price Changed') }}</span>
                                                    @endif
                                                </div>

                                                <div class="col-md-2">
                                                    <div class="price">
                                                        <span
                                                            class="fw-bold">{{ number_format($item['price'], 2) }} {{ __('SAR') }}</span>
                                                        @if($item['price_changed'])
                                                            <br>
                                                            <small class="text-muted text-decoration-line-through">
                                                                {{ number_format($item['original_price'], 2) }} {{ __('SAR') }}
                                                            </small>
                                                        @endif
                                                    </div>
                                                </div>

                                                <div class="col-md-2">
                                                    <small class="text-muted">
                                                        {{ __('Added') }}
                                                        : {{ \Carbon\Carbon::parse($item['added_at'])->format('M d, Y') }}
                                                    </small>
                                                </div>

                                                <div class="col-md-1">
                                                    <div class="btn-group-vertical">
                                                        @if($item['is_available'])
                                                            {{--                                                               <button class="btn btn-sm btn-primary add-to-cart-btn"--}}
                                                            {{--                                                               data-product-id="{{ $item['id'] }}">--}}
                                                            {{--                                                             <i class="fas fa-shopping-cart"></i>--}}
                                                            {{--                                                                    </button>--}}
                                                            {{--    <button class="btn btn-sm btn-primary add-to-cart-btn"--}}
                                                            {{--             onclick="addToCart('{{ $product->translate(app()->getLocale())->slug }}')"--}}
                                                            <button class="btn btn-sm btn-primary"
                                                                    onclick="addToCart('{{ $item['slug'] }}', {{ $item['id'] }})">

                                                                {{ $product->quantity <= 0 ? 'disabled' : '' }}
                                                                <i class="fas fa-shopping-cart me-2"></i>
                                                            </button>

                                                        @endif
                                                        <button class="btn btn-sm btn-outline-danger remove-item"
                                                                data-product-id="{{ $item['id'] }}">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>

                        <div class="col-lg-4">
                            <div class="card shadow-sm sticky-top" style="top: 20px;">
                                <div class="card-header bg-primary text-white">
                                    <h5 class="mb-0">{{ __('Wishlist Summary') }}</h5>
                                </div>
                                <div class="card-body">
                                    <div class="d-flex justify-content-between mb-3">
                                        <span>{{ __('Total Items') }}:</span>
                                        <strong>{{ count($wishlistItems) }}</strong>
                                    </div>
                                    <div class="d-flex justify-content-between mb-3">
                                        <span>{{ __('Available Items') }}:</span>
                                        <strong
                                            class="text-success">{{ collect($wishlistItems)->where('is_available', true)->count() }}</strong>
                                    </div>
                                    <div class="d-flex justify-content-between mb-3">
                                        <span>{{ __('Out of Stock') }}:</span>
                                        <strong
                                            class="text-danger">{{ collect($wishlistItems)->where('is_available', false)->count() }}</strong>
                                    </div>

                                    <hr>

                                    <button class="btn btn-primary w-100 mb-2" onclick="addAllToCart()">
                                        <i class="fas fa-shopping-cart me-2"></i>
                                        {{ __('Add All Available to Cart') }}
                                    </button>

                                    <button class="btn btn-outline-secondary w-100" onclick="shareWishlist()">
                                        <i class="fas fa-share me-2"></i>
                                        {{ __('Share Wishlist') }}
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="row justify-content-center">
                        <div class="col-md-6 text-center">
                            <div class="card shadow-sm">
                                <div class="card-body py-5">
                                    <i class="fas fa-heart fa-3x text-muted mb-3"></i>
                                    <h4>{{ __('Your wishlist is empty') }}</h4>
                                    <p class="text-muted mb-4">{{ __('Save your favorite items to your wishlist for easy access later.') }}</p>
                                    <a href="{{ route('products.index') }}" class="btn btn-primary">
                                        {{ __('Browse Products') }}
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function () {
            // Add single item to cart
            $('.add-to-cart-btn').on('click', function () {
                const productId = $(this).data('product-id');
                addToCart(productId, 1);
            });

            // Remove item from wishlist
            $('.remove-item').on('click', function () {
                const productId = $(this).data('product-id');
                removeFromWishlist(productId);
            });
        });

        function addToCart(productSlug, productId, quantity = 1) {
            $.ajax({
                url: `{{ url('/') }}/{{ app()->getLocale() }}/cart/add/${productSlug}`,
                method: 'POST',
                data: {
                    quantity: quantity,
                    _token: '{{ csrf_token() }}'
                },
                success: function (response) {
                    if (response.success) {
                        // Remove from the wishlist after adding to the cart
                        removeFromWishlist(productId, false);
                        showNotification(response.message, 'success');
                    } else {
                        showNotification(response.message, 'error');
                    }
                },
                error: function () {
                    showNotification('{{ __("An error occurred. Please try again.") }}', 'error');
                }
            });
        }

        function removeFromWishlist(productId, showMessage = true) {
            $.ajax({
                url: `{{ url('/') }}/{{ app()->getLocale() }}/wishlist/remove/${productId}`,
                method: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}'
                },
                success: function (response) {
                    if (response.success) {
                        $(`.wishlist-item[data-product-id="${productId}"]`).fadeOut(function () {
                            $(this).remove();
                            if ($('.wishlist-item').length === 0) {
                                location.reload();
                            }
                        });
                        if (showMessage) {
                            showNotification(response.message, 'success');
                        }
                    } else {
                        showNotification(response.message, 'error');
                    }
                },
                error: function () {
                    showNotification('{{ __("An error occurred. Please try again.") }}', 'error');
                }
            });
        }

        function moveSelectedToCart() {
            const selectedItems = [];
            $('.item-checkbox:checked').each(function () {
                selectedItems.push($(this).val());
            });

            if (selectedItems.length === 0) {
                showNotification('{{ __("Please select items to move to cart") }}', 'warning');
                return;
            }

            $.ajax({
                url: '{{ route("wishlist.move-to-cart") }}',
                method: 'POST',
                data: {
                    product_ids: selectedItems,
                    _token: '{{ csrf_token() }}'
                },
                success: function (response) {
                    if (response.success) {
                        location.reload();
                    }
                    showNotification(response.message, response.success ? 'success' : 'warning');
                },
                error: function () {
                    showNotification('{{ __("An error occurred. Please try again.") }}', 'error');
                }
            });
        }

        function addAllToCart() {
            const availableItems = [];
            $('.wishlist-item').each(function () {
                const productId = $(this).data('product-id');
                const isAvailable = !$(this).find('.badge.bg-danger').length;
                if (isAvailable) {
                    availableItems.push(productId);
                }
            });

            if (availableItems.length === 0) {
                showNotification('{{ __("No available items to add to cart") }}', 'warning');
                return;
            }

            $.ajax({
                url: '{{ route("wishlist.move-to-cart") }}',
                method: 'POST',
                data: {
                    product_ids: availableItems,
                    _token: '{{ csrf_token() }}'
                },
                success: function (response) {
                    if (response.success) {
                        location.reload();
                    }
                    showNotification(response.message, response.success ? 'success' : 'warning');
                },
                error: function () {
                    showNotification('{{ __("An error occurred. Please try again.") }}', 'error');
                }
            });
        }

        function clearWishlist() {
            if (confirm('{{ __("Are you sure you want to clear your entire wishlist?") }}')) {
                $.ajax({
                    url: '{{ route("wishlist.clear") }}',
                    method: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}'
                    },
                    success: function (response) {
                        if (response.success) {
                            location.reload();
                        } else {
                            showNotification(response.message, 'error');
                        }
                    },
                    error: function () {
                        showNotification('{{ __("An error occurred. Please try again.") }}', 'error');
                    }
                });
            }
        }

        function shareWishlist() {
            // Simple share functionality
            if (navigator.share) {
                navigator.share({
                    title: '{{ __("My Wishlist") }}',
                    text: '{{ __("Check out my wishlist!") }}',
                    url: window.location.href
                });
            } else {
                // Fallback: copy to clipboard
                navigator.clipboard.writeText(window.location.href).then(() => {
                    showNotification('{{ __("Wishlist link copied to clipboard!") }}', 'success');
                });
            }
        }

        function showNotification(message, type = 'info') {
            // Simple notification - you can replace with your preferred notification system
            const alertClass = type === 'success' ? 'alert-success' :
                type === 'error' ? 'alert-danger' :
                    type === 'warning' ? 'alert-warning' : 'alert-info';

            const alert = $(`
        <div class="alert ${alertClass} alert-dismissible fade show position-fixed"
             style="top: 20px; right: 20px; z-index: 9999;">
            ${message}
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
    `);

            $('body').append(alert);

            setTimeout(() => {
                alert.alert('close');
            }, 5000);
        }
    </script>
@endpush