@extends('admin.layout')
@section('title', $post->exists ? 'Redaktə: '.$post->title : 'Yeni məqalə')
@section('content')
<a href="{{route('admin.blog.index')}}" class="text-sm text-muted mb-4 inline-flex items-center gap-1.5"><x-icon name="arrow-left" class="w-4 h-4" /> Bloqa qayıt</a>
<h1 class="text-2xl font-bold mb-6">{{$post->exists ? 'Məqaləni redaktə et' : 'Yeni məqalə'}}</h1>

<form method="POST" action="{{$post->exists ? route('admin.blog.update',$post) : route('admin.blog.store')}}" enctype="multipart/form-data" class="space-y-4 max-w-3xl">
    @csrf @if($post->exists) @method('PUT') @endif

    <div class="grid grid-cols-2 gap-4">
        <div><label class="label">Başlıq</label><input type="text" name="title" value="{{old('title',$post->title)}}" class="input" required></div>
        <div><label class="label">Müəllif</label><input type="text" name="author" value="{{old('author',$post->author)}}" class="input"></div>
    </div>
    <div><label class="label">Qısa təsvir</label><textarea name="short_description" class="input" rows="2">{{old('short_description',$post->short_description)}}</textarea></div>
    <div>
        <label class="label">Mətn (HTML)</label>
        <div class="flex gap-1 mb-2 flex-wrap">
            <button type="button" onclick="wrapHtml('<strong>','</strong>')" class="text-xs px-2 py-1 bg-surface2 rounded hover:bg-surface2 font-bold">B</button>
            <button type="button" onclick="wrapHtml('<em>','</em>')" class="text-xs px-2 py-1 bg-surface2 rounded hover:bg-surface2 italic">I</button>
            <button type="button" onclick="wrapHtml('<u>','</u>')" class="text-xs px-2 py-1 bg-surface2 rounded hover:bg-surface2 underline">U</button>
            <button type="button" onclick="wrapHtml('<h2>','</h2>')" class="text-xs px-2 py-1 bg-surface2 rounded hover:bg-surface2">H2</button>
            <button type="button" onclick="wrapHtml('<h3>','</h3>')" class="text-xs px-2 py-1 bg-surface2 rounded hover:bg-surface2">H3</button>
            <button type="button" onclick='wrapHtml("<a href=\"\">","</a>")' class="text-xs px-2 py-1 bg-surface2 rounded hover:bg-surface2">A</button>
            <button type="button" onclick='wrapHtml("<img src=\"\" alt=\"\">","")' class="text-xs px-2 py-1 bg-surface2 rounded hover:bg-surface2">IMG</button>
            <button type="button" onclick="insertHtml('<br>')" class="text-xs px-2 py-1 bg-surface2 rounded hover:bg-surface2">BR</button>
            <button type="button" onclick="wrapHtml('<p>','</p>')" class="text-xs px-2 py-1 bg-surface2 rounded hover:bg-surface2">P</button>
            <button type="button" onclick='wrapHtml("<div class=\"\">","</div>")' class="text-xs px-2 py-1 bg-surface2 rounded hover:bg-surface2">DIV</button>
        </div>
        <textarea name="body" id="bodyEditor" class="w-full font-mono text-sm p-4 bg-gray-900 text-green-400 rounded-xl border-0 focus:ring-2 focus:ring-primary resize-y" style="min-height:350px;line-height:1.6;tab-size:2;" required>{{old('body',$post->body)}}</textarea>
    </div>

    {{-- Poster --}}
    <div class="grid grid-cols-2 gap-4">
        <div>
            <label class="label">Poster şəkli</label>
            @if($post->poster)<img src="{{$post->poster}}" class="w-full h-32 object-cover rounded-lg border mb-2">@endif
            <input type="file" name="poster" class="input" accept="image/*">
        </div>
        <div>
            <label class="flex items-center gap-2 mt-8"><input type="checkbox" name="is_published" value="1" {{old('is_published',$post->is_published)?'checked':''}} class="rounded"> <span class="text-sm">Dərc olunsun</span></label>
        </div>
    </div>

    <button class="btn btn-primary"><x-icon name="save" class="w-4 h-4" /> Saxla</button>
</form>
@endsection

@push('scripts')
<script>
function wrapHtml(open, close) {
    const ta = document.getElementById('bodyEditor');
    const s = ta.selectionStart, e = ta.selectionEnd;
    const sel = ta.value.substring(s,e);
    ta.value = ta.value.substring(0,s) + open + sel + close + ta.value.substring(e);
    ta.focus(); ta.selectionStart = s+open.length; ta.selectionEnd = e+open.length;
}
function insertHtml(tag) {
    const ta = document.getElementById('bodyEditor');
    const s = ta.selectionStart;
    ta.value = ta.value.substring(0,s) + tag + '\n' + ta.value.substring(s);
    ta.focus(); ta.selectionStart = ta.selectionEnd = s + tag.length + 1;
}
</script>
@endpush