@extends('backoffice.dashboard')
@section('title','إضافة قسم جديد')
@section('content')
@if ($errors->any())
    <ul class="alert alert-warning">
        @foreach ($errors->all() as $error)
            <li>{{ $error }}</li>
        @endforeach
    </ul>
@endif
@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">إضافة قسم جديد للصفحة الرئيسية</h2>
            <div>
                <span class="badge bg-info p-2">نوع القسم: ديناميكي</span>
                <span class="badge bg-secondary p-2 ms-2">الترتيب المقترح: {{ $nextPosition }}</span>
            </div>
        </div>

        <div class="block-card-body">
            <form action="{{ route('homepage-sections.store') }}" method="POST" enctype="multipart/form-data" id="pageForm">
                @csrf
                
                <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-4">
                        <div class="form-group mb-3">
                            <label>العنوان بالعربية <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" 
                                   name="titre_ar" maxlength="255" 
                                   value="{{ old('titre_ar') }}" id="titre_ar">
                            <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"></span> <span class="text-muted"></span>
                            </div>
                            <span class="field-error text-danger" id="error_titre_ar" style="display: none;"></span>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group mb-3">
                            <label>العنوان بالفرنسية <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" 
                                   name="titre_fr" maxlength="255"
                                   value="{{ old('titre_fr') }}" id="titre_fr">
                            <span class="field-error text-danger" id="error_titre_fr" style="display: none;"></span>
                        </div>
                    </div>

                    <div class="col-md-4">
                        <div class="form-group mb-3">
                            <label>العنوان بالإنجليزية <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" 
                                   name="titre_en" maxlength="255"
                                   value="{{ old('titre_en') }}" id="titre_en">
                            <span class="field-error text-danger" id="error_titre_en" style="display: none;"></span>
                        </div>
                    </div>
                </div>

                <div class="form-group mb-3">
                    <label>صورة الخلفية (اختياري)</label>
                    <input type="file" class="form-control" 
                           name="image_background" accept="image/*">
                    <small class="text-muted">الحجم الموصى به: 1920x1080 بكسل</small>
                </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">
        <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 rowCounter = 0;
let isFormSubmitted = false;
const oldData = @json(old('contenus', []));

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');
    if (titleAr) {
        const key = generateKeyFromTitle(titleAr.value);
        const previewSpan = document.getElementById('key-preview');
        if (previewSpan) previewSpan.textContent = key;
    }
}

function initTinyMCEForTextarea(textareaId) {
    if (tinymce.get(textareaId)) {
        tinymce.get(textareaId).remove();
    }
    
    tinymce.init({
        selector: `#${textareaId}`,
        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) {
                    const row = editor.target.closest('tr');
                    if (row) {
                        const index = row.getAttribute('data-index');
                        validateContentField(row, index);
                    }
                }
                const parts = editor.id.split('_');
                const lang = parts[1];
                const index = parts[2];
                const counter = document.getElementById(`counter_${lang}_${index}`);
                if (counter) {
                    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');
                    }
                }
            });
        }
    });
}

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

    if (nature === 'image') {
        td.innerHTML = `
            <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');
        if (fileInput) {
            fileInput.addEventListener('change', function() {
                if (isFormSubmitted) {
                    validateContentField(row, index);
                }
            });
        }
    }
    else if (nature === 'video') {
        const oldUrl = (data && data.url_video) ? data.url_video.replace(/"/g, '&quot;') : '';
        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');
        if (videoInput) {
            videoInput.addEventListener('input', function() {
                if (isFormSubmitted) {
                    validateContentField(row, index);
                }
            });
        }
    }
    else if (nature === 'texte') {
        const oldTextAr = (data && data.text_ar) ? data.text_ar.replace(/"/g, '&quot;') : '';
        const oldTextFr = (data && data.text_fr) ? data.text_fr.replace(/"/g, '&quot;') : '';
        const oldTextEn = (data && data.text_en) ? data.text_en.replace(/"/g, '&quot;') : '';
        
        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}">${oldTextAr.length}/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}">${oldTextFr.length}/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}">${oldTextEn.length}/1000</small>
            </div>
            <span class="field-error text-danger content-error" id="error_content_${index}" style="display:none;"></span>
        `;
        
        // Add character counters for regular textareas
        ['ar', 'fr', 'en'].forEach(lang => {
            const textarea = document.getElementById(`text_${lang}_${index}`);
            const counter = document.getElementById(`counter_${lang}_${index}`);
            
            if (textarea && counter) {
                const updateCounter = function() {
                    const content = this.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);
                updateCounter.call(textarea);
            }
        });
        
        // Initialize TinyMCE for all three textareas
        setTimeout(() => {
            if (typeof tinymce !== 'undefined') {
                initTinyMCEForTextarea(`text_ar_${index}`);
                initTinyMCEForTextarea(`text_fr_${index}`);
                initTinyMCEForTextarea(`text_en_${index}`);
            }
        }, 100);
    }
}

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');
    
    if (data) {
        if (data.col) colSelect.value = data.col;
        if (data.nature) {
            natureSelect.value = data.nature;
            updateContentField(td, index, data);
        } else {
            updateContentField(td, index, null);
        }
    } else {
        updateContentField(td, index, null);
    }
    
    if (natureSelect) {
        natureSelect.addEventListener('change', function() {
            updateContentField(td, index, null);
            if (isFormSubmitted) {
                validateField(this, index, 'nature');
            }
        });
    }
    
    // Add validation listeners to new inputs after they're created
    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);
                }
            });
        });
    }, 200);
}

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

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) => {
        const numberCell = row.querySelector('.row-number');
        if (numberCell) {
            numberCell.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');
    if (!natureSelect) return true;
    
    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"]');
        
        if (!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 titles = ['titre_ar', 'titre_fr', 'titre_en'];
    
    titles.forEach(title => {
        const input = document.getElementById(title);
        const error = document.getElementById(`error_${title}`);
        
        if (input && error) {
            if (!input.value.trim()) {
                error.textContent = 'هذا الحقل مطلوب';
                error.style.display = 'block';
                input.classList.add('is-invalid');
                isValid = false;
            } else if (input.value.length > 255) {
                error.textContent = 'الحد الأقصى 255 حرف';
                error.style.display = 'block';
                input.classList.add('is-invalid');
                isValid = false;
            } else {
                error.style.display = 'none';
                input.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');
    
    if (generalError) generalError.style.display = 'none';
    
    if (rows.length === 0) {
        if (generalErrorMessage) generalErrorMessage.textContent = 'يجب إضافة محتوى واحد على الأقل';
        if (generalError) generalError.style.display = 'block';
        return false;
    }
    
    rows.forEach((row, index) => {
        const natureSelect = row.querySelector('.nature-select');
        if (natureSelect) {
            const natureValid = validateField(natureSelect, index, 'nature');
            const contentValid = validateContentField(row, index);
            
            if (!natureValid || !contentValid) {
                isValid = false;
            }
        }
    });
    
    if (!isValid && generalErrorMessage) {
        generalErrorMessage.textContent = 'يوجد أخطاء في بعض الحقول. الرجاء التحقق من جميع العناصر.';
        if (generalError) generalError.style.display = 'block';
    }
    
    return isValid;
}

document.addEventListener('DOMContentLoaded', () => {
    // Initialize row counter based on existing rows from old data
    if (oldData && Object.keys(oldData).length > 0) {
        // Si oldData est un objet avec des indices numériques
        const oldDataArray = Array.isArray(oldData) ? oldData : Object.values(oldData);
        rowCounter = oldDataArray.length;
        oldDataArray.forEach(data => {
            addRow(data);
        });
    } else {
        rowCounter = 1;
        addRow();
    }
    
    const titreAr = document.getElementById('titre_ar');
    if (titreAr) {
        titreAr.addEventListener('input', updateKeyPreview);
        updateKeyPreview();
    }
    
    const form = document.getElementById('pageForm');
    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            isFormSubmitted = true;
            
            const titlesValid = validateTitles();
            const contentsValid = validateAllContents();
            
            if (titlesValid && contentsValid) {
                const submitBtn = document.getElementById('submitBtn');
                if (submitBtn) {
                    submitBtn.disabled = true;
                    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' });
                }
            }
        });
    }
    
    document.querySelectorAll('#titre_ar, #titre_fr, #titre_en').forEach(input => {
        input.addEventListener('input', function() {
            if (isFormSubmitted) {
                validateTitles();
            }
        });
    });
});

// Add styles
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;
    }
    .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;
    }
    .nature-error, .content-error {
        display: none;
    }
`;
document.head.appendChild(style);

</script>

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

@endsection