@extends('layouts.app')

@section('title', 'TemTechnik | ' . __('general.my_favourites'))

@section('content')
<div class="flex flex-col items-center justify-center min-h-[60vh] pt-0">
    <div class="max-w-7xl mx-auto w-full">
    <div class="flex items-center w-full justify-center mb-12">
        <div class="flex-1 hidden sm:block h-0.5 bg-gray-300 dark:bg-gray-600 mr-4"></div>
        <h1 class="text-4xl font-extrabold text-center text-white tracking-tight relative z-10">{{ __('general.my_favourites') }}</h1>
        <div class="flex-1 hidden sm:block h-0.5 bg-gray-300 dark:bg-gray-600 ml-4"></div>
        </div>
    </div>
    <div class="max-w-5xl w-full px-4">
        <div id="favourites-list">
            @if($favourites->count())
                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-10 mt-8 justify-center">
                    @foreach($favourites as $fav)
                        @if($fav->product)
                        <div class="backdrop-blur-md bg-white/80 dark:bg-gray-800/80 border border-gray-200 dark:border-gray-700 rounded-2xl shadow-xl p-6 flex flex-col items-center favourite-card transition hover:scale-105 hover:shadow-2xl duration-200 group" data-product-id="{{ $fav->product->id }}">
                            <a href="{{ route('products.show', $fav->product) }}" class="block w-full text-center">
                                <img src="{{ $fav->product->mainImage ? asset('storage/' . $fav->product->mainImage->image_path) : ($fav->product->images->first() ? asset('storage/' . $fav->product->images->first()->image_path) : ($fav->product->image ? asset('storage/' . $fav->product->image) : 'https://via.placeholder.com/400')) }}" alt="{{ $fav->product->getTranslation('name', app()->getLocale()) }}" class="w-32 h-32 object-contain rounded-xl mb-4 bg-white dark:bg-gray-900 mx-auto group-hover:opacity-90 transition">
                                <div class="font-semibold text-lg text-center text-gray-900 dark:text-white mb-2 group-hover:text-primary group-hover:underline transition">{{ $fav->product->getTranslation('name', app()->getLocale()) }}</div>
                            </a>
                            <div class="text-gray-500 dark:text-gray-400 mb-2 text-center">
                                @php
                                    $currency = session('currency', 'AZN');
                                @endphp
                                @if($fav->product->isDiscounted())
                                    <span class="line-through text-gray-400 dark:text-gray-500 mr-2">{{ $fav->product->getCurrencySymbol($currency) }}{{ number_format($fav->product->getPriceInCurrency($currency), 2) }}</span>
                                    <span class="text-primary font-bold text-lg">{{ $fav->product->getCurrencySymbol($currency) }}{{ number_format($fav->product->getFinalPriceInCurrency($currency), 2) }}</span>
                                @else
                                    <span class="text-primary font-bold text-lg">{{ $fav->product->getCurrencySymbol($currency) }}{{ number_format($fav->product->getPriceInCurrency($currency), 2) }}</span>
                                @endif
                            </div>
                            <button type="button" class="mt-3 px-4 py-2 rounded-lg font-semibold text-primary border border-primary bg-white/70 dark:bg-gray-900/70 hover:bg-primary hover:text-white transition remove-favourite-btn shadow-sm">{{ __('general.remove') }}</button>
                        </div>
                        @endif
                    @endforeach
                </div>
            @else
                <div class="flex flex-col items-center justify-center py-24">
                    <svg class="w-20 h-20 text-primary mb-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                    </svg>
                    <div class="text-2xl font-bold text-gray-700 dark:text-gray-200 mb-2">{{ __('general.no_favourites') }}</div>
                </div>
            @endif
        </div>
        <span id="no-favourites-translation" class="hidden">{{ __('general.no_favourites') }}</span>
    </div>
</div>

@if(isset($similarProducts) && $similarProducts->count())
    <div class="mt-16 w-full max-w-5xl mx-auto">
        <h2 class="text-2xl font-bold text-center text-white mb-8">{{ __('general.similar_products') ?? 'Similar Products' }}</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
            @foreach($similarProducts as $product)
                <x-product-card :product="$product" />
            @endforeach
        </div>
    </div>
@endif
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    function handleRemoveFavourite(e) {
        if (!e.target.classList.contains('remove-favourite-btn')) return;
        const card = e.target.closest('.favourite-card');
        const productId = card.getAttribute('data-product-id');
        fetch("{{ route('favourites.destroy') }}", {
            method: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'Content-Type': 'application/json',
                'Accept': 'application/json',
            },
            body: JSON.stringify({ product_id: productId })
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                card.remove();
                if (typeof updateFavouritesCount === 'function') updateFavouritesCount();
                if (document.querySelectorAll('.favourite-card').length === 0) {
                    const msg = document.getElementById('no-favourites-translation').textContent;
                    document.getElementById('favourites-list').innerHTML = `<div class='flex flex-col items-center justify-center py-24'><svg class='w-20 h-20 text-primary mb-6' fill='none' stroke='currentColor' viewBox='0 0 24 24'><path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z' /></svg><div class='text-2xl font-bold text-gray-700 dark:text-gray-200 mb-2'>${msg}</div></div>`;
                }
            }
        });
    }
    document.getElementById('favourites-list').addEventListener('click', handleRemoveFavourite);
});
</script>
@endpush