@php
    $source = \App\Models\Flows\Variables::availableVariables();
    $variables = [];
    foreach ($source as $i){
        $variables[$i] = $i;
    }
@endphp

<div class="mt-5">
    <a  href="#" id="addRow" class="btn btn-primary mb-3 btn-sm">Añadir ruta</a>
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>Variable</th>
            <th>Condición</th>
            <th>Valor</th>
            <th>Ruta</th>
            <th>Acciones</th>
        </tr>
        </thead>
        <tbody id="selectionTable">

        </tbody>
    </table>
    <textarea id="output" class="form-control d-none" name="content" rows="6" readonly>{{$content}}</textarea>
</div>

@push('css')

@endpush
@push('js')

    <script>
        const variables = {!! json_encode($variables) !!};
        const condiciones = {
            "Es igual": "==",
            "Es diferente": "!=",
            "Es mayor": ">",
            "Es menor": "<",
            "Es mayor o igual": ">=",
            "Es menor o igual": "<=",
            "Contiene" : "like",
            "No contiene" : "not like",
            "Regex" : "^$",
            "Esta vacio" : "empty",
            "No esta vacio" : "notempty",
        };
        const rutas = {!! $sketches->pluck("id","name")->toJson() !!};

        document.getElementById('addRow').addEventListener('click', () => {
            event.preventDefault();
            addRow()
        });

        function addRow(variable = '', condicion = '', route = '', value = '') {
            const table = document.getElementById('selectionTable');
            const row = document.createElement('tr');

            row.innerHTML = `
            <td>${generateSelect(variables,variable)}</td>
            <td>${generateSelect(condiciones, condicion)}</td>
            <td><input type="text" class="form-control capture" value="${value}" placeholder="Escribe un valor"></td>
            <td>${generateSelect(rutas, route)}</td>
            <td><button class="btn btn-danger btn-sm" onclick="removeRow(this)">Eliminar</button></td>
        `;
            table.appendChild(row);
            generateObject();
        }

        function generateSelect(options, selectedValue = '') {
            let selectHTML = `<select class="form-select capture"><option value="">Selecciona</option>`;
            for (const [key, value] of Object.entries(options)) {
                const isSelected = selectedValue.toString() === value.toString() ? 'selected' : '';
                selectHTML += `<option value="${value}" ${isSelected}>${key}</option>`;
            }
            selectHTML += `</select>`;
            return selectHTML;
        }

        function removeRow(button) {
            button.closest('tr').remove();
            generateObject()
        }

        function generateObject() {
            const rows = document.querySelectorAll('#selectionTable tr');
            const result = [];

            rows.forEach(row => {
                const variable = row.querySelector('td:nth-child(1) select').value;
                const condicion = row.querySelector('td:nth-child(2) select').value;
                const route = row.querySelector('td:nth-child(4) select').value;
                const value = row.querySelector('td:nth-child(3) input').value;

                result.push({variable, condicion, route, value});
            });

            document.getElementById('output').value = JSON.stringify(result, null, 2);
        }


        function loadFromTextarea() {
            const v = document.getElementById('output').value
            const data = JSON.parse(v.trim() === "" ? null : v);

            data && data.forEach(item => {
                addRow(item.variable, item.condicion, item.route, item.value);
            });
        }

        $("#selectionTable").bind("input",generateObject)
        window.onload = loadFromTextarea;

    </script>
@endpush