@extends('layouts.admin-simple')

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

@section('breadcrumb')
    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
    <li class="breadcrumb-item active" aria-current="page">Pages</li>
@endsection

@section('page-actions')
    <div class="ml-auto">
        <a href="{{ route('admin.pages.create') }}" class="btn btn-primary">
            <i class="material-icons">add</i> Create New Page
        </a>
    </div>
@endsection

@section('content')
<!-- Statistics Cards Row -->
<div class="row mb-4">
    <!-- Total Pages -->
    <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
        <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); border-left: 4px solid #6366f1 !important;">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <div class="text-muted small font-weight-bold text-uppercase mb-1">Total Pages</div>
                        <div class="h3 mb-0 font-weight-bold text-dark">{{ $pages->total() }}</div>
                    </div>
                    <div class="text-primary">
                        <i class="fas fa-file-alt fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Enabled Pages -->
    <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
        <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border-left: 4px solid #10b981 !important;">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <div class="text-muted small font-weight-bold text-uppercase mb-1">Enabled</div>
                        <div class="h3 mb-0 font-weight-bold text-dark">{{ $pages->where('is_enabled', true)->count() }}</div>
                    </div>
                    <div class="text-success">
                        <i class="fas fa-eye fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Disabled Pages -->
    <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
        <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border-left: 4px solid #f59e0b !important;">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <div class="text-muted small font-weight-bold text-uppercase mb-1">Disabled</div>
                        <div class="h3 mb-0 font-weight-bold text-dark">{{ $pages->where('is_enabled', false)->count() }}</div>
                    </div>
                    <div class="text-warning">
                        <i class="fas fa-eye-slash fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- In Navigation -->
    <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
        <div class="card border-0 shadow-sm h-100" style="background: linear-gradient(135deg, #f0f9ff 0%, #dbeafe 100%); border-left: 4px solid #3b82f6 !important;">
            <div class="card-body">
                <div class="d-flex align-items-center justify-content-between">
                    <div>
                        <div class="text-muted small font-weight-bold text-uppercase mb-1">In Navigation</div>
                        <div class="h3 mb-0 font-weight-bold text-dark">{{ $pages->where('show_in_nav', true)->count() }}</div>
                    </div>
                    <div class="text-info">
                        <i class="fas fa-bars fa-2x"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

    <!-- Pages Table -->
    <div class="card">
        <!-- Filters -->
        <div class="card-body border-bottom">
            <div class="row align-items-end">
                <div class="col-md-3">
                    <label class="form-label">Search</label>
                    <input type="text" class="form-control" placeholder="Search pages..." id="search-input">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Status</label>
                    <select class="form-control" id="status-filter">
                        <option value="">All Status</option>
                        <option value="enabled">Enabled</option>
                        <option value="disabled">Disabled</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Template</label>
                    <select class="form-control" id="template-filter">
                        <option value="">All Templates</option>
                        @foreach($pages->pluck('template')->unique() as $template)
                            <option value="{{ $template }}">{{ ucfirst($template) }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="col-md-3">
                    <button type="button" class="btn btn-outline-primary btn-sm" onclick="toggleBulkActions()">
                        <i class="material-icons">checklist</i> Bulk Actions
                    </button>
                </div>
            </div>
        </div>

        <!-- Bulk Actions Bar -->
        <div id="bulk-actions-bar" class="p-3 bg-light border-bottom" style="display: none;">
            <form id="bulk-actions-form" method="POST" action="{{ route('admin.pages.bulk-action') }}">
                @csrf
                <div class="d-flex align-items-center gap-3">
                    <select name="action" class="form-control form-control-sm" style="width: auto;">
                        <option value="">Select Action</option>
                        <option value="enable">Enable Selected</option>
                        <option value="disable">Disable Selected</option>
                        <option value="delete">Delete Selected</option>
                    </select>
                    <button type="submit" class="btn btn-sm btn-primary">Apply</button>
                    <button type="button" class="btn btn-sm btn-secondary" onclick="toggleBulkActions()">Cancel</button>
                    <span class="text-muted" id="selected-count">0 pages selected</span>
                </div>
            </form>
        </div>

        <div class="table-responsive">
            <table class="table mb-0">
                <thead>
                    <tr>
                        <th style="width: 18px;">
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input" id="select-all">
                                <label class="custom-control-label" for="select-all"></label>
                            </div>
                        </th>
                        <th>Page</th>
                        <th>Route</th>
                        <th>Status</th>
                        <th>Navigation</th>
                        <th>Order</th>
                        <th>Template</th>
                        <th>Updated</th>
                        <th style="width: 130px;">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($pages as $page)
                    <tr>
                        <td>
                            <div class="custom-control custom-checkbox">
                                <input type="checkbox" class="custom-control-input page-checkbox" name="page_ids[]" value="{{ $page->id }}" id="page_{{ $page->id }}">
                                <label class="custom-control-label" for="page_{{ $page->id }}"></label>
                            </div>
                        </td>
                        <td>
                            <div class="media align-items-center">
                                <div class="media-body">
                                    <strong>{{ $page->title }}</strong>
                                    <div class="text-muted small">{{ $page->slug }}</div>
                                    @if($page->meta_description)
                                        <div class="text-muted small mt-1">{{ Str::limit($page->meta_description, 60) }}</div>
                                    @endif
                                </div>
                            </div>
                        </td>
                        <td>
                            <code class="text-primary">{{ $page->route_name }}</code>
                        </td>
                        <td>
                            <span class="badge {{ $page->is_enabled ? 'badge-soft-success' : 'badge-soft-danger' }} btn-toggle-status" 
                                  data-page-id="{{ $page->id }}" 
                                  style="cursor: pointer;"
                                  title="Click to {{ $page->is_enabled ? 'disable' : 'enable' }}">
                                <i class="material-icons" style="font-size: 14px; vertical-align: middle;">{{ $page->is_enabled ? 'visibility' : 'visibility_off' }}</i>
                                {{ $page->is_enabled ? 'Enabled' : 'Disabled' }}
                            </span>
                        </td>
                        <td>
                            @if($page->show_in_nav)
                                <span class="badge badge-soft-info">In Navigation</span>
                            @else
                                <span class="badge badge-soft-secondary">Hidden</span>
                            @endif
                        </td>
                        <td>
                            <span class="badge badge-light">{{ $page->sort_order }}</span>
                        </td>
                        <td>
                            <span class="text-capitalize">{{ $page->template }}</span>
                        </td>
                        <td>
                            <small class="text-muted">{{ $page->updated_at->format('M j, Y') }}</small>
                        </td>
                        <td>
                            <div class="dropdown">
                                <a href="#" class="dropdown-toggle text-muted" data-toggle="dropdown" data-caret="false">
                                    <i class="material-icons">more_vert</i>
                                </a>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a class="dropdown-item" href="{{ route('admin.pages.show', $page) }}">
                                        <i class="fas fa-eye"></i> View Details
                                    </a>
                                    <a class="dropdown-item" href="{{ route('admin.pages.preview', $page) }}">
                                        <i class="fas fa-search"></i> Preview
                                    </a>
                                    <a class="dropdown-item" href="{{ route('admin.pages.edit', $page) }}">
                                        <i class="fas fa-edit"></i> Edit Page
                                    </a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="#" onclick="duplicatePage({{ $page->id }}); return false;">
                                        <i class="fas fa-copy"></i> Duplicate
                                    </a>
                                    @if($page->is_enabled)
                                        <a class="dropdown-item" href="{{ $page->url }}" target="_blank">
                                            <i class="fas fa-external-link-alt"></i> View Live
                                        </a>
                                    @endif
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item text-danger" href="#" onclick="deletePage({{ $page->id }}, '{{ $page->title }}'); return false;">
                                        <i class="fas fa-trash"></i> Delete Page
                                    </a>
                                </div>
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="9" class="text-center py-4">
                            <div class="text-muted">
                                <i class="material-icons" style="font-size: 48px;">description</i>
                                <p class="mt-2">No pages found. <a href="{{ route('admin.pages.create') }}">Create your first page</a></p>
                            </div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($pages->hasPages())
        <div class="card-footer">
            {{ $pages->links() }}
        </div>
        @endif
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal fade" id="deleteModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Confirm Delete</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Are you sure you want to delete the page "<span id="delete-page-title"></span>"?</p>
                    <p class="text-danger small">This action cannot be undone.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <form id="delete-form" method="POST" style="display: inline;">
                        @csrf
                        @method('DELETE')
                        <button type="submit" class="btn btn-danger">Delete</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
<script>
// Toggle page status
document.querySelectorAll('.btn-toggle-status').forEach(button => {
    button.addEventListener('click', function() {
        const pageId = this.dataset.pageId;
        const button = this;
        
        fetch(`/admin/pages/${pageId}/toggle-status`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                'Content-Type': 'application/json'
            }
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Update badge appearance
                if (data.is_enabled) {
                    button.className = 'badge badge-soft-success btn-toggle-status';
                    button.innerHTML = '<i class="material-icons" style="font-size: 14px; vertical-align: middle;">visibility</i> Enabled';
                    button.title = 'Click to disable';
                } else {
                    button.className = 'badge badge-soft-danger btn-toggle-status';
                    button.innerHTML = '<i class="material-icons" style="font-size: 14px; vertical-align: middle;">visibility_off</i> Disabled';
                    button.title = 'Click to enable';
                }
                button.style.cursor = 'pointer';
                
                // Show success message
                showAlert('success', data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            showAlert('danger', 'Error updating page status.');
        });
    });
});

// Bulk actions
function toggleBulkActions() {
    const bar = document.getElementById('bulk-actions-bar');
    const checkboxes = document.querySelectorAll('.page-checkbox');
    
    if (bar.style.display === 'none') {
        bar.style.display = 'block';
        checkboxes.forEach(cb => cb.style.display = 'block');
        document.getElementById('select-all').style.display = 'block';
    } else {
        bar.style.display = 'none';
        checkboxes.forEach(cb => {
            cb.style.display = 'none';
            cb.checked = false;
        });
        document.getElementById('select-all').style.display = 'none';
        document.getElementById('select-all').checked = false;
        updateSelectedCount();
    }
}

// Select all functionality
document.getElementById('select-all').addEventListener('change', function() {
    const checkboxes = document.querySelectorAll('.page-checkbox');
    checkboxes.forEach(cb => cb.checked = this.checked);
    updateSelectedCount();
});

// Update selected count
document.querySelectorAll('.page-checkbox').forEach(cb => {
    cb.addEventListener('change', updateSelectedCount);
});

function updateSelectedCount() {
    const selected = document.querySelectorAll('.page-checkbox:checked').length;
    document.getElementById('selected-count').textContent = `${selected} pages selected`;
    
    // Update bulk actions form
    const form = document.getElementById('bulk-actions-form');
    const existingInputs = form.querySelectorAll('input[name="page_ids[]"]');
    existingInputs.forEach(input => input.remove());
    
    document.querySelectorAll('.page-checkbox:checked').forEach(cb => {
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'page_ids[]';
        input.value = cb.value;
        form.appendChild(input);
    });
}

// Delete page
function deletePage(pageId, pageTitle) {
    document.getElementById('delete-page-title').textContent = pageTitle;
    document.getElementById('delete-form').action = `/admin/pages/${pageId}`;
    $('#deleteModal').modal('show');
}

// Duplicate page
function duplicatePage(pageId) {
    fetch(`/admin/pages/${pageId}/duplicate`, {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        }
    })
    .then(response => {
        if (response.ok) {
            return response.text();
        }
        throw new Error('Network response was not ok');
    })
    .then(html => {
        window.location.reload();
    })
    .catch(error => {
        console.error('Error:', error);
        showAlert('danger', 'Error duplicating page.');
    });
}

// Show alert
function showAlert(type, message) {
    const alert = document.createElement('div');
    alert.className = `alert alert-${type} alert-dismissible fade show`;
    alert.innerHTML = `
        ${message}
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    `;
    
    const container = document.querySelector('.container-fluid');
    container.insertBefore(alert, container.firstChild);
    
    setTimeout(() => {
        alert.remove();
    }, 5000);
}

// Bulk actions form validation
document.getElementById('bulk-actions-form').addEventListener('submit', function(e) {
    const selectedPages = document.querySelectorAll('.page-checkbox:checked');
    const action = this.querySelector('select[name="action"]').value;
    
    if (selectedPages.length === 0) {
        e.preventDefault();
        showAlert('warning', 'Please select at least one page.');
        return;
    }
    
    if (!action) {
        e.preventDefault();
        showAlert('warning', 'Please select an action.');
        return;
    }
    
    if (action === 'delete') {
        if (!confirm(`Are you sure you want to delete ${selectedPages.length} selected pages? This action cannot be undone.`)) {
            e.preventDefault();
        }
    }
});
</script>
@endpush