@extends('admin.layouts.main')

@section('title', 'Edit Artikel - Admin Panel')

@section('content')
<div class="py-4">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1">
                <i class="fas fa-edit text-primary me-2"></i>Edit Artikel
            </h1>
            <p class="text-muted mb-0">Perbarui konten artikel blog</p>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('frontend.blog-detail', $article->slug) }}" target="_blank" class="btn btn-outline-info">
                <i class="fas fa-eye me-2"></i>Lihat Artikel
            </a>
            <a href="{{ route('admin.blog.index') }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>Kembali
            </a>
        </div>
    </div>

    <form action="{{ route('admin.blog.update', $article->id) }}" method="POST" enctype="multipart/form-data">
        @csrf
        @method('PUT')
        <div class="row g-4">
            <!-- Main Content -->
            <div class="col-lg-8">
                <!-- Basic Info Card -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-white border-bottom py-3">
                        <h5 class="mb-0 fw-bold">
                            <i class="fas fa-info-circle text-primary me-2"></i>Informasi Artikel
                        </h5>
                    </div>
                    <div class="card-body p-4">
                        <!-- Title -->
                        <div class="mb-4">
                            <label for="title" class="form-label fw-semibold">
                                Judul Artikel <span class="text-danger">*</span>
                            </label>
                            <input type="text" class="form-control form-control-lg @error('title') is-invalid @enderror" 
                                   id="title" name="title" value="{{ old('title', $article->title) }}" 
                                   placeholder="Masukkan judul artikel..." required>
                            @error('title')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">
                                <i class="fas fa-link me-1"></i>Slug saat ini: <strong>{{ $article->slug }}</strong>
                            </small>
                        </div>

                        <!-- Excerpt -->
                        <div class="mb-4">
                            <label for="excerpt" class="form-label fw-semibold">
                                Ringkasan Artikel
                            </label>
                            <textarea class="form-control @error('excerpt') is-invalid @enderror" 
                                      id="excerpt" name="excerpt" rows="3" 
                                      placeholder="Tulis ringkasan singkat artikel (opsional)...">{{ old('excerpt', $article->excerpt) }}</textarea>
                            @error('excerpt')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">
                                <i class="fas fa-info-circle me-1"></i>Maksimal 500 karakter
                            </small>
                        </div>

                        <!-- Content -->
                        <div class="mb-4">
                            <label for="content" class="form-label fw-semibold">
                                Konten Artikel <span class="text-danger">*</span>
                            </label>
                            <textarea class="form-control @error('content') is-invalid @enderror" 
                                      id="content" name="content" rows="15" required>{{ old('content', $article->content) }}</textarea>
                            @error('content')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Featured Image Card -->
                <div class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-bottom py-3">
                        <h5 class="mb-0 fw-bold">
                            <i class="fas fa-image text-primary me-2"></i>Gambar Unggulan
                        </h5>
                    </div>
                    <div class="card-body p-4">
                        <!-- Current Image -->
                        @if($article->image)
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Gambar Saat Ini:</label>
                            <div class="position-relative d-inline-block">
                                <img src="{{ asset('storage/blog/' . $article->image) }}" alt="{{ $article->title }}" 
                                     class="img-fluid rounded shadow-sm" style="max-height: 300px;"
                                     onerror="this.src='https://via.placeholder.com/800x400?text=Image+Not+Found'">
                            </div>
                        </div>
                        @endif

                        <div class="mb-3">
                            <label for="image" class="form-label fw-semibold">
                                {{ $article->image ? 'Ganti Gambar' : 'Upload Gambar' }}
                            </label>
                            <input type="file" class="form-control @error('image') is-invalid @enderror" 
                                   id="image" name="image" accept="image/*" onchange="previewImage(event)">
                            @error('image')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                            <small class="text-muted">
                                <i class="fas fa-info-circle me-1"></i>Format: JPG, PNG, GIF. Maksimal 2MB. Kosongkan jika tidak ingin mengganti.
                            </small>
                        </div>
                        
                        <!-- Image Preview -->
                        <div id="imagePreview" class="mt-3" style="display: none;">
                            <label class="form-label fw-semibold">Preview Gambar Baru:</label>
                            <div class="position-relative d-inline-block">
                                <img id="preview" src="" alt="Preview" class="img-fluid rounded shadow-sm" style="max-height: 300px;">
                                <button type="button" class="btn btn-sm btn-danger position-absolute top-0 end-0 m-2" onclick="removeImage()">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <!-- Publish Card -->
                <div class="card border-0 shadow-sm mb-4">
                    <div class="card-header bg-primary text-white py-3">
                        <h5 class="mb-0 fw-bold">
                            <i class="fas fa-paper-plane me-2"></i>Publikasi
                        </h5>
                    </div>
                    <div class="card-body p-4">
                        <!-- Author -->
                        <div class="mb-3">
                            <label for="author" class="form-label fw-semibold">
                                <i class="fas fa-user me-2 text-primary"></i>Penulis
                            </label>
                            <input type="text" class="form-control @error('author') is-invalid @enderror" 
                                   id="author" name="author" value="{{ old('author', $article->author) }}" 
                                   placeholder="Nama penulis">
                            @error('author')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <!-- Status -->
                        <div class="mb-3">
                            <label class="form-label fw-semibold">
                                <i class="fas fa-toggle-on me-2 text-primary"></i>Status
                            </label>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="is_published" name="is_published" value="1" 
                                       {{ old('is_published', $article->is_published) ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_published">
                                    Terbitkan artikel
                                </label>
                            </div>
                            <small class="text-muted">
                                Jika tidak dicentang, artikel akan disimpan sebagai draft
                            </small>
                        </div>

                        <!-- Featured -->
                        <div class="mb-4">
                            <label class="form-label fw-semibold">
                                <i class="fas fa-star me-2 text-primary"></i>Featured
                            </label>
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="is_featured" name="is_featured" value="1" 
                                       {{ old('is_featured', $article->is_featured) ? 'checked' : '' }}>
                                <label class="form-check-label" for="is_featured">
                                    Tandai sebagai artikel unggulan
                                </label>
                            </div>
                            <small class="text-muted">
                                Artikel unggulan akan ditampilkan di halaman utama
                            </small>
                        </div>

                        <hr>

                        <!-- Meta Info -->
                        <div class="mb-4">
                            <h6 class="fw-semibold mb-3">
                                <i class="fas fa-info-circle me-2 text-primary"></i>Informasi
                            </h6>
                            <div class="small text-muted">
                                <div class="mb-2">
                                    <i class="fas fa-calendar me-2"></i>Dibuat: {{ $article->created_at->format('d M Y, H:i') }}
                                </div>
                                <div class="mb-2">
                                    <i class="fas fa-clock me-2"></i>Diperbarui: {{ $article->updated_at->format('d M Y, H:i') }}
                                </div>
                                <div>
                                    <i class="fas fa-eye me-2"></i>ID: {{ $article->id }}
                                </div>
                            </div>
                        </div>

                        <!-- Action Buttons -->
                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary btn-lg">
                                <i class="fas fa-save me-2"></i>Update Artikel
                            </button>
                            <a href="{{ route('admin.blog.index') }}" class="btn btn-outline-secondary">
                                <i class="fas fa-times me-2"></i>Batal
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Danger Zone -->
                <div class="card border-danger shadow-sm">
                    <div class="card-header bg-danger text-white py-3">
                        <h6 class="mb-0 fw-bold">
                            <i class="fas fa-exclamation-triangle me-2"></i>Danger Zone
                        </h6>
                    </div>
                    <div class="card-body p-4">
                        <p class="small text-muted mb-3">
                            Menghapus artikel akan menghilangkan semua data secara permanen. Tindakan ini tidak dapat dibatalkan.
                        </p>
                        <button type="button" class="btn btn-outline-danger w-100" onclick="confirmDelete()">
                            <i class="fas fa-trash me-2"></i>Hapus Artikel
                        </button>
                        <form id="delete-form" action="{{ route('admin.blog.destroy', $article->id) }}" method="POST" class="d-none">
                            @csrf
                            @method('DELETE')
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

@push('styles')
<!-- Summernote CSS -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
<style>
    .note-editor.note-frame {
        border: 1px solid #dee2e6;
        border-radius: 0.375rem;
    }
    .note-editor.note-frame .note-editing-area .note-editable {
        min-height: 400px;
    }
</style>
@endpush

@push('scripts')
<!-- Summernote JS -->
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>

<script>
    // Initialize Summernote
    $(document).ready(function() {
        $('#content').summernote({
            height: 400,
            placeholder: 'Tulis konten artikel di sini...',
            toolbar: [
                ['style', ['style']],
                ['font', ['bold', 'underline', 'clear']],
                ['fontname', ['fontname']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'video']],
                ['view', ['fullscreen', 'codeview', 'help']]
            ]
        });
    });

    // Image Preview
    function previewImage(event) {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                document.getElementById('preview').src = e.target.result;
                document.getElementById('imagePreview').style.display = 'block';
            }
            reader.readAsDataURL(file);
        }
    }

    // Remove Image
    function removeImage() {
        document.getElementById('image').value = '';
        document.getElementById('imagePreview').style.display = 'none';
        document.getElementById('preview').src = '';
    }

    // Confirm Delete
    function confirmDelete() {
        if (confirm('Apakah Anda yakin ingin menghapus artikel ini? Tindakan ini tidak dapat dibatalkan.')) {
            document.getElementById('delete-form').submit();
        }
    }
</script>
@endpush
@endsection