@extends('admin.layouts.app')

@section('title', 'Pages')

@section('content')
    <h1 class="page-title">Pages</h1>
    <p class="lead">Gérez le contenu, le menu et le référencement de chaque page.</p>

    <div class="field" style="max-width: 420px;">
        <input type="text" id="pageSearch" placeholder="🔍  Rechercher une page…" autocomplete="off" autofocus>
    </div>

    <table class="tbl" id="pagesTable">
        <thead>
            <tr>
                <th>Page</th>
                <th>Adresse</th>
                <th>Statut</th>
                <th>Blocs</th>
                <th>Dernière modification</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach ($pages as $page)
                @php
                    $blocksMax = $page->blocks_max_updated_at ? \Illuminate\Support\Carbon::parse($page->blocks_max_updated_at) : null;
                    $lastModified = ($blocksMax && (! $page->updated_at || $blocksMax->greaterThan($page->updated_at)))
                        ? $blocksMax : $page->updated_at;
                @endphp
                <tr data-search="{{ \Illuminate\Support\Str::lower($page->title . ' ' . $page->slug) }}">
                    <td>{{ $page->title }}</td>
                    <td><span class="ro">/{{ $page->slug }}</span></td>
                    <td>
                        @if ($page->isPublished())
                            <span class="badge badge-pub">Publié</span>
                        @else
                            <span class="badge badge-draft">Brouillon</span>
                        @endif
                    </td>
                    <td>{{ $page->blocks_count }}</td>
                    <td>
                        @if ($lastModified)
                            <span title="{{ $lastModified->locale('fr')->isoFormat('D MMMM YYYY [à] HH[h]mm') }}">{{ $lastModified->locale('fr')->isoFormat('D MMM YYYY') }}</span>
                        @else
                            <span class="ro">—</span>
                        @endif
                    </td>
                    <td>
                        <div class="btn-row">
                            <a class="btn btn-sm" href="{{ route('admin.pages.edit', $page) }}">Modifier</a>
                            <a class="btn btn-sm" href="/{{ $page->slug }}" target="_blank" rel="noopener">Aperçu</a>
                        </div>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
    <p id="pagesNoResult" class="hint" style="display: none;">Aucune page ne correspond à votre recherche.</p>

    <script>
        (function () {
            var input = document.getElementById('pageSearch');
            var none  = document.getElementById('pagesNoResult');
            if (!input) return;
            var rows = Array.prototype.slice.call(document.querySelectorAll('#pagesTable tbody tr'));

            input.addEventListener('input', function () {
                var q = this.value.trim().toLowerCase();
                var visible = 0;
                rows.forEach(function (row) {
                    var match = !q || row.getAttribute('data-search').indexOf(q) !== -1;
                    row.style.display = match ? '' : 'none';
                    if (match) visible++;
                });
                none.style.display = visible === 0 ? '' : 'none';
            });
        })();
    </script>
@endsection