@extends('backend.layouts.app')

@section('title')
    Website Content
@endsection

@section('headerWithButton')
    <h2 class="text-lg font-semibold text-gray-900">@yield('title')</h2>
@endsection

@php
    $thClass = 'px-3 py-2 text-left text-xs font-semibold text-gray-500 uppercase tracking-wider';
@endphp

@section('content')
    <table id="websiteContentTable" class="display table-auto" width="100%">
        <thead class="bg-gray-50">
            <tr class="{{ $thClass }}">
                <th>S.N</th>
                <th>Page</th>
                <th>Sections</th>
                <th>Last Updated</th>
                <th>Actions</th>
            </tr>
        </thead>

        <tbody class="bg-white divide-y divide-gray-200">
            {{-- rows come from WebsiteContentTableSeeder; no colspan "empty" row, DataTables shows its own --}}
            @foreach ($pages as $page => $contents)
                <tr>
                    <td>{{ $loop->iteration }}</td>
                    <td>{{ Str::headline($page) }}</td>
                    <td>{{ $contents->pluck('section')->unique()->map(fn ($section) => Str::headline($section))->join(', ') }}</td>
                    <td class="whitespace-nowrap">{{ $contents->max('updated_at')?->format('Y-m-d H:i') }}</td>
                    <td>
                        <div class="flex space-x-2">
                            <x-buttons.edit-button url="{{ route('website-content.edit', $page) }}" />
                        </div>
                    </td>
                </tr>
            @endforeach
        </tbody>
    </table>
@endsection

@section('scripts')
    <script>
        $(document).ready(function() {
            $('#websiteContentTable').DataTable({
                bSortCellsTop: true,
                scrollX: true,
                autoWidth: false,
                responsive: false,
                fixedHeader: true,
                fixedColumns: {
                    leftColumns: 1,
                    rightColumns: 1,
                },
                columnDefs: [{
                    targets: -1,
                    orderable: false,
                    searchable: false,
                }],
            });
        });
    </script>
@endsection