@extends('admin.layouts.app')

@section('title', 'Réalisations')

@section('content')
    <div class="btn-row" style="justify-content: space-between; align-items: flex-start;">
        <div>
            <h1 class="page-title">Réalisations</h1>
            <p class="lead">Votre galerie de projets, alimentée au fil de l'eau — comme un journal. <a href="/gallery" target="_blank" rel="noopener">Voir la page publique</a></p>
        </div>
        <div class="btn-row" style="gap: 8px;">
            <a class="btn" href="{{ route('admin.projects.settings') }}" title="Réglages de la galerie">⚙ Réglages</a>
            <a class="btn btn-gold" href="{{ route('admin.projects.create') }}">+ Nouvelle réalisation</a>
        </div>
    </div>

    <div class="form-note">
        Chaque réalisation est une <strong>vignette</strong> sur la page « Gallery » du site et un <strong>article</strong> avec ses photos.
        Choisissez la taille de chaque vignette pour composer la mosaïque, et <strong>glissez-déposez</strong> les cartes ci-dessous pour changer l'ordre
        (ou utilisez les flèches ▲▼). Un <strong>brouillon</strong> n'est visible que par vous.
    </div>

    @if ($projects->isEmpty())
        <div class="empty">Aucune réalisation pour l'instant — créez la première !</div>
    @else
        <style>
            .prjadm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
            .prjadm-card { background: #fff; border: 1px solid var(--ff-line); border-radius: 12px; overflow: hidden; }
            .prjadm-card.sortable-ghost { opacity: .4; border-style: dashed; }
            .prjadm-cover { height: 150px; background-size: cover; background-position: center; background-color: #efe9dd; position: relative; cursor: grab; }
            .prjadm-cover:active { cursor: grabbing; }
            .prjadm-size { position: absolute; top: 8px; left: 8px; background: rgba(33,31,28,.78); color: #f3ead9; font-size: .68rem; padding: .2rem .55rem; border-radius: 999px; letter-spacing: .04em; }
            .prjadm-body { padding: 12px 14px 14px; }
            .prjadm-title { font-weight: 500; font-size: .98rem; margin: 0 0 2px; }
            .prjadm-meta { color: var(--ff-muted); font-size: .78rem; margin: 0 0 10px; }
        </style>

        <div class="prjadm-grid" id="prjGrid">
            @foreach ($projects as $project)
                <div class="prjadm-card" data-id="{{ $project->id }}">
                    <div class="prjadm-cover" title="Glissez pour réordonner" style="background-image: url('{{ $project->cover ? media_url($project->cover) : '' }}');">
                        <span class="prjadm-size">{{ \App\Models\Project::TILE_SIZES[$project->tile_size] ?? $project->tile_size }}</span>
                    </div>
                    <div class="prjadm-body">
                        <p class="prjadm-title">{{ $project->title }}</p>
                        <p class="prjadm-meta">
                            @if ($project->isPublished())<span class="badge badge-pub">Publié</span>@else<span class="badge badge-draft">Brouillon</span>@endif
                            · {{ $project->photos_count }} photo{{ $project->photos_count > 1 ? 's' : '' }}
                            @if ($project->metaLine()) · {{ $project->metaLine() }} @endif
                        </p>
                        <div class="btn-row">
                            <form class="inline-form" method="POST" action="{{ route('admin.projects.move', $project) }}">
                                @csrf<input type="hidden" name="dir" value="up">
                                <button class="btn btn-sm" type="submit" @disabled($loop->first) title="Monter">▲</button>
                            </form>
                            <form class="inline-form" method="POST" action="{{ route('admin.projects.move', $project) }}">
                                @csrf<input type="hidden" name="dir" value="down">
                                <button class="btn btn-sm" type="submit" @disabled($loop->last) title="Descendre">▼</button>
                            </form>
                            <a class="btn btn-sm" href="{{ route('admin.projects.edit', $project) }}">Modifier</a>
                            <a class="btn btn-sm" href="/gallery/{{ $project->slug }}" target="_blank" rel="noopener">Aperçu</a>
                            <form class="inline-form" method="POST" action="{{ route('admin.projects.destroy', $project) }}"
                                  data-confirm="Êtes-vous sûr de bien vouloir supprimer « {{ $project->title }} » ? (récupérable via une sauvegarde)"
                                  data-confirm-variant="danger" data-confirm-yes="Oui, supprimer">
                                @csrf
                                @method('DELETE')
                                <button class="btn btn-sm btn-danger" type="submit">Supprimer</button>
                            </form>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

        {{-- Drag-and-drop ordering (SortableJS). Pure enhancement: if the CDN
             is unreachable, the ▲▼ buttons above keep working. --}}
        <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.6/Sortable.min.js" defer></script>
        <script>
            window.addEventListener('load', function () {
                if (typeof Sortable === 'undefined') return;
                var grid = document.getElementById('prjGrid');
                if (!grid) return;
                new Sortable(grid, {
                    animation: 180,
                    handle: '.prjadm-cover',
                    onEnd: function () {
                        var order = Array.from(grid.querySelectorAll('[data-id]')).map(function (el) {
                            return el.getAttribute('data-id');
                        });
                        fetch('{{ route('admin.projects.reorder') }}', {
                            method: 'POST',
                            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                            body: JSON.stringify({ order: order })
                        }).catch(function () { window.location.reload(); });
                    }
                });
            });
        </script>
    @endif
@endsection