@php
    $variables = \App\Models\Flows\Variables::availableVariables();
    $writableVariables = \App\Models\Flows\Variables::writableVariables();
@endphp
<div class="row">
    <div class="col">
        <div class="card-body">
                <div class="row">
                    <div class="col-2">
                        <div class="form-group">
                            <label for="methodSelect">Método HTTP:</label>
                            <select id="methodSelect" name="method" class="form-control">
                                <option @selected($method == "GET") value="GET">GET</option>
                                <option @selected($method == "POST") value="POST">POST</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-10">
                        <div class="form-group">
                            <label for="urlInput">URL:</label><br>
                            <div class="btn-group" style="width:100%;">
                                <input type="text" class="form-control" name="url" value="{{$url}}" id="urlInput" placeholder="https://example.com/api" style="border-radius:10px 0px 0px 10px;border-right:0;">
                                <select id="variableSelect" class="form-control" style="width:40%;border-radius:0px 10px 10px 0px;">
                                    <option value="">Selecciona una variable</option>
                                    @foreach($variables as $var)
                                        <option value="{{$var}}">{{$var}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="form-group">
                    <label class="json-field jsonField">Cuerpo de la Solicitud (JSON):</label>
                    <div class="alert alert-info json-field jsonField">
                        <small>Puedes usar los valores
                            {@foreach(\App\Enums\AllowHeaders::cases() as $case)
                                "{{$case->value}}" : "",
                            @endforeach}
                            para indicar parametros Header.
                        </small>
                    </div>
                    <textarea id="jsonInput" class="form-control json-field jsonField" name="body" rows="4" placeholder='{"key":"value"}'>{{$body}}</textarea>

                    <div class="clearfix">
                        <div class="float-start json-field jsonField">
                            <select id="variableSelector" class="form-select">
                                <option value="" selected>Insertar variable...</option>
                                @foreach($variables as $variable)
                                    <option value="{{$variable}}">{{$variable}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="float-end">
                            <button type="button" id="testButton" class="btn btn-primary" style="border-radius:0px 0px 5px 5px">PROBAR</button>
                        </div>
                    </div>
                </div>

        </div>
        <!-- Campo para mostrar resultados -->
        <div class="card-footer">
            <div class="row">
                <div class="col">
                    <label for="resultOutput">Resultado:</label>
                    <textarea class="form-control" id="resultOutput" rows="5" readonly></textarea>
                </div>
                <div class="col">
                    <label for="resultOutput">Almacenamiento:</label>
                    <textarea class="form-control" name="content" id="jsonOutput" rows="5">{{$contenido}}</textarea>
                    <div class="clearfix">
                        <div class="float-start">
                            <select id="keySelector" class="form-select">
                                <option value="" selected>Insertar variable...</option>
                                @foreach($writableVariables as $variable)
                                    <option value="{{$variable}}">{{$variable}}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="float-end">
                            <select id="valueSelector" class="form-select">
                                <option value="" selected>Insertar variable...</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@push('css')
    <style>
        #jsonOutput, #jsonInput, #resultOutput{
            border-radius:5px 0px 5px 0px;
        }
        #keySelector, #valueSelector, #variableSelector{
            border-top:0;
            border-radius: 0px 0px 5px 5px;
        }
        #formatSelector{
            border-bottom:0;
            border-radius: 5px 5px 0px 0px;
        }
        .json-field {
            display: none; /* Oculto por defecto */
        }
    </style>
@endpush
@push('js')
    <script>
        $(document).ready(function() {
            const editor = document.getElementById('jsonInput');
            const variableSelector = document.getElementById('variableSelector');
            variableSelector.addEventListener('change', insertVariable);

            function populateValueSelector(result) {
                valueSelector.innerHTML = '';
                Object.keys(result).forEach((value, index) => {
                    const option = document.createElement('option');
                    option.value = value;
                    option.textContent = value;
                    valueSelector.appendChild(option);
                });
            }

            function insertVariable() {
                const variable = variableSelector.value;
                if (variable) {
                    replaceSelectedText(editor, `\{\{${variable}\}\}`);
                    editor.focus();
                    variableSelector.selectedIndex = 0;
                }
            }
            function replaceSelectedText(textarea, text) {
                const start = textarea.selectionStart;
                const end = textarea.selectionEnd;
                const value = textarea.value;

                textarea.value = value.substring(0, start) + text+ value.substring(end);
                textarea.selectionStart = textarea.selectionEnd = start + text.length;
            }
            let methodCheck =  () => {
                if ($("#methodSelect").val() === 'POST') {
                    $('.jsonField').show();
                } else {
                    $('.jsonField').hide();
                }
            }

            $('#methodSelect').on('change', function() {
                methodCheck()
            });

            $('#variableSelect').on('change', function() {
                let variable = $(this).val();
                if (variable) {
                    $('#urlInput').val($('#urlInput').val() + `\{\{${variable}\}\}`);
                    $(this).val('');
                }
            });

            $('#testButton').on('click', function() {
                $('#resultOutput').val(`Generando solicitud`);

                let url = $('#urlInput').val();
                let method = $('#methodSelect').val();
                let jsonBody = $('#jsonInput').val();

                fetch(`{{route('apiclient.test')}}`,{
                    ...fetchPOST,
                    body : JSON.stringify({
                        ...__token(),
                        method,
                        url,
                        jsonBody
                    })
                })
                    .then(r => r.json())
                    .then(response => {
                        let result = 'Resultado de la solicitud.\n';
                        result += `- - - - - - - - - - - - - - - \n`
                        result += `METHOD: ${response.method} \n`
                        result += `URL: ${response.url}\n`
                        result += `Body: ${response.body}\n`
                        result += `Status: ${response.status}\n`
                        result += `Result: ${response.result}\n`
                        $('#resultOutput').val(result);
                        populateValueSelector(JSON.parse(response.result));
                    })
            });

            $('#jsonInput').on('input', function() {
                let inputText = $(this).val();
                try {
                    let formattedJson = JSON.stringify(JSON.parse(inputText), null, 4);
                    $(this).val(formattedJson);
                } catch (e) {
                }
            });

            methodCheck()
        });
    </script>
@endpush
@push('js')
    <script>
        const keySelector = document.getElementById('keySelector');
        const valueSelector = document.getElementById('valueSelector');
        const jsonOutput = document.getElementById('jsonOutput');

        let jsonObject = {!!$contenido!!};

        function updateJsonOutput() {
            const selectedKey = keySelector.value;
            const selectedValue = valueSelector.value;
            jsonObject[selectedKey] = selectedValue;
            jsonOutput.value = JSON.stringify(jsonObject, null, 2);
        }

        function updateJsonFromTextarea() {
            try {
                const updatedJsonObject = JSON.parse(jsonOutput.value);
                jsonObject = updatedJsonObject;
                updateSelectors();
            } catch (error) {
                console.error("JSON no válido:", error);
            }
        }

        function updateSelectors() {
            const keys = Object.keys(jsonObject);
            const values = Object.values(jsonObject);

            if (keys.includes(keySelector.value)) {
                valueSelector.value = jsonObject[keySelector.value];
            } else {
                keySelector.value = keys[0] || 'var1';
                valueSelector.value = jsonObject[keys[0]] || 'response1';
            }
        }

        keySelector.addEventListener('change', updateJsonOutput);
        valueSelector.addEventListener('change', updateJsonOutput);

        jsonOutput.addEventListener('input', updateJsonFromTextarea);

        updateJsonOutput();
    </script>
@endpush