@extends('store.themes.modern-coffee-shop.layouts.app')

@section('title', $page->meta_title ?? $page->title)

@section('meta')
    @if($page->meta_description)
        <meta name="description" content="{{ $page->meta_description }}">
    @endif
@endsection

@section('content')
<div class="min-h-screen">
    @if(request()->has('edit') && auth()->check())
        {{-- Edit Mode --}}
        <div class="bg-yellow-100 border-b border-yellow-200 p-4 sticky top-0 z-50">
            <div class="container mx-auto flex justify-between items-center">
                <span class="text-yellow-800 font-semibold">✏️ Edit Mode Active</span>
                <div class="space-x-2">
                    <button onclick="saveBlocks()" class="bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700">
                        Save Changes
                    </button>
                    <a href="{{ url()->current() }}" class="bg-gray-600 text-white px-4 py-2 rounded hover:bg-gray-700 inline-block">
                        Exit Edit Mode
                    </a>
                </div>
            </div>
        </div>
        
        <div id="blocks-container" class="sortable-blocks">
            @foreach($page->blocks()->orderBy('order_index')->get() as $block)
                {!! App\Services\PageBuilderService::renderBlock($block) !!}
            @endforeach
        </div>
        
        @push('scripts')
        <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
        <script>
            // Initialize Sortable
            const container = document.getElementById('blocks-container');
            new Sortable(container, {
                animation: 150,
                ghostClass: 'opacity-50',
                handle: '[data-block-id]',
                onEnd: function() {
                    updateBlockOrder();
                }
            });
            
            function updateBlockOrder() {
                const blocks = Array.from(container.querySelectorAll('[data-block-id]'));
                const order = blocks.map((block, index) => ({
                    id: block.dataset.blockId,
                    order: index
                }));
                
                console.log('New order:', order);
                // This will be sent to server on save
                window.blockOrder = order;
            }
            
            function saveBlocks() {
                if (!window.blockOrder) {
                    alert('No changes to save');
                    return;
                }
                
                fetch('{{ route("store.pages.save-blocks", $page) }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    },
                    body: JSON.stringify({ blocks: window.blockOrder })
                })
                .then(response => response.json())
                .then(data => {
                    alert('Changes saved!');
                    window.location.reload();
                })
                .catch(error => {
                    alert('Error saving changes');
                    console.error(error);
                });
            }
        </script>
        @endpush
    @else
        {{-- View Mode --}}
        @foreach($page->blocks()->where('active', true)->orderBy('order_index')->get() as $block)
            {!! App\Services\PageBuilderService::renderBlock($block) !!}
        @endforeach
        
        @auth
            <div class="fixed bottom-4 right-4 z-50">
                <a href="{{ url()->current() }}?edit=1" class="bg-blue-600 text-white px-6 py-3 rounded-full shadow-lg hover:bg-blue-700 flex items-center space-x-2">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
                    </svg>
                    <span>Edit Page</span>
                </a>
            </div>
        @endauth
    @endif
</div>
@endsection