@extends('layouts.admin')

@section('styles')
    <style>
        .form-container {
            background-color: white;
            padding: 2rem;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            max-width: 800px;
            margin: 0 auto;
        }
        h1 {
            color: #333;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            color: #666;
        }
        input[readonly] {
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            padding: 10px;
            width: 100%;
            border-radius: 4px;
        }
        button {
            padding: 10px 20px;
            background-color: #00bcd4;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0097a7;
        }
    </style>
@endsection

@section('head-scripts')
    <script src="https://cdn.tiny.cloud/1/1dpy87igd9ban6rboi9u6hy19z421eydihh48vytit8bkarr/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
@endsection

@section('content')
    <div class="form-container">
        <h1>Manage Page</h1>
        <form action="{{ route('admin.pages.update', $page) }}" method="POST">
            @csrf
            @method('PUT')

            <div class="form-group">
                <label for="title">Page Title</label>
                <input type="text" id="title" name="title" value="{{ $page->title }}" readonly>
            </div>
            <div class="form-group">
                <label for="content">Page Content</label>
                <textarea id="content" name="content">{!! $page->content !!}</textarea>
            </div>
            <button type="submit">Save Changes</button>
        </form>
    </div>
@endsection

@section('scripts')
    <script>
        tinymce.init({
            selector: '#content',
            height: 500,
            menubar: false,
            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 | image | code | help',
            content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
        });
    </script>
@endsection