<x-app-layout>

    <x-module-hero
        title="Create New Page"
        description="Build a dynamic page with content blocks"
        icon="fa-plus-circle"
    >
        <x-slot name="backButton">
            <a href="{{ route('admin.pages.index') }}"
               class="inline-flex items-center gap-2 text-white/80 hover:text-white text-sm transition">
                <i class="fas fa-arrow-left"></i> Back to Pages
            </a>
        </x-slot>
        <x-slot name="tabs">
            @can('view pages')
            <a href="{{ route('admin.pages.index') }}"
               class="module-hero-tab {{ request()->routeIs('admin.pages.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-list text-sm"></i> All Pages
            </a>
            @endcan
            @can('create pages')
            <a href="{{ route('admin.pages.create') }}"
               class="module-hero-tab {{ request()->routeIs('admin.pages.create') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-plus text-sm"></i> Create Page
            </a>
            @endcan
            @role('Manager|Super Manager')
            <a href="{{ route('admin.sliders.index') }}"
               class="module-hero-tab {{ request()->routeIs('admin.sliders.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-images text-sm"></i> Hero Slider
            </a>
            <a href="{{ route('admin.hero-cards.index') }}"
               class="module-hero-tab {{ request()->routeIs('admin.hero-cards.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-th-large text-sm"></i> Hero Cards
            </a>
            @endrole
            @can('manage what we do images')
            <a href="{{ route('admin.what-we-do-images.index') }}"
               class="module-hero-tab {{ request()->routeIs('admin.what-we-do-images.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }}
                      inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium
                      md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                <i class="fas fa-image text-sm"></i> What We Do Images
            </a>
            @endcan
        </x-slot>
    </x-module-hero>

    <div class="p-6">

        @if($errors->any())
            <div class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
                <div class="flex items-center gap-2 mb-2">
                    <i class="fas fa-exclamation-circle"></i>
                    <strong>Please fix the following errors:</strong>
                </div>
                <ul class="list-disc list-inside space-y-1 text-sm">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <form action="{{ route('admin.pages.store') }}" method="POST" enctype="multipart/form-data"
              x-data="pageBuilder({{ json_encode($blockTypes) }}, {{ json_encode($layouts) }})">
            @csrf

            {{-- Section: Basic Information --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
                <h3 class="text-base font-semibold text-gray-800 border-b border-gray-200 pb-3 mb-4">
                    <i class="fas fa-info-circle mr-2 text-blue-600"></i> Basic Information
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div class="md:col-span-2">
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            Page Title <span class="text-red-500">*</span>
                        </label>
                        <input type="text" name="title" value="{{ old('title') }}"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent @error('title') border-red-400 @enderror"
                               required x-model="title" @input="generateSlug()">
                        @error('title')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">
                            URL Slug <span class="text-red-500">*</span>
                        </label>
                        <div class="flex items-center gap-2">
                            <span class="text-gray-400 text-sm">/pages/</span>
                            <input type="text" name="slug" value="{{ old('slug') }}"
                                   class="flex-1 px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent @error('slug') border-red-400 @enderror"
                                   required x-model="slug">
                        </div>
                        @error('slug')<p class="mt-1 text-xs text-red-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Page Layout</label>
                        <select name="layout" class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent">
                            @foreach($layouts as $key => $label)
                                <option value="{{ $key }}" {{ old('layout') == $key ? 'selected' : '' }}>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="md:col-span-2">
                        <label class="flex items-center gap-3 cursor-pointer">
                            <input type="checkbox" name="is_published" value="1" {{ old('is_published') ? 'checked' : '' }}
                                   class="h-4 w-4 text-green-600 rounded focus:ring-green-500">
                            <span class="text-sm text-gray-700">Publish immediately</span>
                        </label>
                    </div>
                </div>
            </div>

            {{-- Section: SEO --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
                <h3 class="text-base font-semibold text-gray-800 border-b border-gray-200 pb-3 mb-4">
                    <i class="fas fa-search mr-2 text-purple-600"></i> SEO Settings
                </h3>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">SEO Title</label>
                        <input type="text" name="seo_meta[meta_title]" value="{{ old('seo_meta.meta_title') }}"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
                               placeholder="Leave blank to use page title">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">SEO Description</label>
                        <input type="text" name="seo_meta[meta_description]" value="{{ old('seo_meta.meta_description') }}"
                               class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
                               placeholder="Max 160 characters for best SEO">
                    </div>
                </div>
            </div>

            {{-- Section: Theme Colors --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
                <h3 class="text-base font-semibold text-gray-800 border-b border-gray-200 pb-3 mb-4">
                    <i class="fas fa-palette mr-2 text-pink-600"></i> Theme Colors (Optional)
                </h3>
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1">Primary</label>
                        <input type="color" name="theme_colors[primary]" value="{{ old('theme_colors.primary', '#16a34a') }}"
                               class="w-full h-10 rounded cursor-pointer border border-gray-300">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1">Secondary</label>
                        <input type="color" name="theme_colors[secondary]" value="{{ old('theme_colors.secondary', '#15803d') }}"
                               class="w-full h-10 rounded cursor-pointer border border-gray-300">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1">Accent</label>
                        <input type="color" name="theme_colors[accent]" value="{{ old('theme_colors.accent', '#dc2626') }}"
                               class="w-full h-10 rounded cursor-pointer border border-gray-300">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-600 mb-1">Background</label>
                        <input type="color" name="theme_colors[background]" value="{{ old('theme_colors.background', '#ffffff') }}"
                               class="w-full h-10 rounded cursor-pointer border border-gray-300">
                    </div>
                </div>
            </div>

            {{-- Section: Content Blocks --}}
            <div class="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
                <div class="flex items-center justify-between border-b border-gray-200 pb-3 mb-4">
                    <h3 class="text-base font-semibold text-gray-800">
                        <i class="fas fa-th-large mr-2 text-indigo-600"></i> Content Blocks
                    </h3>
                    <div class="relative" x-data="{ open: false }">
                        <button type="button" @click="open = !open"
                                class="inline-flex items-center gap-2 px-4 py-2 bg-[#1a4731] text-white text-sm font-medium rounded-lg hover:bg-[#276749] transition">
                            <i class="fas fa-plus"></i> Add Block
                        </button>
                        <div x-show="open" @click.away="open = false" x-transition
                             class="absolute right-0 mt-2 w-52 bg-white rounded-lg shadow-lg border border-gray-200 z-10 py-1">
                            @foreach($blockTypes as $type => $label)
                            <button type="button" @click="addBlock('{{ $type }}'); open = false"
                                    class="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition">
                                {{ $label }}
                            </button>
                            @endforeach
                        </div>
                    </div>
                </div>

                {{-- Hidden input that holds all blocks as JSON --}}
                <input type="hidden" name="content_blocks_json" :value="JSON.stringify(blocks)">

                <div class="space-y-3">
                    <template x-for="(block, index) in blocks" :key="index">
                        <div class="border border-gray-200 rounded-lg overflow-hidden" x-data="{ expanded: true }">
                            <div class="flex items-center justify-between bg-gray-50 px-4 py-3 cursor-pointer"
                                 @click="expanded = !expanded">
                                <div class="flex items-center gap-3">
                                    <i class="fas fa-grip-vertical text-gray-400"></i>
                                    <span class="text-sm font-medium text-gray-700" x-text="getBlockLabel(block.type)"></span>
                                </div>
                                <div class="flex items-center gap-2">
                                    <button type="button" @click.stop="removeBlock(index)"
                                            class="p-1.5 text-red-500 hover:text-red-700 transition">
                                        <i class="fas fa-trash text-xs"></i>
                                    </button>
                                    <i class="fas fa-chevron-down text-gray-400 text-xs transition-transform"
                                       :class="{ 'rotate-180': expanded }"></i>
                                </div>
                            </div>
                            <div x-show="expanded" x-transition class="p-4 space-y-3">
                                <input type="text" placeholder="Title"
                                       class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
                                       x-model="block.title">
                                <textarea placeholder="Content" rows="3"
                                          class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
                                          x-model="block.content"></textarea>
                                <template x-if="block.type === 'hero'">
                                    <input type="text" placeholder="Subtitle"
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
                                           x-model="block.subtitle">
                                </template>
                                <template x-if="block.type === 'quote'">
                                    <input type="text" placeholder="Author"
                                           class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
                                           x-model="block.author">
                                </template>
                                <template x-if="block.type === 'image_text'">
                                    <select class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
                                            x-model="block.image_position">
                                        <option value="left">Image on Left</option>
                                        <option value="right">Image on Right</option>
                                    </select>
                                </template>
                                <template x-if="block.type === 'cards' || block.type === 'card_section'">
                                    <select class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm"
                                            x-model="block.columns">
                                        <option value="2">2 Columns</option>
                                        <option value="3">3 Columns</option>
                                        <option value="4">4 Columns</option>
                                    </select>
                                </template>
                            </div>
                        </div>
                    </template>

                    <div x-show="blocks.length === 0"
                         class="text-center py-12 border-2 border-dashed border-gray-200 rounded-lg">
                        <i class="fas fa-th-large text-4xl text-gray-300 mb-3 block"></i>
                        <p class="text-gray-500 text-sm">No content blocks yet. Click "Add Block" to start building.</p>
                    </div>
                </div>
            </div>

            {{-- Submit --}}
            <div class="flex justify-end gap-3">
                <a href="{{ route('admin.pages.index') }}"
                   class="px-6 py-2.5 bg-gray-100 text-gray-700 font-medium rounded-lg hover:bg-gray-200 transition">
                    Cancel
                </a>
                <button type="submit"
                        class="px-6 py-2.5 bg-[#1a4731] text-white font-semibold rounded-lg hover:bg-[#276749] transition">
                    <i class="fas fa-save mr-2"></i> Save Page
                </button>
            </div>
        </form>
    </div>

    <script>
    function pageBuilder(blockTypes, layouts, existingBlocks) {
        return {
            title: '',
            slug: '',
            blocks: existingBlocks || [],
            blockTypes: blockTypes,

            generateSlug() {
                this.slug = this.title.toLowerCase()
                    .replace(/[^a-z0-9]+/g, '-')
                    .replace(/(^-|-$)/g, '');
            },

            addBlock(type) {
                this.blocks.push({
                    type: type,
                    title: '',
                    content: '',
                    subtitle: '',
                    author: '',
                    source: '',
                    image_position: 'left',
                    columns: '3'
                });
            },

            removeBlock(index) {
                this.blocks.splice(index, 1);
            },

            getBlockLabel(type) {
                return this.blockTypes[type] || type;
            }
        }
    }
    </script>
</x-app-layout>
