@extends('layouts.admin')

@section('title', 'Edit Page - ' . $page->title)

@section('content')

<!-- Summernote CSS -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<style>
    .note-editor.note-frame {
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        box-shadow: 0 2px 4px rgba(0,0,0,.02);
    }
    
    .note-toolbar {
        background: #f8f9fa;
        border-bottom: 1px solid #e2e8f0;
        border-radius: 12px 12px 0 0;
        padding: 10px !important;
    }
    
    .note-btn-group .btn {
        border-radius: 8px !important;
        margin: 0 2px;
    }
    
    .note-editable {
        min-height: 400px;
        padding: 20px !important;
    }
    
    /* Form Styles */
    .form-label {
        font-weight: 600;
        color: #2d3748;
        margin-bottom: 0.5rem;
    }
    
    .form-control {
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 0.75rem 1rem;
        transition: all 0.3s;
    }
    
    .form-control:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }
    
    .input-group-text {
        background: #f8f9fa;
        border: 1px solid #e2e8f0;
        border-radius: 12px 0 0 12px;
        color: #6c757d;
    }
    
    /* Switch */
    .form-switch .form-check-input {
        width: 3em;
        height: 1.5em;
        margin-right: 0.5rem;
    }
    
    .form-switch .form-check-input:checked {
        background-color: #667eea;
        border-color: #667eea;
    }
    
    /* Card Styles */
    .settings-card {
        background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
        border: 1px solid rgba(102, 126, 234, 0.1);
    }
    
    .settings-card .card-header {
        background: transparent;
        border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    }
    
    /* Alert Styles */
    .alert-delete {
        background-color: #fff5f5;
        border: 1px solid #feb2b2;
        color: #c53030;
        border-radius: 12px;
    }
</style>

<div class="page-header">
    <div class="d-flex justify-content-between align-items-center">
        <div>
            <a href="{{ route('pages.create') }}" class="btn btn-primary me-2">
                <i class="fas fa-plus-circle me-2"></i>Create New
            </a>
            <a href="{{ route('pages.index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back to Pages
            </a>
        </div>
    </div>
</div>

<form action="{{ route('pages.update', $page) }}" method="POST" id="pageForm" enctype="multipart/form-data">
    @csrf
    @method('PUT')
    
    <div class="row">
        <!-- Main Content Column -->
        <div class="col-lg-8">
            <!-- Title Card -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Page Title</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <input type="text" 
                               class="form-control form-control-lg @error('title') is-invalid @enderror" 
                               id="title" 
                               name="title" 
                               value="{{ old('title', $page->title) }}"
                               placeholder="Enter page title (e.g., privacy-policy, Terms and Condition)"
                               autofocus>
                        @error('title')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">
                            <i class="fas fa-info-circle me-1"></i>
                            Choose a descriptive title that reflects your page content.
                        </small>
                    </div>
                </div>
            </div>
            
            <!-- URL Slug Card -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">Slug</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <div class="input-group">
                         
                            <input type="text" 
                                   class="form-control @error('slug') is-invalid @enderror" 
                                   id="slug" 
                                   name="slug" 
                                   value="{{ old('slug', $page->slug) }}"
                                   placeholder="privacy-policy">
                            <button class="btn btn-outline-secondary" type="button" onclick="generateSlug()">
                                <i class="fas fa-sync-alt"></i>
                            </button>
                        </div>
                        @error('slug')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror

                    </div>
                </div>
            </div>
            
            <!-- Content Card -->
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">Page Content</h5>
                    <span class="badge bg-light text-dark">
                        <i class="fas fa-edit me-1"></i>Rich Text Editor
                    </span>
                </div>
                <div class="card-body">
                    <textarea class="form-control @error('content') is-invalid @enderror" 
                              id="content" 
                              name="content" 
                              rows="20">{{ old('content', $page->content) }}</textarea>
                    @error('content')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>
        
        <!-- Sidebar Column -->
        <div class="col-lg-4">
            <!-- Publish Settings Card -->
            <div class="card mb-4 settings-card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-cog me-2"></i>Publish Settings
                    </h5>
                </div>
                <div class="card-body">
                    <!-- Status -->
                    <div class="mb-4">
                        <label class="form-label d-block">Page Status</label>
                        <div class="form-check form-switch">
                            <input class="form-check-input" 
                                   type="checkbox" 
                                   name="is_active" 
                                   id="is_active" 
                                   value="1" 
                                   {{ old('is_active', $page->is_active) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_active">
                                <strong>Active</strong>
                                <br>
                                <small class="text-muted">Page will be visible to visitors</small>
                            </label>
                        </div>
                    </div>
                    
                    <!-- Visibility -->
                    <div class="mb-4">
                       
                    </div>
                    


                    
                    <hr>
                    
                    <!-- Action Buttons -->
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary btn-lg">
                            <i class="fas fa-save me-2"></i>Update Page
                        </button>

                    </div>
                </div>
            </div>
            
            <!-- Page Information Card -->
            <div class="card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>Page Information
                    </h5>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-0">
                        <li class="mb-3">
                            <small class="text-muted d-block">Created</small>
                            <strong>{{ $page->created_at->format('F j, Y') }}</strong>
                            <span class="text-muted">at {{ $page->created_at->format('g:i A') }}</span>
                        </li>
                        <li class="mb-3">
                            <small class="text-muted d-block">Last Updated</small>
                            <strong>{{ $page->updated_at->format('F j, Y') }}</strong>
                            <span class="text-muted">at {{ $page->updated_at->format('g:i A') }}</span>
                        </li>

                    </ul>
                </div>
            </div>
            
            <!-- Danger Zone Card -->
            <div class="card border-danger">
                <div class="card-header bg-danger text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-exclamation-triangle me-2"></i>Danger Zone
                    </h5>
                </div>
                <div class="card-body">
                    <div class="alert-delete p-3 mb-3">
                        <strong class="d-block mb-2">Delete this page</strong>
                        <p class="small mb-3">Once you delete a page, there is no going back. Please be certain.</p>
                        <button type="button" class="btn btn-outline-danger w-100" onclick="confirmDelete({{ $page->id }})">
                            <i class="fas fa-trash me-2"></i>Delete Page
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<!-- Delete Form -->
<form id="delete-form-{{ $page->id }}" 
      action="{{ route('pages.destroy', $page) }}" 
      method="POST" 
      style="display: none;">
    @csrf
    @method('DELETE')
</form>

<!-- jQuery (required for Summernote) -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Summernote JS -->
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>

<script>
    $(document).ready(function() {
        // Initialize Summernote with full features
        $('#content').summernote({
            height: 400,
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'underline', 'italic', 'clear']],
                ['fontname', ['fontname']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'video']],
                ['view', ['fullscreen', 'codeview', 'help']]
            ],
            callbacks: {
                onImageUpload: function(files) {
                    // Handle image upload if needed
                    // You can implement image upload to server here
                }
            }
        });
        
        // Auto-generate slug from title (only if slug is empty or user wants to regenerate)
        $('#title').on('blur', function() {
            if (!{{ $page->slug ? 'false' : 'true' }}) {
                // If slug already exists, don't auto-generate
                return;
            }
            if (!$('#slug').val() || confirm('Do you want to generate a new slug from the title?')) {
                generateSlug();
            }
            updateSlugPreview();
        });
        
        // Update slug preview on change
        $('#slug').on('keyup', function() {
            updateSlugPreview();
        });
        
        // Initialize slug preview
        updateSlugPreview();
        
        // Character counter for meta description
        $('textarea[name="meta_description"]').on('keyup', function() {
            let length = $(this).val().length;
            $('#meta-count').text(length);
            if (length > 160) {
                $('#meta-count').css('color', 'red');
            } else {
                $('#meta-count').css('color', 'inherit');
            }
        });
    });
    
    function generateSlug() {
        const title = $('#title').val();
        if (title) {
            const slug = title.toLowerCase()
                .replace(/[^\w\s-]/g, '')
                .replace(/\s+/g, '-')
                .replace(/--+/g, '-')
                .replace(/^-+|-+$/g, '');
            $('#slug').val(slug);
            updateSlugPreview();
        }
    }
    
    function updateSlugPreview() {
        let slug = $('#slug').val() || $('#title').val() || '{{ $page->slug }}';
        slug = slug.toLowerCase()
            .replace(/[^\w\s-]/g, '')
            .replace(/\s+/g, '-')
            .replace(/--+/g, '-')
            .replace(/^-+|-+$/g, '');
        $('#preview-slug').text(slug || '{{ $page->slug }}');
    }
    

    
    function confirmDelete(id) {
        if (confirm('Are you sure you want to delete this page? This action cannot be undone.')) {
            document.getElementById('delete-form-' + id).submit();
        }
    }
</script>
@endsection