<?php
require_once '../includes/auth.php';
if (!checkPermission('admin')) {
    header('Location: ../dashboard.php');
    exit;
}
$sous_dossier_id = filter_input(INPUT_GET, 'id', FILTER_VALIDATE_INT);
if (!$sous_dossier_id) {
    header('Location: ../dashboard.php');
    exit;
}
require_once '../config/database.php';
require_once '../includes/functions.php';

$pdo = getPDO();

$stmt = $pdo->prepare("SELECT sd.*, d.nom as dossier_nom, p.nom as projet_nom FROM sous_dossiers sd
                       JOIN dossiers d ON sd.dossier_id = d.id
                       JOIN projets p ON d.projet_id = p.id
                       WHERE sd.id = ?");
$stmt->execute([$sous_dossier_id]);
$sous_dossier = $stmt->fetch();
if (!$sous_dossier) {
    $_SESSION['error'] = "Sous-dossier introuvable.";
    header('Location: ../dashboard.php');
    exit;
}

$stmt = $pdo->prepare("SELECT contenu_template FROM templates WHERE sous_dossier_id = ?");
$stmt->execute([$sous_dossier_id]);
$template = $stmt->fetch();
if ($template && !empty($template['contenu_template'])) {
    $contenu = json_decode($template['contenu_template'], true);
} else {
    $contenu = [
        'en_tete' => [
            ['label' => 'Chantier', 'type' => 'text', 'name' => 'chantier'],
            ['label' => 'Date', 'type' => 'date', 'name' => 'date_controle'],
            ['label' => 'Intervenant', 'type' => 'text', 'name' => 'intervenant']
        ],
        'tableau' => [
            'colonnes' => [
                ['label' => 'C', 'type' => 'radio', 'options' => ['C', 'NC', 'NA']],
                ['label' => 'Observation', 'type' => 'text', 'options' => []]
            ],
            'lignes' => ['Point 1', 'Point 2', 'Point 3']
        ]
    ];
}

// Normalisation
if (!is_array($contenu)) $contenu = [];
if (!isset($contenu['en_tete']) || !is_array($contenu['en_tete'])) $contenu['en_tete'] = [];
if (!isset($contenu['tableau']) || !is_array($contenu['tableau'])) $contenu['tableau'] = [];
if (!isset($contenu['tableau']['colonnes']) || !is_array($contenu['tableau']['colonnes'])) $contenu['tableau']['colonnes'] = [];
if (!isset($contenu['tableau']['lignes']) || !is_array($contenu['tableau']['lignes'])) $contenu['tableau']['lignes'] = [];

$error = '';
$success = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $template_json = $_POST['template_json'] ?? '';
    if (empty($template_json)) {
        $error = "Données du template invalides.";
    } else {
        try {
            $decoded = json_decode($template_json, true);
            if (!is_array($decoded)) throw new Exception("JSON invalide");
            $stmt = $pdo->prepare("INSERT INTO templates (sous_dossier_id, contenu_template) VALUES (?, ?) ON DUPLICATE KEY UPDATE contenu_template = ?");
            $stmt->execute([$sous_dossier_id, $template_json, $template_json]);
            logAction($pdo, $_SESSION['user_id'], 'edit_template', "Template du sous-dossier $sous_dossier_id modifié");
            $success = "Template enregistré.";
            $contenu = $decoded;
        } catch (Exception $e) {
            $error = "Erreur : " . $e->getMessage();
        }
    }
}

// Récupérer la liste des autres sous-dossiers pour la copie
$stmt = $pdo->prepare("SELECT sd.id, sd.nom as sous_dossier_nom, d.nom as dossier_nom, p.nom as projet_nom
                       FROM sous_dossiers sd
                       JOIN dossiers d ON sd.dossier_id = d.id
                       JOIN projets p ON d.projet_id = p.id
                       WHERE sd.id != ?
                       ORDER BY p.nom, d.nom, sd.nom");
$stmt->execute([$sous_dossier_id]);
$autres_sous_dossiers = $stmt->fetchAll();

require_once '../includes/header.php';
?>

<div class="d-flex justify-content-between align-items-center mb-4">
    <h1><i class="fas fa-edit me-2"></i>Éditer le template</h1>
    <div>
        <a href="creer_sous_dossier_rapide.php" class="btn btn-info me-2">
            <i class="fas fa-bolt"></i> Création rapide (sous-dossier + template)
        </a>
        <button type="button" class="btn btn-secondary me-2" data-bs-toggle="modal" data-bs-target="#loadLibraryModal">
            <i class="fas fa-database"></i> Charger depuis bibliothèque
        </button>
        <a href="../dashboard.php" class="btn btn-outline-secondary">Retour</a>
    </div>
</div>
<div class="alert alert-info">
    <i class="fas fa-info-circle me-2"></i>
    Sous-dossier : <strong><?= htmlspecialchars($sous_dossier['nom']) ?></strong><br>
    Dossier : <?= htmlspecialchars($sous_dossier['dossier_nom']) ?> | Projet : <?= htmlspecialchars($sous_dossier['projet_nom']) ?>
</div>

<?php if ($error): ?><div class="alert alert-danger"><?= $error ?></div><?php endif; ?>
<?php if ($success): ?><div class="alert alert-success"><?= $success ?></div><?php endif; ?>
<!-- Modal : Charger depuis bibliothèque -->
<div class="modal fade" id="loadLibraryModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-secondary text-white">
                <h5 class="modal-title"><i class="fas fa-database"></i> Charger un template de la bibliothèque</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <select id="librarySelect" class="form-select">
                    <option value="">-- Choisir un template --</option>
                    <?php
                    $libs = $pdo->query("SELECT id, nom FROM templates_library ORDER BY nom")->fetchAll();
                    foreach ($libs as $lib) {
                        echo '<option value="' . $lib['id'] . '">' . htmlspecialchars($lib['nom']) . '</option>';
                    }
                    ?>
                </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-primary" id="btnLoadLibrary">Charger</button>
            </div>
        </div>
    </div>
</div>
<form method="post" id="templateForm">
    <div class="card mb-4">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0"><i class="fas fa-heading"></i> En-tête de la fiche</h5>
        </div>
        <div class="card-body">
            <div id="enTeteFields">
                <?php foreach ($contenu['en_tete'] as $index => $field): ?>
                    <div class="row mb-2 en-tete-field">
                        <div class="col-md-3"><input type="text" class="form-control" placeholder="Label" value="<?= htmlspecialchars($field['label']) ?>"></div>
                        <div class="col-md-2"><select class="form-select field-type">
                                <option value="text" <?= ($field['type'] ?? 'text') == 'text' ? 'selected' : '' ?>>Texte</option>
                                <option value="date" <?= ($field['type'] ?? '') == 'date' ? 'selected' : '' ?>>Date</option>
                                <option value="textarea" <?= ($field['type'] ?? '') == 'textarea' ? 'selected' : '' ?>>Texte long</option>
                                <option value="number" <?= ($field['type'] ?? '') == 'number' ? 'selected' : '' ?>>Nombre</option>
                            </select></div>
                        <div class="col-md-2"><input type="text" class="form-control" placeholder="Nom interne" value="<?= htmlspecialchars($field['name'] ?? '') ?>"></div>
                        <div class="col-md-2"><button type="button" class="btn btn-sm btn-danger" onclick="supprimerChampEnTete(this)">Supprimer</button></div>
                    </div>
                <?php endforeach; ?>
            </div>
            <button type="button" class="btn btn-sm btn-success" onclick="ajouterChampEnTete()"><i class="fas fa-plus"></i> Ajouter un champ</button>
        </div>
    </div>

    <div class="card mb-4">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0"><i class="fas fa-table"></i> Tableau de contrôle</h5>
        </div>
        <div class="card-body">
            <h6>Colonnes</h6>
            <div id="colonnesList">
                <?php foreach ($contenu['tableau']['colonnes'] as $colIndex => $col): ?>
                    <div class="row mb-2 colonne-item">
                        <div class="col-md-3"><input type="text" class="form-control" placeholder="Label" value="<?= htmlspecialchars($col['label'] ?? '') ?>"></div>
                        <div class="col-md-3"><select class="form-select col-type">
                                <option value="radio" <?= ($col['type'] ?? '') == 'radio' ? 'selected' : '' ?>>Radio (options)</option>
                                <option value="checkbox" <?= ($col['type'] ?? '') == 'checkbox' ? 'selected' : '' ?>>Checkbox (Oui/Non)</option>
                                <option value="text" <?= ($col['type'] ?? '') == 'text' ? 'selected' : '' ?>>Texte</option>
                                <option value="date" <?= ($col['type'] ?? '') == 'date' ? 'selected' : '' ?>>Date</option>
                                <option value="textarea" <?= ($col['type'] ?? '') == 'textarea' ? 'selected' : '' ?>>Texte long</option>
                                <option value="number" <?= ($col['type'] ?? '') == 'number' ? 'selected' : '' ?>>Nombre</option>
                            </select></div>
                        <div class="col-md-3"><input type="text" class="form-control radio-options" placeholder="Options (séparées par des virgules) pour radio" value="<?= isset($col['options']) ? htmlspecialchars(implode(',', $col['options'])) : '' ?>" <?= ($col['type'] ?? '') != 'radio' ? 'disabled' : '' ?>></div>
                        <div class="col-md-2"><button type="button" class="btn btn-sm btn-danger" onclick="supprimerColonne(this)">Supprimer</button></div>
                    </div>
                <?php endforeach; ?>
            </div>
            <button type="button" class="btn btn-sm btn-success" onclick="ajouterColonne()"><i class="fas fa-plus"></i> Ajouter colonne</button>

            <hr>
            <h6 class="mt-3">Lignes (intitulés fixes)</h6>
            <p class="text-muted">Ces lignes seront proposées à l'utilisateur, qui pourra en ajouter ou supprimer selon ses besoins lors de la création de la fiche.</p>
            <div id="lignesList">
                <?php foreach ($contenu['tableau']['lignes'] as $ligne): ?>
                    <div class="row mb-2 ligne-item">
                        <div class="col-md-10"><input type="text" class="form-control" placeholder="Intitulé de la ligne" value="<?= htmlspecialchars($ligne) ?>"></div>
                        <div class="col-md-2"><button type="button" class="btn btn-sm btn-danger" onclick="supprimerLigneTemplate(this)">Supprimer</button></div>
                    </div>
                <?php endforeach; ?>
            </div>
            <button type="button" class="btn btn-sm btn-success" onclick="ajouterLigneTemplate()"><i class="fas fa-plus"></i> Ajouter ligne</button>
        </div>
    </div>

    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
        <button type="button" class="btn btn-primary" onclick="enregistrerTemplate()">Enregistrer le template</button>
        <a href="../dashboard.php" class="btn btn-outline-secondary">Annuler</a>
    </div>
</form>

<!-- Modal pour copier un template existant -->
<div class="modal fade" id="copyTemplateModal" tabindex="-1" aria-labelledby="copyTemplateModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-info text-white">
                <h5 class="modal-title" id="copyTemplateModalLabel"><i class="fas fa-copy me-2"></i>Copier depuis un autre template</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Fermer"></button>
            </div>
            <div class="modal-body">
                <p>Sélectionnez un sous-dossier dont vous souhaitez copier le template :</p>
                <select id="selectTemplateSource" class="form-select">
                    <option value="">-- Choisir un sous-dossier --</option>
                    <?php foreach ($autres_sous_dossiers as $sd): ?>
                        <option value="<?= $sd['id'] ?>">
                            <?= htmlspecialchars($sd['projet_nom']) ?> / <?= htmlspecialchars($sd['dossier_nom']) ?> / <?= htmlspecialchars($sd['sous_dossier_nom']) ?>
                        </option>
                    <?php endforeach; ?>
                </select>
                <div class="mt-3" id="templatePreview" style="display: none;">
                    <hr>
                    <h6>Aperçu du template :</h6>
                    <pre id="templatePreviewContent" style="max-height: 200px; overflow: auto; background: #f5f5f5; padding: 10px; border-radius: 5px;"></pre>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-primary" id="btnCopyTemplate" disabled>Copier ce template</button>
            </div>
        </div>
    </div>
</div>

<script>
    function ajouterChampEnTete() {
        const container = document.getElementById('enTeteFields');
        const div = document.createElement('div');
        div.className = 'row mb-2 en-tete-field';
        div.innerHTML = `
        <div class="col-md-3"><input type="text" class="form-control" placeholder="Label"></div>
        <div class="col-md-2"><select class="form-select field-type"><option value="text">Texte</option><option value="date">Date</option><option value="textarea">Texte long</option><option value="number">Nombre</option></select></div>
        <div class="col-md-2"><input type="text" class="form-control" placeholder="Nom interne"></div>
        <div class="col-md-2"><button type="button" class="btn btn-sm btn-danger" onclick="supprimerChampEnTete(this)">Supprimer</button></div>
    `;
        container.appendChild(div);
    }

    function supprimerChampEnTete(btn) {
        btn.closest('.en-tete-field').remove();
    }

    function ajouterColonne() {
        const container = document.getElementById('colonnesList');
        const div = document.createElement('div');
        div.className = 'row mb-2 colonne-item';
        div.innerHTML = `
        <div class="col-md-3"><input type="text" class="form-control" placeholder="Label"></div>
        <div class="col-md-3"><select class="form-select col-type"><option value="radio">Radio (options)</option><option value="checkbox">Checkbox (Oui/Non)</option><option value="text">Texte</option><option value="date">Date</option><option value="textarea">Texte long</option><option value="number">Nombre</option></select></div>
        <div class="col-md-3"><input type="text" class="form-control radio-options" placeholder="Options (séparées par des virgules) pour radio"></div>
        <div class="col-md-2"><button type="button" class="btn btn-sm btn-danger" onclick="supprimerColonne(this)">Supprimer</button></div>
    `;
        container.appendChild(div);
    }

    function supprimerColonne(btn) {
        btn.closest('.colonne-item').remove();
    }

    function ajouterLigneTemplate() {
        const container = document.getElementById('lignesList');
        const div = document.createElement('div');
        div.className = 'row mb-2 ligne-item';
        div.innerHTML = `
        <div class="col-md-10"><input type="text" class="form-control" placeholder="Intitulé de la ligne"></div>
        <div class="col-md-2"><button type="button" class="btn btn-sm btn-danger" onclick="supprimerLigneTemplate(this)">Supprimer</button></div>
    `;
        container.appendChild(div);
    }

    function supprimerLigneTemplate(btn) {
        btn.closest('.ligne-item').remove();
    }

    function enregistrerTemplate() {
        const enTete = [];
        document.querySelectorAll('#enTeteFields .en-tete-field').forEach(field => {
            const label = field.querySelector('input[placeholder="Label"]').value;
            const type = field.querySelector('.field-type').value;
            const name = field.querySelector('input[placeholder="Nom interne"]').value;
            if (label && name) enTete.push({
                label,
                type,
                name
            });
        });
        const colonnes = [];
        document.querySelectorAll('#colonnesList .colonne-item').forEach(col => {
            const label = col.querySelector('input[placeholder="Label"]').value;
            const type = col.querySelector('.col-type').value;
            let options = [];
            if (type === 'radio') {
                const optInput = col.querySelector('.radio-options');
                if (optInput.value) options = optInput.value.split(',').map(o => o.trim());
            }
            if (label) colonnes.push({
                label,
                type,
                options
            });
        });
        const lignes = [];
        document.querySelectorAll('#lignesList .ligne-item').forEach(ligne => {
            const text = ligne.querySelector('input[placeholder="Intitulé de la ligne"]').value;
            if (text) lignes.push(text);
        });
        const template = {
            en_tete: enTete,
            tableau: {
                colonnes,
                lignes
            }
        };
        const input = document.createElement('input');
        input.type = 'hidden';
        input.name = 'template_json';
        input.value = JSON.stringify(template);
        const form = document.getElementById('templateForm');
        form.appendChild(input);
        form.submit();
    }

    // Gestion de la copie de template
    let selectedTemplateId = null;
    const selectSource = document.getElementById('selectTemplateSource');
    const btnCopy = document.getElementById('btnCopyTemplate');
    const previewDiv = document.getElementById('templatePreview');
    const previewContent = document.getElementById('templatePreviewContent');

    selectSource.addEventListener('change', function() {
        const id = this.value;
        selectedTemplateId = id;
        if (!id) {
            btnCopy.disabled = true;
            previewDiv.style.display = 'none';
            return;
        }
        // Charger le template via AJAX
        fetch('../ajax_get_template.php?id=' + id)
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    previewDiv.style.display = 'block';
                    previewContent.textContent = 'Erreur : ' + data.error;
                    btnCopy.disabled = true;
                } else {
                    previewDiv.style.display = 'block';
                    previewContent.textContent = JSON.stringify(data, null, 2);
                    btnCopy.disabled = false;
                }
            })
            .catch(error => {
                previewDiv.style.display = 'block';
                previewContent.textContent = 'Erreur de chargement : ' + error;
                btnCopy.disabled = true;
            });
    });

    btnCopy.addEventListener('click', function() {
        if (!selectedTemplateId) return;
        fetch('../ajax_get_template.php?id=' + selectedTemplateId)
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    alert('Erreur : ' + data.error);
                    return;
                }
                // Remplir les champs du formulaire avec les données du template copié
                // En-têtes
                const enTeteContainer = document.getElementById('enTeteFields');
                enTeteContainer.innerHTML = '';
                if (data.en_tete && Array.isArray(data.en_tete)) {
                    data.en_tete.forEach(field => {
                        const div = document.createElement('div');
                        div.className = 'row mb-2 en-tete-field';
                        div.innerHTML = `
                        <div class="col-md-3"><input type="text" class="form-control" placeholder="Label" value="${escapeHtml(field.label)}"></div>
                        <div class="col-md-2"><select class="form-select field-type">${getTypeOptions(field.type)}</select></div>
                        <div class="col-md-2"><input type="text" class="form-control" placeholder="Nom interne" value="${escapeHtml(field.name)}"></div>
                        <div class="col-md-2"><button type="button" class="btn btn-sm btn-danger" onclick="supprimerChampEnTete(this)">Supprimer</button></div>
                    `;
                        enTeteContainer.appendChild(div);
                    });
                }
                // Colonnes
                const colonnesContainer = document.getElementById('colonnesList');
                colonnesContainer.innerHTML = '';
                if (data.tableau && data.tableau.colonnes && Array.isArray(data.tableau.colonnes)) {
                    data.tableau.colonnes.forEach(col => {
                        const div = document.createElement('div');
                        div.className = 'row mb-2 colonne-item';
                        const optionsValue = (col.options && Array.isArray(col.options)) ? col.options.join(',') : '';
                        const disabledAttr = col.type !== 'radio' ? 'disabled' : '';
                        div.innerHTML = `
                        <div class="col-md-3"><input type="text" class="form-control" placeholder="Label" value="${escapeHtml(col.label)}"></div>
                        <div class="col-md-3"><select class="form-select col-type">${getColTypeOptions(col.type)}</select></div>
                        <div class="col-md-3"><input type="text" class="form-control radio-options" placeholder="Options (séparées par des virgules) pour radio" value="${escapeHtml(optionsValue)}" ${disabledAttr}></div>
                        <div class="col-md-2"><button type="button" class="btn btn-sm btn-danger" onclick="supprimerColonne(this)">Supprimer</button></div>
                    `;
                        colonnesContainer.appendChild(div);
                    });
                }
                // Lignes
                const lignesContainer = document.getElementById('lignesList');
                lignesContainer.innerHTML = '';
                if (data.tableau && data.tableau.lignes && Array.isArray(data.tableau.lignes)) {
                    data.tableau.lignes.forEach(ligne => {
                        const div = document.createElement('div');
                        div.className = 'row mb-2 ligne-item';
                        div.innerHTML = `
                        <div class="col-md-10"><input type="text" class="form-control" placeholder="Intitulé de la ligne" value="${escapeHtml(ligne)}"></div>
                        <div class="col-md-2"><button type="button" class="btn btn-sm btn-danger" onclick="supprimerLigneTemplate(this)">Supprimer</button></div>
                    `;
                        lignesContainer.appendChild(div);
                    });
                }
                // Fermer le modal
                bootstrap.Modal.getInstance(document.getElementById('copyTemplateModal')).hide();
                alert('Template copié avec succès ! Vous pouvez maintenant l\'adapter puis l\'enregistrer.');
            })
            .catch(error => {
                alert('Erreur lors de la copie : ' + error);
            });
    });

    function escapeHtml(str) {
        if (!str) return '';
        return str.replace(/[&<>]/g, function(m) {
            if (m === '&') return '&amp;';
            if (m === '<') return '&lt;';
            if (m === '>') return '&gt;';
            return m;
        }).replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, function(c) {
            return c;
        });
    }

    function getTypeOptions(selected) {
        const types = ['text', 'date', 'textarea', 'number'];
        return types.map(t => `<option value="${t}" ${selected === t ? 'selected' : ''}>${t === 'textarea' ? 'Texte long' : (t === 'number' ? 'Nombre' : t)}</option>`).join('');
    }

    function getColTypeOptions(selected) {
        const types = [{
                value: 'radio',
                label: 'Radio (options)'
            },
            {
                value: 'checkbox',
                label: 'Checkbox (Oui/Non)'
            },
            {
                value: 'text',
                label: 'Texte'
            },
            {
                value: 'date',
                label: 'Date'
            },
            {
                value: 'textarea',
                label: 'Texte long'
            },
            {
                value: 'number',
                label: 'Nombre'
            }
        ];
        return types.map(t => `<option value="${t.value}" ${selected === t.value ? 'selected' : ''}>${t.label}</option>`).join('');
    }
document.getElementById('btnLoadLibrary').addEventListener('click', function() {
    var libId = document.getElementById('librarySelect').value;
    if (!libId) {
        alert('Veuillez sélectionner un template.');
        return;
    }
    fetch('../ajax_get_template_library.php?id=' + libId)
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                alert('Erreur : ' + data.error);
                return;
            }
            // Remplir le formulaire avec data.en_tete, data.tableau.colonnes, data.tableau.lignes
            // (même logique que dans la copie de template)
            // Vous pouvez réutiliser les fonctions existantes de remplissage.
            alert('Template chargé. Vous pouvez maintenant l\'adapter.');
            location.reload(); // ou mieux : mettre à jour dynamiquement
        })
        .catch(err => alert('Erreur réseau'));
});
    // Mettre à jour le champ radio-options en fonction du type de colonne
    document.addEventListener('change', function(e) {
        if (e.target.classList.contains('col-type')) {
            const row = e.target.closest('.colonne-item');
            const optionsInput = row.querySelector('.radio-options');
            if (e.target.value === 'radio') {
                optionsInput.disabled = false;
            } else {
                optionsInput.disabled = true;
                optionsInput.value = '';
            }
        }
    });
</script>

<?php require_once '../includes/footer.php'; ?>