@extends('dashboard.layout')

@section('title', 'Create Instruction')
@section('meta_description', 'Create a new page instruction.')
@section('page_title', 'Create Instruction')

@push('scripts')
{{-- Quill CSS --}}
<link href="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.snow.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/quill@2/dist/quill.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const quill = new Quill('#quill-editor', {
        theme: 'snow',
        placeholder: 'Write instructions for this page…',
        modules: {
            toolbar: [
                [{ heading: [1, 2, 3, false] }],
                ['bold', 'italic', 'underline', 'strike'],
                [{ list: 'ordered' }, { list: 'bullet' }],
                ['blockquote', 'code-block'],
                ['link'],
                ['clean'],
            ],
        },
    });

    // Pre-fill on validation error
    @if(old('content'))
        quill.root.innerHTML = {!! json_encode(old('content')) !!};
    @endif

    document.getElementById('instruction-form').addEventListener('submit', function () {
        document.getElementById('content-hidden').value = quill.root.innerHTML;
    });
});
</script>
<style>
    .ql-container { font-size: 0.875rem; min-height: 280px; border-bottom-left-radius: 0.75rem; border-bottom-right-radius: 0.75rem; }
    .ql-toolbar { border-top-left-radius: 0.75rem; border-top-right-radius: 0.75rem; background: #f9fafb; }
    .ql-toolbar, .ql-container { border-color: #e5e7eb !important; }
</style>
@endpush

@section('content')

<div class="max-w-3xl">
    <div class="flex items-center gap-3 mb-6">
        <a href="{{ route('instructions.index') }}"
           class="p-2 rounded-lg text-gray-900 hover:text-gray-900 hover:bg-gray-100 transition">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.5 19.5 3 12m0 0 7.5-7.5M3 12h18"/>
            </svg>
        </a>
        <div>
            <h2 class="text-xl font-bold text-gray-900">Create Instruction</h2>
            <p class="text-sm text-gray-900 mt-0.5">Add help content for a specific page URL.</p>
        </div>
    </div>

    <form id="instruction-form" method="POST" action="{{ route('instructions.store') }}"
          class="bg-white border border-gray-200 rounded-2xl shadow-sm p-6 space-y-5">
        @csrf

        {{-- Hidden field that Quill populates on submit --}}
        <input type="hidden" name="content" id="content-hidden">

        {{-- URL field --}}
        <div>
            <label for="url" class="block text-sm font-medium text-gray-900 mb-1.5">
                Page URL <span class="text-red-500">*</span>
            </label>
            <input id="url"
                   type="text"
                   name="url"
                   value="{{ old('url', $url) }}"
                   placeholder="/databank"
                   class="w-full px-3 py-2.5 text-sm bg-gray-50 border rounded-xl font-mono
                          focus:outline-none focus:ring-2 focus:ring-violet-500/30 focus:border-violet-400
                          {{ $errors->has('url') ? 'border-red-300 bg-red-50' : 'border-gray-200' }}">
            <p class="mt-1 text-xs text-gray-900">Use the path only, e.g. <code>/databank</code> or <code>/keywords/create</code></p>
            @error('url')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
        </div>

        {{-- WYSIWYG Content field --}}
        <div>
            <label class="block text-sm font-medium text-gray-900 mb-1.5">
                Content <span class="text-red-500">*</span>
            </label>
            <div id="quill-editor" class="bg-white"></div>
            @error('content')
                <p class="mt-1 text-xs text-red-500">{{ $message }}</p>
            @enderror
        </div>

        <div class="flex items-center justify-end gap-3 pt-2">
            <a href="{{ route('instructions.index') }}"
               class="px-4 py-2.5 rounded-xl text-sm text-gray-900 bg-gray-100 hover:bg-gray-200 font-medium transition">
                Cancel
            </a>
            <button type="submit"
                    class="px-5 py-2.5 rounded-xl bg-violet-600 text-white text-sm font-medium shadow-sm hover:bg-violet-700 active:scale-95 transition-all">
                Save Instruction
            </button>
        </div>
    </form>
</div>

@endsection