@extends('admin.layouts.app')

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

@push('styles')
    <style>
        .tox-tinymce {
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            border-radius: 12px !important;
        }
    </style>
@endpush

@section('content')
    <div class="max-w-6xl">
        <div class="flex items-center gap-4 mb-8">
            <a href="{{ route('admin.pages.index') }}"
                class="w-10 h-10 rounded-xl bg-slate-800 flex items-center justify-center text-slate-400 hover:text-white transition-colors">
                <i data-lucide="arrow-left" class="w-5 h-5"></i>
            </a>
            <h1 class="text-2xl font-bold text-white">Add New Page</h1>
        </div>

        <form action="{{ route('admin.pages.store') }}" method="POST">
            @csrf

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <!-- Main Content -->
                <div class="lg:col-span-2 space-y-6">
                    <div class="glass-card rounded-2xl p-8">
                        <h3 class="text-sm font-bold text-slate-500 uppercase tracking-widest mb-6">Page Content</h3>
                        <div class="space-y-6">
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Title</label>
                                <input type="text" name="title" value="{{ old('title') }}" required
                                    class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all @error('title') border-red-500 @enderror">
                                @error('title')
                                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                @enderror
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Slug</label>
                                <input type="text" name="slug" value="{{ old('slug') }}" placeholder="about-us"
                                    class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all @error('slug') border-red-500 @enderror">
                                <p class="text-[10px] text-slate-500 mt-1">Leave blank to auto-generate from title.</p>
                                @error('slug')
                                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>

                    <div class="glass-card rounded-2xl p-8">
                        <h3 class="text-sm font-bold text-slate-500 uppercase tracking-widest mb-6">Detailed Content</h3>
                        <textarea id="content_editor" name="content">{{ old('content') }}</textarea>
                        @error('content')
                            <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                        @enderror
                    </div>

                    <!-- SEO Settings -->
                    <div class="glass-card rounded-2xl p-8">
                        <h3 class="text-lg font-bold text-white mb-6 flex items-center gap-2">
                            <i data-lucide="search" class="w-5 h-5 text-blue-400"></i>
                            SEO Settings
                        </h3>
                        <div class="space-y-6">
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Meta Title</label>
                                <input type="text" name="meta_title" value="{{ old('meta_title') }}"
                                    class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Meta Description</label>
                                <textarea name="meta_description" rows="3"
                                    class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">{{ old('meta_description') }}</textarea>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Meta Keywords</label>
                                <input type="text" name="meta_keywords" value="{{ old('meta_keywords') }}"
                                    placeholder="Separated by commas..."
                                    class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                            </div>

                            <div class="py-4 border-t border-white/5">
                                <label class="flex items-center gap-3 cursor-pointer group">
                                    <div class="relative">
                                        <input type="checkbox" name="is_no_follow" value="1" {{ old('is_no_follow') ? 'checked' : '' }} class="sr-only peer">
                                        <div
                                            class="w-11 h-6 bg-slate-700 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600">
                                        </div>
                                    </div>
                                    <div>
                                        <span
                                            class="text-sm font-medium text-slate-300 group-hover:text-white transition-colors">Set
                                            No-Index / No-Follow</span>
                                        <p class="text-[10px] text-slate-500">Enable this if you don't want search engines
                                            to track this page.</p>
                                    </div>
                                </label>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Schema Markup (JSON-LD)</label>
                                <textarea name="schema_markup" rows="5"
                                    placeholder='{"@@context": "https://schema.org", ...}'
                                    class="w-full font-mono text-xs bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-blue-300 focus:border-blue-500 outline-none transition-all">{{ old('schema_markup') }}</textarea>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Sidebar Settings -->
                <div class="space-y-6">
                    <!-- Navigation Settings -->
                    <div class="glass-card rounded-2xl p-8">
                        <h3 class="text-lg font-bold text-white mb-6 flex items-center gap-2">
                            <i data-lucide="navigation" class="w-5 h-5 text-purple-400"></i>
                            Navigation Settings
                        </h3>
                        <div class="space-y-6">
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-4">Show Link In:</label>
                                <div class="space-y-4">
                                    <!-- Header Checkbox -->
                                    <label class="flex items-center gap-3 cursor-pointer group">
                                        <div class="relative">
                                            <input type="checkbox" name="show_in_header" value="1" {{ old('show_in_header') ? 'checked' : '' }} class="sr-only peer">
                                            <div
                                                class="w-11 h-6 bg-slate-700 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600">
                                            </div>
                                        </div>
                                        <div>
                                            <span
                                                class="text-sm font-medium text-slate-300 group-hover:text-white transition-colors">Header
                                                Navigation</span>
                                            <p class="text-[10px] text-slate-500">Link will appear in the top header bar</p>
                                        </div>
                                    </label>

                                    <!-- Footer Checkbox -->
                                    <label class="flex items-center gap-3 cursor-pointer group">
                                        <div class="relative">
                                            <input type="checkbox" name="show_in_footer" value="1" {{ old('show_in_footer') ? 'checked' : '' }} class="sr-only peer">
                                            <div
                                                class="w-11 h-6 bg-slate-700 rounded-full peer peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-purple-600">
                                            </div>
                                        </div>
                                        <div>
                                            <span
                                                class="text-sm font-medium text-slate-300 group-hover:text-white transition-colors">Footer
                                                Navigation</span>
                                            <p class="text-[10px] text-slate-500">Link will appear in the bottom footer</p>
                                        </div>
                                    </label>
                                </div>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Display Order</label>
                                <input type="number" name="display_order" value="{{ old('display_order', 0) }}" min="0"
                                    class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-purple-500 outline-none transition-all">
                                <p class="text-[10px] text-slate-500 mt-1">Lower numbers appear first. Links appear after
                                    "Best Astrologers".</p>
                            </div>
                        </div>
                    </div>

                    <div class="glass-card rounded-2xl p-8">
                        <div class="space-y-6">
                            <div>
                                <label class="block text-sm font-medium text-slate-300 mb-2">Status</label>
                                <select name="status"
                                    class="w-full bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-slate-200 focus:border-blue-500 outline-none transition-all">
                                    <option value="active" {{ old('status') == 'active' ? 'selected' : '' }}>Active /
                                        Published</option>
                                    <option value="inactive" {{ old('status') == 'inactive' ? 'selected' : '' }}>Inactive /
                                        Draft</option>
                                </select>
                            </div>

                            <button type="submit"
                                class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 rounded-xl shadow-lg shadow-blue-500/20 transition-all">
                                Save Page
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
@endsection

@push('scripts')
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.10.7/tinymce.min.js"></script>
    <script>
        tinymce.init({
            selector: '#content_editor',
            height: 500,
            plugins: [
                'advlist autolink lists link image charmap print preview anchor',
                'searchreplace visualblocks code fullscreen',
                'insertdatetime media table paste code help wordcount'
            ],
            toolbar: 'undo redo | formatselect | bold italic backcolor | \
                          alignleft aligncenter alignright alignjustify | \
                          bullist numlist outdent indent | removeformat | help',
            skin: 'oxide-dark',
            content_css: 'dark',
            promotion: false,
            branding: false,
            setup: function (editor) {
                editor.on('change', function () {
                    editor.save();
                });
            }
        });
    </script>
@endpush