@extends('admin.layouts.master')
@section('title', 'Pages Management')
@section('content')

<style>
    .page-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 30px;
        border-radius: 8px;
        margin-bottom: 30px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .page-header h1 {
        margin: 0;
        font-size: 32px;
        font-weight: 700;
    }

    .page-header p {
        margin: 5px 0 0 0;
        opacity: 0.9;
        font-size: 14px;
    }

    .btn-create {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        border: none;
        color: white;
        padding: 10px 20px;
        border-radius: 5px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        float: right;
        margin-bottom: 20px;
    }

    .btn-create:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(245, 87, 108, 0.4);
    }

    .card {
        border: none;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        border-radius: 8px;
        overflow: hidden;
    }

    .card-header {
        background: #f8f9fa;
        border-bottom: 2px solid #e9ecef;
        padding: 20px;
    }

    .table-wrapper {
        overflow-x: auto;
    }

    table {
        width: 100%;
        border-collapse: collapse;
    }

    thead {
        background: #f8f9fa;
    }

    th {
        padding: 15px;
        text-align: left;
        font-weight: 700;
        color: #495057;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-bottom: 2px solid #dee2e6;
    }

    td {
        padding: 15px;
        border-bottom: 1px solid #dee2e6;
        color: #495057;
    }

    tbody tr {
        transition: all 0.3s ease;
    }

    tbody tr:hover {
        background-color: #f8f9fa;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    tbody tr:last-child td {
        border-bottom: none;
    }

    .badge {
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 600;
        display: inline-block;
    }

    .badge-draft {
        background: #fff3cd;
        color: #856404;
    }

    .badge-published {
        background: #d4edda;
        color: #155724;
    }

    .badge-archived {
        background: #f8d7da;
        color: #721c24;
    }

    .page-title {
        font-weight: 600;
        color: #212529;
        max-width: 250px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .page-slug {
        font-size: 12px;
        color: #6c757d;
        margin-top: 3px;
    }

    .widget-count {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .widget-badge {
        background: #e7f3ff;
        color: #0056b3;
        padding: 4px 10px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 600;
    }

    .action-buttons {
        display: flex;
        gap: 8px;
    }

    .btn-action {
        width: 32px;
        height: 32px;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        font-size: 14px;
    }

    .btn-edit {
        background: #007bff;
        color: white;
    }

    .btn-edit:hover {
        background: #0056b3;
        transform: translateY(-2px);
        box-shadow: 0 3px 8px rgba(0, 123, 255, 0.3);
    }

    .btn-view {
        background: #28a745;
        color: white;
    }

    .btn-view:hover {
        background: #218838;
        transform: translateY(-2px);
        box-shadow: 0 3px 8px rgba(40, 167, 69, 0.3);
    }

    .btn-delete {
        background: #dc3545;
        color: white;
    }

    .btn-delete:hover {
        background: #c82333;
        transform: translateY(-2px);
        box-shadow: 0 3px 8px rgba(220, 53, 69, 0.3);
    }

    .date-small {
        font-size: 12px;
        color: #6c757d;
    }

    .empty-state {
        text-align: center;
        padding: 60px 20px;
        color: #6c757d;
    }

    .empty-state i {
        font-size: 64px;
        opacity: 0.3;
        margin-bottom: 20px;
        display: block;
    }

    .empty-state h3 {
        margin: 20px 0 10px 0;
        color: #495057;
    }

    .empty-state p {
        margin: 0;
    }

    .pagination {
        display: flex;
        justify-content: center;
        gap: 5px;
        margin-top: 20px;
        padding: 20px;
    }

    .pagination a, .pagination span {
        padding: 8px 12px;
        border: 1px solid #dee2e6;
        border-radius: 4px;
        color: #007bff;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .pagination a:hover {
        background: #007bff;
        color: white;
    }

    .pagination .active {
        background: #007bff;
        color: white;
        border-color: #007bff;
    }

    @media (max-width: 768px) {
        .page-header {
            padding: 20px;
        }

        .page-header h1 {
            font-size: 24px;
        }

        th, td {
            padding: 10px;
            font-size: 12px;
        }

        .page-title {
            max-width: 150px;
        }

        .action-buttons {
            flex-wrap: wrap;
        }
    }
</style>

<div class="container-fluid">
    <!-- Header -->
    <div class="page-header">
        <h1>📄 Pages Management</h1>
        <p>Manage and organize all your website pages</p>
    </div>



    <!-- Table Card -->
    <div class="card">
        <div class="card-header">
            <h3 class="card-title">
                <i class="fas fa-list"></i> All Pages
            </h3>
            <div class="card-tools">
                <span class="badge badge-primary">{{ $pages->count() }} Pages</span>
            </div>
        </div>

        @if($pages->count() > 0)
            <div class="table-wrapper">
                <table>
                    <thead>
                        <tr>
                            <th style="width: 30px;">#</th>
                            <th style="width: 300px;">Page Title</th>
                            <th style="width: 150px;">Status</th>
                            <th style="width: 200px;">Widgets</th>
                            <th style="width: 150px;">Created</th>
                            <th style="width: 120px;">Updated</th>
                            <th style="width: 150px; text-align: center;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($pages as $page)
                            <tr>
                                <td>{{ $loop->iteration }}</td>
                                <td>
                                    <div class="page-title">{{ $page->title }}</div>
                                    <div class="page-slug">{{ $page->slug }}</div>
                                </td>
                                <td>
                                    @if($page->status == 'draft')
                                        <span class="badge badge-draft">
                                            <i class="fas fa-pencil-alt"></i> Draft
                                        </span>
                                    @elseif($page->status == 'published')
                                        <span class="badge badge-published">
                                            <i class="fas fa-check-circle"></i> Published
                                        </span>
                                    @elseif($page->status == 'archived')
                                        <span class="badge badge-archived">
                                            <i class="fas fa-archive"></i> Archived
                                        </span>
                                    @endif
                                </td>
                                <td>
                                    <div class="widget-count">
                                        @php
                                            $contentWidgets = is_string($page->content_widgets) ? json_decode($page->content_widgets, true) : $page->content_widgets;
                                            $sidebarWidgets = is_string($page->sidebar_widgets) ? json_decode($page->sidebar_widgets, true) : $page->sidebar_widgets;
                                            $contentCount = is_array($contentWidgets) ? count($contentWidgets) : 0;
                                            $sidebarCount = is_array($sidebarWidgets) ? count($sidebarWidgets) : 0;
                                        @endphp
                                        <span class="widget-badge">
                                            <i class="fas fa-cube"></i> Content: {{ $contentCount }}
                                        </span>
                                        <span class="widget-badge">
                                            <i class="fas fa-th-large"></i> Sidebar: {{ $sidebarCount }}
                                        </span>
                                    </div>
                                </td>
                                <td>
                                    <div class="date-small">
                                        {{ $page->created_at->format('M d, Y') }}
                                    </div>
                                </td>
                                <td>
                                    <div class="date-small">
                                        {{ $page->updated_at->format('M d, Y') }}
                                    </div>
                                </td>
                                <td>
                                    <div class="action-buttons" style="justify-content: center;">
                                        <a href="{{ route('page.edit', $page->id) }}" class="btn-action btn-edit" title="Edit">
                                            <i class="fas fa-edit"></i>
                                        </a>
                                        <a href="{{ route('page', $page->slug) }}" target="_blank" class="btn-action btn-view" title="View">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        <form action="{{ route('page.destroy', $page->id) }}" method="POST" style="display: inline;">
                                            @csrf
                                            @method('DELETE')
                                            <button type="submit" class="btn-action btn-delete" title="Delete" onclick="return confirm('Are you sure?')">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </form>
                                    </div>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            @if($pages->hasPages())
                <div class="pagination">
                    {{ $pages->links() }}
                </div>
            @endif
        @else
            <div class="empty-state">
                <i class="fas fa-inbox"></i>
                <h3>No Pages Found</h3>
                <p>You haven't created any pages yet. <a href="{{ route('page.create') }}">Create one now!</a></p>
            </div>
        @endif
    </div>
</div>

@endsection