@extends('layouts.admin-simple')

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

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

@section('page-actions')
    <div class="ml-auto d-flex gap-2">
        <a href="{{ route('admin.pages.show', $page) }}" class="btn btn-outline-primary">
            <i class="material-icons">visibility</i> View
        </a>
        <a href="{{ route('admin.pages.preview', $page) }}" class="btn btn-outline-info" target="_blank">
            <i class="material-icons">preview</i> Preview
        </a>
    </div>
@endsection

@section('content')
<form method="POST" action="{{ route('admin.pages.update', $page) }}" id="page-form" enctype="multipart/form-data">
    @csrf
    @method('PUT')
    
    <div class="row">
        <!-- Main Content -->
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Page Information</h5>
                </div>
                <div class="card-body">
                    <!-- Title -->
                    <div class="mb-3">
                        <label for="title" class="form-label">Page Title <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('title') is-invalid @enderror" 
                               id="title" name="title" value="{{ old('title', $page->title) }}" required>
                        @error('title')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Slug -->
                    <div class="mb-3">
                        <label for="slug" class="form-label">URL Slug <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('slug') is-invalid @enderror" 
                               id="slug" name="slug" value="{{ old('slug', $page->slug) }}" required>
                        <div class="form-text">URL-friendly version of the title</div>
                        @error('slug')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Route Name -->
                    <div class="mb-3">
                        <label for="route_name" class="form-label">Route Name <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('route_name') is-invalid @enderror" 
                               id="route_name" name="route_name" value="{{ old('route_name', $page->route_name) }}" required>
                        <div class="form-text">Laravel route name (e.g., page.about)</div>
                        @error('route_name')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Meta Description -->
                    <div class="mb-3">
                        <label for="meta_description" class="form-label">Meta Description</label>
                        <textarea class="form-control @error('meta_description') is-invalid @enderror" 
                                  id="meta_description" name="meta_description" rows="3" maxlength="500">{{ old('meta_description', $page->meta_description) }}</textarea>
                        <div class="form-text">SEO description (max 500 characters)</div>
                        @error('meta_description')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Meta Keywords -->
                    <div class="mb-3">
                        <label for="meta_keywords" class="form-label">Meta Keywords</label>
                        <input type="text" class="form-control @error('meta_keywords') is-invalid @enderror" 
                               id="meta_keywords" name="meta_keywords" value="{{ old('meta_keywords', $page->meta_keywords) }}">
                        <div class="form-text">Comma-separated keywords for SEO</div>
                        @error('meta_keywords')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Content Sections -->
            <div class="card mt-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="card-title">Content Sections</h5>
                    <button type="button" class="btn btn-sm btn-primary" onclick="addContentSection()">
                        <i class="material-icons">add</i> Add Section
                    </button>
                </div>
                <div class="card-body">
                    <div id="content-sections">
                        @if($page->content_sections && count($page->content_sections) > 0)
                            @foreach($page->content_sections as $key => $section)
                                <div class="content-section border rounded p-3 mb-3" data-section="{{ $loop->iteration }}" data-section-key="{{ $key }}">
                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                        <h6 class="mb-0">
                                            <span class="badge badge-soft-primary">{{ ucfirst(str_replace('_', ' ', $section['type'] ?? 'text')) }}</span>
                                            {{ $section['title'] ?: 'Section ' . $loop->iteration }}
                                        </h6>
                                        <div class="d-flex gap-2">
                                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="moveSectionUp('{{ $key }}')">
                                                <i class="fas fa-arrow-up"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="moveSectionDown('{{ $key }}')">
                                                <i class="fas fa-arrow-down"></i>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeContentSection('{{ $key }}')">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </div>
                                    
                                    <div class="row">
                                        <div class="col-md-6 mb-3">
                                            <label class="form-label">Section Title</label>
                                            <input type="text" class="form-control" name="sections[{{ $key }}][title]" 
                                                   value="{{ $section['title'] ?? '' }}" placeholder="Section title">
                                        </div>
                                        <div class="col-md-3 mb-3">
                                            <label class="form-label">Type</label>
                                            <select class="form-control section-type-select" name="sections[{{ $key }}][type]" data-section-key="{{ $key }}">
                                                <option value="text" {{ ($section['type'] ?? '') == 'text' ? 'selected' : '' }}>Text</option>
                                                <option value="html" {{ ($section['type'] ?? '') == 'html' ? 'selected' : '' }}>HTML</option>
                                                <option value="image" {{ ($section['type'] ?? '') == 'image' ? 'selected' : '' }}>Image</option>
                                                <option value="hero" {{ ($section['type'] ?? '') == 'hero' ? 'selected' : '' }}>Hero Section</option>
                                                <option value="text_with_image" {{ ($section['type'] ?? '') == 'text_with_image' ? 'selected' : '' }}>Text with Image</option>
                                                <option value="products_carousel" {{ ($section['type'] ?? '') == 'products_carousel' ? 'selected' : '' }}>Products Carousel</option>
                                                <option value="video_section" {{ ($section['type'] ?? '') == 'video_section' ? 'selected' : '' }}>Video Section</option>
                                                <option value="news_grid" {{ ($section['type'] ?? '') == 'news_grid' ? 'selected' : '' }}>News Grid</option>
                                                <option value="statistics_counter" {{ ($section['type'] ?? '') == 'statistics_counter' ? 'selected' : '' }}>Statistics Counter</option>
                                                <option value="call_to_action" {{ ($section['type'] ?? '') == 'call_to_action' ? 'selected' : '' }}>Call to Action</option>
                                                <option value="cta" {{ ($section['type'] ?? '') == 'cta' ? 'selected' : '' }}>CTA (Legacy)</option>
                                            </select>
                                        </div>
                                        <div class="col-md-3 mb-3">
                                            <label class="form-label">Order</label>
                                            <input type="number" class="form-control" name="sections[{{ $key }}][order]" 
                                                   value="{{ $section['order'] ?? $loop->iteration }}" min="1">
                                        </div>
                                    </div>
                                    
                                    <div class="mb-3">
                                        <label class="form-label">Content</label>
                                        <textarea class="form-control" name="sections[{{ $key }}][content]" rows="4" placeholder="Section content">{{ $section['content'] ?? '' }}</textarea>
                                    </div>

                                    <!-- Image Upload for applicable section types -->
                                    <div class="section-image-upload mb-3" data-section-key="{{ $key }}" style="display: {{ in_array($section['type'] ?? '', ['image', 'text_with_image', 'hero']) ? 'block' : 'none' }};">
                                        <label class="form-label">Section Image</label>
                                        <input type="file" class="form-control" name="sections[{{ $key }}][image]" accept="image/*">
                                        <small class="form-text text-muted">Upload an image for this section (JPG, PNG, WebP)</small>
                                        @if(isset($section['settings']['image_path']) && $section['settings']['image_path'])
                                            <div class="mt-2">
                                                <small class="text-success">
                                                    <i class="fas fa-check-circle"></i> Current image: {{ basename($section['settings']['image_path']) }}
                                                </small>
                                                @if(($section['type'] ?? '') !== 'hero')
                                                    <div class="mt-1">
                                                        <img src="{{ asset('storage/' . $section['settings']['image_path']) }}" alt="Section Image" class="img-thumbnail" style="max-width: 200px;">
                                                    </div>
                                                @else
                                                    <div class="mt-1">
                                                        <small class="text-muted"><i class="fas fa-image"></i> Background image uploaded (not previewed)</small>
                                                    </div>
                                                @endif
                                            </div>
                                        @endif
                                    </div>

                                    <!-- Settings for different section types -->
                                    <div class="section-settings mb-3" data-section-key="{{ $key }}">
                                        <h6 class="text-muted">Section Settings</h6>
                                        <div class="row">
                                            @php $settings = $section['settings'] ?? [] @endphp
                                            
                                            <!-- Hero Section Settings -->
                                            <div class="hero-settings" style="display: {{ ($section['type'] ?? '') == 'hero' ? 'block' : 'none' }};">
                                                <div class="col-md-4 mb-2">
                                                    <label class="form-label small">Video Key</label>
                                                    <input type="text" class="form-control form-control-sm" name="sections[{{ $key }}][settings][video_key]" 
                                                           value="{{ $settings['video_key'] ?? '' }}" placeholder="e.g., hero_video">
                                                </div>
                                                <div class="col-md-4 mb-2">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="sections[{{ $key }}][settings][video_enabled]" value="1" 
                                                               {{ ($settings['video_enabled'] ?? false) ? 'checked' : '' }}>
                                                        <label class="form-check-label small">Enable Video</label>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Text with Image Settings -->
                                            <div class="text-image-settings" style="display: {{ ($section['type'] ?? '') == 'text_with_image' ? 'block' : 'none' }};">
                                                <div class="col-md-4 mb-2">
                                                    <label class="form-label small">Image Position</label>
                                                    <select class="form-control form-control-sm" name="sections[{{ $key }}][settings][image_position]">
                                                        <option value="left" {{ ($settings['image_position'] ?? '') == 'left' ? 'selected' : '' }}>Left</option>
                                                        <option value="right" {{ ($settings['image_position'] ?? '') == 'right' ? 'selected' : '' }}>Right</option>
                                                    </select>
                                                </div>
                                                <div class="col-md-4 mb-2">
                                                    <label class="form-label small">Background</label>
                                                    <select class="form-control form-control-sm" name="sections[{{ $key }}][settings][background_color]">
                                                        <option value="light" {{ ($settings['background_color'] ?? '') == 'light' ? 'selected' : '' }}>Light</option>
                                                        <option value="dark" {{ ($settings['background_color'] ?? '') == 'dark' ? 'selected' : '' }}>Dark</option>
                                                        <option value="white" {{ ($settings['background_color'] ?? '') == 'white' ? 'selected' : '' }}>White</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <!-- Video Section Settings -->
                                            <div class="video-settings" style="display: {{ ($section['type'] ?? '') == 'video_section' ? 'block' : 'none' }};">
                                                <div class="col-md-4 mb-2">
                                                    <label class="form-label small">Video Key</label>
                                                    <input type="text" class="form-control form-control-sm" name="sections[{{ $key }}][settings][video_key]" 
                                                           value="{{ $settings['video_key'] ?? '' }}" placeholder="e.g., who_we_are_video">
                                                </div>
                                                <div class="col-md-4 mb-2">
                                                    <label class="form-label small">Layout</label>
                                                    <select class="form-control form-control-sm" name="sections[{{ $key }}][settings][layout]">
                                                        <option value="centered" {{ ($settings['layout'] ?? '') == 'centered' ? 'selected' : '' }}>Centered</option>
                                                        <option value="full-width" {{ ($settings['layout'] ?? '') == 'full-width' ? 'selected' : '' }}>Full Width</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <!-- Products Carousel Settings -->
                                            <div class="products-settings" style="display: {{ ($section['type'] ?? '') == 'products_carousel' ? 'block' : 'none' }};">
                                                <div class="col-md-4 mb-2">
                                                    <label class="form-label small">Items per Slide</label>
                                                    <input type="number" class="form-control form-control-sm" name="sections[{{ $key }}][settings][items_per_slide]" 
                                                           value="{{ $settings['items_per_slide'] ?? 4 }}" min="1" max="6">
                                                </div>
                                                <div class="col-md-4 mb-2">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="sections[{{ $key }}][settings][show_featured_only]" value="1" 
                                                               {{ ($settings['show_featured_only'] ?? true) ? 'checked' : '' }}>
                                                        <label class="form-check-label small">Featured Only</label>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- News Grid Settings -->
                                            <div class="news-settings" style="display: {{ ($section['type'] ?? '') == 'news_grid' ? 'block' : 'none' }};">
                                                <div class="col-md-4 mb-2">
                                                    <label class="form-label small">Items Count</label>
                                                    <input type="number" class="form-control form-control-sm" name="sections[{{ $key }}][settings][items_count]" 
                                                           value="{{ $settings['items_count'] ?? 3 }}" min="1" max="12">
                                                </div>
                                                <div class="col-md-4 mb-2">
                                                    <div class="form-check">
                                                        <input class="form-check-input" type="checkbox" name="sections[{{ $key }}][settings][show_excerpt]" value="1" 
                                                               {{ ($settings['show_excerpt'] ?? true) ? 'checked' : '' }}>
                                                        <label class="form-check-label small">Show Excerpt</label>
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Statistics Counter Settings -->
                                            <div class="statistics-settings" style="display: {{ ($section['type'] ?? '') == 'statistics_counter' ? 'block' : 'none' }};">
                                                <div class="col-12 mb-3">
                                                    <h6 class="text-muted mb-2">Background Settings</h6>
                                                    <div class="row">
                                                        <div class="col-md-6 mb-2">
                                                            <label class="form-label small">Background Image</label>
                                                            <input type="text" class="form-control form-control-sm" name="sections[{{ $key }}][settings][background_image]" 
                                                                   value="{{ $settings['background_image'] ?? '' }}" placeholder="assets/path/to/image.jpg">
                                                        </div>
                                                        <div class="col-md-6 mb-2">
                                                            <label class="form-label small">Upload Background Image</label>
                                                            <input type="file" class="form-control form-control-sm" name="sections[{{ $key }}][background_image]" accept="image/*">
                                                        </div>
                                                    </div>
                                                    @if(!empty($settings['background_image']))
                                                        <div class="mt-2">
                                                            <label class="form-label small">Current Background Image:</label>
                                                            <div class="mt-1">
                                                                <img src="{{ asset($settings['background_image']) }}" alt="Background Image" class="img-thumbnail" style="max-width: 200px; max-height: 120px;">
                                                            </div>
                                                        </div>
                                                    @endif
                                                    <div class="row mt-2">
                                                        <div class="col-md-6 mb-2">
                                                            <div class="form-check">
                                                                <input class="form-check-input" type="checkbox" name="sections[{{ $key }}][settings][background_fixed]" value="1" 
                                                                       {{ ($settings['background_fixed'] ?? false) ? 'checked' : '' }}>
                                                                <label class="form-check-label small">Fixed Background</label>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-12 mb-3">
                                                    <h6 class="text-muted mb-2">Counter Items</h6>
                                                    <div class="counter-items" data-section-key="{{ $key }}">
                                                        @php $counters = $settings['counters'] ?? [] @endphp
                                                        @foreach($counters as $index => $counter)
                                                        <div class="counter-item border rounded p-2 mb-2">
                                                            <div class="row">
                                                                <div class="col-md-3 mb-1">
                                                                    <label class="form-label small">Title</label>
                                                                    <input type="text" class="form-control form-control-sm" name="sections[{{ $key }}][settings][counters][{{ $index }}][title]" 
                                                                           value="{{ $counter['title'] ?? '' }}" placeholder="Years of experience">
                                                                </div>
                                                                <div class="col-md-2 mb-1">
                                                                    <label class="form-label small">Number</label>
                                                                    <input type="number" class="form-control form-control-sm" name="sections[{{ $key }}][settings][counters][{{ $index }}][number]" 
                                                                           value="{{ $counter['number'] ?? '' }}" placeholder="19">
                                                                </div>
                                                                <div class="col-md-2 mb-1">
                                                                    <label class="form-label small">Suffix</label>
                                                                    <input type="text" class="form-control form-control-sm" name="sections[{{ $key }}][settings][counters][{{ $index }}][suffix]" 
                                                                           value="{{ $counter['suffix'] ?? '' }}" placeholder="+">
                                                                </div>
                                                                <div class="col-md-3 mb-1">
                                                                    <label class="form-label small">Icon Path</label>
                                                                    <input type="text" class="form-control form-control-sm" name="sections[{{ $key }}][settings][counters][{{ $index }}][icon]" 
                                                                           value="{{ $counter['icon'] ?? '' }}" placeholder="assets/path/icon.png">
                                                                </div>
                                                                <div class="col-md-2 mb-1">
                                                                    <label class="form-label small">Duration</label>
                                                                    <input type="number" class="form-control form-control-sm" name="sections[{{ $key }}][settings][counters][{{ $index }}][duration]" 
                                                                           value="{{ $counter['duration'] ?? 2000 }}" placeholder="2000">
                                                                </div>
                                                            </div>
                                                        </div>
                                                        @endforeach
                                                        @if(empty($counters))
                                                            <div class="text-muted small">No counter items defined. Add them by editing the settings manually.</div>
                                                        @endif
                                                    </div>
                                                </div>
                                            </div>

                                            <!-- Call to Action Settings -->
                                            <div class="cta-settings" style="display: {{ ($section['type'] ?? '') == 'call_to_action' ? 'block' : 'none' }};">
                                                <div class="col-md-4 mb-2">
                                                    <label class="form-label small">Button Text</label>
                                                    <input type="text" class="form-control form-control-sm" name="sections[{{ $key }}][settings][button_text]" 
                                                           value="{{ $settings['button_text'] ?? '' }}" placeholder="Button text">
                                                </div>
                                                <div class="col-md-4 mb-2">
                                                    <label class="form-label small">Button Link</label>
                                                    <input type="text" class="form-control form-control-sm" name="sections[{{ $key }}][settings][button_link]" 
                                                           value="{{ $settings['button_link'] ?? '' }}" placeholder="/contact">
                                                </div>
                                                <div class="col-md-4 mb-2">
                                                    <label class="form-label small">Background Style</label>
                                                    <select class="form-control form-control-sm" name="sections[{{ $key }}][settings][background_style]">
                                                        <option value="gradient" {{ ($settings['background_style'] ?? '') == 'gradient' ? 'selected' : '' }}>Gradient</option>
                                                        <option value="solid" {{ ($settings['background_style'] ?? '') == 'solid' ? 'selected' : '' }}>Solid</option>
                                                        <option value="image" {{ ($settings['background_style'] ?? '') == 'image' ? 'selected' : '' }}>Image</option>
                                                    </select>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" name="sections[{{ $key }}][is_enabled]" value="1" 
                                               {{ ($section['is_enabled'] ?? true) ? 'checked' : '' }}>
                                        <label class="form-check-label">
                                            Section Enabled
                                        </label>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                    @if(!$page->content_sections || count($page->content_sections) == 0)
                        <div class="text-muted text-center py-4" id="no-sections">
                            <i class="material-icons" style="font-size: 48px;">description</i>
                            <p>No content sections added yet. Click "Add Section" to get started.</p>
                        </div>
                    @else
                        <div class="text-muted text-center py-4" id="no-sections" style="display: none;">
                            <i class="material-icons" style="font-size: 48px;">description</i>
                            <p>No content sections added yet. Click "Add Section" to get started.</p>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Custom CSS/JS -->
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="card-title">Custom Styling</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label for="custom_css" class="form-label">Custom CSS</label>
                        <textarea class="form-control font-monospace @error('custom_css') is-invalid @enderror" 
                                  id="custom_css" name="custom_css" rows="6">{{ old('custom_css', $page->custom_css) }}</textarea>
                        @error('custom_css')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="custom_js" class="form-label">Custom JavaScript</label>
                        <textarea class="form-control font-monospace @error('custom_js') is-invalid @enderror" 
                                  id="custom_js" name="custom_js" rows="6">{{ old('custom_js', $page->custom_js) }}</textarea>
                        @error('custom_js')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title">Page Settings</h5>
                </div>
                <div class="card-body">
                    <!-- Status -->
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="is_enabled" name="is_enabled" value="1" 
                                   {{ old('is_enabled', $page->is_enabled) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_enabled">
                                Page Enabled
                            </label>
                        </div>
                        <div class="form-text">Disabled pages will return 404 error</div>
                    </div>

                    <!-- Show in Navigation -->
                    <div class="mb-3">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" id="show_in_nav" name="show_in_nav" value="1" 
                                   {{ old('show_in_nav', $page->show_in_nav) ? 'checked' : '' }}>
                            <label class="form-check-label" for="show_in_nav">
                                Show in Navigation
                            </label>
                        </div>
                    </div>

                    <!-- Sort Order -->
                    <div class="mb-3">
                        <label for="sort_order" class="form-label">Sort Order</label>
                        <input type="number" class="form-control @error('sort_order') is-invalid @enderror" 
                               id="sort_order" name="sort_order" value="{{ old('sort_order', $page->sort_order) }}" min="0">
                        @error('sort_order')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <!-- Template -->
                    <div class="mb-3">
                        <label for="template" class="form-label">Page Template <span class="text-danger">*</span></label>
                        <select class="form-control @error('template') is-invalid @enderror" id="template" name="template" required>
                            @foreach($templates as $key => $name)
                                <option value="{{ $key }}" {{ old('template', $page->template) == $key ? 'selected' : '' }}>
                                    {{ $name }}
                                </option>
                            @endforeach
                        </select>
                        @error('template')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>
                </div>
            </div>

            <!-- Page Info -->
            <div class="card mt-4">
                <div class="card-header">
                    <h5 class="card-title">Page Information</h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-6">
                            <small class="text-muted">Created</small>
                            <div>{{ $page->created_at->format('M j, Y g:i A') }}</div>
                        </div>
                        <div class="col-6">
                            <small class="text-muted">Updated</small>
                            <div>{{ $page->updated_at->format('M j, Y g:i A') }}</div>
                        </div>
                    </div>
                    
                    @if($page->is_enabled)
                        <div class="mt-3">
                            <small class="text-muted">Page URL</small>
                            <div>
                                <a href="{{ $page->url }}" target="_blank" class="text-decoration-none">
                                    {{ $page->url }} <i class="material-icons" style="font-size: 16px;">open_in_new</i>
                                </a>
                            </div>
                        </div>
                    @endif
                </div>
            </div>

            <!-- Action Buttons -->
            <div class="card mt-4">
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="material-icons">save</i> Update Page
                        </button>
                        <a href="{{ route('admin.pages.show', $page) }}" class="btn btn-secondary">
                            <i class="material-icons">cancel</i> Cancel
                        </a>
                        <hr>
                        <button type="button" class="btn btn-outline-info" onclick="duplicatePage()">
                            <i class="material-icons">content_copy</i> Duplicate Page
                        </button>
                        <button type="button" class="btn btn-outline-danger" onclick="deletePage()">
                            <i class="material-icons">delete</i> Delete Page
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

<!-- 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="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete the page "<strong>{{ $page->title }}</strong>"?</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-bs-dismiss="modal">Cancel</button>
                <form method="POST" action="{{ route('admin.pages.destroy', $page) }}" style="display: inline;">
                    @csrf
                    @method('DELETE')
                    <button type="submit" class="btn btn-danger">Delete</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
let sectionCount = {{ $page->content_sections ? count($page->content_sections) : 0 }};

// Handle section type changes
document.addEventListener('DOMContentLoaded', function() {
    // Add event listeners to all section type selects
    document.querySelectorAll('.section-type-select').forEach(function(select) {
        select.addEventListener('change', function() {
            toggleSectionSettings(this);
        });
    });
});

function toggleSectionSettings(selectElement) {
    const sectionKey = selectElement.dataset.sectionKey;
    const selectedType = selectElement.value;
    const sectionContainer = selectElement.closest('.content-section');
    
    // Toggle image upload visibility
    const imageUpload = sectionContainer.querySelector('.section-image-upload');
    if (imageUpload) {
        const showImageUpload = ['image', 'text_with_image', 'hero'].includes(selectedType);
        imageUpload.style.display = showImageUpload ? 'block' : 'none';
    }
    
    // Toggle settings sections
    const settingsContainer = sectionContainer.querySelector('.section-settings');
    if (settingsContainer) {
        // Hide all settings
        settingsContainer.querySelectorAll('.hero-settings, .text-image-settings, .video-settings, .products-settings, .news-settings, .cta-settings, .statistics-settings').forEach(function(setting) {
            setting.style.display = 'none';
        });
        
        // Show relevant settings
        const settingsMap = {
            'hero': '.hero-settings',
            'text_with_image': '.text-image-settings',
            'video_section': '.video-settings',
            'products_carousel': '.products-settings',
            'news_grid': '.news-settings',
            'statistics_counter': '.statistics-settings',
            'call_to_action': '.cta-settings'
        };
        
        if (settingsMap[selectedType]) {
            const targetSetting = settingsContainer.querySelector(settingsMap[selectedType]);
            if (targetSetting) {
                targetSetting.style.display = 'block';
            }
        }
    }
    
    // Update section badge
    const badge = sectionContainer.querySelector('.badge');
    if (badge) {
        badge.textContent = selectedType.replace('_', ' ').replace(/\b\w/g, l => l.toUpperCase());
    }
}

// Auto-generate slug from title (only if manually edited)
let manualSlugEdit = false;
document.getElementById('slug').addEventListener('input', function() {
    manualSlugEdit = true;
});

document.getElementById('title').addEventListener('input', function() {
    if (!manualSlugEdit) {
        const title = this.value;
        const slug = title.toLowerCase()
            .replace(/[^a-z0-9]+/g, '-')
            .replace(/^-+|-+$/g, '');
        document.getElementById('slug').value = slug;
    }
});

// Add content section (same as create page)
function addContentSection() {
    sectionCount++;
    const sectionsContainer = document.getElementById('content-sections');
    const noSections = document.getElementById('no-sections');
    
    if (noSections) {
        noSections.style.display = 'none';
    }
    
    const sectionHtml = `
        <div class="content-section border rounded p-3 mb-3" data-section="${sectionCount}">
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h6 class="mb-0">Section ${sectionCount}</h6>
                <div class="d-flex gap-2">
                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="moveSectionUp(${sectionCount})">
                        <i class="material-icons">keyboard_arrow_up</i>
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="moveSectionDown(${sectionCount})">
                        <i class="material-icons">keyboard_arrow_down</i>
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-danger" onclick="removeContentSection(${sectionCount})">
                        <i class="material-icons">delete</i>
                    </button>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Section Title</label>
                    <input type="text" class="form-control" name="sections[section_${sectionCount}][title]" placeholder="Section title">
                </div>
                <div class="col-md-3 mb-3">
                    <label class="form-label">Type</label>
                    <select class="form-control" name="sections[section_${sectionCount}][type]">
                        <option value="text">Text</option>
                        <option value="html">HTML</option>
                        <option value="image">Image</option>
                        <option value="hero">Hero Section</option>
                        <option value="cta">Call to Action</option>
                    </select>
                </div>
                <div class="col-md-3 mb-3">
                    <label class="form-label">Order</label>
                    <input type="number" class="form-control" name="sections[section_${sectionCount}][order]" value="${sectionCount}" min="1">
                </div>
            </div>
            
            <div class="mb-3">
                <label class="form-label">Content</label>
                <textarea class="form-control" name="sections[section_${sectionCount}][content]" rows="6" placeholder="Section content"></textarea>
            </div>
            
            <div class="form-check">
                <input class="form-check-input" type="checkbox" name="sections[section_${sectionCount}][is_enabled]" value="1" checked>
                <label class="form-check-label">
                    Section Enabled
                </label>
            </div>
        </div>
    `;
    
    sectionsContainer.insertAdjacentHTML('beforeend', sectionHtml);
}

// Remove content section
function removeContentSection(sectionId) {
    if (confirm('Are you sure you want to remove this section?')) {
        const section = document.querySelector(`[data-section="${sectionId}"]`);
        section.remove();
        
        // Show no sections message if no sections left
        const remainingSections = document.querySelectorAll('.content-section');
        if (remainingSections.length === 0) {
            document.getElementById('no-sections').style.display = 'block';
        }
    }
}

// Move section up
function moveSectionUp(sectionId) {
    const section = document.querySelector(`[data-section="${sectionId}"]`);
    const previousSibling = section.previousElementSibling;
    
    if (previousSibling && previousSibling.classList.contains('content-section')) {
        section.parentNode.insertBefore(section, previousSibling);
    }
}

// Move section down
function moveSectionDown(sectionId) {
    const section = document.querySelector(`[data-section="${sectionId}"]`);
    const nextSibling = section.nextElementSibling;
    
    if (nextSibling && nextSibling.classList.contains('content-section')) {
        section.parentNode.insertBefore(nextSibling, section);
    }
}

// Delete page
function deletePage() {
    new bootstrap.Modal(document.getElementById('deleteModal')).show();
}

// Duplicate page
function duplicatePage() {
    if (confirm('This will create a copy of this page. Continue?')) {
        fetch(`{{ route('admin.pages.duplicate', $page) }}`, {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            }
        })
        .then(response => {
            if (response.ok) {
                window.location.href = response.url;
            } else {
                alert('Error duplicating page.');
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error duplicating page.');
        });
    }
}

// Form validation
document.getElementById('page-form').addEventListener('submit', function(e) {
    const title = document.getElementById('title').value.trim();
    const slug = document.getElementById('slug').value.trim();
    const routeName = document.getElementById('route_name').value.trim();
    
    if (!title || !slug || !routeName) {
        e.preventDefault();
        alert('Please fill in all required fields (Title, Slug, Route Name).');
        return;
    }
    
    // Validate slug format
    const slugPattern = /^[a-z0-9-]+$/;
    if (!slugPattern.test(slug)) {
        e.preventDefault();
        alert('Slug can only contain lowercase letters, numbers, and hyphens.');
        return;
    }
    
    // Validate route name format
    const routePattern = /^[a-z0-9.-]+$/;
    if (!routePattern.test(routeName)) {
        e.preventDefault();
        alert('Route name can only contain lowercase letters, numbers, dots, and hyphens.');
        return;
    }
});
</script>
@endpush