@extends('admin.layout')

@section('header-title', 'Yorum Düzenle')

@push('styles')
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
@endpush

@section('content')
<style>
    .page-header {
        margin-bottom: 32px;
    }
    .page-title {
        font-size: 24px;
        font-weight: 800;
        color: #1f2937;
    }
    .page-subtitle {
        font-size: 14px;
        color: #6b7280;
        margin-top: 4px;
    }

    .card {
        background: white;
        border: 1px solid #e5e7eb;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0,0,0,0.05);
        margin-bottom: 24px;
    }
    .card-header {
        background: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
        padding: 20px;
    }
    .card-title {
        font-size: 16px;
        font-weight: 700;
        color: #1f2937;
        margin: 0;
    }
    .card-body {
        padding: 20px;
    }

    .form-group {
        margin-bottom: 20px;
    }
    .form-label {
        display: block;
        font-weight: 600;
        color: #1f2937;
        margin-bottom: 8px;
        font-size: 14px;
    }
    .form-control {
        width: 100%;
        padding: 10px 14px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        font-size: 14px;
        font-family: inherit;
        resize: vertical;
        outline: none;
    }
    .form-control:focus {
        border-color: #1e40af;
        box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
    }
    textarea.form-control {
        min-height: 200px;
    }
    .form-error {
        color: #ef4444;
        font-size: 12px;
        margin-top: 4px;
    }

    .form-check {
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .form-check input[type="checkbox"] {
        width: 18px;
        height: 18px;
        cursor: pointer;
    }
    .form-check label {
        cursor: pointer;
        font-weight: 500;
        color: #1f2937;
        font-size: 14px;
    }

    .form-actions {
        display: flex;
        gap: 12px;
    }
    .btn {
        flex: 1;
        padding: 12px 20px;
        border: none;
        border-radius: 8px;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
        text-decoration: none;
        text-align: center;
        transition: all 0.2s;
    }
    .btn-primary {
        background: #1e40af;
        color: white;
    }
    .btn-primary:hover {
        background: #1e3a8a;
    }
    .btn-secondary {
        background: #e5e7eb;
        color: #1f2937;
    }
    .btn-secondary:hover {
        background: #d1d5db;
    }

    .max-width {
        max-width: 700px;
    }

    /* Quill Editor Customization */
    #editor-container {
        min-height: 200px;
        background: white;
        border-radius: 8px;
    }
    #editor-container .ql-toolbar {
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        border-color: #e5e7eb;
    }
    #editor-container .ql-container {
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        border-color: #e5e7eb;
        min-height: 180px;
        font-size: 14px;
    }
    #editor-container .ql-editor {
        min-height: 180px;
        padding: 12px;
    }
    #editor-container .ql-editor.ql-blank::before {
        color: #9ca3af;
        font-style: normal;
    }
</style>

<div class="page-header">
    <div>
        <h1 class="page-title">✏️ Yorum Düzenle</h1>
        <p class="page-subtitle">{{ $comment->author_name }}'in yorumu</p>
    </div>
</div>

<form action="{{ route('admin.blog-comments.update', $comment) }}" method="POST" class="max-width" id="editForm">
    @csrf
    @method('PUT')

    <div class="card">
        <div class="card-header">
            <h2 class="card-title">Yorum İçeriği</h2>
        </div>
        <div class="card-body">
            <div class="form-group">
                <label class="form-label" for="editor-container">Yorum Metni</label>
                <div id="editor-container">{{ old('content', $comment->content) }}</div>
                <input type="hidden" id="content" name="content">
                @error('content')
                    <div class="form-error">{{ $message }}</div>
                @enderror
            </div>

            <div class="form-check">
                <input 
                    type="checkbox" 
                    name="is_approved" 
                    id="is_approved" 
                    value="1" 
                    {{ old('is_approved', $comment->is_approved) ? 'checked' : '' }}
                >
                <label for="is_approved">✓ Onaylı olarak işaretle</label>
            </div>
        </div>
    </div>

    <div class="form-actions">
        <button type="submit" class="btn btn-primary">
            Güncelle
        </button>
        <a href="{{ route('admin.blog-comments.show', $comment) }}" class="btn btn-secondary">
            İptal
        </a>
    </div>
</form>

<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Quill editor
    var quill = new Quill('#editor-container', {
        theme: 'snow',
        modules: {
            toolbar: [
                ['bold', 'italic', 'underline', 'strike'],
                ['blockquote', 'code-block'],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                [{ 'color': [] }, { 'background': [] }],
                ['link'],
                ['clean']
            ]
        },
        placeholder: 'Yorum içeriğini buraya yazın...'
    });

    // Set initial content
    var initialContent = '{{ old('content', $comment->content) }}';
    if (initialContent) {
        quill.root.innerHTML = initialContent;
    }

    // Form submission handler
    document.getElementById('editForm').addEventListener('submit', function(e) {
        // Get HTML content from Quill editor
        var content = quill.root.innerHTML.trim();
        
        // Set the hidden input value
        document.getElementById('content').value = content;
        
        // Validate content
        if (!content || content === '<p><br></p>' || content === '<p></p>') {
            e.preventDefault();
            alert('Yorum içeriği boş olamaz.');
            return false;
        }
    });
});
</script>
@endsection
