@extends('operations.layout.mainlayout')

@section('content')
<style>
.item {
    background-color: rgb(18 221 24 / 13%) !important;
}

#ai-recommendations-table {
    font-size: 14px;
}

.btn-blz {
    color: var(--blazma-primary);
    border-color: var(--blazma-primary);
    padding: 4px 16px;
    border-radius: 30px;
    font-size: 14px;
    margin: 2px;
    min-width: 80px;
    background: transparent;
}

.btn-blz:hover {
    color: #fff;
    background-color: var(--blazma-primary);
    border-color: var(--blazma-primary);
}

#ai-recommendations-table .badge {
    border-radius: 30px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: normal;
}

.badge-warning {
    background: #fd9843;
    color: #ffffff !important;
}

.badge-success {
    background: #28a745;
    color: #ffffff !important;
}

div.dataTables_wrapper div.dataTables_filter {
    display: inline;
    float: left;
}

.action-buttons {
    white-space: nowrap;
}

#ai-recommendations-table_wrapper .dataTables_paginate {
    float: right;
    margin-top: 10px;
}

#ai-recommendations-table_wrapper .dataTables_info {
    padding-top: 10px;
}

.table-responsive {
    overflow-x: hidden;
}

#ai-recommendations-table_wrapper .dt-buttons {
    float: right;
}

#ai-recommendations-table_filter {
    float: left;
}

#ai-recommendations-table_filter input {
    border-radius: 30px;
    border: 1px solid #ddd;
    padding: 4px 12px;
}

.ai-packages-modal .modal-dialog {
    max-width: 95vw;
    width: 1400px;
    margin: 20px auto;
}

.ai-packages-modal .modal-content {
    height: 85vh;
    border: none;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.ai-packages-modal .modal-header {
    background: linear-gradient(135deg, var(--blazma-primary) 0%, #9d2d4a 100%);
    color: white;
    border-radius: 12px 12px 0 0;
    padding: 20px 30px;
    border: none;
}

.ai-packages-modal .modal-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.ai-packages-modal .close {
    color: white;
    opacity: 0.8;
    font-size: 28px;
    font-weight: 300;
}

.ai-packages-modal .close:hover {
    opacity: 1;
    color: white;
}



.packages-navigation {
    background: white;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 20px;
    overflow-x: auto;
}

.packages-tabs {
    display: flex;
    gap: 2px;
    min-width: max-content;
}

.package-tab {
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: #64748b;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    position: relative;
    outline: none;
}

.package-tab:focus {
    outline: none;
    border: none;
    border-bottom: 3px solid transparent;
}

.package-tab:hover {
    color: var(--blazma-primary);
    background: #f1f5f9;
}

.package-tab.active {
    color: var(--blazma-primary);
    border: none;
    border-bottom: 3px solid var(--blazma-primary);
    background: #f8fafc;
    outline: none;
}



.packages-content {
    flex: 1;
    overflow-y: auto;
    padding: 15px;
    background: #fafbfc;
    position: relative;
}

.package-editor {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    display: none;
}

.package-editor.active {
    display: block;
}



.package-editor-body {
    padding: 15px;
}

.language-tabs {
    display: flex;
    margin-bottom: 15px;
    border-bottom: 1px solid #e2e8f0;
}

.language-tab {
    padding: 10px 20px;
    background: transparent;
    border: none;
    color: #64748b;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 2px solid transparent;
    outline: none;
}

.language-tab:focus {
    outline: none;
    border: none;
    border-bottom: 2px solid transparent;
}

.language-tab:hover {
    color: var(--blazma-primary);
}

.language-tab.active {
    color: var(--blazma-primary);
    border: none;
    border-bottom: 2px solid var(--blazma-primary);
    outline: none;
}

.ai-summary-modal .language-tab.active {
    color: var(--blazma-primary);
    border-bottom: 2px solid var(--blazma-primary);
}

.ai-summary-modal .language-tab:hover {
    color: var(--blazma-primary);
}

.language-content {
    display: none;
}

.language-content.active {
    display: block;
}

.editor-wrapper {
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.editor-wrapper:focus-within {
    border-color: var(--blazma-primary);
}

.editor-wrapper .ck-editor__editable {
    min-height: 400px;
    padding: 20px;
    border: none;
    font-size: 14px;
}

.ai-packages-modal .modal-footer {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 20px 30px;
    border-radius: 0 0 12px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-info {
    color: #64748b;
    font-size: 13px;
}

.footer-actions {
    display: flex;
    gap: 12px;
}

.btn-modern {
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 13px;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.btn-modern.btn-secondary {
    background: #e2e8f0;
    color: #475569;
}

.btn-modern.btn-secondary:hover {
    background: #cbd5e1;
}

.btn-modern.btn-primary {
    background: linear-gradient(135deg, var(--blazma-primary) 0%, #9d2d4a 100%);
    color: white;
}

.btn-modern.btn-primary:hover {
    background: linear-gradient(135deg, #9d2d4a 0%, #7a1f35 100%);
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(var(--blazma-primary-rgb), 0.3);
}

.btn-modern.btn-success {
    background: var(--blazma-primary) !important;
    background-color: var(--blazma-primary) !important;
    border: 1px solid var(--blazma-primary) !important;
    color: white !important;
}

.btn-modern.btn-success:hover {
    background: white !important;
    background-color: white !important;
    border: 1px solid var(--blazma-primary) !important;
    color: black !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(var(--blazma-primary-rgb), 0.3);
}

.loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 250, 252, 0.95);
    backdrop-filter: blur(4px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    display: none;
    border-radius: 8px;
}

.loading-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(var(--blazma-primary-rgb), 0.1);
    border-top: 4px solid var(--blazma-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 15px;
    box-shadow: 0 4px 20px rgba(var(--blazma-primary-rgb), 0.15);
}

.loading-text {
    color: var(--blazma-primary);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    margin-top: 10px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ai-summary-modal .modal-dialog {
    max-width: 90vw;
    width: 1200px;
    margin: 20px auto;
}

.ai-summary-modal .modal-content {
    height: 85vh;
    border: none;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.ai-summary-modal .modal-header {
    background: linear-gradient(135deg, var(--blazma-primary) 0%, #9d2d4a 100%);
    color: white;
    border-radius: 12px 12px 0 0;
    padding: 20px 30px;
    border: none;
}

.ai-summary-modal .modal-title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
}

.ai-summary-modal .close {
    color: white;
    opacity: 0.8;
    font-size: 28px;
    font-weight: 300;
}

.ai-summary-modal .close:hover {
    opacity: 1;
    color: white;
}

.summary-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #fafbfc;
    position: relative;
}

.summary-editor-container {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
}

.section-group {
    margin-bottom: 25px;
}

.section-group:last-child {
    margin-bottom: 0;
}

.section-title {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: white;
    padding: 12px 20px;
    margin: 0 0 15px 0;
    font-size: 16px;
    font-weight: 600;
}

.section-title.tests-section {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.section-title.summary-section {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}

.summary-sections {
    padding: 20px;
}

.summary-sections .editor-wrapper {
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s ease;
    background: #ffffff;
}

.summary-sections .editor-wrapper:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.section-group:nth-child(even) .editor-wrapper:focus-within {
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.1);
}

.summary-sections .editor-wrapper .ck-editor__editable {
    min-height: 300px;
    padding: 20px;
    border: none;
    font-size: 14px;
    background: #fafbfc;
}

.summary-content {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}
</style>
<link href="/css/operations.css?v={{ filemtime(public_path('css/operations.css')) }}" rel="stylesheet">

<div class="content-header p-0">
    <div class="container-fluid card m-0">
        <div class="row">
            <div class="col-sm-6 m-0 card">
                <h1 class="card-body m-0 text-dark" style="color: var(--blazma-text)!important;">AI Recommendation Approval</h1>
            </div>
        </div>
    </div>
</div>

<section class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-body">
                        <div class="table-responsive">
                            <table id="ai-recommendations-table" class="table table-bordered table-striped">
                                <thead>
                                    <tr>
                                        <th>Patient Name</th>
                                        <th>Identification</th>
                                        <th>Order ID</th>
                                        <th style="width: 120px;">Status</th>
                                        <th style="width: 240px;">Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($recommendations as $recommendation)
                                    <tr>
                                        <td>{{ $recommendation->ENDUSERLABORDER->eNDUSER->FULL_NAME }}</td>
                                        <td>{{ $recommendation->IDENTIFICATION }}</td>
                                        <td>{{ $recommendation->END_USER_LAB_ORDER_ID }}</td>
                                        <td class="text-center">
                                            <span class="badge {{ $recommendation->STATUS_ID == 0 ? 'badge-warning' : 'badge-success' }}">
                                                {{ $recommendation->STATUS_ID == 0 ? 'Pending' : 'Approved' }}
                                            </span>
                                        </td>
                                        <td class="action-buttons">
                                            <button class="btn btn-blz view-recommendation"
                                                data-id="{{ $recommendation->ID }}"
                                                data-packages="{{ json_encode($recommendation->packages->map(function($package) {
                                                    return [
                                                        'id' => $package->ID,
                                                        'name' => $package->ENDUSERLABORDERPACKAGE && $package->ENDUSERLABORDERPACKAGE->lABCATEGORYPACKAGE
                                                            ? $package->ENDUSERLABORDERPACKAGE->lABCATEGORYPACKAGE->NAME_EN
                                                            : 'Package ' . $package->ID,
                                                        'ai_result_ar' => $package->AI_RESULT_AR ?? '',
                                                        'ai_result_en' => $package->AI_RESULT_EN ?? ''
                                                    ];
                                                })) }}">
                                                <i class="fas fa-eye"></i> View
                                            </button>
                                            <button class="btn btn-blz edit-summary"
                                                data-id="{{ $recommendation->ID }}"
                                                data-summary-ar="{{ $recommendation->SUMMARY_RESULT ?? '' }}"
                                                data-summary-en="{{ $recommendation->SUMMARY_RESULT_EN ?? '' }}"
                                                data-loinc-codes="{{ $recommendation->LOINC_CODES ?? '' }}"
                                                data-ai-result-ar="{{ $recommendation->AI_RESULT ?? '' }}"
                                                data-ai-result-en="{{ $recommendation->AI_RESULT_EN ?? '' }}">
                                                <i class="fas fa-edit"></i> Summary
                                            </button>
                                            @if($recommendation->STATUS_ID == 0)
                                            <button class="prime-btn approve-recommendation" data-id="{{ $recommendation->ID }}">
                                                <i class="fas fa-check"></i> Approve
                                            </button>
                                            @endif
                                            {{--<a href="/orders/{{$recommendation->END_USER_LAB_ORDER_ID}}/ai-recommendation/{{$recommendation->IDENTIFICATION}}/pdf" class="btn btn-blz" target="_blank">Preview</a>--}}
                                        </td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<div class="modal fade ai-packages-modal" id="recommendationModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">
                    <i class="fas fa-brain mr-2"></i>
                    AI Recommendation Packages
                </h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>



            <div class="packages-navigation mt-2">
                <div class="packages-tabs" id="packages-tabs">
                </div>
            </div>

            <div class="packages-content">
                <div id="packages-editors">
                </div>
                <div class="loading-overlay" id="loading-overlay">
                    <div class="loading-text">
                        <i class="fas fa-brain mr-2"></i>
                        Loading AI Recommendations...
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <div class="footer-info">
                </div>
                <div class="footer-actions">
                    <button type="button" class="btn-modern btn-secondary" data-dismiss="modal">
                        <i class="fas fa-times mr-2"></i>Close
                    </button>
                    <button type="button" class="btn-modern btn-success save-all-packages">
                        <i class="fas fa-save mr-2"></i>Save All Changes
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade ai-summary-modal" id="summaryModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">
                    <i class="fas fa-chart-line mr-2"></i>
                    Edit Summary & Recommended Tests
                </h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>

            <div class="summary-content">
                <div class="summary-editor-container">
                    <div class="language-tabs">
                        <button class="language-tab active" data-language="ar" data-section="summary">
                            <i class="fas fa-language mr-1"></i>العربية
                        </button>
                        <button class="language-tab" data-language="en" data-section="summary">
                            <i class="fas fa-language mr-1"></i>English
                        </button>
                    </div>

                    <div class="summary-sections">
                        <div class="language-content active" data-language="ar" data-section="summary">
                            <div class="section-group">
                                <h5 class="section-title summary-section">
                                    <i class="fas fa-clipboard-list mr-2"></i>
                                    ملخص النتائج
                                </h5>
                                <div class="editor-wrapper">
                                    <div id="summary-editor-ar" dir="rtl"></div>
                                </div>
                            </div>
                            <div class="section-group">
                                <h5 class="section-title tests-section">
                                    <i class="fas fa-vials mr-2"></i>
                                    الفحوصات المقترحة
                                </h5>
                                <div class="editor-wrapper">
                                    <div id="tests-editor-ar" dir="rtl"></div>
                                </div>
                            </div>
                        </div>

                        <div class="language-content" data-language="en" data-section="summary">
                            <div class="section-group">
                                <h5 class="section-title summary-section">
                                    <i class="fas fa-clipboard-list mr-2"></i>
                                    Results Summary
                                </h5>
                                <div class="editor-wrapper">
                                    <div id="summary-editor-en" dir="ltr"></div>
                                </div>
                            </div>
                            <div class="section-group">
                                <h5 class="section-title tests-section">
                                    <i class="fas fa-vials mr-2"></i>
                                    Recommended Tests
                                </h5>
                                <div class="editor-wrapper">
                                    <div id="tests-editor-en" dir="ltr"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="loading-overlay" id="summary-loading-overlay">
                        <div class="loading-text">
                            <i class="fas fa-chart-line mr-2"></i>
                            Loading Summary & Tests...
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <div class="footer-info">
                </div>
                <div class="footer-actions">
                    <button type="button" class="btn-modern btn-secondary" data-dismiss="modal">
                        <i class="fas fa-times mr-2"></i>Close
                    </button>
                    <button type="button" class="btn-modern btn-success save-summary-changes">
                        <i class="fas fa-save mr-2"></i>Save All Changes
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('footer-scripts')
<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/translations/ar.js"></script>
<script>
let currentRecommendationId;
let currentPackages = [];
let packageEditors = {};
let modifiedPackages = new Set();
let currentActivePackage = null;
let searchTimeout = null;

let currentSummaryRecommendationId;
let summaryEditors = {};
let currentSummaryData = {};

$(document).ready(function() {
    $('#ai-recommendations-table').DataTable({
        dom: '<"row"<"col-sm-6"f><"col-sm-6"B>>rt<"row"<"col-sm-12"ip>>',
        language: {
            paginate: {
                next: '&#8594;',
                previous: '&#8592;',
            },
            searchPlaceholder: "Search here"
        },
        buttons: ['copy', 'csv', 'excel', 'pdf', 'print'],
        pageLength: 10,
        lengthChange: false
    });





    function markPackageAsModified(packageId) {
        modifiedPackages.add(packageId);
    }

    function createPackageTabs() {
        const tabsContainer = $('#packages-tabs');
        tabsContainer.empty();

        currentPackages.forEach((package, index) => {
            const tabHtml = `
                <button class="package-tab ${index === 0 ? 'active' : ''}"
                        data-package-id="${package.id}"
                        data-package-name="${package.name}">
                    ${package.name}
                </button>
            `;
            tabsContainer.append(tabHtml);
        });
    }

    function createPackageEditorHTML(packageData) {
        const editorHtml = `
            <div class="package-editor ${currentActivePackage === packageData.id ? 'active' : ''}"
                 data-package-id="${packageData.id}">
                <div class="package-editor-body">
                    <div class="language-tabs">
                        <button class="language-tab active" data-language="ar" data-package-id="${packageData.id}">
                            <i class="fas fa-language mr-1"></i>العربية
                        </button>
                        <button class="language-tab" data-language="en" data-package-id="${packageData.id}">
                            <i class="fas fa-language mr-1"></i>English
                        </button>
                    </div>
                    <div class="language-content active" data-language="ar" data-package-id="${packageData.id}">
                        <div class="editor-wrapper">
                            <div id="editor-ar-${packageData.id}" dir="rtl"></div>
                        </div>
                    </div>
                    <div class="language-content" data-language="en" data-package-id="${packageData.id}">
                        <div class="editor-wrapper">
                            <div id="editor-en-${packageData.id}" dir="ltr"></div>
                        </div>
                    </div>
                </div>
            </div>
        `;

        $('#packages-editors').append(editorHtml);
    }

    function createCKEditor(packageId, language, elementId) {
        const config = {
            language: language,
            toolbar: {
                items: [
                    'heading', '|',
                    'bold', 'italic', '|',
                    'link', 'bulletedList', 'numberedList', '|',
                    'outdent', 'indent', '|',
                    'blockQuote', 'insertTable', '|',
                    'undo', 'redo'
                ],
                shouldNotGroupWhenFull: true
            },
            heading: {
                options: [
                    { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                    { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                    { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                    { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' }
                ]
            },
            table: {
                contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']
            }
        };

        return ClassicEditor.create(document.querySelector(`#${elementId}`), config);
    }

    $(document).on('click', '.view-recommendation', function() {
        currentRecommendationId = $(this).data('id');
        currentPackages = $(this).data('packages');
        modifiedPackages.clear();
        packageEditors = {};
        currentActivePackage = currentPackages.length > 0 ? currentPackages[0].id : null;

        $('#loading-overlay').show();

        createPackageTabs();

        $('#packages-editors').empty();

        currentPackages.forEach((package, index) => {
            createPackageEditorHTML(package);
        });

        if (currentActivePackage) {
            $('#current-package-info').text(`Editing: ${currentPackages[0].name}`);
        }

        setTimeout(() => {
            initializeAllEditors();
        }, 500);

        $('#recommendationModal').modal('show');
    });

    function initializeAllEditors() {
        destroyPackageEditors();
        let editorPromises = [];

        currentPackages.forEach(package => {
            if (document.querySelector(`#editor-ar-${package.id}`)) {
                const arPromise = createCKEditor(package.id, 'ar', `editor-ar-${package.id}`)
                    .then(editor => {
                        packageEditors[`ar-${package.id}`] = editor;
                        let content = package.ai_result_ar || '';
                        if (content && !content.includes('<')) {
                            content = content.split('\n').map(line => line.trim()).filter(line => line).map(line => `<p>${line}</p>`).join('');
                        }
                        if (!content) {
                            content = '<p>لا توجد نتائج باللغة العربية لهذه الحزمة.</p>';
                        }

                        editor.setData(content);
                        editor.model.document.on('change:data', () => {
                            markPackageAsModified(package.id);
                        });
                    })
                    .catch(error => {
                        console.error(`Error creating Arabic editor for package ${package.id}:`, error);
                    });
                editorPromises.push(arPromise);
            }

            if (document.querySelector(`#editor-en-${package.id}`)) {
                const enPromise = createCKEditor(package.id, 'en', `editor-en-${package.id}`)
                    .then(editor => {
                        packageEditors[`en-${package.id}`] = editor;
                        let content = package.ai_result_en || '';
                        if (content && !content.includes('<')) {
                            content = content.split('\n').map(line => line.trim()).filter(line => line).map(line => `<p>${line}</p>`).join('');
                        }

                        if (!content) {
                            content = '<p>No English results available for this package.</p>';
                        }

                        editor.setData(content);
                        editor.model.document.on('change:data', () => {
                            markPackageAsModified(package.id);
                        });
                    })
                    .catch(error => {
                        console.error(`Error creating English editor for package ${package.id}:`, error);
                    });
                editorPromises.push(enPromise);
            }
        });

        Promise.all(editorPromises).then(() => {
            $('#loading-overlay').hide();
        }).catch(error => {
            console.error('Error initializing editors:', error);
            $('#loading-overlay').hide();
        });
    }

    $(document).on('click', '.package-tab', function() {
        const packageId = $(this).data('package-id');
        const packageName = $(this).data('package-name');
        $('.package-tab').removeClass('active');
        $(this).addClass('active');
        $('.package-editor').removeClass('active');
        $(`.package-editor[data-package-id="${packageId}"]`).addClass('active');
        currentActivePackage = packageId;
        $('#current-package-info').text(`Editing: ${packageName}`);
    });

    $(document).on('click', '.language-tab', function() {
        const language = $(this).data('language');
        const packageId = $(this).data('package-id');
        $(`.language-tab[data-package-id="${packageId}"]`).removeClass('active');
        $(this).addClass('active');
        $(`.language-content[data-package-id="${packageId}"]`).removeClass('active');
        $(`.language-content[data-language="${language}"][data-package-id="${packageId}"]`).addClass('active');
    });

    $(document).on('click', '.save-all-packages', function() {
        let savePromises = [];
        currentPackages.forEach(function(package) {
            const arEditor = packageEditors[`ar-${package.id}`];
            const enEditor = packageEditors[`en-${package.id}`];
            const aiResultAr = arEditor ? arEditor.getData() : '';
            const aiResultEn = enEditor ? enEditor.getData() : '';
            const promise = $.ajax({
                url: '/operations/ai-recommendation/update-package',
                method: 'POST',
                data: {
                    package_id: package.id,
                    recommendation_id: currentRecommendationId,
                    ai_result_ar: aiResultAr,
                    ai_result_en: aiResultEn,
                }
            });
            savePromises.push(promise);
        });

        Promise.all(savePromises).then(function() {
            $('#recommendationModal').modal('hide');
            location.reload();
        }).catch(function() {
            $('#recommendationModal').modal('hide');
            location.reload();
        });
    });

    $(document).on('click', '.approve-recommendation', function() {
        if (confirm('Are you sure you want to approve this recommendation?')) {
            const id = $(this).data('id');
            $.ajax({
                url: '/operations/ai-recommendation/approve',
                method: 'POST',
                data: {
                    id: id,
                },
                success: function(response) {
                    if (response.success) {
                        location.reload();
                    } else {
                        alert('Error: ' + response.message);
                    }
                },
                error: function(xhr) {
                    alert('Error occurred while approving');
                }
            });
        }
    });

    function extractSummaryFromAiResult(aiResult, language) {
        if (!aiResult) return '';
        const summaryPattern = language === 'ar'
            ? /ملخص النتائج\s*\n(.*?)(?=الفحوصات المقترحة|$)/s
            : /Results Summary\s*\n(.*?)(?=Recommended Tests|$)/s;

        const match = aiResult.match(summaryPattern);
        return match ? match[1].trim() : '';
    }

    function extractRecommendedTestsFromAiResult(aiResult, language) {
        if (!aiResult) return '';
        const testsPattern = language === 'ar'
            ? /الفحوصات المقترحة\s*\n(.*?)$/s
            : /Recommended Tests\s*\n(.*?)$/s;

        const match = aiResult.match(testsPattern);
        return match ? match[1].trim() : '';
    }

    function createSummaryCKEditor(elementId, language) {
        const config = {
            language: language,
            toolbar: {
                items: [
                    'heading', '|',
                    'bold', 'italic', '|',
                    'link', 'bulletedList', 'numberedList', '|',
                    'outdent', 'indent', '|',
                    'blockQuote', 'insertTable', '|',
                    'undo', 'redo'
                ],
                shouldNotGroupWhenFull: true
            },
            heading: {
                options: [
                    { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                    { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                    { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                    { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' }
                ]
            },
            table: {
                contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells']
            }
        };

        return ClassicEditor.create(document.querySelector(`#${elementId}`), config);
    }

    $(document).on('click', '.edit-summary', function() {
        currentSummaryRecommendationId = $(this).data('id');
        currentSummaryData = {
            summaryAr: $(this).data('summary-ar') || '',
            summaryEn: $(this).data('summary-en') || '',
            loincCodes: $(this).data('loinc-codes') || '',
            aiResultAr: $(this).data('ai-result-ar') || '',
            aiResultEn: $(this).data('ai-result-en') || ''
        };

        $('#summary-loading-overlay').show();
        summaryEditors = {};
        setTimeout(() => {
            initializeSummaryEditors();
        }, 500);

        $('#summaryModal').modal('show');
    });

    function destroySummaryEditors() {
        Object.keys(summaryEditors).forEach(key => {
            if (summaryEditors[key] && typeof summaryEditors[key].destroy === 'function') {
                try {
                    summaryEditors[key].destroy();
                } catch (error) {
                    console.error(`Error destroying editor ${key}:`, error);
                }
            }
        });
        summaryEditors = {};
    }

    function initializeSummaryEditors() {
        destroySummaryEditors();
        let editorPromises = [];
        const summaryArPromise = createSummaryCKEditor('summary-editor-ar', 'ar')
            .then(editor => {
                summaryEditors['summary-ar'] = editor;
                let content = currentSummaryData.summaryAr;

                if (!content && currentSummaryData.aiResultAr) {
                    content = extractSummaryFromAiResult(currentSummaryData.aiResultAr, 'ar');
                }

                if (content && !content.includes('<')) {
                    content = content.split('\n').map(line => line.trim()).filter(line => line).map(line => `<p>${line}</p>`).join('');
                }

                if (!content) {
                    content = '<p>لا يوجد ملخص نتائج متاح.</p>';
                }

                editor.setData(content);
            })
            .catch(error => {
                console.error('Error creating Arabic summary editor:', error);
            });

        const summaryEnPromise = createSummaryCKEditor('summary-editor-en', 'en')
            .then(editor => {
                summaryEditors['summary-en'] = editor;
                let content = currentSummaryData.summaryEn;

                if (!content && currentSummaryData.aiResultEn) {
                    content = extractSummaryFromAiResult(currentSummaryData.aiResultEn, 'en');
                }

                if (content && !content.includes('<')) {
                    content = content.split('\n').map(line => line.trim()).filter(line => line).map(line => `<p>${line}</p>`).join('');
                }

                if (!content) {
                    content = '<p>No summary results available.</p>';
                }

                editor.setData(content);
            })
            .catch(error => {
                console.error('Error creating English summary editor:', error);
            });

        const testsArPromise = createSummaryCKEditor('tests-editor-ar', 'ar')
            .then(editor => {
                summaryEditors['tests-ar'] = editor;
                let content = '';
                if (currentSummaryData.aiResultAr) {
                    content = extractRecommendedTestsFromAiResult(currentSummaryData.aiResultAr, 'ar');
                }
                if (content && !content.includes('<')) {
                    content = content.split('\n').map(line => line.trim()).filter(line => line).map(line => `<p>${line}</p>`).join('');
                }
                if (!content) {
                    content = '<p>لا توجد فحوصات مقترحة متاحة.</p>';
                }

                editor.setData(content);
            })
            .catch(error => {
                console.error('Error creating Arabic tests editor:', error);
            });

        const testsEnPromise = createSummaryCKEditor('tests-editor-en', 'en')
            .then(editor => {
                summaryEditors['tests-en'] = editor;
                let content = '';

                if (currentSummaryData.aiResultEn) {
                    content = extractRecommendedTestsFromAiResult(currentSummaryData.aiResultEn, 'en');
                }

                if (content && !content.includes('<')) {
                    content = content.split('\n').map(line => line.trim()).filter(line => line).map(line => `<p>${line}</p>`).join('');
                }

                if (!content) {
                    content = '<p>No recommended tests available.</p>';
                }

                editor.setData(content);
            })
            .catch(error => {
                console.error('Error creating English tests editor:', error);
            });

        editorPromises = [summaryArPromise, summaryEnPromise, testsArPromise, testsEnPromise];

        Promise.all(editorPromises).then(() => {
            $('#summary-loading-overlay').hide();
        }).catch(error => {
            console.error('Error initializing summary editors:', error);
            $('#summary-loading-overlay').hide();
        });
    }

    $(document).on('click', '.language-tab[data-section="summary"]', function() {
        const language = $(this).data('language');

        $('.language-tab[data-section="summary"]').removeClass('active');
        $(this).addClass('active');

        $('.language-content[data-section="summary"]').removeClass('active');
        $(`.language-content[data-language="${language}"][data-section="summary"]`).addClass('active');
    });

    $(document).on('click', '.save-summary-changes', function() {
        const summaryAr = summaryEditors['summary-ar'] ? summaryEditors['summary-ar'].getData() : '';
        const summaryEn = summaryEditors['summary-en'] ? summaryEditors['summary-en'].getData() : '';
        const testsAr = summaryEditors['tests-ar'] ? summaryEditors['tests-ar'].getData() : '';
        const testsEn = summaryEditors['tests-en'] ? summaryEditors['tests-en'].getData() : '';

        $.ajax({
            url: '/operations/ai-recommendation/update-summary',
            method: 'POST',
            data: {
                id: currentSummaryRecommendationId,
                summary_result: summaryAr,
                summary_result_en: summaryEn,
                recommended_tests_ar: testsAr,
                recommended_tests_en: testsEn,
                loinc_codes: currentSummaryData.loincCodes
            },
            success: function(response) {
                if (response.success) {
                    $('#summaryModal').modal('hide');
                    location.reload();
                } else {
                    alert('Error: ' + response.message);
                }
            },
            error: function(xhr) {
                alert('Error occurred while saving');
            }
        });
    });

    $('#summaryModal').on('hidden.bs.modal', function() {
        destroySummaryEditors();
        currentSummaryRecommendationId = null;
        currentSummaryData = {};
    });

    function destroyPackageEditors() {
        Object.keys(packageEditors).forEach(key => {
            if (packageEditors[key] && typeof packageEditors[key].destroy === 'function') {
                try {
                    packageEditors[key].destroy();
                } catch (error) {
                    console.error(`Error destroying package editor ${key}:`, error);
                }
            }
        });
        packageEditors = {};
    }

    $('#recommendationModal').on('hidden.bs.modal', function() {
        destroyPackageEditors();
        currentRecommendationId = null;
        currentPackages = [];
        modifiedPackages.clear();
        currentActivePackage = null;
    });
});
</script>
@endsection