@extends('layouts.admin')

@section('title', 'Create New Page')


@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);
    }
</style>



<div class="page-header">
    <div class="d-flex justify-content-between align-items-center">
       
        <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>

<form action="{{ route('pages.store') }}" method="POST" id="pageForm" enctype="multipart/form-data">
    @csrf
    
    <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') }}"
                               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') }}"
                                   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') }}</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', '1') ? '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>Publish Page
                        </button>
  
                    </div>
                </div>
            </div>
            
            

        </div>
    </div>
</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']]
            ]
        });
        
        // Auto-generate slug from title
        $('#title').on('blur keyup', function() {
            if (!$('#slug').val()) {
                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;
            let message = length + ' characters';
            if (length > 160) {
                message += ' (exceeds recommended 160)';
            }
            $(this).next('small').text(message);
        });
    });
    
    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() || 'about-us';
        slug = slug.toLowerCase()
            .replace(/[^\w\s-]/g, '')
            .replace(/\s+/g, '-')
            .replace(/--+/g, '-')
            .replace(/^-+|-+$/g, '');
        $('#preview-slug').text(slug || 'about-us');
    }
    

    

    
    function previewPage() {
        // Save current form data to session or temporary storage
        // Open preview in new window
        let previewWindow = window.open('', '_blank');
        // You can implement preview functionality here
    }
</script>
@endsection