@extends('backoffice.dashboard')
@section('title', 'تعديل قسم ديناميكي')

@section('content')

@if(Auth::check())

<div class="container-fluid">
    <div class="block-card mb-4">
        <div class="block-card-header d-flex justify-content-between align-items-center">
            <h2 class="widget-title">تعديل القسم الديناميكي: {{ $section->section_key }}</h2>
            <div>
                <span class="badge bg-info p-2">نوع القسم: ديناميكي</span>
            </div>
        </div>

        <div class="block-card-body">
            <form action="{{ route('homepage-sections.update', $section->id) }}" method="POST" enctype="multipart/form-data" id="pageForm">
                @csrf
                @method('PUT')
                <div class="alert alert-danger mb-3" id="general-error" style="display: none;">
                    <i class="ri-error-warning-line mr-2"></i>
                    <span id="general-error-message"></span>
                </div>

                <div class="row">
                    <div class="col-md-3">
                        <div class="form-group mb-3">
                            <label>المعرف (section_key)</label>
                            <input type="text" class="form-control" value="{{ $section->section_key }}" readonly disabled>
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group mb-3">
                            <label>الترتيب <span class="text-danger">*</span></label>
                            <input type="number" 
                                   class="form-control @error('position') is-invalid @enderror" 
                                   name="position" 
                                   value="{{ old('position', $section->position) }}" 
                                   min="1" required>
                            @error('position')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-3">
                        <div class="form-group mb-3">
                            <div class="custom-control custom-switch mt-4">
                                <input type="checkbox" 
                                       class="custom-control-input" 
                                       id="is_visible" 
                                       name="is_visible" 
                                       value="1"
                                       {{ $section->is_visible ? 'checked' : '' }}>
                                <label class="custom-control-label" for="is_visible">مفعل / معروض</label>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-3">
    <div class="form-group mb-3">
        <label>صورة الخلفية الحالية</label>
        @if($section->image_background)
            @php
                // Récupérer l'image encodée en base64 depuis le contrôleur
                $bgImageSrc = $section->backgroundImageSrc ?? null;
            @endphp
            
            @if($bgImageSrc)
                <div>
                    <img src="{{ $bgImageSrc }}" 
                         alt="Background" 
                         style="max-width: 100px; max-height: 60px; object-fit: cover; border: 1px solid #ddd; border-radius: 4px;">
                    <small class="text-muted d-block">{{ basename($section->image_background) }}</small>
                </div>
            @else
                <div class="text-danger">
                    <i class="ri-image-line"></i>
                    <small>الصورة غير موجودة</small>
                    <div><small class="text-muted">{{ $section->image_background }}</small></div>
                </div>
            @endif
        @else
            <span class="text-muted">لا توجد صورة</span>
        @endif
    </div>
</div>
					
					
                </div>

                <div class="row">
                    <div class="col-md-4">
                        <div class="form-group mb-3">
                            <label>العنوان بالعربية <span class="text-danger">*</span></label>
                            <input type="text" class="form-control @error('titre_ar') is-invalid @enderror" 
                                   name="titre_ar" maxlength="255" 
                                   value="{{ old('titre_ar', $section->title_ar) }}" id="titre_ar" required>
                            <small class="text-muted">سيتم استخدام هذا العنوان لإنشاء المفتاح</small>
                            <div id="generated-key-preview" class="mt-1 text-info">
                                <i class="ri-key-line"></i>
                                <span id="key-preview">{{ $section->section_key }}</span>
                            </div>
                            @error('titre_ar')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group mb-3">
                            <label>العنوان بالفرنسية</label>
                            <input type="text" class="form-control @error('titre_fr') is-invalid @enderror" 
                                   name="titre_fr" maxlength="255"
                                   value="{{ old('titre_fr', $section->title_fr) }}" id="titre_fr">
                            @error('titre_fr')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group mb-3">
                            <label>العنوان بالإنجليزية</label>
                            <input type="text" class="form-control @error('titre_en') is-invalid @enderror" 
                                   name="titre_en" maxlength="255"
                                   value="{{ old('titre_en', $section->title_en) }}" id="titre_en">
                            @error('titre_en')
                                <span class="invalid-feedback">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="form-group mb-3">
                    <label>تغيير صورة الخلفية (اختياري)</label>
                    <input type="file" class="form-control @error('image_background') is-invalid @enderror" 
                           name="image_background" accept="image/*">
                    <small class="text-muted">اتركه فارغاً للإبقاء على الصورة الحالية</small>
                    @error('image_background')
                        <span class="invalid-feedback">{{ $message }}</span>
                    @enderror
                </div>

                <hr>

                <h4 class="mb-3">
                    <i class="ri-file-copy-line me-2"></i>
                    المحتوى
                </h4>
                
                <div class="alert alert-info mb-3">
                    <i class="ri-information-line me-2"></i>
                    يمكنك تعديل الصور، الفيديوهات، أو النصوص. كل عنصر سيظهر في صف منفصل.
                </div>

                <div class="table-responsive">
                    <table class="table custom-table" id="contenu-table">
                        <thead>
                            <tr>
                                <th width="5%">#</th>
                                <th width="10%">العرض (col)</th>
                                <th width="12%">النوع</th>
                                <th width="58%">المحتوى</th>
                                <th width="15%">إجراء</th>
                            </tr>
                        </thead>
                        <tbody id="contenu-body">
                        </tbody>
                    </table>
                </div>
				
				<div class="block-card-footer mt-3 mb-3 text-center">
                    <button type="submit" id="submitBtn" class="btn bg-rgb-primary1 font-weight-medium">
                        <i class="ri-save-line mr-1"></i> حفظ التغييرات
                    </button>
                    <a href="{{ route('homepage-sections.index') }}" class="btn bg-rgb-primary1 font-weight-medium">
                        <i class="ri-close-line mr-1"></i> إلغاء
                    </a>
                </div>
            </form>
        </div>
    </div>
</div>

<template id="row-template">
    <tr data-index="INDEX">
        <input type="hidden" name="contenus[INDEX][id]" value="CONTENT_ID">
        <td class="row-number text-center align-middle"></td>
        <td>
            <select name="contenus[INDEX][col]" class="form-control col-select">
                <option value="col-xl-12">12</option>
                <option value="col-xl-8">8</option>
                <option value="col-xl-6">6</option>
                <option value="col-xl-4">4</option>
                <option value="col-xl-3">3</option>
                <option value="col-xl-2">2</option>
            </select>
        </td>
        <td>
            <select name="contenus[INDEX][nature]" class="form-control nature-select">
                <option value="">اختيار</option>
                <option value="image">صورة</option>
                <option value="video">فيديو (YouTube)</option>
                <option value="texte">نص</option>
            </select>
            <span class="field-error text-danger nature-error" style="display:none;"></span>
        </td>
        <td class="contenu-column align-middle">
        </td>
        <td class="text-center align-middle">
            <button type="button" class="btn btn-success btn-sm me-1" onclick="addRow()" title="إضافة عنصر">
                <i class="ri-add-line"></i>
            </button>
            <button type="button" class="btn btn-danger btn-sm" onclick="removeRow(this)" title="حذف العنصر">
                <i class="ri-delete-bin-line"></i>
            </button>
        </td>
    </tr>
</template>

<script src="https://cdn.jsdelivr.net/npm/tinymce@6/tinymce.min.js"></script>
<script>
let globalIndex = {{ count($contents) }};
const contentsData = @json($contents);
let isFormSubmitted = false;

const arabicToLatin = {
    'ا': 'a', 'ب': 'b', 'ت': 't', 'ث': 'th', 'ج': 'j', 'ح': 'h', 'خ': 'kh',
    'د': 'd', 'ذ': 'dh', 'ر': 'r', 'ز': 'z', 'س': 's', 'ش': 'sh', 'ص': 's',
    'ض': 'd', 'ط': 't', 'ظ': 'z', 'ع': 'a', 'غ': 'gh', 'ف': 'f', 'ق': 'q',
    'ك': 'k', 'ل': 'l', 'م': 'm', 'ن': 'n', 'ه': 'h', 'و': 'w', 'ي': 'y',
    'ة': 'h', 'ء': '', 'آ': 'a', 'أ': 'a', 'إ': 'i', 'ؤ': 'w', 'ئ': 'y',
    ' ': '_', '-': '_', '،': '', '.': '', '?': '', '!': ''
};

function transliterateArabic(text) {
    let result = '';
    for (let char of text) {
        result += arabicToLatin[char] || char;
    }
    return result;
}

function generateKeyFromTitle(title) {
    if (!title || title.trim() === '') return 'section';
    let key = transliterateArabic(title);
    key = key.replace(/[^a-zA-Z0-9_]/g, '');
    key = key.toLowerCase();
    key = key.replace(/^_+|_+$/g, '');
    key = key.replace(/_+/g, '_');
    key = key.substring(0, 10);
    return key || 'section';
}

function updateKeyPreview() {
    const titleAr = document.getElementById('titre_ar').value;
    const key = generateKeyFromTitle(titleAr);
    document.getElementById('key-preview').textContent = key;
}

function initRow(row, data = null) {
    const index = row.getAttribute('data-index');
    const natureSelect = row.querySelector('.nature-select');
    const colSelect = row.querySelector('.col-select');
    const td = row.querySelector('.contenu-column');
    const natureError = row.querySelector('.nature-error');
    
    if (data) {
        if (data.col_width) {
            colSelect.value = data.col_width;
        }
        if (data.content_type) {
            natureSelect.value = data.content_type;
            updateContentField(td, index, data);
        }
    }
    
    natureSelect.addEventListener('change', function() {
        updateContentField(td, index, data);
        if (isFormSubmitted) {
            validateField(this, index, 'nature');
        }
    });
    
    setTimeout(() => {
        const inputs = td.querySelectorAll('input, textarea');
        inputs.forEach(input => {
            input.addEventListener('input', function() {
                if (isFormSubmitted) {
                    validateContentField(row, index);
                }
            });
            input.addEventListener('change', function() {
                if (isFormSubmitted) {
                    validateContentField(row, index);
                }
            });
        });
    }, 300);
}

function getImageUrl(imagePath) {
    if (!imagePath) return null;
    
    // Liste des chemins candidats (version JavaScript)
    const candidates = [
        '/www/mjs/' + imagePath,
        '/home/preprov/www/mjs/' + imagePath,
        imagePath // Essayer le chemin direct
    ];
    
    // Note: En JavaScript, on ne peut pas vérifier l'existence du fichier côté client
    // On retourne l'URL construite et on laisse le navigateur gérer l'erreur 404
    return '/../../' + imagePath;
}

function updateContentField(td, index, data = null) {
    const row = td.closest('tr');
    const natureSelect = row.querySelector('.nature-select');
    const nature = natureSelect.value;
    td.innerHTML = '';

    if (nature === 'image') {
        let imageHtml = '';
        if (data && data.image_path) {
            // Utiliser l'image encodée en base64 si disponible
            const imageSrc = data.imageSrc || getImageUrl(data.image_path);
            const fileName = data.image_path.split('/').pop() || 'image';
            
            imageHtml = `
                <div class="mb-2">
                    <img src="${imageSrc}" 
                         alt="Image" 
                         style="max-width: 100px; max-height: 60px; object-fit: cover; border: 1px solid #ddd; border-radius: 4px;"
                         onerror="this.onerror=null; this.src='{{ asset('assets/img/no-image.jpg') }}'; this.parentElement.innerHTML+='<small class=\'text-danger d-block\'>Erreur chargement</small>';">
                    <small class="text-muted d-block">${fileName}</small>
                </div>
            `;
        }
        
        td.innerHTML = imageHtml + `
            <input type="file" name="contenus[${index}][image]" class="form-control file-input" 
                   accept="image/*">
            <span class="field-error text-danger content-error" id="error_content_${index}" style="display:none;"></span>
            <small class="text-muted">الصيغ المسموحة: jpg, png, gif</small>
        `;
        
        const fileInput = td.querySelector('.file-input');
        fileInput.addEventListener('change', function() {
            if (isFormSubmitted) {
                validateContentField(row, index);
            }
        });
    }
    else if (nature === 'video') {
        const oldUrl = data && data.video_url ? data.video_url : '';
        td.innerHTML = `
            <input type="text" name="contenus[${index}][url_video]" class="form-control video-input" 
                   placeholder="رابط الفيديو (YouTube)" value="${oldUrl}">
            <span class="field-error text-danger content-error" id="error_content_${index}" style="display:none;"></span>
            <small class="text-muted">رابط YouTube فقط</small>
        `;
        
        const videoInput = td.querySelector('.video-input');
        videoInput.addEventListener('input', function() {
            if (isFormSubmitted) {
                validateContentField(row, index);
            }
        });
    }
    else if (nature === 'texte') {
        const oldTextAr = data && data.content_ar ? data.content_ar : '';
        const oldTextFr = data && data.content_fr ? data.content_fr : '';
        const oldTextEn = data && data.content_en ? data.content_en : '';
        
        td.innerHTML = `
            <div class="mb-2">
                <small class="fw-bold">العربية <span class="text-danger">*</span></small>
                <textarea name="contenus[${index}][text_ar]" rows="2" maxlength="1000"
                          class="form-control tinymce-text" id="text_ar_${index}">${oldTextAr}</textarea>
                <small class="text-muted char-counter" id="counter_ar_${index}">0/1000</small>
            </div>
            <div class="mb-2">
                <small class="fw-bold">الفرنسية <span class="text-danger">*</span></small>
                <textarea name="contenus[${index}][text_fr]" rows="2" maxlength="1000"
                          class="form-control tinymce-text" id="text_fr_${index}">${oldTextFr}</textarea>
                <small class="text-muted char-counter" id="counter_fr_${index}">0/1000</small>
            </div>
            <div class="mb-2">
                <small class="fw-bold">الإنجليزية <span class="text-danger">*</span></small>
                <textarea name="contenus[${index}][text_en]" rows="2" maxlength="1000"
                          class="form-control tinymce-text" id="text_en_${index}">${oldTextEn}</textarea>
                <small class="text-muted char-counter" id="counter_en_${index}">0/1000</small>
            </div>
            <span class="field-error text-danger content-error" id="error_content_${index}" style="display:none;"></span>
        `;
        
        setTimeout(() => {
            ['ar', 'fr', 'en'].forEach(lang => {
                const textarea = document.getElementById(`text_${lang}_${index}`);
                const counter = document.getElementById(`counter_${lang}_${index}`);
                
                function updateCounter() {
                    let content = '';
                    const editor = tinymce.get(textarea.id);
                    if (editor) {
                        content = editor.getContent({ format: 'text' }).trim();
                    } else {
                        content = textarea.value.trim();
                    }
                    counter.textContent = content.length + '/1000';
                    
                    if (content.length > 1000) {
                        counter.classList.add('text-danger');
                    } else {
                        counter.classList.remove('text-danger');
                    }
                }
                
                textarea.addEventListener('input', updateCounter);
                
                setTimeout(() => {
                    const editor = tinymce.get(textarea.id);
                    if (editor) {
                        editor.on('change', updateCounter);
                    }
                    updateCounter();
                }, 500);
            });
        }, 200);
        
        setTimeout(() => {
            tinymce.init({
                selector: `#text_ar_${index}, #text_fr_${index}, #text_en_${index}`,
                height: 150,
                language: 'ar',
                directionality: 'rtl',
                plugins: 'advlist autolink lists link preview code wordcount',
                toolbar: 'undo redo | bold italic underline | bullist numlist | alignright alignleft aligncenter | code',
                menubar: false,
                setup: function(editor) {
                    editor.on('change', function() {
                        if (isFormSubmitted) {
                            validateContentField(row, index);
                        }
                        const lang = editor.id.split('_')[1];
                        const counter = document.getElementById(`counter_${lang}_${index}`);
                        const content = editor.getContent({ format: 'text' }).trim();
                        counter.textContent = content.length + '/1000';
                        
                        if (content.length > 1000) {
                            counter.classList.add('text-danger');
                        } else {
                            counter.classList.remove('text-danger');
                        }
                    });
                }
            });
        }, 300);
    }
}

function addRow(data = null) {
    const tpl = document.querySelector('#row-template').innerHTML;
    let newTpl = tpl.replace(/INDEX/g, globalIndex);
    newTpl = newTpl.replace('CONTENT_ID', data && data.id ? data.id : '');
    
    const table = document.querySelector('#contenu-body');
    table.insertAdjacentHTML('beforeend', newTpl);
    
    const newRow = table.lastElementChild;
    initRow(newRow, data);
    renumber();
    globalIndex++;
}

function removeRow(btn) {
    const rowCount = document.querySelectorAll('#contenu-body tr').length;
    
    if (rowCount <= 1) {
        return;
    }
    
    btn.closest('tr').remove();
    renumber();
}

function renumber() {
    document.querySelectorAll('#contenu-body tr').forEach((row, i) => {
        row.querySelector('.row-number').innerText = i + 1;
    });
}

function validateField(element, index, fieldType) {
    const errorSpan = fieldType === 'nature' 
        ? element.nextElementSibling 
        : document.querySelector(`#error_${fieldType}_${index}`);
    
    if (errorSpan) {
        let isValid = true;
        let message = '';
        
        if (fieldType === 'nature') {
            if (!element.value) {
                message = 'يرجى اختيار نوع المحتوى';
                isValid = false;
            }
        }
        
        if (!isValid) {
            errorSpan.textContent = message;
            errorSpan.style.display = 'block';
            element.classList.add('is-invalid');
        } else {
            errorSpan.style.display = 'none';
            element.classList.remove('is-invalid');
        }
        
        return isValid;
    }
    return true;
}

function validateContentField(row, index) {
    const natureSelect = row.querySelector('.nature-select');
    const nature = natureSelect.value;
    let isValid = true;
    let message = '';
    const errorSpan = row.querySelector('.content-error');
    
    if (nature === 'image') {
        const fileInput = row.querySelector('input[type="file"]');
        const hasExistingImage = row.querySelector('img') !== null;
        
        if (!hasExistingImage && (!fileInput || fileInput.files.length === 0)) {
            message = 'يرجى اختيار صورة';
            isValid = false;
        }
        
        if (errorSpan) {
            errorSpan.textContent = message;
            errorSpan.style.display = isValid ? 'none' : 'block';
            if (fileInput) fileInput.classList.toggle('is-invalid', !isValid);
        }
    }
    else if (nature === 'video') {
        const videoInput = row.querySelector('.video-input');
        
        if (!videoInput || !videoInput.value.trim()) {
            message = 'يرجى إدخال رابط الفيديو';
            isValid = false;
        } else if (!isValidYoutubeUrl(videoInput.value.trim())) {
            message = 'يرجى إدخال رابط YouTube صحيح';
            isValid = false;
        }
        
        if (errorSpan) {
            errorSpan.textContent = message;
            errorSpan.style.display = isValid ? 'none' : 'block';
            if (videoInput) videoInput.classList.toggle('is-invalid', !isValid);
        }
    }
    else if (nature === 'texte') {
        const textareas = row.querySelectorAll('.tinymce-text');
        let hasEmpty = false;
        let hasOverLimit = false;
        
        textareas.forEach(textarea => {
            let content = '';
            const editor = tinymce.get(textarea.id);
            if (editor) {
                content = editor.getContent({ format: 'text' }).trim();
            } else {
                content = textarea.value.trim();
            }
            
            if (!content) {
                hasEmpty = true;
            }
            
            if (content.length > 1000) {
                hasOverLimit = true;
            }
        });
        
        if (hasEmpty) {
            message = 'جميع النصوص مطلوبة';
            isValid = false;
        } else if (hasOverLimit) {
            message = 'النصوص يجب أن لا تتجاوز 1000 حرف';
            isValid = false;
        }
        
        if (errorSpan) {
            errorSpan.textContent = message;
            errorSpan.style.display = isValid ? 'none' : 'block';
            textareas.forEach(textarea => {
                textarea.classList.toggle('is-invalid', !isValid);
            });
        }
    }
    
    return isValid;
}

function isValidYoutubeUrl(url) {
    const regex = /^(https?:\/\/)?(www\.)?(youtube\.com\/watch\?v=|youtu\.be\/)[\w-]{11}/;
    return regex.test(url);
}

function validateTitles() {
    let isValid = true;
    const titleAr = document.getElementById('titre_ar');
    
    if (!titleAr.value.trim()) {
        titleAr.classList.add('is-invalid');
        isValid = false;
    } else {
        titleAr.classList.remove('is-invalid');
    }
    
    return isValid;
}

function validateAllContents() {
    let isValid = true;
    const rows = document.querySelectorAll('#contenu-body tr');
    const generalError = document.getElementById('general-error');
    const generalErrorMessage = document.getElementById('general-error-message');
    
    generalError.style.display = 'none';
    
    if (rows.length === 0) {
        generalErrorMessage.textContent = 'يجب إضافة محتوى واحد على الأقل';
        generalError.style.display = 'block';
        return false;
    }
    
    rows.forEach((row, index) => {
        const natureSelect = row.querySelector('.nature-select');
        const natureValid = validateField(natureSelect, index, 'nature');
        const contentValid = validateContentField(row, index);
        
        if (!natureValid || !contentValid) {
            isValid = false;
        }
    });
    
    if (!isValid) {
        generalErrorMessage.textContent = 'يوجد أخطاء في بعض الحقول. الرجاء التحقق من جميع العناصر.';
        generalError.style.display = 'block';
    }
    
    return isValid;
}

document.addEventListener('DOMContentLoaded', () => {
    // Charger les contenus existants
    if (contentsData && contentsData.length > 0) {
        contentsData.forEach(data => {
            addRow(data);
        });
    } else {
        addRow();
    }
    
    document.getElementById('titre_ar').addEventListener('input', updateKeyPreview);
    
    document.getElementById('pageForm').addEventListener('submit', function(e) {
        e.preventDefault();
        
        isFormSubmitted = true;
        
        const titlesValid = validateTitles();
        const contentsValid = validateAllContents();
        
        if (titlesValid && contentsValid) {
            document.getElementById('submitBtn').disabled = true;
            document.getElementById('submitBtn').innerHTML = '<i class="ri-loader-4-line spin mr-1"></i> جاري الحفظ...';
            this.submit();
        } else {
            const firstError = document.querySelector('.is-invalid');
            if (firstError) {
                firstError.scrollIntoView({ behavior: 'smooth', block: 'center' });
                firstError.focus();
            }
        }
    });
});

const style = document.createElement('style');
style.textContent = `
    .spin {
        animation: spin 1s linear infinite;
    }
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    #generated-key-preview {
        background-color: #f0f7ff;
        padding: 5px 10px;
        border-radius: 4px;
        font-family: monospace;
        direction: ltr;
        display: inline-block;
    }
    .char-counter {
        font-size: 11px;
        display: block;
        text-align: left;
    }
    .text-danger {
        color: #dc3545 !important;
    }
`;
document.head.appendChild(style);
</script>

<style>
.is-invalid {
    border: 1px solid #dc3545 !important;
}
.field-error {
    font-size: 13px;
    margin-top: 4px;
    display: none;
}
#general-error {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.custom-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.custom-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    padding: 12px 8px;
}
.custom-table td {
    vertical-align: middle;
    padding: 12px 8px;
    border-bottom: 1px solid #e9ecef;
}
.btn-sm { 
    padding: 6px 12px; 
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
}
.btn-sm i {
    font-size: 16px;
}
.me-1 { 
    margin-right: 8px !important; 
}
.mr-1 {
    margin-left: 8px !important;
}
.ms-2 {
    margin-right: 8px !important;
}
.badge {
    font-size: 14px;
    padding: 8px 12px;
}
.tox-tinymce {
    border: 1px solid #ced4da !important;
    border-radius: 0.375rem;
}
.tox-tinymce.is-invalid {
    border: 1px solid #dc3545 !important;
}
</style>

@else
<script>window.location.href = "{{ route('admin') }}";</script>
@endif

@endsection