@extends('admin.layouts.admin')
@section('title', 'Quản lí thông báo hệ thống')

@section('content')
<style>
    .notification-card {
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
        border: none;
    }
    
    .notification-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }
    
    .ribbon-modern {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 10px 20px;
        border-radius: 0 0 15px 15px;
        font-weight: 600;
        text-align: center;
        margin-bottom: 0;
        position: relative;
    }
    
    .ribbon-modern:before {
        content: '';
        position: absolute;
        top: 0;
        left: -10px;
        width: 0;
        height: 0;
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-right: 10px solid #667eea;
    }
    
    .ribbon-modern:after {
        content: '';
        position: absolute;
        top: 0;
        right: -10px;
        width: 0;
        height: 0;
        border-top: 20px solid transparent;
        border-bottom: 20px solid transparent;
        border-left: 10px solid #764ba2;
    }
    
    .btn-gradient {
        background: linear-gradient(45deg, #667eea, #764ba2);
        border: none;
        color: white;
        transition: all 0.3s ease;
    }
    
    .btn-gradient:hover {
        background: linear-gradient(45deg, #764ba2, #667eea);
        transform: translateY(-2px);
        color: white;
    }
    
    .table-modern {
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }
    
    .table-modern thead {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }
    
    .table-modern tbody tr:hover {
        background-color: #f8f9ff;
        transform: scale(1.01);
        transition: all 0.3s ease;
    }
    
    .action-btn {
        margin: 2px;
        border-radius: 8px;
        transition: all 0.3s ease;
    }
    
    .action-btn:hover {
        transform: translateY(-2px);
    }
    
    .form-floating-modern {
        position: relative;
        margin-bottom: 1.5rem;
    }
    
    .form-floating-modern .form-control {
        border-radius: 10px;
        border: 2px solid #e9ecef;
        transition: all 0.3s ease;
    }
    
    .form-floating-modern .form-control:focus {
        border-color: #667eea;
        box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    }
    
    .content-preview {
        max-width: 300px;
        max-height: 100px;
        overflow: hidden;
        position: relative;
    }
    
    .content-preview::after {
        content: '...';
        position: absolute;
        bottom: 0;
        right: 0;
        background: white;
        padding-left: 20px;
    }
    
    .notification-modal .modal-content {
        border-radius: 15px;
        border: none;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    }
    
    .notification-modal .modal-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 15px 15px 0 0;
        border: none;
    }
    
    .fade-in {
        animation: fadeIn 0.5s ease-in;
    }
    
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(20px); }
        to { opacity: 1; transform: translateY(0); }
    }
    
    .status-badge {
        padding: 5px 15px;
        border-radius: 20px;
        font-size: 0.85em;
        font-weight: 600;
    }
    
    .status-active {
        background: linear-gradient(45deg, #28a745, #20c997);
        color: white;
    }
    
    .status-inactive {
        background: linear-gradient(45deg, #6c757d, #adb5bd);
        color: white;
    }
</style>

<div class="row fade-in">
    <!-- Form thêm/sửa thông báo -->
    <div class="col-lg-4 col-md-12 mb-4">
        <div class="card notification-card">
            <div class="card-header p-0">
                <div class="ribbon-modern" id="form-title">THÊM THÔNG BÁO MỚI</div>
            </div>
            <div class="card-body p-4">
                <form id="notification-form" action="{{ route('admin.notify.system.create') }}" method="POST">
                    @csrf
                    <input type="hidden" name="_method" value="POST" id="form-method">
                    <input type="hidden" name="notification_id" id="notification_id">
                    
                    <div class="form-floating-modern">
                        <input type="text" class="form-control" name="title" id="title" placeholder="Tiêu đề" required>
                        <label for="title">Tiêu đề thông báo</label>
                    </div>
                    
                    <div class="form-floating-modern">
                        <select name="color" id="color" class="form-select">
                            <option value="primary">🔵 Xanh dương (Thông tin)</option>
                            <option value="success">🟢 Xanh lá (Thành công)</option>
                            <option value="warning">🟡 Vàng (Cảnh báo)</option>
                            <option value="danger">🔴 Đỏ (Khẩn cấp)</option>
                            <option value="info">🔷 Xanh nhạt (Thông báo)</option>
                            <option value="secondary">⚫ Xám (Bình thường)</option>
                        </select>
                        <label for="color">Mức độ ưu tiên</label>
                    </div>
                    
                    <div class="form-group mb-3">
                        <label for="content" class="form-label fw-bold">Nội dung thông báo</label>
                        <textarea class="form-control" id="content" name="content" placeholder="Nhập nội dung thông báo..." style="height: 300px; border-radius: 10px; border: 2px solid #e9ecef;" required></textarea>
                    </div>
                    
                    <div class="form-group d-grid gap-2">
                        <button type="submit" class="btn btn-gradient btn-lg" id="submit-btn">
                            <i class="fas fa-plus-circle me-2"></i>Thêm thông báo
                        </button>
                        <button type="button" class="btn btn-outline-secondary" id="cancel-btn" onclick="resetForm()" style="display: none;">
                            <i class="fas fa-times me-2"></i>Hủy chỉnh sửa
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- Danh sách thông báo -->
    <div class="col-lg-8 col-md-12">
        <div class="card notification-card">
            <div class="card-header p-0">
                <div class="ribbon-modern">📋 DANH SÁCH THÔNG BÁO</div>
            </div>
            <div class="card-body p-4">
                <div class="table-responsive">
                    <table class="table table-modern mb-0">
                        <thead>
                            <tr>
                                <th style="width: 60px;">#</th>
                                <th style="width: 120px;">Thao tác</th>
                                <th style="width: 100px;">Người đăng</th>
                                <th style="width: 200px;">Tiêu đề</th>
                                <th>Nội dung</th>
                                <th style="width: 120px;">Ngày tạo</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($noticeSystems as $notification)
                                <tr>
                                    <td>
                                        <span class="badge bg-gradient-primary">{{ $notification->id }}</span>
                                    </td>
                                    <td>
                                        <div class="btn-group-vertical" role="group">
                                            <button onclick="viewNotification({{ $notification->id }})" 
                                                    class="action-btn btn btn-info btn-sm" 
                                                    title="Xem chi tiết"
                                                    data-bs-toggle="modal" 
                                                    data-bs-target="#viewModal">
                                                <i class="fas fa-eye"></i>
                                            </button>
                                            <button onclick="editNotification({{ $notification }})" 
                                                    class="action-btn btn btn-warning btn-sm" 
                                                    title="Chỉnh sửa">
                                                <i class="fas fa-edit"></i>
                                            </button>
                                            <button onclick="confirmDelete('{{ route('admin.notify.system.delete', ['id' => $notification->id]) }}')"
                                                    class="action-btn btn btn-danger btn-sm" 
                                                    title="Xóa thông báo">
                                                <i class="fas fa-trash"></i>
                                            </button>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <div class="avatar-sm me-2">
                                                <span class="avatar-title rounded-circle bg-gradient-primary">
                                                    {{ substr($notification->user->username, 0, 1) }}
                                                </span>
                                            </div>
                                            <span class="fw-medium">{{ $notification->user->username }}</span>
                                        </div>
                                    </td>
                                    <td>
                                        <span class="fw-bold text-dark">{{ $notification->title }}</span>
                                        <div class="mt-1">
                                            <span class="status-badge status-active">
                                                <i class="fas fa-check-circle me-1"></i>Đang hoạt động
                                            </span>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="content-preview">
                                            {!! strip_tags($notification->content) !!}
                                        </div>
                                    </td>
                                    <td>
                                        <div class="text-muted">
                                            <small>
                                                <i class="fas fa-calendar me-1"></i>
                                                {{ $notification->created_at->format('d/m/Y') }}
                                            </small>
                                            <br>
                                            <small>
                                                <i class="fas fa-clock me-1"></i>
                                                {{ $notification->created_at->format('H:i') }}
                                            </small>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="text-center py-5">
                                        <div class="empty-state">
                                            <i class="fas fa-bell-slash fa-3x text-muted mb-3"></i>
                                            <h5 class="text-muted">Chưa có thông báo nào</h5>
                                            <p class="text-muted">Hãy tạo thông báo đầu tiên cho hệ thống</p>
                                        </div>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                @if($noticeSystems->hasPages())
                <div class="d-flex justify-content-center align-items-center mt-4">
                    {{ $noticeSystems->appends(request()->all())->links('pagination::bootstrap-4') }}
                </div>
                @endif
            </div>
        </div>
    </div>
</div>

<!-- Modal xem chi tiết thông báo -->
<div class="modal fade notification-modal" id="viewModal" tabindex="-1">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-eye me-2"></i>Chi tiết thông báo
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="info-item mb-3">
                            <label class="fw-bold text-muted">ID:</label>
                            <span id="view-id" class="ms-2"></span>
                        </div>
                        <div class="info-item mb-3">
                            <label class="fw-bold text-muted">Người đăng:</label>
                            <span id="view-user" class="ms-2"></span>
                        </div>
                        <div class="info-item mb-3">
                            <label class="fw-bold text-muted">Ngày tạo:</label>
                            <span id="view-date" class="ms-2"></span>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="info-item mb-3">
                            <label class="fw-bold text-muted">Mức độ ưu tiên:</label>
                            <span id="view-priority" class="ms-2"></span>
                        </div>
                    </div>
                </div>
                <hr>
                <div class="info-item mb-3">
                    <label class="fw-bold text-muted">Tiêu đề:</label>
                    <h5 id="view-title" class="mt-2 text-primary"></h5>
                </div>
                <div class="info-item">
                    <label class="fw-bold text-muted">Nội dung:</label>
                    <div id="view-content" class="mt-2 p-3 border rounded bg-light"></div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Đóng</button>
                <button type="button" class="btn btn-gradient" onclick="editFromModal()">
                    <i class="fas fa-edit me-2"></i>Chỉnh sửa
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('script')
<!-- CKEditor -->
<script src="https://cdn.ckeditor.com/4.22.1/full-all/ckeditor.js"></script>

<!-- SweetAlert2 -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    let editor;
    let currentNotification = null;
    let isEditMode = false;

    // Khởi tạo CKEditor khi trang load
    document.addEventListener('DOMContentLoaded', function() {
        initializeCKEditor();
    });

    // Khởi tạo trình soạn thảo CKEditor
    function initializeCKEditor() {
        if (editor) {
            editor.destroy();
        }
        
        CKEDITOR.replace('content', {
            extraPlugins: 'image2,uploadimage,uploadfile,autogrow,embed,autoembed,clipboard,dialog,dialogui,widget',
            removePlugins: 'resize',
            height: 300,
            filebrowserUploadMethod: 'form',
            toolbar: [
                { name: 'document', items: [ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ] },
                { name: 'clipboard', items: [ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ] },
                { name: 'editing', items: [ 'Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker', 'Scayt' ] },
                '/',
                { name: 'basicstyles', items: [ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat' ] },
                { name: 'paragraph', items: [ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl' ] },
                { name: 'links', items: [ 'Link', 'Unlink', 'Anchor' ] },
                { name: 'insert', items: [ 'Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ] },
                '/',
                { name: 'styles', items: [ 'Styles', 'Format', 'Font', 'FontSize' ] },
                { name: 'colors', items: [ 'TextColor', 'BGColor' ] },
                { name: 'tools', items: [ 'Maximize', 'ShowBlocks' ] }
            ]
        });
        
        editor = CKEDITOR.instances.content;
    }

    // Hàm xem chi tiết thông báo
    function viewNotification(id) {
        // Tìm thông báo trong danh sách
        fetch(`/admin/notify/system/${id}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    const notification = data.notification;
                    document.getElementById('view-id').textContent = notification.id;
                    document.getElementById('view-user').textContent = notification.user.username;
                    document.getElementById('view-date').textContent = new Date(notification.created_at).toLocaleString('vi-VN');
                    document.getElementById('view-title').textContent = notification.title;
                    document.getElementById('view-content').innerHTML = notification.content;
                    
                    // Hiển thị mức độ ưu tiên
                    const colorMap = {
                        'primary': '🔵 Thông tin',
                        'success': '🟢 Thành công', 
                        'warning': '🟡 Cảnh báo',
                        'danger': '🔴 Khẩn cấp',
                        'info': '🔷 Thông báo',
                        'secondary': '⚫ Bình thường'
                    };
                    document.getElementById('view-priority').innerHTML = 
                        `<span class="badge bg-${notification.color}">${colorMap[notification.color] || notification.color}</span>`;
                    
                    currentNotification = notification;
                } else {
                    Swal.fire('Lỗi!', 'Không thể tải thông tin thông báo', 'error');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                Swal.fire('Lỗi!', 'Có lỗi xảy ra khi tải dữ liệu', 'error');
            });
    }

    // Hàm chỉnh sửa thông báo
    function editNotification(notification) {
        isEditMode = true;
        currentNotification = notification;
        
        // Cập nhật form
        document.getElementById('form-title').textContent = 'CHỈNH SỬA THÔNG BÁO';
        document.getElementById('notification_id').value = notification.id;
        document.getElementById('form-method').value = 'PUT';
        document.getElementById('notification-form').action = `/admin/notify/system/update/${notification.id}`;
        
        // Điền dữ liệu vào form
        document.getElementById('title').value = notification.title;
        document.getElementById('color').value = notification.color || 'primary';
        
        // Cập nhật nội dung CKEditor
        if (editor && editor.setData) {
            editor.setData(notification.content);
        } else {
            document.getElementById('content').value = notification.content;
        }
        
        // Cập nhật nút submit
        document.getElementById('submit-btn').innerHTML = 
            '<i class="fas fa-save me-2"></i>Cập nhật thông báo';
        document.getElementById('submit-btn').classList.remove('btn-gradient');
        document.getElementById('submit-btn').classList.add('btn-success');
        
        // Hiển thị nút hủy
        document.getElementById('cancel-btn').style.display = 'block';
        
        // Cuộn đến form
        document.querySelector('.notification-card').scrollIntoView({ 
            behavior: 'smooth', 
            block: 'start' 
        });
        
        // Hiệu ứng highlight form
        const formCard = document.querySelector('.notification-card');
        formCard.style.border = '3px solid #ffc107';
        setTimeout(() => {
            formCard.style.border = 'none';
        }, 2000);
        
        // Focus vào tiêu đề
        setTimeout(() => {
            document.getElementById('title').focus();
        }, 500);
    }

    // Hàm chỉnh sửa từ modal
    function editFromModal() {
        if (currentNotification) {
            editNotification(currentNotification);
            // Đóng modal
            const modal = bootstrap.Modal.getInstance(document.getElementById('viewModal'));
            modal.hide();
        }
    }

    // Hàm reset form về chế độ thêm mới
    function resetForm() {
        isEditMode = false;
        currentNotification = null;
        
        // Reset form
        document.getElementById('notification-form').reset();
        document.getElementById('form-title').textContent = 'THÊM THÔNG BÁO MỚI';
        document.getElementById('notification_id').value = '';
        document.getElementById('form-method').value = 'POST';
        document.getElementById('notification-form').action = '{{ route('admin.notify.system.create') }}';
        
        // Reset nút submit
        document.getElementById('submit-btn').innerHTML = 
            '<i class="fas fa-plus-circle me-2"></i>Thêm thông báo';
        document.getElementById('submit-btn').classList.remove('btn-success');
        document.getElementById('submit-btn').classList.add('btn-gradient');
        
        // Ẩn nút hủy
        document.getElementById('cancel-btn').style.display = 'none';
        
        // Clear CKEditor
        if (editor && editor.setData) {
            editor.setData('');
        }
        
        // Hiệu ứng
        Swal.fire({
            icon: 'info',
            title: 'Đã hủy chỉnh sửa',
            text: 'Form đã được đặt lại về chế độ thêm mới',
            timer: 1500,
            showConfirmButton: false
        });
    }

    // Hàm xác nhận xóa với SweetAlert2
    function confirmDelete(url) {
        Swal.fire({
            title: 'Xác nhận xóa thông báo',
            text: 'Bạn có chắc chắn muốn xóa thông báo này? Hành động này không thể hoàn tác!',
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#dc3545',
            cancelButtonColor: '#6c757d',
            confirmButtonText: '<i class="fas fa-trash me-2"></i>Xóa',
            cancelButtonText: '<i class="fas fa-times me-2"></i>Hủy',
            reverseButtons: true,
            customClass: {
                popup: 'animated fadeIn'
            }
        }).then((result) => {
            if (result.isConfirmed) {
                // Hiển thị loading
                Swal.fire({
                    title: 'Đang xóa...',
                    allowOutsideClick: false,
                    showConfirmButton: false,
                    willOpen: () => {
                        Swal.showLoading();
                    }
                });
                
                window.location.href = url;
            }
        });
    }

    // Xử lý form submit
    document.getElementById('notification-form').addEventListener('submit', function(e) {
        // Cập nhật nội dung từ CKEditor
        if (editor && editor.getData) {
            document.getElementById('content').value = editor.getData();
        }
        
        // Hiển thị loading
        const submitBtn = document.getElementById('submit-btn');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Đang xử lý...';
        submitBtn.disabled = true;
        
        // Nếu cần thiết, có thể thêm validation ở đây
        
        // Cho phép form submit tiếp tục
    });

    // Hiệu ứng smooth scroll cho các nút
    document.addEventListener('DOMContentLoaded', function() {
        // Thêm hiệu ứng cho các nút action
        const actionButtons = document.querySelectorAll('.action-btn');
        actionButtons.forEach(btn => {
            btn.addEventListener('mouseenter', function() {
                this.style.transform = 'translateY(-2px) scale(1.05)';
            });
            btn.addEventListener('mouseleave', function() {
                this.style.transform = 'translateY(0) scale(1)';
            });
        });
        
        // Thêm hiệu ứng cho table rows
        const tableRows = document.querySelectorAll('tbody tr');
        tableRows.forEach(row => {
            row.addEventListener('mouseenter', function() {
                this.style.backgroundColor = '#f8f9ff';
            });
            row.addEventListener('mouseleave', function() {
                this.style.backgroundColor = '';
            });
        });
    });

    // Toast notification cho các thao tác thành công
    @if(session('success'))
        Swal.fire({
            icon: 'success',
            title: 'Thành công!',
            text: '{{ session('success') }}',
            timer: 3000,
            showConfirmButton: false,
            toast: true,
            position: 'top-end'
        });
    @endif

    @if(session('error'))
        Swal.fire({
            icon: 'error',
            title: 'Có lỗi xảy ra!',
            text: '{{ session('error') }}',
            confirmButtonText: 'Đóng'
        });
    @endif

    // Auto-save draft (tùy chọn)
    let autoSaveInterval;
    function startAutoSave() {
        autoSaveInterval = setInterval(() => {
            if (editor && editor.getData() && !isEditMode) {
                const content = editor.getData();
                const title = document.getElementById('title').value;
                if (content.length > 10 || title.length > 0) {
                    // Lưu vào localStorage hoặc gửi request để lưu draft
                    console.log('Auto-saving draft...');
                }
            }
        }, 30000); // Auto-save mỗi 30 giây
    }

    // Khởi động auto-save
    // startAutoSave();
</script>
@endsection