@extends('layouts.app')

@section('title', 'Избранное — Точка')

@section('content')

<section class="page-hdr">
    <div class="container">
        <div class="sh-label reveal-up">Сохранённые автомобили</div>
        <h1 class="reveal">ИЗБРАННОЕ</h1>
        <nav class="breadcrumb">
            <a href="{{ route('home') }}">Главная</a>
            <span>/</span>
            <span>Избранное</span>
        </nav>
    </div>
</section>

<section class="section sec-alt" style="padding-top:32px">
    <div class="container">

        {{-- Top-bar --}}
        <div class="cat-top" id="favTopBar" style="display:none">
            <div class="cat-count">В избранном: <strong id="favCount">0</strong> авт.</div>
            <button onclick="clearFavorites()" class="btn btn-outline" style="font-size:13px;padding:8px 18px">
                ✕ Очистить всё
            </button>
        </div>

        {{-- Пустое состояние (показывается пока загружается или когда пусто) --}}
        <div id="favEmpty" class="no-results" style="padding:80px 20px;text-align:center">
            <div class="nr-i">♡</div>
            <h3>Избранное пусто</h3>
            <p>Нажмите ♡ на карточке автомобиля, чтобы добавить его сюда</p>
            <a href="{{ route('catalog') }}" class="btn btn-primary" style="margin-top:20px">Перейти в каталог</a>
        </div>

        {{-- Сетка карточек --}}
        <div class="cars-grid" id="favGrid" style="display:none"></div>

    </div>
</section>

@endsection

@push('scripts')
<script>
(function () {
    var grid    = document.getElementById('favGrid');
    var empty   = document.getElementById('favEmpty');
    var topBar  = document.getElementById('favTopBar');
    var counter = document.getElementById('favCount');

    function getIds() {
        try { return JSON.parse(localStorage.getItem('tocha_favorites') || '[]'); }
        catch (e) { return []; }
    }

    function load() {
        var ids = getIds();
        if (!ids.length) { showEmpty(); return; }

        fetch('{{ route('favorites.load') }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
            body: JSON.stringify({ ids: ids })
        })
        .then(function(r){ return r.json(); })
        .then(function(data) {
            if (!data.count) { showEmpty(); return; }
            grid.innerHTML     = data.html;
            grid.style.display = '';
            empty.style.display= 'none';
            topBar.style.display = '';
            counter.textContent  = data.count;
            // Подсвечиваем сердца на подгруженных карточках
            markHearts();
        });
    }

    function showEmpty() {
        grid.style.display   = 'none';
        topBar.style.display = 'none';
        empty.style.display  = '';
    }

    window.clearFavorites = function () {
        if (!confirm('Очистить список избранного?')) return;
        localStorage.removeItem('tocha_favorites');
        updateNavCounter();
        showEmpty();
    };

    load();
})();
</script>
@endpush