@extends('layouts.full')
@section('title')
    Construction du formulaire à partir du JSON
@endsection
@section('content-main')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <div class="card mb-5">
                <div class="card-header">
                    <h3>Editer le trigger</h3>
                </div>
                <div class="card-body">

                    <div class="inner">
                      <div class="dgc-triggers">
                        @component('components.triggers.first-trigger')@endcomponent
                        @component('components.triggers.age-precise')@endcomponent
                        @component('components.triggers.age-min-max')@endcomponent
                        @component('components.triggers.age-tranche')@endcomponent
                        @component('components.triggers.gender')@endcomponent
                        @php
                            $products = \App\Models\Product::select('cip13', 'libelle')
                                ->whereNull('deleted_at')
                                ->orderBy('libelle')
                                ->get()
                                ->mapWithKeys(function ($product) {
                                    return [$product->cip13 => $product->cip13 . ' - ' . $product->libelle];
                                })
                                ->toArray();
                        @endphp
                        @component('components.triggers.products', ['products' => $products])@endcomponent
                        @component('components.triggers.products-file')@endcomponent
                        @component('components.triggers.group')@endcomponent

                        <div id="triggers-container">
                            <div class="trigger-operator">
                                <label class="btn btn-outline-primary dgc-btn-sm mt-2 mb-2 me-2">
                                    <input type="radio" name="operator" value="AND" checked> ET
                                </label>
                                <label class="btn btn-outline-primary dgc-btn-sm mt-2 mb-2 me-2">
                                    <input type="radio" name="operator" value="OR"> OU
                                </label>
                                <label class="btn btn-outline-primary dgc-btn-sm mt-2 mb-2 me-4">
                                    <input type="radio" name="operator" value="NOT"> SAUF
                                </label>
                            </div>
                        </div>

                        <div class="mt-4">
                            <div class="d-flex justify-content-between align-items-center mb-3">
                                <div class="btn-group">
                                    <button type="button" id="generateJson" class="btn btn-primary">
                                        Générer JSON
                                    </button>
                                    <button type="button" id="resetForm" class="btn btn-secondary">
                                        Reset
                                    </button>
                                </div>
                                <button type="button" id="copyJson" class="btn btn-primary" style="display: none;">
                                    Copier JSON
                                </button>
                            </div>
                            
                            <div id="jsonDisplay" class="border rounded p-3 bg-light"></div>
                            
                            <div id="testResult" class="mt-3 border rounded p-3 bg-light" style="display: none;">
                                <h5>Résultat du test</h5>
                                <pre><code id="testOutput" class="language-json"></code></pre>
                            </div>
                        </div>
                    </div>   
                    </div>
                   
                </div>
            </div>
        </div>
    </div>

    @if(config('app.env') === 'local')
    <div class="row mt-4">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h3>JSON Source</h3>
                </div>
                <div class="card-body">
                    <textarea id="jsonInput" class="form-control" rows="10" placeholder="Collez votre JSON ici...">@if(isset($id) && isset($survey)){{ $survey->custom_triggers }}@endif</textarea>
                    <button id="generateForm" class="btn btn-primary mt-3">Générer le formulaire</button>
                </div>
            </div>
        </div>
    </div>
    @endif
</div>

<script>
$(document).ready(function() {
    // Fonction pour générer le formulaire à partir du JSON
    function generateFormFromJson(json) {
        let html = '';
        
        // Opérateur principal
        const operator = json.operator || 'AND';
        $('input[name="operator"][value="' + operator + '"]').prop('checked', true);
        
        // Conditions
        if (json.conditions && json.conditions.length > 0) {
            json.conditions.forEach((condition, index) => {
                html += generateConditionHtml(condition, index);
            });
        }
        
        return html;
    }

    // Fonction pour générer le HTML d'une condition
    function generateConditionHtml(condition, index) {
        let html = '';
        
        if (condition.conditions) {
            // C'est un groupe
            html += `
                <div class="dgc-triggers-group" data-type="trigger-group">
                    <div class="trigger-operator">
                        <label class="btn btn-outline-primary dgc-btn-sm mt-2 mb-2 me-2">
                            <input type="radio" name="group-operator" value="AND" ${condition.operator === 'AND' ? 'checked' : ''}> ET
                        </label>
                        <label class="btn btn-outline-primary dgc-btn-sm mt-2 mb-2 me-2">
                            <input type="radio" name="group-operator" value="OR" ${condition.operator === 'OR' ? 'checked' : ''}> OU
                        </label>
                    </div>
                    <div class="group-triggers">
            `;
            
            condition.conditions.forEach((subCondition, subIndex) => {
                html += generateConditionHtml(subCondition, `${index}-${subIndex}`);
            });
            
            html += `
                    </div>
                    <button type="button" class="btn btn-danger dgc-delete-group mt-2">
                        <i class="fas fa-trash"></i> Supprimer le groupe
                    </button>
                </div>
            `;
        } else {
            // C'est une condition simple
            html += generateSimpleConditionHtml(condition, index);
        }
        
        return html;
    }

    // Fonction pour générer le HTML d'une condition simple
    function generateSimpleConditionHtml(condition, index) {
        let html = '';
        const type = getTriggerType(condition);
        
        switch (type) {
            case 'age-precis':
                html = generateAgePrecisHtml(condition);
                break;
            case 'age-min-max':
                html = generateAgeMinMaxHtml(condition);
                break;
            case 'age-tranche':
                html = generateAgeTrancheHtml(condition);
                break;
            case 'sex':
                html = generateSexHtml(condition);
                break;
            case 'product-search':
                html = generateProductSearchHtml(condition);
                break;
        }
        
        return `<div class="dgc-item-trigger" data-type="${type}">${html}</div>`;
    }

    // Fonction pour déterminer le type de trigger
    function getTriggerType(condition) {
        if (condition.field === 'age') {
            if (condition.operator === 'BETWEEN') return 'age-tranche';
            if (condition.operator === 'IN') return 'age-precis';
            return 'age-min-max';
        }
        if (condition.field === 'sex') return 'sex';
        if (condition.field === 'cip') return 'product-search';
        return '';
    }

    // Fonction pour générer le HTML d'un trigger d'âge précis
    function generateAgePrecisHtml(condition) {
        const values = Array.isArray(condition.value.values) ? condition.value.values : [condition.value.value];
        return `
            <div class="age-precis">
                <div class="row">
                    <div class="col-md-8">
                        <input type="text" name="value" class="form-control" value="${values.join(', ')}" placeholder="Ex: 18, 25, 30">
                    </div>
                    <div class="col-md-4">
                        <select name="age_unit" class="form-control">
                            <option value="year" ${condition.value.unit === 'year' ? 'selected' : ''}>Année</option>
                            <option value="month" ${condition.value.unit === 'month' ? 'selected' : ''}>Mois</option>
                            <option value="day" ${condition.value.unit === 'day' ? 'selected' : ''}>Jour</option>
                        </select>
                    </div>
                </div>
                <button type="button" class="btn btn-danger dgc-delete-trigger mt-2">
                    <i class="fas fa-trash"></i> Supprimer
                </button>
            </div>
        `;
    }

    // Fonction pour générer le HTML d'un trigger d'âge min-max
    function generateAgeMinMaxHtml(condition) {
        return `
            <div class="age-min-max">
                <div class="row">
                    <div class="col-md-4">
                        <select name="age_operator" class="form-control">
                            <option value="lessThan" ${condition.operator === '<' ? 'selected' : ''}>Inférieur à</option>
                            <option value="lessThanOrEqual" ${condition.operator === '<=' ? 'selected' : ''}>Inférieur ou égal à</option>
                            <option value="greaterThan" ${condition.operator === '>' ? 'selected' : ''}>Supérieur à</option>
                            <option value="greaterThanOrEqual" ${condition.operator === '>=' ? 'selected' : ''}>Supérieur ou égal à</option>
                        </select>
                    </div>
                    <div class="col-md-4">
                        <input type="number" name="age_value" class="form-control" value="${condition.value.value}">
                    </div>
                    <div class="col-md-4">
                        <select name="age_unit" class="form-control">
                            <option value="year" ${condition.value.unit === 'year' ? 'selected' : ''}>Année</option>
                            <option value="month" ${condition.value.unit === 'month' ? 'selected' : ''}>Mois</option>
                            <option value="day" ${condition.value.unit === 'day' ? 'selected' : ''}>Jour</option>
                        </select>
                    </div>
                </div>
                <button type="button" class="btn btn-danger dgc-delete-trigger mt-2">
                    <i class="fas fa-trash"></i> Supprimer
                </button>
            </div>
        `;
    }

    // Fonction pour générer le HTML d'un trigger d'âge tranche
    function generateAgeTrancheHtml(condition) {
        return `
            <div class="age-tranche">
                <div class="row">
                    <div class="col-md-5">
                        <label>Âge minimum</label>
                        <input type="number" name="age_min" class="form-control" value="${condition.value.min.value}">
                        <select name="age_min_unit" class="form-control mt-2">
                            <option value="year" ${condition.value.min.unit === 'year' ? 'selected' : ''}>Année</option>
                            <option value="month" ${condition.value.min.unit === 'month' ? 'selected' : ''}>Mois</option>
                            <option value="day" ${condition.value.min.unit === 'day' ? 'selected' : ''}>Jour</option>
                        </select>
                    </div>
                    <div class="col-md-5">
                        <label>Âge maximum</label>
                        <input type="number" name="age_max" class="form-control" value="${condition.value.max.value}">
                        <select name="age_max_unit" class="form-control mt-2">
                            <option value="year" ${condition.value.max.unit === 'year' ? 'selected' : ''}>Année</option>
                            <option value="month" ${condition.value.max.unit === 'month' ? 'selected' : ''}>Mois</option>
                            <option value="day" ${condition.value.max.unit === 'day' ? 'selected' : ''}>Jour</option>
                        </select>
                    </div>
                </div>
                <button type="button" class="btn btn-danger dgc-delete-trigger mt-2">
                    <i class="fas fa-trash"></i> Supprimer
                </button>
            </div>
        `;
    }

    // Fonction pour générer le HTML d'un trigger de sexe
    function generateSexHtml(condition) {
        return `
            <div class="sex">
                <select name="sex" class="form-control">
                    <option value="M" ${condition.value === 'M' ? 'selected' : ''}>Masculin</option>
                    <option value="F" ${condition.value === 'F' ? 'selected' : ''}>Féminin</option>
                </select>
                <button type="button" class="btn btn-danger dgc-delete-trigger mt-2">
                    <i class="fas fa-trash"></i> Supprimer
                </button>
            </div>
        `;
    }

    // Fonction pour générer le HTML d'un trigger de recherche de produits
    function generateProductSearchHtml(condition) {
        const values = Array.isArray(condition.value) ? condition.value : [condition.value];
        return `
            <div class="product-search">
                <select name="cip" class="form-control" multiple>
                    ${values.map(cip => `<option value="${cip}" selected>${cip}</option>`).join('')}
                </select>
                <button type="button" class="btn btn-danger dgc-delete-trigger mt-2">
                    <i class="fas fa-trash"></i> Supprimer
                </button>
            </div>
        `;
    }

    // Fonction pour générer le formulaire
    function generateForm() {
        try {
            const jsonData = JSON.parse($('#jsonInput').val());
            const formHtml = generateFormFromJson(jsonData);
            $('#triggers-container').html(formHtml);
            updateMainGroupOperators();
        } catch (error) {
            console.log('JSON invalide ou vide:', error.message);
        }
    }

    // Générer le formulaire au chargement si custom_triggers existe
    @if(isset($id) && isset($survey) && $survey->custom_triggers)
    try {
        const jsonData = JSON.parse('{!! $survey->custom_triggers !!}');
        const formHtml = generateFormFromJson(jsonData);
        $('#triggers-container').html(formHtml);
        updateMainGroupOperators();
    } catch (error) {
        console.log('Erreur lors de la génération du formulaire:', error.message);
    }
    @endif

    // Générer le formulaire au clic sur le bouton
    $('#generateForm').click(function() {
        generateForm();
    });

    // Gestion des opérateurs
    $(document).on('change', 'input[name="operator"]', function() {
        updateMainGroupOperators();
    });

    // Gestion des opérateurs pour les groupes
    $(document).on('change', 'input[name="group-operator"]', function() {
        const $group = $(this).closest('.dgc-triggers-group');
        updateGroupOperators($group);
    });

    // Gestion du bouton de génération JSON
    $('#generateJson').click(async function() {
        const jsonStructure = await generateJsonStructure();
        if (jsonStructure) {
            const jsonString = JSON.stringify(jsonStructure, null, 2);
            $('#jsonDisplay').text(jsonString);
            $('#copyJson').show();
        }
    });

    // Gestion du bouton de copie
    $('#copyJson').click(function() {
        const jsonText = $('#jsonDisplay').text();
        navigator.clipboard.writeText(jsonText).then(() => {
            const $btn = $(this);
            const originalText = $btn.text();
            $btn.text('Copié !');
            setTimeout(() => $btn.text(originalText), 2000);
        });
    });

    // Gestion du bouton reset
    $('#resetForm').click(function() {
        $('#triggers-container').empty();
        $('#jsonDisplay').empty();
        $('#copyJson').hide();
        updateMainGroupOperators();
    });
});
</script>

<style>
.dgc-triggers {
    padding: 20px;
}

.trigger-operator {
    margin-bottom: 20px;
}

.dgc-item-trigger {
    margin-bottom: 15px;
}

.dgc-triggers-group {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
}

.group-triggers {
    margin-left: 20px;
}

.btn-group {
    gap: 0.5rem;
}

#jsonPreview {
    max-height: 500px;
    overflow-y: auto;
}

.json-content, #jsonDisplay {
    background-color: #f8f9fa;
    padding: 1rem;
    border-radius: 4px;
    font-family: monospace;
    white-space: pre-wrap;
    word-wrap: break-word;
    min-height: 50px;
}
</style>
@endsection