@extends('layouts.app')

@section('title', 'Buat Pengumuman - SIAKAD')
@section('page-title', 'Buat Pengumuman')

@push('styles')
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<style>
.ql-toolbar.ql-snow {
    border-radius: 8px 8px 0 0;
    border-color: #dee2e6;
}
.ql-container.ql-snow {
    border-radius: 0 0 8px 8px;
    border-color: #dee2e6;
    font-family: inherit;
    font-size: 1rem;
}
.ql-editor {
    min-height: 250px;
}
.ql-editor img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 10px 0;
}
.ql-editor img.cm-image {
    cursor: pointer;
    transition: opacity 0.2s;
}
.ql-editor img.cm-image:hover {
    opacity: 0.8;
}
.image-resize-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: var(--primary);
    border-radius: 50%;
    cursor: nwse-resize;
}
/* Image Size Dropdown */
.ql-image-size {
    padding: 5px 10px;
}
.ql-image-size-menu {
    display: none;
    position: absolute;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 100;
}
.ql-image-size-menu.show {
    display: block;
}
.ql-image-size-menu button {
    display: block;
    width: 100%;
    padding: 6px 12px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    border-radius: 4px;
    font-size: 13px;
}
.ql-image-size-menu button:hover {
    background: #f5f5f5;
}
</style>
@endpush

@section('content')
<div class="row">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Buat Pengumuman Baru</h5>
            </div>
            <div class="card-body">
                <form action="{{ route('admin.announcement.store') }}" method="POST" enctype="multipart/form-data">
                    @csrf

                    <div class="mb-3">
                        <label for="title" class="form-label">Judul Pengumuman <span class="text-danger">*</span></label>
                        <input type="text" class="form-control @error('title') is-invalid @enderror" id="title" name="title" value="{{ old('title') }}" required>
                        @error('title')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <label for="content" class="form-label">Isi Pengumuman <span class="text-danger">*</span></label>
                        <input type="hidden" name="content" id="content" value="{{ old('content') }}">
                        <div id="editor" style="height: 250px;">{!! old('content') !!}</div>
                        @error('content')
                            <div class="invalid-feedback d-block">{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="row mb-3">
                        <div class="col-md-6">
                            <label for="priority" class="form-label">Prioritas</label>
                            <select class="form-select @error('priority') is-invalid @enderror" id="priority" name="priority">
                                <option value="low" {{ old('priority') == 'low' ? 'selected' : '' }}>Rendah</option>
                                <option value="normal" {{ old('priority') == 'normal' ? 'selected' : '' }} selected>Normal</option>
                                <option value="high" {{ old('priority') == 'high' ? 'selected' : '' }}>Penting</option>
                            </select>
                            @error('priority')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                        <div class="col-md-6">
                            <label for="target" class="form-label">Target</label>
                            <select class="form-select @error('target') is-invalid @enderror" id="target" name="target">
                                <option value="all" {{ old('target') == 'all' ? 'selected' : '' }}>Semua (Mahasiswa & Dosen)</option>
                                <option value="mahasiswa" {{ old('target') == 'mahasiswa' ? 'selected' : '' }}>Mahasiswa</option>
                                <option value="dosen" {{ old('target') == 'dosen' ? 'selected' : '' }}>Dosen</option>
                            </select>
                            @error('target')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <div class="mb-4">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="send_notification" name="send_notification" value="1" checked>
                            <label class="form-check-label" for="send_notification">
                                <strong>Kirim notifikasi ke target yang dipilih</strong>
                            </label>
                            <small class="text-muted d-block">Notifikasi akan muncul di dashboard target</small>
                        </div>
                    </div>

                    <div class="mb-4">
                        <label for="attachment" class="form-label">Lampiran (File PDF/DOC)</label>
                        <input type="file" class="form-control @error('attachment') is-invalid @enderror" id="attachment" name="attachment" accept=".pdf,.doc,.docx,.xls,.xlsx,.ppt,.pptx,.zip,.rar">
                        @error('attachment')
                            <div class="invalid-feedback">{{ $message }}</div>
                        @enderror
                        <small class="text-muted">Format: PDF, DOC, XLS, PPT, ZIP, RAR (Maks. 5MB). Gunakan editor di atas untuk menyisipkan gambar.</small>

                        <div id="filePreview" class="file-preview mt-2 d-none">
                            <div class="d-flex align-items-center justify-content-between p-2 border rounded bg-light">
                                <div class="d-flex align-items-center gap-2">
                                    <i class="bi bi-file-earmark text-primary fs-4"></i>
                                    <div>
                                        <div id="fileName" class="small fw-medium"></div>
                                        <div id="fileSize" class="text-muted" style="font-size: 11px;"></div>
                                    </div>
                                </div>
                                <button type="button" class="btn btn-sm btn-outline-danger" onclick="clearFile()">
                                    <i class="bi bi-x-lg"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary" onclick="submitForm()">
                            <i class="bi bi-check-lg me-2"></i>Simpan Pengumuman
                        </button>
                        <a href="{{ route('admin.announcement.index') }}" class="btn btn-outline-secondary">
                            Batal
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">Preview</h5>
            </div>
            <div class="card-body">
                <div id="previewCard" class="announcement-preview">
                    <div class="d-flex align-items-center gap-2 mb-2">
                        <span class="badge bg-primary" id="previewPriority">Normal</span>
                        <small class="text-muted">Baru saja</small>
                    </div>
                    <h6 id="previewTitle" class="mb-2">Judul Pengumuman</h6>
                    <div id="previewContent" class="text-muted small">Isi pengumuman akan muncul di sini...</div>
                </div>
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-header">
                <h5 class="mb-0"><i class="bi bi-info-circle me-2"></i>Tips</h5>
            </div>
            <div class="card-body">
                <ul class="mb-0 small text-muted">
                    <li><strong>Gambar:</strong> Klik ikon gambar di toolbar untuk menyisipkan gambar langsung</li>
                    <li class="mt-2"><strong>Format:</strong> Bold, Italic, Underline, List, dll</li>
                    <li class="mt-2"><strong>Lampiran:</strong> Untuk file PDF/DOC, bukan gambar</li>
                </ul>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const titleInput = document.getElementById('title');
    const prioritySelect = document.getElementById('priority');
    const previewTitle = document.getElementById('previewTitle');
    const previewContent = document.getElementById('previewContent');

    // Initialize Quill
    var quill = new Quill('#editor', {
        theme: 'snow',
        modules: {
            toolbar: [
                [{ 'header': [1, 2, 3, false] }],
                ['bold', 'italic', 'underline', 'strike'],
                [{ 'color': [] }, { 'background': [] }],
                [{ 'list': 'ordered'}, { 'list': 'bullet' }],
                [{ 'align': [] }],
                ['link', 'image'],
                ['clean']
            ]
        },
        placeholder: 'Tulis pengumuman di sini...'
    });

    // Add resize functionality to images
    quill.root.addEventListener('click', function(e) {
        const img = e.target;
        if (img.tagName === 'IMG') {
            showImageMenu(img);
        }
    });

    function showImageMenu(img) {
        // Remove existing menu
        const existingMenu = document.querySelector('.ql-image-size-menu');
        if (existingMenu) existingMenu.remove();

        // Create menu
        const menu = document.createElement('div');
        menu.className = 'ql-image-size-menu show';
        menu.innerHTML = `
            <button onclick="resizeImage(event, '${img.src}', '25%')">Kecil (25%)</button>
            <button onclick="resizeImage(event, '${img.src}', '50%')">Sedang (50%)</button>
            <button onclick="resizeImage(event, '${img.src}', '75%')">Besar (75%)</button>
            <button onclick="resizeImage(event, '${img.src}', '100%')">Penuh (100%)</button>
            <hr style="margin: 5px 0;">
            <button onclick="deleteImage(event)">Hapus Gambar</button>
        `;

        // Position menu
        const rect = img.getBoundingClientRect();
        menu.style.left = rect.left + 'px';
        menu.style.top = (rect.bottom + 5) + 'px';
        menu.style.position = 'fixed';

        document.body.appendChild(menu);

        // Close on click outside
        setTimeout(() => {
            document.addEventListener('click', closeMenuOnClickOutside);
        }, 100);
    }

    function closeMenuOnClickOutside(e) {
        const menu = document.querySelector('.ql-image-size-menu');
        if (menu && !menu.contains(e.target) && !e.target.matches('img')) {
            menu.remove();
            document.removeEventListener('click', closeMenuOnClickOutside);
        }
    }

    window.resizeImage = function(e, src, size) {
        e.stopPropagation();
        const editor = quill.root;
        const imgs = editor.querySelectorAll('img');
        for (let img of imgs) {
            if (img.src === src || img.src.includes(src.split('/').pop())) {
                img.style.width = size;
                img.style.height = 'auto';
            }
        }
        document.querySelector('.ql-image-size-menu').remove();
        document.removeEventListener('click', closeMenuOnClickOutside);
    };

    window.deleteImage = function(e) {
        e.stopPropagation();
        const editor = quill.root;
        const imgs = editor.querySelectorAll('img');
        const range = quill.getSelection();
        if (range) {
            quill.deleteText(range.index, 1);
        }
        document.querySelector('.ql-image-size-menu').remove();
        document.removeEventListener('click', closeMenuOnClickOutside);
    };

    function updatePreview() {
        previewTitle.textContent = titleInput.value || 'Judul Pengumuman';
        previewContent.innerHTML = quill.root.innerHTML || 'Isi pengumuman akan muncul di sini...';

        const priority = prioritySelect.value;
        const priorityLabels = { high: 'Penting', normal: 'Normal', low: 'Rendah' };
        const priorityClasses = { high: 'bg-danger', normal: 'bg-primary', low: 'bg-secondary' };

        document.getElementById('previewPriority').textContent = priorityLabels[priority];
        document.getElementById('previewPriority').className = 'badge ' + priorityClasses[priority];
    }

    titleInput.addEventListener('input', updatePreview);
    quill.on('text-change', updatePreview);
    prioritySelect.addEventListener('change', updatePreview);

    // Submit form
    window.submitForm = function() {
        document.getElementById('content').value = quill.root.innerHTML;
        return true;
    };

    // File input preview
    const fileInput = document.getElementById('attachment');
    const filePreview = document.getElementById('filePreview');
    const fileName = document.getElementById('fileName');
    const fileSize = document.getElementById('fileSize');

    fileInput.addEventListener('change', function() {
        if (this.files && this.files[0]) {
            const file = this.files[0];
            fileName.textContent = file.name;
            fileSize.textContent = formatFileSize(file.size);
            filePreview.classList.remove('d-none');
        }
    });

    window.clearFile = function() {
        fileInput.value = '';
        filePreview.classList.add('d-none');
    };

    function formatFileSize(bytes) {
        if (bytes >= 1048576) return (bytes / 1048576).toFixed(2) + ' MB';
        if (bytes >= 1024) return (bytes / 1024).toFixed(2) + ' KB';
        return bytes + ' B';
    }
});
</script>
@endpush
@endsection

<style>
.announcement-preview {
    background: linear-gradient(135deg, rgba(105, 108, 255, 0.05) 0%, rgba(105, 108, 255, 0.02) 100%);
    border: 1px solid rgba(105, 108, 255, 0.1);
    border-radius: 12px;
    padding: 16px;
}
.file-preview {
    animation: fadeIn 0.2s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}
</style>