@extends('layouts.admin')

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

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">Pages Management</h1>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard', ['locale' => app()->getLocale()]) }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="#">Content</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Pages</li>
                </ol>
            </nav>
        </div>
        <div>
            <a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addPageModal">
                <i class="fas fa-plus"></i> Add New Page
            </a>
            <div class="dropdown d-inline-block ms-2">
                <button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
                    <i class="fas fa-cogs"></i> Bulk Actions
                </button>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="#" onclick="bulkAction('publish')">Publish Selected</a></li>
                    <li><a class="dropdown-item" href="#" onclick="bulkAction('draft')">Move to Draft</a></li>
                    <li><a class="dropdown-item" href="#" onclick="bulkAction('show_in_menu')">Show in Menu</a></li>
                    <li><a class="dropdown-item" href="#" onclick="bulkAction('hide_in_menu')">Hide in Menu</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item text-danger" href="#" onclick="bulkAction('delete')">Delete Selected</a></li>
                </ul>
            </div>
            <a href="{{ route('admin.manage.pages.export', ['locale' => app()->getLocale()]) }}" class="btn btn-outline-info ms-2">
                <i class="fas fa-download"></i> Export
            </a>
        </div>
    </div>

    <!-- Statistics Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                Total Pages
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $totalPages }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-file-alt fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                Published
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $publishedPages }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                Draft
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $draftPages }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-edit fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                In Menu
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ $menuPages }}</div>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-bars fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Pages Table -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">Pages ({{ $pages->total() }})</h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" id="pagesTable" width="100%" cellspacing="0">
                    <thead>
                        <tr>
                            <th>
                                <input type="checkbox" id="selectAll">
                            </th>
                            <th>Title</th>
                            <th>Slug</th>
                            <th>Template</th>
                            <th>Status</th>
                            <th>Menu</th>
                            <th>Footer</th>
                            <th>Created</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($pages as $page)
                        <tr>
                            <td>
                                <input type="checkbox" class="page-checkbox" value="{{ $page->id }}">
                            </td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div>
                                        <strong>{{ $page->title_en }}</strong>
                                        @if($page->title_ar)
                                        <br><small class="text-muted">{{ $page->title_ar }}</small>
                                        @endif
                                    </div>
                                </div>
                            </td>
                            <td>
                                <code>{{ $page->slug_en }}</code>
                                @if($page->slug_ar)
                                <br><code class="text-muted">{{ $page->slug_ar }}</code>
                                @endif
                                <button class="btn btn-sm btn-outline-secondary ms-1" onclick="copyToClipboard('{{ $page->slug_en }}')">
                                    <i class="fas fa-copy"></i>
                                </button>
                            </td>
                            <td>
                                <span class="badge bg-secondary">{{ ucfirst($page->template ?? 'default') }}</span>
                            </td>
                            <td>
                                @if($page->status == 'published')
                                    <span class="badge bg-success">Published</span>
                                @elseif($page->status == 'draft')
                                    <span class="badge bg-warning">Draft</span>
                                @else
                                    <span class="badge bg-secondary">Private</span>
                                @endif
                            </td>
                            <td>
                                @if($page->show_in_menu)
                                    <i class="fas fa-eye text-success"></i>
                                @else
                                    <i class="fas fa-eye-slash text-muted"></i>
                                @endif
                            </td>
                            <td>
                                @if($page->show_in_footer)
                                    <i class="fas fa-eye text-success"></i>
                                @else
                                    <i class="fas fa-eye-slash text-muted"></i>
                                @endif
                            </td>
                            <td>{{ $page->created_at->format('M d, Y') }}</td>
                            <td>
                                <div class="btn-group" role="group">
                                    <a href="{{ route('admin.manage.pages.show', array_merge(['page' => $page->id], ['locale' => app()->getLocale()])) }}" class="btn btn-sm btn-outline-info" title="View">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                    <a href="{{ route('admin.manage.pages.edit', array_merge(['page' => $page->id], ['locale' => app()->getLocale()])) }}" class="btn btn-sm btn-outline-primary" title="Edit">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <button class="btn btn-sm btn-outline-danger" onclick="deletePage({{ $page->id }})" title="Delete">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Pagination -->
            <div class="d-flex justify-content-center">
                {{ $pages->appends(request()->query())->links() }}
            </div>
        </div>
    </div>
</div>

<!-- Add Page Modal -->
<div class="modal fade" id="addPageModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Add New Page</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form action="{{ route('admin.manage.pages.store', ['locale' => app()->getLocale()]) }}" method="POST">
                @csrf
                <div class="modal-body">
                    <ul class="nav nav-tabs" id="pageTabs" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="basic-tab" data-bs-toggle="tab" data-bs-target="#basic" type="button" role="tab">Basic Info</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="content-tab" data-bs-toggle="tab" data-bs-target="#content" type="button" role="tab">Content</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="seo-tab" data-bs-toggle="tab" data-bs-target="#seo" type="button" role="tab">SEO</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="settings-tab" data-bs-toggle="tab" data-bs-target="#settings" type="button" role="tab">Settings</button>
                        </li>
                    </ul>
                    <div class="tab-content mt-3" id="pageTabsContent">
                        <!-- Basic Info Tab -->
                        <div class="tab-pane fade show active" id="basic" role="tabpanel">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Title (English) *</label>
                                        <input type="text" name="title_en" class="form-control" required>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Title (Arabic) *</label>
                                        <input type="text" name="title_ar" class="form-control" required>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Slug (English)</label>
                                        <input type="text" name="slug_en" class="form-control" id="slug_en">
                                        <small class="form-text text-muted">Auto-generated from title if empty</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Slug (Arabic)</label>
                                        <input type="text" name="slug_ar" class="form-control" id="slug_ar">
                                        <small class="form-text text-muted">Auto-generated from title if empty</small>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Excerpt (English)</label>
                                        <textarea name="excerpt_en" class="form-control" rows="3"></textarea>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Excerpt (Arabic)</label>
                                        <textarea name="excerpt_ar" class="form-control" rows="3"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Featured Image</label>
                                <input type="file" name="featured_image" class="form-control" accept="image/*">
                            </div>
                        </div>

                        <!-- Content Tab -->
                        <div class="tab-pane fade" id="content" role="tabpanel">
                            <div class="mb-3">
                                <label class="form-label">Template</label>
                                <select name="template" class="form-select">
                                    <option value="default">Default</option>
                                    <option value="full-width">Full Width</option>
                                    <option value="sidebar">Sidebar</option>
                                    <option value="contact">Contact</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Content (English)</label>
                                <textarea name="content_en" class="form-control" id="content_en_editor" rows="10"></textarea>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">Content (Arabic)</label>
                                <textarea name="content_ar" class="form-control" id="content_ar_editor" rows="10"></textarea>
                            </div>
                        </div>

                        <!-- SEO Tab -->
                        <div class="tab-pane fade" id="seo" role="tabpanel">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Meta Title (English)</label>
                                        <input type="text" name="meta_title_en" class="form-control" maxlength="60">
                                        <small class="form-text text-muted"><span id="meta_title_en_count">0</span>/60 characters</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Meta Title (Arabic)</label>
                                        <input type="text" name="meta_title_ar" class="form-control" maxlength="60">
                                        <small class="form-text text-muted"><span id="meta_title_ar_count">0</span>/60 characters</small>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Meta Description (English)</label>
                                        <textarea name="meta_description_en" class="form-control" rows="3" maxlength="160"></textarea>
                                        <small class="form-text text-muted"><span id="meta_description_en_count">0</span>/160 characters</small>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Meta Description (Arabic)</label>
                                        <textarea name="meta_description_ar" class="form-control" rows="3" maxlength="160"></textarea>
                                        <small class="form-text text-muted"><span id="meta_description_ar_count">0</span>/160 characters</small>
                                    </div>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="form-label">SEO Preview</label>
                                <div class="border p-3 bg-light">
                                    <div class="text-primary" id="seo_title_preview">Your Page Title</div>
                                    <div class="text-success" id="seo_url_preview">{{ url('/') }}/your-page-slug</div>
                                    <div class="text-muted small" id="seo_description_preview">Your meta description will appear here...</div>
                                </div>
                            </div>
                        </div>

                        <!-- Settings Tab -->
                        <div class="tab-pane fade" id="settings" role="tabpanel">
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Status</label>
                                        <select name="status" class="form-select">
                                            <option value="draft">Draft</option>
                                            <option value="published">Published</option>
                                            <option value="private">Private</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="mb-3">
                                        <label class="form-label">Sort Order</label>
                                        <input type="number" name="sort_order" class="form-control" value="0">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" name="show_in_menu" value="1" id="show_in_menu">
                                        <label class="form-check-label" for="show_in_menu">
                                            Show in Navigation Menu
                                        </label>
                                    </div>
                                </div>
                                <div class="col-md-6">
                                    <div class="form-check mb-3">
                                        <input class="form-check-input" type="checkbox" name="show_in_footer" value="1" id="show_in_footer">
                                        <label class="form-check-label" for="show_in_footer">
                                            Show in Footer
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Create Page</button>
                </div>
            </form>
        </div>
    </div>
</div>

@endsection

@section('scripts')
<script>
// Auto-generate slugs
$('#addPageModal input[name="title_en"]').on('input', function() {
    const title = $(this).val();
    const slug = title.toLowerCase().replace(/[^a-z0-9-]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '');
    $('#slug_en').val(slug);
});

$('#addPageModal input[name="title_ar"]').on('input', function() {
    const title = $(this).val();
    const slug = title.toLowerCase().replace(/[^a-z0-9-]/g, '-').replace(/-+/g, '-').replace(/^-|-$/g, '');
    $('#slug_ar').val(slug);
});

// Character counters for SEO
$('#addPageModal input[name="meta_title_en"]').on('input', function() {
    $('#meta_title_en_count').text($(this).val().length);
});

$('#addPageModal input[name="meta_title_ar"]').on('input', function() {
    $('#meta_title_ar_count').text($(this).val().length);
});

$('#addPageModal textarea[name="meta_description_en"]').on('input', function() {
    $('#meta_description_en_count').text($(this).val().length);
});

$('#addPageModal textarea[name="meta_description_ar"]').on('input', function() {
    $('#meta_description_ar_count').text($(this).val().length);
});

// SEO preview
function updateSEOPreview() {
    const title = $('#addPageModal input[name="meta_title_en"]').val() || $('#addPageModal input[name="title_en"]').val() || 'Your Page Title';
    const slug = $('#slug_en').val() || 'your-page-slug';
    const description = $('#addPageModal textarea[name="meta_description_en"]').val() || 'Your meta description will appear here...';

    $('#seo_title_preview').text(title);
    $('#seo_url_preview').text('{{ url("/") }}/' + slug);
    $('#seo_description_preview').text(description);
}

$('#addPageModal input[name="title_en"], #addPageModal input[name="meta_title_en"], #slug_en, #addPageModal textarea[name="meta_description_en"]').on('input', updateSEOPreview);

// Select all checkbox
$('#selectAll').on('change', function() {
    $('.page-checkbox').prop('checked', $(this).prop('checked'));
});

// Bulk actions
function bulkAction(action) {
    const selectedIds = $('.page-checkbox:checked').map(function() {
        return $(this).val();
    }).get();

    if (selectedIds.length === 0) {
        alert('Please select at least one page.');
        return;
    }

    if (action === 'delete' && !confirm('Are you sure you want to delete the selected pages?')) {
        return;
    }

    const form = $('<form>', {
        'method': 'POST',
        'action': '{{ route("admin.manage.pages.bulk-action", ["locale" => app()->getLocale()]) }}'
    });

    form.append($('<input>', {
        'name': '_token',
        'value': '{{ csrf_token() }}',
        'type': 'hidden'
    }));

    form.append($('<input>', {
        'name': 'action',
        'value': action,
        'type': 'hidden'
    }));

    form.append($('<input>', {
        'name': 'ids',
        'value': selectedIds.join(','),
        'type': 'hidden'
    }));

    form.appendTo('body').submit();
}

// Delete page
function deletePage(id) {
    if (confirm('Are you sure you want to delete this page?')) {
        const form = $('<form>', {
            'method': 'POST',
            'action': '{{ route("admin.manage.pages.destroy", array_merge(["page" => ":id"], ["locale" => app()->getLocale()])) }}'.replace(':id', id)
        });

        form.append($('<input>', {
            'name': '_token',
            'value': '{{ csrf_token() }}',
            'type': 'hidden'
        }));

        form.append($('<input>', {
            'name': '_method',
            'value': 'DELETE',
            'type': 'hidden'
        }));

        form.appendTo('body').submit();
    }
}

// Copy to clipboard
function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(function() {
        // Show success message
        const toast = $('<div class="toast align-items-center text-white bg-success border-0" role="alert"><div class="d-flex"><div class="toast-body">Slug copied to clipboard!</div><button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button></div></div>');
        $('.toast-container').append(toast);
        const bsToast = new bootstrap.Toast(toast[0]);
        bsToast.show();
    });
}

// Initialize TinyMCE for content editors
$(document).ready(function() {
    if (typeof tinymce !== 'undefined') {
        // English editor (LTR)
        tinymce.init({
            selector: '#content_en_editor',
            height: 400,
            menubar: false,
            plugins: 'lists link image code codesample directionality paste',
            toolbar: 'bold italic underline | bullist numlist | link image codesample | code | ltr rtl',
            directionality: 'ltr',
            content_style: 'body { font-family: Arial, sans-serif; font-size: 14px }',
            images_upload_handler: function (blobInfo, success, failure) {
                const formData = new FormData();
                formData.append('file', blobInfo.blob(), blobInfo.filename());
                formData.append('_token', '{{ csrf_token() }}');

                fetch('{{ route("admin.media.upload", ["locale" => app()->getLocale()]) }}', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        success(data.url);
                    } else {
                        failure(data.message || 'Upload failed');
                    }
                })
                .catch(error => {
                    failure('Upload failed: ' + error.message);
                });
            },
            paste_data_images: true,
            automatic_uploads: true
        });

        // Arabic editor (RTL)
        tinymce.init({
            selector: '#content_ar_editor',
            height: 400,
            menubar: false,
            plugins: 'lists link image code codesample directionality paste',
            toolbar: 'bold italic underline | bullist numlist | link image codesample | code | ltr rtl',
            directionality: 'rtl',
            content_style: 'body { font-family: "Arial", sans-serif; font-size: 14px; direction: rtl; }',
            images_upload_handler: function (blobInfo, success, failure) {
                const formData = new FormData();
                formData.append('file', blobInfo.blob(), blobInfo.filename());
                formData.append('_token', '{{ csrf_token() }}');

                fetch('{{ route("admin.media.upload", ["locale" => app()->getLocale()]) }}', {
                    method: 'POST',
                    body: formData
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        success(data.url);
                    } else {
                        failure(data.message || 'Upload failed');
                    }
                })
                .catch(error => {
                    failure('Upload failed: ' + error.message);
                });
            },
            paste_data_images: true,
            automatic_uploads: true
        });
    }
});
</script>
@endsection