@extends('back.layout')

@section('content')
    <main class="main-content w-full px-[var(--margin-x)] pb-8">
        <div class="flex items-center space-x-4 py-5 lg:py-6"></div>
        <div class="grid grid-cols-12 gap-4 sm:gap-5 lg:gap-6">
            <div class="col-span-12">
                <div class="card">
                    <div class="border-b border-slate-200 p-4 dark:border-navy-500 sm:px-5">
                        <div class="flex items-center space-x-2">
                            <div class="flex h-7 w-7 items-center justify-center rounded-lg bg-primary/10 p-1 text-primary dark:bg-accent-light/10 dark:text-accent-light">
                                <i class="fa-solid fa-edit"></i>
                            </div>
                            <h4 class="text-lg font-medium text-slate-700 dark:text-navy-100">
                                Show Service Description
                            </h4>
                        </div>
                    </div>

                    @if (session('message'))
                        <insula class="fixed top-4 right-4 z-50 max-w-sm rounded-lg border-l-4 {{ session('message_type', 'success') === 'success' ? 'border-green-500 bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200' : 'border-red-500 bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200' }} p-4 shadow-lg"
                             x-data="{ show: true }" x-show="show" x-init="setTimeout(() => show = false, 5000)"
                             x-transition:leave="transition ease-in-out duration-500" x-transition:leave-start="opacity-100"
                             x-transition:leave-end="opacity-0">
                            <div class="flex items-center space-x-3">
                                <svg class="h-6 w-6 {{ session('message_type', 'success') === 'success' ? 'text-green-500' : 'text-red-500' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="{{ session('message_type', 'success') === 'success' ? 'M5 13l4 4L19 7' : 'M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z' }}"></path>
                                </svg>
                                <span>{{ session('message') }}</span>
                            </div>
                        </div>
                    @endif

                    <div class="p-4 sm:p-5">
                        <div class="space-y-6">
                            <!-- Description en Anglais -->
                            <div class="card p-4">
                                <h3 class="text-lg font-medium text-slate-700 dark:text-navy-100 mb-4">
                                    <i class="fas fa-language mr-2"></i>Description (Anglais)
                                </h3>
                                <div class="prose max-w-none dark:prose-invert bg-slate-50 dark:bg-navy-700 p-4 rounded-lg">
                                    {!! $descriptionService->description ?? '<p class="text-slate-400 dark:text-navy-300 italic">Aucune description en anglais disponible</p>' !!}
                                </div>
                            </div>

                            <!-- Description en Français -->
                            <div class="card p-4">
                                <h3 class="text-lg font-medium text-slate-700 dark:text-navy-100 mb-4">
                                    <i class="fas fa-language mr-2"></i>Description (Français)
                                </h3>
                                <div class="prose max-w-none dark:prose-invert bg-slate-50 dark:bg-navy-700 p-4 rounded-lg">
                                    {!! $descriptionService->description_fr ?? '<p class="text-slate-400 dark:text-navy-300 italic">Aucune description en français disponible</p>' !!}
                                </div>
                            </div>

                            <!-- Boutons d'action -->
                            <div class="flex justify-end space-x-2 pt-4">
                                <a href="{{ route('description_services.edit', $descriptionService->id) }}" 
                                   class="btn space-x-2 bg-primary font-medium text-white hover:bg-primary-focus focus:bg-primary-focus active:bg-primary-focus/90 dark:bg-accent dark:hover:bg-accent-focus dark:focus:bg-accent-focus dark:active:bg-accent/90">
                                    <i class="fas fa-edit"></i>
                                    <span>Modifier</span>
                                </a>
                                <a href="{{ route('description_services.index') }}" 
                                   class="btn space-x-2 bg-slate-150 font-medium text-slate-800 hover:bg-slate-200 focus:bg-slate-200 active:bg-slate-200/80 dark:bg-navy-500 dark:text-navy-50 dark:hover:bg-navy-450 dark:focus:bg-navy-450 dark:active:bg-navy-450/90">
                                    <i class="fas fa-arrow-left"></i>
                                    <span>Retour</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection

@push('scripts')
    <script src="{{ asset('ckeditor/ckeditor.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM chargé, vérification de CKEditor...');
            if (typeof CKEDITOR === 'undefined') {
                console.error('CKEditor n’est pas chargé. Vérifiez le chemin : {{ asset('ckeditor/ckeditor.js') }}');
                alert('Erreur : CKEditor n’est pas chargé. Veuillez vérifier le chemin du script ou utiliser une version complète.');
                return;
            }

            console.log('CKEditor détecté, initialisation de l’éditeur...');
            const editorId = 'editor1';
            const element = document.getElementById(editorId);
            if (element) {
                CKEDITOR.replace(editorId, {
                    extraPlugins: 'list,uploadimage,image2,table,div,format,liststyle,widget,dialog,colorbutton,justify,indent,blockquote',
                    filebrowserUploadUrl: '{{ route('upload.image') }}?_token={{ csrf_token() }}',
                    uploadUrl: '{{ route('upload.image') }}?_token={{ csrf_token() }}',
                    toolbar: [
                        { name: 'document', items: ['Source', '-', 'Preview'] },
                        { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', 'PasteText', '-', 'Undo', 'Redo'] },
                        { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', '-', 'RemoveFormat'] },
                        { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', '-', 'Blockquote'] },
                        { name: 'links', items: ['Link', 'Unlink'] },
                        { name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'MediaEmbed'] },
                        { name: 'styles', items: ['Styles', 'Format', 'Font', 'FontSize'] },
                        { name: 'colors', items: ['TextColor', 'BGColor'] },
                        { name: 'tools', items: ['Maximize'] }
                    ],
                    height: 400,
                    width: '100%',
                    format_tags: 'p;h2;h3;h4;div',
                    format_h2: { element: 'h2', attributes: { 'class': 'text-novogene-h2' } },
                    format_h3: { element: 'h3', attributes: { 'class': 'text-novogene-h3' } },
                    font_names: 'Acumin Pro/Acumin Pro;Arial/Arial, Helvetica, sans-serif;Times New Roman/Times New Roman, Times, serif;Verdana/Verdana, Geneva, sans-serif',
                    contentsCss: [
                        '{{ asset('css/ckeditor-custom-styles.css') }}',
                        '{{ asset('css/fonts.css') }}',
                    ],
                    stylesSet: [
                        { name: 'Interligne 30px', element: 'p', attributes: { 'class': 'line-height-30px' } },
                        { name: 'Image Responsive', element: 'img', attributes: { 'class': 'max-w-full h-auto' } },
                        { name: 'Tableau Novogene', element: 'table', attributes: { 'class': 'novogene-table' } },
                        { name: 'En-tête Tableau Novogene', element: 'th', attributes: { 'class': 'novogene-th' } },
                        { name: 'Cellule Tableau Novogene', element: 'td', attributes: { 'class': 'novogene-td' } }
                    ],
                    colorButton_colors: '1A3C6D,2E5B9B,E6F0FA,000000,FFFFFF',
                    colorButton_enableMore: true,
                    image2_alignClasses: ['image-align-left', 'image-align-center', 'image-align-right'],
                    image2_captionedClass: 'image-captioned',
                    on: {
                        instanceReady: function() {
                            console.log('CKEditor initialisé pour ' + editorId);
                            const oldValue = element.value;
                            if (oldValue) {
                                this.setData(oldValue);
                            }
                            // Vérifier si les boutons de liste sont disponibles
                            console.log('Boutons disponibles dans la barre d\'outils :', this.ui.items);
                        },
                        fileUploadRequest: function(evt) {
                            const xhr = evt.data.fileLoader.xhr;
                            xhr.setRequestHeader('X-CSRF-TOKEN', '{{ csrf_token() }}');
                        },
                        fileUploadResponse: function(evt) {
                            console.log('Réponse du téléchargement de fichier :', evt.data);
                        }
                    }
                });
            } else {
                console.error('Élément avec l’ID ' + editorId + ' non trouvé.');
            }
        });
    </script>
@endpush