@extends('admin.layouts.app')

@section('title', 'Pages Management')

@section('page-title', 'Pages Management')

@section('content')


<div class="pages-wrapper">

    <!-- ===== BREADCRUMB ===== -->
    <nav class="breadcrumb-nav">
        <ol class="breadcrumb-custom">
            <li><a href="{{ route('admin.dashboard') }}"><i class="bi bi-house-door"></i> Dashboard</a></li>
            <li><a href="#"><i class="bi bi-file-earmark-text"></i> Content</a></li>
            <li class="active">Pages</li>
        </ol>
    </nav>

    <!-- ===== PAGE HEADER ===== -->
    <div class="page-header-custom">
        <div>
            <h1>Pages</h1>
            <p><i class="bi bi-file-earmark-text"></i> Manage all website pages</p>
        </div>
        <a href="{{ route('admin.pages.create') }}" class="btn-primary-gradient">
            <i class="bi bi-plus-circle"></i> Add New Page
        </a>
    </div>

    <!-- ===== ALERTS ===== -->
    @if(session('success'))
    <div class="alert-box alert-success">
        <i class="bi bi-check-circle-fill"></i>
        <span>{{ session('success') }}</span>
        <button class="alert-close-btn" data-dismiss="alert"><i class="bi bi-x"></i></button>
    </div>
    @endif

    @if(session('error'))
    <div class="alert-box alert-error">
        <i class="bi bi-exclamation-circle-fill"></i>
        <span>{{ session('error') }}</span>
        <button class="alert-close-btn" data-dismiss="alert"><i class="bi bi-x"></i></button>
    </div>
    @endif

    <!-- ===== TABLE CARD ===== -->
    <div class="table-card-main">

        <!-- Table Header with Search -->
        <div class="table-header-main">
            <div class="table-header-left">
                <h6><i class="bi bi-file-earmark-text"></i> All Pages</h6>
                <span class="total-badge">{{ $pages->total() }} Total</span>
            </div>
            <div class="table-header-right">
                <div class="table-search-wrapper">
                    <i class="bi bi-search"></i>
                    <input type="text" id="pageSearch" placeholder="Search pages..." class="search-input">
                </div>
            </div>
        </div>

        <!-- Table -->
        <div class="table-responsive-wrapper">
            <table class="table-custom" id="pagesTable">
                <thead>
                    <tr>
                        <th class="col-sno">#</th>
                        <th class="col-title">Title</th>
                        <th class="col-slug">Slug</th>
                        <th class="col-status">Status</th>
                        <th class="col-date">Created</th>
                        <th class="col-actions">Actions</th>
                    </tr>
                </thead>
                <tbody id="tableBody">
                    @forelse($pages as $page)
                    <tr>
                        <td class="col-sno">{{ $loop->iteration }}</td>
                        <td class="col-title">
                            <div class="page-title-cell">
                                <i class="bi bi-file-earmark"></i>
                                <span>{{ $page->title }}</span>
                            </div>
                        </td>
                        <td class="col-slug">
                            <code class="slug-code">/{{ $page->slug }}</code>
                        </td>
                        <td class="col-status">
                            @if($page->status)
                            <span class="status-badge active">
                                <i class="bi bi-check-circle-fill"></i> Active
                            </span>
                            @else
                            <span class="status-badge inactive">
                                <i class="bi bi-x-circle-fill"></i> Inactive
                            </span>
                            @endif
                        </td>
                        <td class="col-date">
                            <span class="date-cell">
                                <i class="bi bi-calendar3"></i>
                                {{ $page->created_at->format('d M Y') }}
                            </span>
                        </td>
                        <td class="col-actions">
                            <div class="action-buttons">
                                <a href="{{ route('admin.pages.edit', $page->id) }}"
                                    class="action-btn edit"
                                    title="Edit Page">
                                    <i class="bi bi-pencil-square"></i>
                                </a>

                                <!-- DELETE FORM - Simple with onclick -->
                                <form action="{{ route('admin.pages.destroy', $page->id) }}"
                                    method="POST"
                                    class="delete-form"
                                    onsubmit="return confirmDelete(event, this, '{{ $page->title }}');">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="action-btn delete" title="Delete Page">
                                        <i class="bi bi-trash3"></i>
                                    </button>
                                </form>

                                <a href="#" class="action-btn view" title="View Page">
                                    <i class="bi bi-eye"></i>
                                </a>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr class="empty-state">
                        <td colspan="6">
                            <div class="empty-content">
                                <i class="bi bi-file-earmark-text"></i>
                                <h5>No Pages Found</h5>
                                <p>Start by creating your first page</p>
                                <a href="{{ route('admin.pages.create') }}" class="btn-primary-gradient">
                                    <i class="bi bi-plus-circle"></i> Create Page
                                </a>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Table Footer with Pagination -->
        <div class="table-footer-main">
            <div class="table-info">
                Showing <strong>{{ $pages->firstItem() ?? 0 }}</strong> to
                <strong>{{ $pages->lastItem() ?? 0 }}</strong> of
                <strong>{{ $pages->total() }}</strong> pages
            </div>
            <div class="pagination-wrapper">
                {{ $pages->links() }}
            </div>
        </div>
    </div>

</div>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        'use strict';

        // ============================================
        // 1. TABLE SEARCH - FIXED
        // ============================================
        const pageSearch = document.getElementById('pageSearch');
        const tableBody = document.getElementById('tableBody');

        if (pageSearch && tableBody) {
            pageSearch.addEventListener('keyup', function() {
                const query = this.value.trim().toLowerCase();
                const rows = tableBody.querySelectorAll('tr:not(.empty-state)');

                rows.forEach(function(row) {
                    const text = row.textContent.toLowerCase();
                    row.style.display = text.includes(query) ? '' : 'none';
                });

                // Show/hide no result
                const visibleRows = tableBody.querySelectorAll('tr:not(.empty-state):not([style*="display: none"])');
                let noResult = tableBody.querySelector('.no-result-state');

                if (visibleRows.length === 0) {
                    if (!noResult) {
                        noResult = document.createElement('tr');
                        noResult.className = 'empty-state no-result-state';
                        noResult.innerHTML = `
                            <td colspan="6">
                                <div class="empty-content">
                                    <i class="bi bi-search"></i>
                                    <h5>No results found</h5>
                                    <p>Try adjusting your search terms</p>
                                </div>
                            </td>
                        `;
                        tableBody.appendChild(noResult);
                    }
                    noResult.style.display = '';
                } else if (noResult) {
                    noResult.style.display = 'none';
                }
            });
        }

        // ============================================
        // 2. DELETE CONFIRMATION - FIXED (Simple confirm)
        // ============================================
        window.confirmDelete = function(e, form, title) {
            e.preventDefault();
            
            if (confirm('Are you sure you want to delete "' + title + '"?')) {
                form.submit();
            }
            return false;
        };

        // ============================================
        // 3. ALERT AUTO-DISMISS
        // ============================================
        document.querySelectorAll('.alert-close-btn').forEach(function(btn) {
            btn.addEventListener('click', function() {
                const alert = this.closest('.alert-box');
                if (alert) {
                    alert.style.transition = 'all 0.3s ease';
                    alert.style.transform = 'translateX(40px)';
                    alert.style.opacity = '0';
                    setTimeout(function() {
                        if (alert.parentNode) alert.remove();
                    }, 300);
                }
            });
        });

        // Auto dismiss after 5 seconds
        document.querySelectorAll('.alert-box').forEach(function(alert) {
            setTimeout(function() {
                if (alert && alert.parentNode) {
                    alert.style.transition = 'all 0.4s ease';
                    alert.style.transform = 'translateX(40px)';
                    alert.style.opacity = '0';
                    setTimeout(function() {
                        if (alert.parentNode) alert.remove();
                    }, 400);
                }
            }, 5000);
        });

        console.log('✅ Pages management loaded successfully!');
    });
</script>

@endsection