@extends('layouts.admin')

@section('title', 'Pages')

@section('content')
    <div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <h1 class="text-2xl font-bold sm:text-3xl">Pages</h1>
        <a href="{{ route('admin.pages.create') }}" class="inline-flex items-center justify-center gap-2 rounded-xl bg-cyan-600 px-4 py-2 text-sm font-medium text-white hover:bg-cyan-700">
            <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8" d="M12 5v14m-7-7h14"/>
            </svg>
            Add Page
        </a>
    </div>

    <div class="space-y-3 md:hidden">
        @forelse ($pages as $page)
            <article class="rounded-2xl border border-slate-200 bg-white p-4 shadow-sm">
                <div class="flex items-start justify-between gap-2">
                    <div>
                        <h2 class="font-semibold">{{ $page->title }}</h2>
                        <a href="{{ route('frontend.page.show', $page->slug) }}" target="_blank" class="text-xs text-cyan-700 hover:underline">
                            /{{ $page->slug }}
                        </a>
                    </div>
                    <span class="rounded px-2 py-1 text-xs {{ $page->is_active ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
                        {{ $page->is_active ? 'Active' : 'Inactive' }}
                    </span>
                </div>
                <div class="mt-3 grid grid-cols-3 gap-2 text-xs">
                    <form action="{{ route('admin.pages.toggle-active', $page) }}" method="post">
                        @csrf
                        @method('PATCH')
                        <button title="{{ $page->is_active ? 'Deactivate' : 'Activate' }}" class="inline-flex w-full items-center justify-center rounded-lg border border-slate-200 px-2 py-1.5 {{ $page->is_active ? 'text-amber-600' : 'text-green-600' }}">
                            {{ $page->is_active ? 'Off' : 'On' }}
                        </button>
                    </form>
                    <a href="{{ route('admin.pages.edit', $page) }}" title="Edit" class="inline-flex items-center justify-center rounded-lg border border-slate-200 px-2 py-1.5 text-sky-600">
                        Edit
                    </a>
                    <form action="{{ route('admin.pages.destroy', $page) }}" method="post" onsubmit="return confirmDeleteWithPassword(this, 'Delete this page?');">
                        @csrf
                        @method('DELETE')
                        <button title="Delete" class="inline-flex w-full items-center justify-center rounded-lg border border-red-200 px-2 py-1.5 text-red-600">
                            Delete
                        </button>
                    </form>
                </div>
            </article>
        @empty
            <div class="rounded-xl border border-slate-200 bg-white p-4 text-sm text-slate-600">No pages found.</div>
        @endforelse
    </div>

    <div class="hidden overflow-x-auto rounded-2xl border border-slate-200 bg-white shadow-sm md:block">
        <table class="w-full text-sm">
            <thead class="bg-slate-50">
                <tr>
                    <th class="p-3 text-left">Title</th>
                    <th class="p-3 text-left">Slug</th>
                    <th class="p-3 text-left">Status</th>
                    <th class="p-3 text-right">Actions</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($pages as $page)
                    <tr class="border-t border-slate-100">
                        <td class="p-3 font-medium">{{ $page->title }}</td>
                        <td class="p-3">
                            <a href="{{ route('frontend.page.show', $page->slug) }}" target="_blank" class="text-cyan-700 hover:underline">
                                /{{ $page->slug }}
                            </a>
                        </td>
                        <td class="p-3">
                            <span class="rounded px-2 py-1 text-xs {{ $page->is_active ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700' }}">
                                {{ $page->is_active ? 'Active' : 'Inactive' }}
                            </span>
                        </td>
                        <td class="p-3">
                            <div class="flex justify-end gap-2 text-xs">
                                <form action="{{ route('admin.pages.toggle-active', $page) }}" method="post">
                                    @csrf
                                    @method('PATCH')
                                    <button class="rounded-lg border border-slate-200 px-2 py-1 {{ $page->is_active ? 'text-amber-600' : 'text-green-600' }}">
                                        {{ $page->is_active ? 'Deactivate' : 'Activate' }}
                                    </button>
                                </form>
                                <a href="{{ route('admin.pages.edit', $page) }}" class="rounded-lg border border-slate-200 px-2 py-1 text-sky-600">Edit</a>
                                <form action="{{ route('admin.pages.destroy', $page) }}" method="post" onsubmit="return confirmDeleteWithPassword(this, 'Delete this page?');">
                                    @csrf
                                    @method('DELETE')
                                    <button class="rounded-lg border border-red-200 px-2 py-1 text-red-600">Delete</button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="p-3 text-slate-600">No pages found.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    @include('admin.partials.pagination', ['paginator' => $pages])
@endsection