@extends('admin.layouts.app')

@section('title', 'Edit News')
@section('header-title', 'Edit News')

@section('content')
<div class="card">
    <div class="card-title">Edit News</div>
    <form method="POST" action="{{ route('admin.news.update', $news) }}" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        <div class="form-row cols-2">
            <div class="form-group">
                <label class="form-label">Title *</label>
                <input type="text" name="title" class="form-control" value="{{ old('title', $news->title) }}" required>
            </div>
            <div class="form-group">
                <label class="form-label">Featured Image</label>
                @if($news->featured_image)
                    <p style="font-size:12px;margin-bottom:8px;"><img src="{{ asset('storage/' . $news->featured_image) }}" alt="" style="max-height:80px;border-radius:6px;"></p>
                @endif
                <input type="file" name="featured_image" class="form-control" accept="image/*">
            </div>
        </div>
        <div class="form-group">
            <label class="form-label">Description</label>
            <div id="editor" style="min-height: 200px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px;"></div>
            <textarea name="description" id="description" style="display:none;">{{ old('description', $news->description) }}</textarea>
        </div>
        <div class="form-actions">
            <button type="submit" class="btn btn-primary">Update</button>
            <a href="{{ route('admin.news.index') }}" class="btn btn-secondary">Cancel</a>
        </div>
    </form>
</div>

@push('styles')
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
<style>
.ql-toolbar, .ql-container { border-color: var(--border) !important; }
.ql-toolbar { background: var(--card) !important; }
.ql-container { background: var(--bg) !important; color: var(--text) !important; }
.ql-editor { min-height: 180px; }
.ql-stroke { stroke: var(--border) !important; }
.ql-fill { fill: var(--text-muted) !important; }
.ql-picker { color: var(--text-muted) !important; }
</style>
@endpush
@push('scripts')
<script src="https://cdn.quilljs.com/1.3.7/quill.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var quill = new Quill('#editor', {
        theme: 'snow',
        placeholder: 'Write news content...',
        modules: {
            toolbar: [
                [{ 'header': [1, 2, 3, false] }],
                ['bold', 'italic', 'underline', 'strike'],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                ['link'],
                ['clean']
            ]
        }
    });
    quill.root.innerHTML = document.getElementById('description').value;
    document.querySelector('form').addEventListener('submit', function() {
        document.getElementById('description').value = quill.root.innerHTML;
    });
});
</script>
@endpush
@endsection