@extends('user::layouts.backend-master')
@section('breadcrumb_title', 'Pages')

@section('content')
    <div class="card p-4">
        <div class="flex justify-between items-center mb-4">
            <h1 class="text-2xl font-semibold">Pages</h1>
            <a href="{{ route('admin.page.create') }}" class="btn btn-primary">
                <i class="fas fa-plus"></i> Add New Page
            </a>
        </div>

        <div class="overflow-x-auto">
            <table class="min-w-full bg-white border border-gray-200 rounded-lg border-collapse ">
                <thead class="bg-gray-100">
                    <tr>
                        <th class="px-4 py-2 text-left">
                            <input type="checkbox" id="select-all">
                        </th>
                        <th class="px-4 py-2 text-left">Title</th>
                        <th class="px-4 py-2 text-center">Status</th>
                        <th class="px-4 py-2 text-center">Created</th>
                        <th class="px-4 py-2 text-center">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y">
                    @forelse ($pages as $page)
                        <tr class="hover:bg-gray-50">
                            <td class="px-4 py-3">
                                <input type="checkbox" class="page-checkbox" value="{{ $page->id }}">
                            </td>

                            <!-- Title -->
                            <td class="px-4 py-3 font-medium">
                                {{ $page->title }}
                            </td>

                            <!-- Status -->
                            <td class="px-4 py-3 text-center">
                                @if ($page->status == 1)
                                    <span class="px-2 py-1 text-xs font-semibold rounded-full bg-green-100 text-green-700">
                                        Active
                                    </span>
                                @else
                                    <span class="px-2 py-1 text-xs font-semibold rounded-full bg-gray-200 text-gray-700">
                                        Inactive
                                    </span>
                                @endif
                            </td>

                            <!-- Created -->
                            <td class="px-4 py-3 text-center">
                                {{ $page->created_at->format('Y-m-d H:i') }}
                            </td>

                            <!-- Actions -->
                            <td class="px-4 py-3 text-center">
                                <div class="flex gap-2">
                                    <a href="#"
                                        class="size-8 sm:size-10 p-2 rounded-full flex justify-center items-center text-white bg-blue-500 hover:bg-blue-600"
                                        target="_blank" title="View">
                                        <svg class="size-5 sm:size-6" width="24" height="24" viewBox="0 0 24 24"
                                            fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M15 13.8564C15 12.1995 13.6569 10.8564 12 10.8564C10.3431 10.8564 9 12.1995 9 13.8564C9 15.5133 10.3431 16.8564 12 16.8564C13.6569 16.8564 15 15.5133 15 13.8564Z"
                                                stroke="currentColor" stroke-width="1.5"></path>
                                            <path
                                                d="M11.9996 6.85645C16.1814 6.85645 19.7636 10.8697 21.2568 12.8186C21.731 13.4377 21.731 14.2751 21.2568 14.8942C19.7636 16.8432 16.1814 20.8564 11.9996 20.8564C7.81782 20.8564 4.23557 16.8432 2.74242 14.8942C2.26815 14.2751 2.26816 13.4377 2.74242 12.8186C4.23557 10.8697 7.81782 6.85645 11.9996 6.85645Z"
                                                stroke="currentColor" stroke-width="1.5" stroke-linejoin="round">
                                            </path>
                                        </svg>
                                    </a>

                                    <a href="#"
                                        class="size-8 sm:size-10 p-2 rounded-full flex justify-center items-center text-main bg-main/5 edit-btn"
                                        title="Edit">
                                        <svg class="size-5 sm:size-6" width="24" height="24" viewBox="0 0 24 24"
                                            fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M3.78181 16.3092L3 21L7.69086 20.2182C8.50544 20.0825 9.25725 19.6956 9.84119 19.1116L20.4198 8.53288C21.1934 7.75922 21.1934 6.5049 20.4197 5.73126L18.2687 3.58024C17.495 2.80658 16.2406 2.80659 15.4669 3.58027L4.88841 14.159C4.30447 14.7429 3.91757 15.4947 3.78181 16.3092Z"
                                                stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                                stroke-linejoin="round"></path>
                                            <path d="M14 6L18 10" stroke="currentColor" stroke-width="1.5"
                                                stroke-linecap="round" stroke-linejoin="round">
                                            </path>
                                        </svg>
                                    </a>

                                    <button type="button"
                                        class="size-8 sm:size-10 p-2 rounded-full flex justify-center items-center text-error bg-error/10 delete-btn"
                                        data-id="{{ $page->id }}" title="Delete">
                                        <svg class="size-5 sm:size-6" width="24" height="24" viewBox="0 0 24 24"
                                            fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path
                                                d="M19.5 5.5L18.6139 20.121C18.5499 21.1766 17.6751 22 16.6175 22H7.38246C6.32488 22 5.4501 21.1766 5.38612 20.121L4.5 5.5"
                                                stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                                stroke-linejoin="round"></path>
                                            <path
                                                d="M3 5.5H8M8 5.5L9.24025 2.60608C9.39783 2.2384 9.75937 2 10.1594 2H13.8406C14.2406 2 14.6022 2.2384 14.7597 2.60608L16 5.5M8 5.5H16M21 5.5H16"
                                                stroke="currentColor" stroke-width="1.5" stroke-linecap="round"
                                                stroke-linejoin="round"></path>
                                            <path d="M9.5 16.5V10.5" stroke="currentColor" stroke-width="1.5"
                                                stroke-linecap="round" stroke-linejoin="round"></path>
                                            <path d="M14.5 16.5V10.5" stroke="currentColor" stroke-width="1.5"
                                                stroke-linecap="round" stroke-linejoin="round"></path>
                                        </svg>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="5" class="text-center py-4 text-gray-500">
                                No pages found
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
@endsection