@extends('layouts.admin')

@section('title', $moduleTitle)

@section('content')
    <div class="mb-5 flex flex-wrap items-center justify-between gap-4">
        <form method="GET" class="flex flex-wrap items-center gap-3">
            <div class="relative">
                <x-icon name="search" class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-text-muted" />
                <input type="search" name="q" value="{{ request('q') }}" placeholder="Search…"
                       class="form-input w-56 pl-9" aria-label="Search {{ $moduleTitle }}">
            </div>

            @foreach ($filters as $key => $filter)
                <select name="{{ $key }}" onchange="this.form.submit()" class="form-input w-44" aria-label="{{ $filter['label'] }}">
                    <option value="">All {{ Str::lower($filter['label']) }}</option>
                    @foreach ($filter['options'] as $value => $label)
                        <option value="{{ $value }}" @selected(request($key) == $value)>{{ $label }}</option>
                    @endforeach
                </select>
            @endforeach

            <select name="status" onchange="this.form.submit()" class="form-input w-36" aria-label="Publication status">
                <option value="">Any status</option>
                <option value="active" @selected(request('status') === 'active')>Published</option>
                <option value="inactive" @selected(request('status') === 'inactive')>Unpublished</option>
            </select>

            @if (request()->hasAny(['q', 'status', ...array_keys($filters)]))
                <a href="{{ route($routeBase.'.index') }}" class="btn-ghost btn-sm">Clear</a>
            @endif
        </form>

        @can($moduleKey.'.create')
            <a href="{{ route($routeBase.'.create') }}" class="btn-primary">
                <x-icon name="plus" class="size-4" /> New {{ Str::lower($moduleSingular) }}
            </a>
        @endcan
    </div>

    <div class="admin-card overflow-hidden">
        @if ($records->isEmpty())
            <div class="px-6 py-16 text-center">
                <x-icon name="folder" class="mx-auto size-8 text-text-muted" />
                <p class="mt-3 font-medium text-text-secondary">No records found</p>
                <p class="mt-1 text-sm text-text-muted">
                    {{ request()->hasAny(['q', 'status', ...array_keys($filters)]) ? 'Try clearing the filters above.' : 'Create the first one to get started.' }}
                </p>
            </div>
        @else
            <div class="overflow-x-auto">
                <table class="table-admin">
                    <thead>
                        <tr>
                            @foreach ($columns as $key => $column)
                                <th scope="col">{{ $column['label'] }}</th>
                            @endforeach
                            <th scope="col"><span class="sr-only">Actions</span></th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach ($records as $record)
                            <tr>
                                @foreach ($columns as $key => $column)
                                    <td>
                                        @include('admin.crud.cell', ['record' => $record, 'key' => $key, 'column' => $column])
                                    </td>
                                @endforeach

                                <td class="text-right">
                                    <div class="flex items-center justify-end gap-1">
                                        @can($moduleKey.'.update')
                                            @if (array_key_exists('is_active', $record->getAttributes()))
                                                <form action="{{ route($routeBase.'.toggle', $record) }}" method="POST">
                                                    @csrf @method('PATCH')
                                                    <button type="submit" class="rounded p-1.5 text-text-muted hover:bg-surface-muted hover:text-primary"
                                                            title="{{ $record->is_active ? 'Unpublish' : 'Publish' }}">
                                                        <x-icon :name="$record->is_active ? 'eye' : 'close'" class="size-4" />
                                                    </button>
                                                </form>
                                            @endif

                                            <a href="{{ route($routeBase.'.edit', $record) }}"
                                               class="rounded p-1.5 text-text-muted hover:bg-surface-muted hover:text-primary" title="Edit">
                                                <x-icon name="edit" class="size-4" />
                                            </a>
                                        @endcan

                                        @can($moduleKey.'.delete')
                                            <form action="{{ route($routeBase.'.destroy', $record) }}" method="POST"
                                                  onsubmit="return confirm('Delete this {{ Str::lower($moduleSingular) }}? This cannot be undone from the panel.')">
                                                @csrf @method('DELETE')
                                                <button type="submit" class="rounded p-1.5 text-text-muted hover:bg-error/5 hover:text-error" title="Delete">
                                                    <x-icon name="trash" class="size-4" />
                                                </button>
                                            </form>
                                        @endcan
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            @if ($records->hasPages())
                <div class="border-t border-border px-5 py-4">{{ $records->links() }}</div>
            @endif
        @endif
    </div>
@endsection