<form action = 'index.php?module=webformular&event=edit&id=[% $WForm.id %]' method='post' class="form-horizontal form-label-left">
    <input type="hidden" value="1" name="save">
    <input type="hidden" value="[% $WForm.id %]" name="id">
    <div class='card panel-fcs-border shadow-sm'>
        <div class='card-header'>
            <div class="row">
                <div class="col-sm-8">
                    <div class='fcs-card-title h1'>
                        [% $user->gettext('Web Formular bearbeiten') %]
                    </div>
                </div>
                <div class="col-sm-4 text-end">
                    <div class='btn-group'>
                        <input type="submit" class='btn btn-outline-primary' value="[% $user->gettext('Speichern') %]">
                        <a href='index.php?module=webformular' class='btn btn-outline-primary'>[% $user->gettext('Zurück')%]</a>
                    </div>

                </div>
            </div>
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-sm-6">
                    <div class="card panel-info shadow-sm rounded">
                        <div class="card-header">
                            <h3 class="card-title">[% $user->gettext('Daten') %]</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="form-group row mb-3">
                                        <label class="col-lg-4 control-label">[% $user->gettext('Titel') %]</label>
                                        <div class="col-lg-8">
                                            <input type="text" class="form-control" name="description" value="[% $WForm.description %]"/>
                                        </div>
                                    </div>
                                    <div class="form-group row mb-3">
                                        <label class="col-lg-4 control-label">[% $user->gettext('Beschreibung') %]</label>
                                        <div class="col-lg-8">
                                            <textarea class="form-control" style="min-height: 200px;" name="longdescription">[% $WForm.longdescription %]</textarea>
                                        </div>
                                    </div>
                                    <div class="form-group row mb-3">
                                        <label class="col-lg-4 control-label">[% $user->gettext('Verknüpfte mit') %]</label>
                                        <div class="col-lg-8">
                                            <select class="form-control" name="userid">
                                                [% foreach from = $users item=$user key=$id %]
                                                    <option value="[% $id %]" [% if $id == $WForm.userid%]selected="selected"[% /if %]>[% $user%]</option>
                                                [% /foreach %]
                                            </select>
                                        </div>
                                    </div>           
                                </div>
                            </div>
                        </div>
                    </div> 

                    <div class="card panel-info shadow-sm rounded">
                        <div class="card-header">
                            <h3 class="card-title">[% $user->gettext('API zum Einbinden des IFrames') %]</h3>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-12">
                                    <div class="form-group row mb-3">
                                        <div class="col-sm-12">
                                            <p class='form-control-static'>[% $user->gettext('Sie brauchen den API-Schlüsseln, um Heinzelmann in der fremden Webseite zu binden') %]</p>
                                        </div>
                                    </div>
                                    <div class="form-group row mb-3">
                                        <label class="col-lg-4 control-label">[% $user->gettext('API-Key') %]</label> 
                                        <div class="col-lg-8">
                                            <div class='input-group'>
                                                <input type="text" class="form-control" name="apikey" id="ApiKey" value="[% $WForm.apikey %]" readonly="readonly"/>
                                                <div class='input-group-text'>
                                                    <a href='javascript: updateAPIKey(32)'><span class='fa fa-arrows-rotate'></span></a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="form-group row mb-3">
                                        <label class="col-lg-4 control-label">[% $user->gettext('Beispiel-Skript') %] <a href="index.php?module=webformular&event=createScript&id=[% $WForm.id %]" title="[% $user->gettext('Skript herunterladen')%]"><span class="btn btn-sm btn-outline-secondary"><span class="fa fa-download"></span></span></a></label>
                                        <div class="col-lg-8">
                                            <textarea class='form-control' readonly='readonly' style='height: 300px;'>
                                                    var api_key = '[% $WForm.apikey %]';

                                                    const getTokenProt = new XMLHttpRequest();
                                                    const getToken='[% $smarty.const.HTTPURL %]index.php?module=login&event=getToken&api_key='+api_key;

                                                    getTokenProt.open("GET", getToken);
                                                    getTokenProt.send();

                                                    getTokenProt.onreadystatechange = (e) => {
                                                      var tokenMessage = JSON.parse(getTokenProt.responseText);
                                                      if(tokenMessage.error == true){
                                                                    alert(tokenMessage.error);
                                                      }
                                                      else{
                                                            var token = tokenMessage.token;
                                                            const getIframeProt = new XMLHttpRequest();
                                                            const getIframe = '[% $smarty.const.HTTPURL%]index.php?module=login&event=getIframe&aT='+token+'&w=800&h=900';
                                                            getIframeProt.open("GET", getIframe);
                                                            getIframeProt.send();
                                                            getIframeProt.onreadystatechange = (e) => {
                                                                    document.getElementById('HM-Iframe').innerHTML = getIframeProt.responseText;
                                                            }
                                                      }
                                                    }</textarea>
                                        </div>
                                    </div>           
                                </div>
                            </div>
                        </div>
                    </div> 

                </div>
                <div class="col-sm-6">
                    <div class="card panel-info shadow-sm rounded">
                        <div class="card-header">
                            <div class='row'>
                                <div class='col-sm-8'>
                                    <h3 class="card-title">[% $user->gettext('Aufbau für "Ticket"') %]</h3>

                                </div>
                                <div class='col-sm-4 text-end'>
                                    <a href='index.php?module=webformular&event=vorschau&id=[% $WForm.id %]' class='openInBigIFrameModal btn btn-outline-primary'>[% $user->gettext('Vorschau')%]</a>
                                    <a href='index.php?module=webformular&event=info' class='openInBigIFrameModal btn btn-outline-primary'>[% $user->gettext('Erklärung')%]</a>

                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-lg-12">
                                    
                                    <div class="form-group row mb-3">
                                        <label class="col-lg-4 control-label">[% $user->gettext('Template') %]</label>
                                        <div class="col-lg-8">
                                            <textarea class='form-control' name='template' style='min-height: 800px;'>[% $tplContent%]</textarea>
                                        </div>
                                    </div>

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

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

<script>
    function updateAPIKey(length) {
        var result = '';
        var characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
        var charactersLength = characters.length;
        for (var i = 0; i < length; i++) {
            result += characters.charAt(Math.floor(Math.random() * charactersLength));
        }
        $("#ApiKey").val(result);
    }

</script>
