@extends('layouts.app')

@section('content')
<main class="fond2">
<div class="carnet carnet-opened">
    @php
        // on affiche 3 items à gauche et 3 à droite par page (la pagination Eloquent donne 6 items déjà)
        $left = $pastries->slice(0,2);
        $right = $pastries->slice(2,2);
    @endphp

    <div class="page">
        <div class="side">
            @forelse($left as $p)
                <div class="card">
                    <img src="{{ $p->image ? asset('storage/'.$p->image) : '/images/placeholder_pastry.jpg' }}" alt="{{ $p->name }}">
                    <div style="display:flex; flex-direction:column;">
                        <p><strong>{{ $p->name }}</strong></p>
                        <p>{{ $p->baked_at ? $p->baked_at->format('d/m/Y') : $p->created_at->format('d/m/Y') }}</p>
                        <p>Avec : {{ $p->with_who ?? '—' }}</p>
                        <p>{{ $p->comment }}</p>
                        @if($p->recipe)
                            <a class="recipe-btn" href="#" onclick="openRecipe(event,this)">Voir la recette</a>
                            <div class="recipe-data" style="display:none;">{!! nl2br(e($p->recipe)) !!}</div>
                        @endif
                    </div>
                </div>
            @empty
                <p style="padding:8px">Aucune création ici.</p>
            @endforelse
        </div>

        <div class="side">
            @forelse($right as $p)
                <div class="card">
                    <img src="{{ $p->image ? asset('storage/'.$p->image) : '/images/placeholder_pastry.jpg' }}" alt="{{ $p->name }}">
                    <div style="display:flex; flex-direction:column;">
                        <p><strong>{{ $p->name }}</strong></p>
                        <p>{{ $p->baked_at ? $p->baked_at->format('d/m/Y') : $p->created_at->format('d/m/Y') }}</p>
                        <p>Avec : {{ $p->with_who ?? '—' }}</p>
                        <p>{{ $p->comment }}</p>
                        @if($p->recipe)
                            <a class="recipe-btn" href="#" onclick="openRecipe(event,this)">Voir la recette</a>
                            <div class="recipe-data" style="display:none;">{!! nl2br(e($p->recipe)) !!}</div>
                        @endif
                    </div>
                </div>
            @empty
                <p style="padding:8px">Aucune création ici.</p>
            @endforelse
        </div>
    </div>

    <div style="text-align:center; margin-top:18px;">
        @if($pastries->onFirstPage())
            <span class="bouton bouton2" style="opacity:0.5;">← Précédent</span>
        @else
            <a href="{{ $pastries->previousPageUrl() }}" class="bouton bouton2">← Précédent</a>
        @endif

        <span style="margin: 0 12px;">Page {{ $pastries->currentPage() }} / {{ $pastries->lastPage() }}</span>

        @if($pastries->hasMorePages())
            <a href="{{ $pastries->nextPageUrl() }}" class="bouton bouton2">Suivant →</a>
        @else
            <span class="bouton bouton2" style="opacity:0.5;">Suivant →</span>
        @endif
    </div>
</div>

<!-- Modal recette -->
<div id="recipeModal" class="recipeModal">
    <div class="main">
        <button onclick="closeRecipe()">✕</button>
        <h3 id="recipeTitle">Recette</h3>
        <div id="recipeContent"></div>
    </div>
</div>
</main>

<script>
function openRecipe(e, el){
    e.preventDefault();
    const recipe = el.nextElementSibling.innerHTML; // récupère le contenu du div caché
    document.getElementById('recipeContent').innerHTML = recipe;
    document.getElementById('recipeModal').style.display = 'flex';
}
function closeRecipe(){
    document.getElementById('recipeModal').style.display = 'none';
}
</script>
@endsection