@extends('layouts.app')

@section('title', 'Favorites')

@section('content')
<div id="favoriteContent" class="container mt-4">

</div>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    function fetchFavorites(url = '{{ route('favorite-list') }}') {
        const savedTalentIds = JSON.parse(localStorage.getItem('savedTalentIds') || '[]');
        const savedHandTalentIds = JSON.parse(localStorage.getItem('savedHandTalentIds') || '[]');
        const savedRealFamilyIds = JSON.parse(localStorage.getItem('savedRealFamilyIds') || '[]');

        fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}',
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify({
                savedTalentIds: savedTalentIds,
                savedHandTalentIds: savedHandTalentIds,
                savedRealFamilyIds: savedRealFamilyIds
            })
        })
        .then(response => {
            if (!response.ok) throw new Error('Network error');
            return response.text();
        })
        .then(html => {
            document.getElementById('favoriteContent').innerHTML = html;
            attachPaginationEvents();
        })
        .catch(err => {
            console.error('Fetch error:', err);
            document.getElementById('favoriteContent').innerHTML = '<p class="text-danger">Failed to load favorites.</p>';
        });
    }

    function attachPaginationEvents() {
        document.querySelectorAll('#favoriteContent .pagination a').forEach(link => {
            link.addEventListener('click', function (e) {
                e.preventDefault();
                const url = this.href;
                fetchFavorites(url);
            });
        });
    }

    fetchFavorites();
});
</script>

@endsection