@extends('layouts.app')

@section('page_title', 'Edit ' . ucfirst($page_slug) . ' Page Content')

@section('content')
<section class="section">
    <div class="container">
        <div style="max-width: 800px; margin: 0 auto; background: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1);">
            <form action="{{ route('admin.page-content.update', $page_slug) }}" method="POST">
                @csrf
                @method('PUT')
                
                @foreach($contents as $index => $content)
                    <div style="margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid #eee;">
                        <input type="hidden" name="contents[{{ $index }}][id]" value="{{ $content->id }}">
                        
                        <div style="margin-bottom: 20px;">
                            <label style="display: block; margin-bottom: 8px; font-weight: 700;">Section: {{ ucfirst($content->section_name) }} - Title</label>
                            <input type="text" name="contents[{{ $index }}][title]" value="{{ $content->title }}" style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px;">
                        </div>

                        <div style="margin-bottom: 20px;">
                            <label style="display: block; margin-bottom: 8px; font-weight: 700;">Content Body</label>
                            <textarea name="contents[{{ $index }}][body]" style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px; min-height: 150px;">{{ $content->body }}</textarea>
                        </div>
                    </div>
                @endforeach

                <div style="text-align: center;">
                    <button type="submit" class="button button-primary" style="width: 100%;">Update {{ ucfirst($page_slug) }} Content</button>
                    <a href="{{ route($page_slug) }}" style="display: block; margin-top: 15px; color: #666; text-decoration: none;">Cancel and Go Back</a>
                </div>
            </form>
        </div>
    </div>
</section>
@endsection