@extends('dashboard.app')

@section('title', 'Tambah Berita')
@section('content')
    <div class="page-content">
        <nav class="page-breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item"><a href="{{ route('berita') }}">Berita Terkini</a></li>
                <li class="breadcrumb-item active" aria-current="page">Tambah Berita</li>
            </ol>
        </nav>

        <div class="row">
            <div class="stretch-card">
                <div class="card">
                    <div class="card-body">
                        <h4 class="card-title">Tambah Berita</h4>

                        @if ($errors->any())
                            <div id="error-alert" class="alert alert-danger">
                                <strong>Terjadi Kesalahan!</strong>
                                <ul>
                                    @foreach ($errors->all() as $error)
                                        <li>{{ $error }}</li>
                                    @endforeach
                                </ul>
                            </div>
                        @endif

                        <form method="POST" action="{{ route('berita.store') }}" enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="token" value="{{ $token }}">
                            <input type="hidden" name="security" value="{{ md5($token . $secret_key) }}">

                            <div class="form-group mb-3">
                                <label class="form-label">Judul Berita</label>
                                <input class="form-control" name="judul" placeholder="Masukan Judul" required>
                            </div>
                            <div class="form-group mb-3">
                                <label class="form-label">Ringkasan</label>
                                <input class="form-control" name="ringkasan" placeholder="Masukkan ringkasan" required>
                            </div>
                            <div class="form-group mb-3">
                                <label class="form-label">Tanggal Berita</label>
                                <input type="date" class="form-control" name="tanggal_berita" required>
                            </div>
                            <div class="form-group mb-3">
                                <label class="form-label">Foto Thumbnail (file .webp)</label>
                                <input type="file" name="file_foto"
                                    class="form-control dropify @error('file') is-invalid @enderror"
                                    data-allowed-file-extensions="webp">
                            </div>
                            <div class="form-group mb-3">
                                <label class="form-label">Isi Halaman</label>
                                <div id="editor-container" style="height: 500px; background: white; border-radius: 4px;"></div>
                                <textarea class="form-control" name="content" id="editor" style="display:none;" required></textarea>
                            </div>
                            <div class="form-group mb-3">
                                <button type="submit" class="btn btn-primary">Simpan</button>
                                <button type="reset" class="btn btn-danger">Reset</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @push('script')
        <!-- Quill Editor CSS & JS -->
        <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
        <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
        
        <!-- Dropify -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Dropify/0.2.2/js/dropify.min.js"></script>
        
        <style>
            .ql-container {
                min-height: 500px;
                max-height: 500px;
                font-size: 14px;
            }
            
            .ql-editor {
                min-height: 460px;
            }
            
            .ql-editor img {
                max-width: 100%;
                cursor: pointer;
                transition: all 0.1s ease;
                user-select: none;
            }
            
            .ql-editor img.selected {
                outline: 3px solid #0d6efd;
                outline-offset: 2px;
                box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.2);
            }
            
            .resize-handle {
                position: absolute;
                width: 12px;
                height: 12px;
                background-color: #0d6efd;
                border: 2px solid white;
                border-radius: 50%;
                z-index: 1000;
                box-shadow: 0 0 4px rgba(0,0,0,0.3);
                transition: transform 0.1s;
            }
            
            .resize-handle:hover {
                transform: scale(1.2);
                background-color: #0b5ed7;
            }
            
            .resize-handle.nw { cursor: nw-resize; }
            .resize-handle.n { cursor: n-resize; }
            .resize-handle.ne { cursor: ne-resize; }
            .resize-handle.w { cursor: w-resize; }
            .resize-handle.e { cursor: e-resize; }
            .resize-handle.sw { cursor: sw-resize; }
            .resize-handle.s { cursor: s-resize; }
            .resize-handle.se { cursor: se-resize; }
            
            .size-info {
                position: absolute;
                background: rgba(0,0,0,0.7);
                color: white;
                padding: 4px 8px;
                border-radius: 4px;
                font-size: 12px;
                font-family: monospace;
                z-index: 1001;
                pointer-events: none;
                white-space: nowrap;
            }
            
            /* Loading indicator untuk upload */
            .upload-loading {
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: rgba(0,0,0,0.8);
                color: white;
                padding: 10px 20px;
                border-radius: 8px;
                z-index: 9999;
                font-size: 14px;
            }
        </style>
        
        <script>
            $('.dropify').dropify();
            
            document.addEventListener('DOMContentLoaded', function() {
                // Setup CSRF Token untuk Ajax
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });
                
                // Inisialisasi Quill dengan custom handler untuk upload gambar
                var toolbarOptions = [
                    ['bold', 'italic', 'underline', 'strike'],
                    ['blockquote', 'code-block'],
                    [{ 'header': 1 }, { 'header': 2 }],
                    [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                    [{ 'script': 'sub'}, { 'script': 'super' }],
                    [{ 'indent': '-1'}, { 'indent': '+1' }],
                    [{ 'direction': 'rtl' }],
                    [{ 'size': ['small', false, 'large', 'huge'] }],
                    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                    [{ 'color': [] }, { 'background': [] }],
                    [{ 'font': [] }],
                    [{ 'align': [] }],
                    ['clean'],
                    ['link', 'image', 'video']
                ];
                
                var quill = new Quill('#editor-container', {
                    theme: 'snow',
                    placeholder: 'Tulis konten berita di sini...',
                    modules: {
                        toolbar: {
                            container: toolbarOptions,
                            handlers: {
                                'image': imageHandler
                            }
                        }
                    }
                });
                
                // Fungsi upload gambar ke server
                function imageHandler() {
                    var input = document.createElement('input');
                    input.setAttribute('type', 'file');
                    input.setAttribute('accept', 'image/*');
                    input.click();
                    
                    input.onchange = function() {
                        var file = input.files[0];
                        if (file) {
                            uploadImageToServer(file);
                        }
                    };
                }
                
                function uploadImageToServer(file) {
                    var formData = new FormData();
                    formData.append('image', file);
                    formData.append('_token', '{{ csrf_token() }}');
                    
                    // Tampilkan loading
                    showLoading('Uploading image...');
                    
                    $.ajax({
                        url: '{{ route("berita.upload.image") }}',
                        method: 'POST',
                        data: formData,
                        contentType: false,
                        processData: false,
                        success: function(response) {
                            hideLoading();
                            if (response.success) {
                                var range = quill.getSelection();
                                var index = range ? range.index : 0;
                                quill.insertEmbed(index, 'image', response.url);
                                quill.setSelection(index + 1);
                            } else {
                                alert('Upload failed: ' + response.message);
                            }
                        },
                        error: function(xhr) {
                            hideLoading();
                            alert('Error uploading image. Please try again.');
                            console.log(xhr.responseText);
                        }
                    });
                }
                
                function showLoading(message) {
                    var loadingDiv = document.createElement('div');
                    loadingDiv.id = 'upload-loading';
                    loadingDiv.className = 'upload-loading';
                    loadingDiv.innerHTML = message;
                    document.body.appendChild(loadingDiv);
                }
                
                function hideLoading() {
                    var loadingDiv = document.getElementById('upload-loading');
                    if (loadingDiv) loadingDiv.remove();
                }
                
                var textarea = document.getElementById('editor');
                if (textarea.value) {
                    quill.root.innerHTML = textarea.value;
                }
                
                quill.on('text-change', function() {
                    textarea.value = quill.root.innerHTML;
                });
                
                // =============== FITUR RESIZE GAMBAR ===============
                var selectedImage = null;
                var resizeHandles = [];
                var sizeInfo = null;
                var isResizing = false;
                var currentHandle = null;
                var startX, startY, startWidth, startHeight, startAspectRatio;
                var keepAspect = true;
                
                function createResizeHandles() {
                    removeResizeHandles();
                    var positions = ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se'];
                    positions.forEach(function(pos) {
                        var handle = document.createElement('div');
                        handle.className = 'resize-handle ' + pos;
                        document.body.appendChild(handle);
                        resizeHandles.push(handle);
                        
                        handle.addEventListener('mousedown', function(e) {
                            if (!selectedImage) return;
                            e.preventDefault();
                            e.stopPropagation();
                            isResizing = true;
                            currentHandle = pos;
                            startX = e.clientX;
                            startY = e.clientY;
                            startWidth = selectedImage.offsetWidth;
                            startHeight = selectedImage.offsetHeight;
                            startAspectRatio = startWidth / startHeight;
                            keepAspect = !e.shiftKey;
                            
                            document.addEventListener('mousemove', onMouseMove);
                            document.addEventListener('mouseup', onMouseUp);
                        });
                    });
                }
                
                function removeResizeHandles() {
                    resizeHandles.forEach(function(handle) {
                        if (handle && handle.parentNode) handle.parentNode.removeChild(handle);
                    });
                    resizeHandles = [];
                }
                
                function createSizeInfo() {
                    if (sizeInfo) return;
                    sizeInfo = document.createElement('div');
                    sizeInfo.className = 'size-info';
                    document.body.appendChild(sizeInfo);
                }
                
                function updateSizeInfo() {
                    if (!sizeInfo || !selectedImage) return;
                    var rect = selectedImage.getBoundingClientRect();
                    sizeInfo.style.left = (rect.left + 10) + 'px';
                    sizeInfo.style.top = (rect.top - 30) + 'px';
                    sizeInfo.innerHTML = Math.round(rect.width) + ' x ' + Math.round(rect.height);
                }
                
                function updateHandlesPosition() {
                    if (!selectedImage) return;
                    var rect = selectedImage.getBoundingClientRect();
                    
                    var positions = {
                        nw: { left: rect.left - 6, top: rect.top - 6 },
                        n: { left: rect.left + rect.width/2 - 6, top: rect.top - 6 },
                        ne: { left: rect.right - 6, top: rect.top - 6 },
                        w: { left: rect.left - 6, top: rect.top + rect.height/2 - 6 },
                        e: { left: rect.right - 6, top: rect.top + rect.height/2 - 6 },
                        sw: { left: rect.left - 6, top: rect.bottom - 6 },
                        s: { left: rect.left + rect.width/2 - 6, top: rect.bottom - 6 },
                        se: { left: rect.right - 6, top: rect.bottom - 6 }
                    };
                    
                    resizeHandles.forEach(function(handle) {
                        var pos = handle.className.split(' ')[1];
                        var p = positions[pos];
                        if (p) {
                            handle.style.left = p.left + 'px';
                            handle.style.top = p.top + 'px';
                        }
                    });
                    
                    updateSizeInfo();
                }
                
                function onMouseMove(e) {
                    if (!isResizing || !selectedImage) return;
                    e.preventDefault();
                    
                    var deltaX = e.clientX - startX;
                    var deltaY = e.clientY - startY;
                    var newWidth = startWidth;
                    var newHeight = startHeight;
                    
                    switch(currentHandle) {
                        case 'nw': newWidth = startWidth - deltaX; newHeight = startHeight - deltaY; break;
                        case 'n': newHeight = startHeight - deltaY; break;
                        case 'ne': newWidth = startWidth + deltaX; newHeight = startHeight - deltaY; break;
                        case 'w': newWidth = startWidth - deltaX; break;
                        case 'e': newWidth = startWidth + deltaX; break;
                        case 'sw': newWidth = startWidth - deltaX; newHeight = startHeight + deltaY; break;
                        case 's': newHeight = startHeight + deltaY; break;
                        case 'se': newWidth = startWidth + deltaX; newHeight = startHeight + deltaY; break;
                    }
                    
                    newWidth = Math.max(50, newWidth);
                    newHeight = Math.max(50, newHeight);
                    
                    if (keepAspect) {
                        if (currentHandle.includes('n') || currentHandle.includes('s')) {
                            newWidth = newHeight * startAspectRatio;
                        } else if (currentHandle.includes('w') || currentHandle.includes('e')) {
                            newHeight = newWidth / startAspectRatio;
                        } else {
                            if (Math.abs(deltaX) > Math.abs(deltaY)) {
                                newHeight = newWidth / startAspectRatio;
                            } else {
                                newWidth = newHeight * startAspectRatio;
                            }
                        }
                    }
                    
                    selectedImage.style.width = newWidth + 'px';
                    selectedImage.style.height = newHeight + 'px';
                    updateHandlesPosition();
                }
                
                function onMouseUp() {
                    isResizing = false;
                    currentHandle = null;
                    document.removeEventListener('mousemove', onMouseMove);
                    document.removeEventListener('mouseup', onMouseUp);
                    if (selectedImage) {
                        textarea.value = quill.root.innerHTML;
                        updateHandlesPosition();
                    }
                }
                
                function bindImageEvents() {
                    var images = quill.root.querySelectorAll('img');
                    images.forEach(function(img) {
                        img.removeEventListener('click', onImageClick);
                        img.addEventListener('click', onImageClick);
                    });
                }
                
                function onImageClick(e) {
                    e.preventDefault();
                    e.stopPropagation();
                    
                    if (selectedImage) {
                        selectedImage.classList.remove('selected');
                    }
                    
                    selectedImage = this;
                    selectedImage.classList.add('selected');
                    
                    if (e.detail === 2) {
                        selectedImage.style.width = '';
                        selectedImage.style.height = '';
                        updateHandlesPosition();
                        textarea.value = quill.root.innerHTML;
                        return;
                    }
                    
                    createResizeHandles();
                    createSizeInfo();
                    updateHandlesPosition();
                }
                
                quill.root.addEventListener('click', function(e) {
                    if (e.target.tagName !== 'IMG') {
                        if (selectedImage) {
                            selectedImage.classList.remove('selected');
                            selectedImage = null;
                            removeResizeHandles();
                            if (sizeInfo) {
                                sizeInfo.style.display = 'none';
                            }
                        }
                    } else {
                        if (sizeInfo) {
                            sizeInfo.style.display = 'block';
                        }
                    }
                });
                
                document.addEventListener('keydown', function(e) {
                    if (selectedImage && (e.key === 'Delete' || e.key === 'Del')) {
                        e.preventDefault();
                        selectedImage.remove();
                        selectedImage = null;
                        removeResizeHandles();
                        if (sizeInfo) sizeInfo.style.display = 'none';
                        textarea.value = quill.root.innerHTML;
                    }
                });
                
                var observer = new MutationObserver(function(mutations) {
                    mutations.forEach(function(mutation) {
                        if (mutation.addedNodes.length) {
                            bindImageEvents();
                        }
                    });
                });
                
                observer.observe(quill.root, { childList: true, subtree: true });
                bindImageEvents();
                
                window.addEventListener('resize', function() {
                    if (selectedImage) updateHandlesPosition();
                });
                
                quill.root.addEventListener('scroll', function() {
                    if (selectedImage) updateHandlesPosition();
                });
                
                document.querySelector('button[type="reset"]').addEventListener('click', function(e) {
                    setTimeout(function() {
                        quill.root.innerHTML = '';
                        textarea.value = '';
                        if (selectedImage) {
                            selectedImage.classList.remove('selected');
                            selectedImage = null;
                        }
                        removeResizeHandles();
                        if (sizeInfo) sizeInfo.style.display = 'none';
                    }, 10);
                });
            });
        </script>
    @endpush
@endsection