@extends('backend.template-admin')

@section('content')
    <div class="bg-white p-6 rounded-lg shadow-md">
        <div class="mb-6">
            <h2 class="text-2xl font-bold text-gray-800">Tambah About Baru</h2>
            <a href="{{ route('admin.about.index') }}" class="text-orange-500 hover:underline">
                <i class="fa fa-arrow-left"></i> Kembali ke Daftar
            </a>
        </div>

        <form action="{{ route('admin.about.store') }}" method="POST">
            @csrf
            
            <div class="mb-6">
                <label for="content" class="block mb-2 text-sm font-medium text-gray-900">Content</label>
                <div id="editor" style="height: 300px;"></div>
                <input type="hidden" name="content" id="content" value="{{ old('content') }}">
                @error('content')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="mb-6">
                <label for="status" class="block mb-2 text-sm font-medium text-gray-900">Status</label>
                <select id="status" name="status" 
                        class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5">
                    <option value="enable" {{ old('status') == 'enable' ? 'selected' : '' }}>Enable</option>
                    <option value="disabled" {{ old('status') == 'disabled' ? 'selected' : '' }}>Disabled</option>
                </select>
                @error('status')
                    <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                @enderror
            </div>

            <div class="flex gap-4">
                <button type="submit" 
                        class="text-white bg-orange-500 hover:bg-orange-600 focus:ring-4 focus:outline-none focus:ring-orange-300 font-medium rounded-lg text-sm px-5 py-2.5">
                    Simpan
                </button>
                <a href="{{ route('admin.about.index') }}" 
                   class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:outline-none focus:ring-gray-200 rounded-lg border border-gray-200 text-sm font-medium px-5 py-2.5">
                    Batal
                </a>
            </div>
        </form>
    </div>

    <!-- Quill CSS -->
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    
    <!-- Quill JS -->
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    
    <script>
        var quill = new Quill('#editor', {
            theme: 'snow',
            modules: {
                toolbar: [
                    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                    ['bold', 'italic', 'underline', 'strike'],
                    [{ 'color': [] }, { 'background': [] }],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                    [{ 'indent': '-1'}, { 'indent': '+1' }],
                    [{ 'align': [] }],
                    ['link', 'image', 'video'],
                    ['clean']
                ]
            }
        });

        // Update hidden input when form is submitted
        document.querySelector('form').onsubmit = function() {
            var content = document.querySelector('#content');
            content.value = quill.root.innerHTML;
        };

        // Set initial content if editing
        @if(old('content'))
            quill.root.innerHTML = {!! json_encode(old('content')) !!};
        @endif
    </script>
@endsection