@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">
                                Edit Job Offer
                            </h4>
                        </div>
                    </div>

                    @if (session('success'))
                        <div class="fixed top-4 right-4 z-50 max-w-sm rounded-lg border-l-4 border-green-500 bg-green-100 p-4 text-green-800 shadow-lg dark:bg-green-900 dark:text-green-200"
                            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 text-green-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="M5 13l4 4L19 7"></path>
                                </svg>
                                <span>{{ session('success') }}</span>
                            </div>
                        </div>
                    @endif

                    <form action="{{ route('offres.update', $offre->id) }}" method="POST" enctype="multipart/form-data"
                        class="space-y-4 p-4 sm:p-5">
                        @csrf
                        @method('PUT')
                        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                            <label class="block">
                                <span>Title (English) <span class="text-red-500">*</span></span>
                                <input type="text" name="titre_en" id="titre_en"
                                    class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                    placeholder="Enter the title in English" value="{{ old('titre_en', $offre->titre_en) }}"
                                    required>
                                @error('titre_en')
                                    <span class="text-red-500 text-sm">{{ $message }}</span>
                                @enderror
                            </label>

                            <label class="block">
                                <span>Title (French) <span class="text-red-500">*</span></span>
                                <input type="text" name="titre_fr" id="titre_fr"
                                    class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                    placeholder="Enter the title in French" value="{{ old('titre_fr', $offre->titre_fr) }}"
                                    required>
                                @error('titre_fr')
                                    <span class="text-red-500 text-sm">{{ $message }}</span>
                                @enderror
                            </label>
                        </div>
                        <label class="block">
                            <span>Description (English) <span class="text-red-500">*</span></span>
                            <textarea name="description_en" id="editor1"
                                class="form-textarea mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                placeholder="Enter the description in English" required>{{ old('description_en', $offre->description_en) }}</textarea>
                            @error('description_en')
                                <span class="text-red-500 text-sm">{{ $message }}</span>
                            @enderror
                        </label>

                        <label class="block">
                            <span>Description (French) <span class="text-red-500">*</span></span>
                            <textarea name="description_fr" id="editor"
                                class="form-textarea mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                placeholder="Enter the description in French" required>{{ old('description_fr', $offre->description_fr) }}</textarea>
                            @error('description_fr')
                                <span class="text-red-500 text-sm">{{ $message }}</span>
                            @enderror
                        </label>

                        <label class="block">
                            <span>Application Deadline <span class="text-red-500">*</span></span>
                            <input type="date" name="date_limite_candidature" id="date_limite_candidature"
                                class="form-input mt-1.5 w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
                                value="{{ old('date_limite_candidature', $offre->date_limite_candidature ? $offre->date_limite_candidature->format('Y-m-d') : '') }}" required>
                            @error('date_limite_candidature')
                                <span class="text-red-500 text-sm">{{ $message }}</span>
                            @enderror
                        </label>

                        <label class="block">
                            <span>Attach Document (PDF/DOC/DOCX, max 5MB)</span>
                            <input type="file" name="document" class="form-input mt-1.5 w-full">
                            @if ($offre->document)
                                <a href="{{ asset('storage/' . $offre->document) }}" target="_blank"
                                    class="text-blue-600 underline">Download current document</a>
                            @endif
                            @error('document')
                                <span class="text-red-500 text-sm">{{ $message }}</span>
                            @enderror
                        </label>

                        <div class="flex justify-center space-x-2 pt-4">
                            <button type="reset"
                                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">
                                <span>Cancel</span>
                            </button>
                            <button type="submit"
                                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">
                                <span>Update</span>
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </main>
@endsection

@push('scripts')
    <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 rafraîchir la page.');
                return;
            }

            console.log('CKEditor détecté, initialisation des éditeurs...');
            const editors = {
                'description_en': 'editor1',
                'description_fr': 'editor',
            };

            Object.keys(editors).forEach(function(field) {
                const editorId = editors[field];
                const element = document.getElementById(editorId);
                if (element) {
                    CKEDITOR.replace(editorId, {
                        extraPlugins: 'uploadimage,image2,table,tableresize,tabletools,div,format,liststyle,widget,dialog,colorbutton,justify,indent,blockquote,templates,font,iframe,find,showblocks,smiley,specialchar,pagebreak,preview,print,pastefromword,removeformat,selectall,scayt,forms',
                        templates_replaceContent: false,
                        templates_files: ['{{ asset('js/ckeditor/templates.js') }}'],
                        filebrowserUploadUrl: '{{ route('upload.image') }}?_token={{ csrf_token() }}',
                        uploadUrl: '{{ route('upload.image') }}?_token={{ csrf_token() }}',
                        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', '-', 'Scayt'] },
                            { name: 'forms', items: ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'] },
                            '/',
                            { 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'] },
                            { name: 'about', items: ['About'] }
                        ],
                        height: 400,
                        width: '100%',
                        format_tags: 'p;h1;h2;h3;h4;h5;h6;pre;div',
                        format_h1: { element: 'h1', attributes: { 'class': 'text-novogene-h1' } },
                        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',
                        font_defaultLabel: 'Acumin Pro',
                        fontSize_defaultLabel: '12px',
                        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', 'style': 'width:100%; border-collapse:collapse' } },
                            { name: 'En-tête Tableau Novogene', element: 'th', attributes: { 'class': 'novogene-th', 'style': 'background-color:#f8f9fa; font-weight:bold; padding:8px; border:1px solid #dee2e6' } },
                            { name: 'Cellule Tableau Novogene', element: 'td', attributes: { 'class': 'novogene-td', 'style': 'padding:8px; border:1px solid #dee2e6' } },
                            { name: 'Bloc Applications', element: 'div', attributes: { 'class': 'novogene-applications-block', 'style': 'background:#f0f7ff; border-left:4px solid #1e88e5; padding:15px; margin:20px 0; border-radius:0 4px 4px 0' } },
                            { name: 'Badge Application', element: 'span', attributes: { 'class': 'novogene-application-badge', 'style': 'background:#e3f2fd; padding:2px 6px; border-radius:3px; display:inline-block; margin:2px 0' } },
                        ],
                        colorButton_enableMore: true,
                        colorButton_colors: '000000,FFFFFF,FF0000,00FF00,0000FF,FFFF00,FF00FF,00FFFF',
                        image2_alignClasses: ['image-align-left', 'image-align-center', 'image-align-right'],
                        image2_captionedClass: 'image-captioned',
                        table_default_attributes: { 'class': 'novogene-table', 'style': 'width:100%; border-collapse:collapse' },
                        on: {
                            instanceReady: function() {
                                console.log('CKEditor initialisé pour ' + editorId);
                                const oldValue = element.value;
                                if (oldValue) {
                                    this.setData(oldValue);
                                }
                            },
                            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é.');
                }
            });

            document.querySelectorAll('.tabs-list button').forEach(button => {
                button.addEventListener('click', function(event) {
                    event.preventDefault();
                });
            });

            if (typeof FilePond !== 'undefined') {
                FilePond.create(document.querySelector('input[name="document"]'), {
                    allowMultiple: false,
                    storeAsFile: true,
                    acceptedFileTypes: ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'],
                    labelIdle: 'Glissez & déposez un fichier ou <span class="filepond--label-action">Parcourir</span>',
                    maxFileSize: '5MB'
                });
            } else {
                console.error('FilePond n’est pas chargé.');
            }
        });
    </script>
@endpush