@extends('backoffice.dashboard')

@section('title','إضافة صفحة')

@section('content')

<div class="container-fluid">
    <div class="block-card mb-4">
        <div class="block-card-header">
            <h2 class="widget-title"> إضافة صفحة جديدة</h2>
            
            <div class="stroke-shape"></div>
        </div>

        <div class="block-card-body">

            <form action="{{ route('builder.store') }}" method="POST" enctype="multipart/form-data">
                @csrf

                <!-- TITRES -->
                <div class="form-group mb-3">
                    <label>العنوان بالعربية</label>
                    <input type="text" class="form-control" name="titre_ar" required>
                </div>

                <div class="form-group mb-3">
                    <label>العنوان بالفرنسية</label>
                    <input type="text" class="form-control" name="titre_fr">
                </div>

                <div class="form-group mb-3">
                    <label>العنوان بالإنجليزية</label>
                    <input type="text" class="form-control" name="titre_en">
                </div>

                <hr>

                <!-- TABLEAU DYNAMIQUE -->
                <h4 class="mb-3">المحتوى</h4>

                <table class="table custom-table text-center" id="contenu-table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>العرض (col)</th>
                            <th>النوع</th>
                            <th>المحتوى</th>
                            <th>إجراء</th>
                        </tr>
                    </thead>
                    <tbody id="contenu-body">
                        <!-- lignes dynamiques -->
                    </tbody>
                </table>

                

                

                <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="la la-save mr-1"></i> حفظ
                    </button>
                    <a href="{{ route('builder.index') }}" class="btn bg-rgb-primary1 font-weight-medium">
                    <i class="la la-times mr-1"></i> إلغاء
                    </a>
                </div>

            </form>
        </div>
    </div>
</div>

<!-- TEMPLATE LIGNE -->
<template id="row-template">
    <tr>
        <td class="row-number"></td>
        <td>
            <select name="contenus[INDEX][col]" class="form-control">
                <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" onchange="changeNature(this)">
                <option value="">اختيار</option>
                <option value="image">صورة</option>
                <option value="video">فيديو</option>
                <option value="texte">نص</option>
            </select>
        </td>
        <td class="contenu-column"></td>
        <td class="text-center">
            <button type="button" class="btn btn-success btn-sm me-1" onclick="addRow()">
                <i class="bx bx-plus"></i>
            </button>
            <button type="button" class="btn btn-danger btn-sm" onclick="removeRow(this)">
                <i class="bx bx-trash"></i>
            </button>
        </td>
    </tr>
</template>

<!-- SCRIPTS -->
<script src="https://cdn.jsdelivr.net/npm/tinymce@6/tinymce.min.js"></script>
<script>

let index = 0;

function addRow() {
    let tpl = document.querySelector('#row-template').innerHTML;
    tpl = tpl.replace(/INDEX/g, index);
    const table = document.querySelector('#contenu-body');
    table.insertAdjacentHTML('beforeend', tpl);
    renumber();
    index++;
}

function removeRow(btn) {
    btn.closest('tr').remove();
    renumber();
}

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

function changeNature(select) {
    let td = select.closest('tr').querySelector('.contenu-column');
    let namePrefix = select.name.replace('[nature]', '');
    td.innerHTML = "";

    if (select.value === 'image') {
        td.innerHTML = `<input type="file" name="${namePrefix}[image]" class="form-control">`;
    }
    if (select.value === 'video') {
        td.innerHTML = `<input type="text" name="${namePrefix}[url_video]" class="form-control" placeholder="رابط الفيديو (YouTube)">`;
    }
    if (select.value === 'texte') {
        td.innerHTML = `
            <textarea name="${namePrefix}[text_ar]" rows="3" class="form-control mb-2 tinymce"></textarea>
            <textarea name="${namePrefix}[text_fr]" rows="3" class="form-control mb-2 tinymce"></textarea>
            <textarea name="${namePrefix}[text_en]" rows="3" class="form-control tinymce"></textarea>
        `;
        setTimeout(initTiny, 100);
    }
}

function initTiny() {
    tinymce.init({
        selector: '.tinymce',
        height: 180,
        plugins: 'advlist autolink lists link image preview code',
        toolbar: 'undo redo | bold italic | bullist numlist | alignleft aligncenter alignright | code'
    });
}

// <<< AJOUTER UNE LIGNE AU CHARGEMENT DE LA PAGE >>>
document.addEventListener('DOMContentLoaded', () => {
    addRow(); // une ligne par défaut
});
</script>



<!-- STYLES TABLEAU -->
<style>
.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, .custom-table td {
    vertical-align: middle;
    text-align: center;
    padding: 10px 6px;
    border-bottom: 1px solid #e9ecef;
}
.btn-sm { padding: 4px 8px; font-size: 13px; }
.me-1 { margin-right: 5px; }
</style>

@endsection