<style>
    .dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  width:100%;
}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  max-height:300px;
  width:100%;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  cursor:pointer;
}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}
</style>
<?
$formname                    = "form_line_card";
$translation                 = \DynCom\mysyde\common\classes\Registry::get("translation");
$input_page_id               = (isset($_REQUEST["input_page_id"]) ? $_REQUEST["input_page_id"] : "");
$input_collection_id         = (isset($_REQUEST["input_collection_id"]) ? $_REQUEST["input_collection_id"] : "");
$collection_setup_content_id = (isset($_REQUEST["collection_setup_content_id"]) ? $_REQUEST["collection_setup_content_id"] : "");
$input_component_id          = (isset($_REQUEST["input_component_id"]) ? $_REQUEST["input_component_id"] : "");
$header_id                   = (isset($input_line["header_id"]) ? $input_line["header_id"] : "");
$step_id = (isset($_REQUEST["step_id"]) ? $_REQUEST["step_id"] : 0);
$section_id = (isset($_REQUEST["input_section_id"]) ? $_REQUEST["input_section_id"] : 0);
if(isset($_REQUEST["section_id"])){
    $section_id  = $_REQUEST["section_id"];
}
 
if($input_line['section_id'] != NULL){
    $section_id  =  $input_line['section_id'] ;
}
 
$queryform  = "SELECT * FROM contactform_header WHERE id = '" . $header_id . "' LIMIT 1";
        $result = @mysqli_query($GLOBALS['mysql_con'], $queryform);
        $contactform  = @mysqli_fetch_array($result);
        $is_multiform = $contactform['is_multistep'];
$icons    = array();
$queryIcons = "SELECT * FROM material_icons";
$resultIcons = @mysqli_query($GLOBALS['mysql_con'], $queryIcons);
while($icon = @mysqli_fetch_array($resultIcons)){
    array_push($icons, $icon['code']);
}
     
?>

<div id="overlaycrumb">
    <?php if ($input_line["id"] == "") {
        echo $translation->get("new_contactform_field");
    } else {
        echo $translation->get("edit_contactform_field");
    }
    ?>
    <div id="closeoverlay" onclick="disableOverlay();"></div>
</div>

<ul class="toolbar_menu">
    <?
    if (is_collection_edit()) {
        button("left", $translation->get("overview"), $formname, "loadCard('edit_collection', true)");
    } else {
        button("left", $translation->get("overview"), $formname, "loadCard('edit_contactform', true)");
    }
    ?>
    <?= button("save", $translation->get("save"), $formname, "loadCard('save_line_contactform', true)"); ?>
    <?= button("save", $translation->get("save_and_close"), $formname, "jQuery('#save_and_close', jQuery('#" . $formname . "')).val(1);loadCard('save_line_contactform', true)"); ?>
    <?php
    if ($input_line["id"] != "") {
        echo button("delete", $translation->get("delete"), $formname, "loadCard('delete_line_contactform', true, '{$translation->get('delete_contactform_field_confirm')}')");
    }
    ?>
    <?= button("reset", $translation->get("restore"), $formname, "?action=edit"); ?>
</ul>
<div class="clearfix"></div>

<?php

if ($messages !== null) {
    if (count($messages)) {
            echo '<div id="overlayMessages">' . join("\r\n", $messages) . '</div>';
    } 
 }
?>

<form id="<?= $formname ?>" name="<?= $formname ?>" method="post" enctype="multipart/form-data">
    <input name="input_line_id" type="hidden" value="<?= $input_line["id"] ?>" />
    <input name="input_id" type="hidden" value="<?= $header_id; ?>" />
    <input type="hidden" name="input_page_id" value="<?php echo $input_page_id; ?>" />
    <input type="hidden" name="input_collection_id" value="<?php echo $input_collection_id; ?>" />
    <input type="hidden" name="collection_setup_content_id" value="<?php echo $collection_setup_content_id; ?>" />
    <input type="hidden" name="input_component_id" value="<?php echo $input_component_id; ?>" />
    <input name="save_and_close" id="save_and_close" type="hidden" value="0" />
    <input type="hidden" id="opt_id" name="opt_id">
    <input type="hidden" name="linklist_form" value="form_field_contactform_list" />


    <table class="cardform" border="0" cellspacing="0" cellpadding="0">
        <tr>
            <td>
                <?php 
                  
                if($is_multiform){ 
                    // $section_id = 0;
                    
                   
                ?>
                <?php
                    $queryLine  = "SELECT * FROM multi_contactform_link WHERE contactform_line_id = " . $input_line["id"] . " LIMIT 1";
                     
                    $resultLine = @mysqli_query($GLOBALS['mysql_con'], $queryLine);
                    $input_liner = array();
                    $input_liner['layout_area_id'] = '';
                    if (@mysqli_num_rows($resultLine) == 1) {
                        $input_liner = @mysqli_fetch_array($resultLine);
                    }  
                ?>
                <? layout_class_select($translation->get("layout_area"), "input_layout_area_id", $input_liner['layout_area_id']); ?>
                <? input($translation->get("self_definded_class"), "layout_class_defined", "text", $input_liner["layout_class_defined"], 50) ?>
                <div class="label"><label for="abschnitt">Abschnitt Auswählen</label></div>
                <div class="input">
               
                    <select class="select" name="section_id" id="section_id">
                        <?php 
                            $queryStep = "SELECT * FROM contactform_steps where contactform_id = ".$header_id.' ORDER BY sorting ASC' ;
                            $resultStep = @mysqli_query($GLOBALS['mysql_con'], $queryStep);
                            
                            $e = 1;
                             while($rowStep    = mysqli_fetch_array($resultStep)){
                                $query = "SELECT * FROM contactform_section where step_id = ".$rowStep['id'].'';
                                $result = @mysqli_query($GLOBALS['mysql_con'], $query);
                                $a = 1;
                            while( $row    = mysqli_fetch_array($result)){ 
                          
                            ?>
                            <option
                            value="<?= $row['id']?>" <?php if($row['id'] == $section_id){ echo 'selected';} ?>><?php echo $e.'.'.$a.': '.$row['name'] ?></option>
                        <?php $a++; } $e++; } ?>
                    </select>
                </div>
              
                
             
                
                
                <? $query = "SELECT * FROM contactform_section where contactform_id = ".$header_id.''; } ?>
                <div class="label"><label for="input_typ">Typ</label></div>
                <div class="input">
                    <select class="select" name="input_typ" id="input_typ">
                        <option<?= ($input_line["typ"] == 1) ? " selected=\"selected\"" : " "; ?>
                            value="1"><?php echo $translation->get("textfield"); ?></option>
                        <option<?= ($input_line["typ"] == 2) ? " selected=\"selected\"" : " "; ?>
                            value="2"><?php echo $translation->get("textarea"); ?></option>
                        <option<?= ($input_line["typ"] == 3) ? " selected=\"selected\"" : " "; ?>
                            value="3"><?php echo $translation->get("yesno"); ?></option>
                        <option<?= ($input_line["typ"] == 4) ? " selected=\"selected\"" : " "; ?>
                            value="4"><?php echo $translation->get("optionfield"); ?></option>
                        <option<?= ($input_line["typ"] == 5) ? " selected=\"selected\"" : " "; ?>
                            value="5"><?php echo $translation->get("headline"); ?></option>
                        <option<?= ($input_line["typ"] == 6) ? " selected=\"selected\"" : " "; ?>
                            value="6"><?php echo $translation->get("spacerow"); ?></option>
                        <option<?= ($input_line["typ"] == 7) ? " selected=\"selected\"" : " "; ?>
                            value="7"><?php echo $translation->get("title_news"); ?></option>
                        <option<?= ($input_line["typ"] == 8) ? " selected=\"selected\"" : " "; ?>
                            value="8"><?php echo $translation->get("file"); ?></option>
                            <?php if($is_multiform){  ?>
                        <option<?= ($input_line["typ"] == 9) ? " selected=\"selected\"" : " "; ?>
                            value="9"><?php echo $translation->get("checkbox"); ?></option>
                            <option<?= ($input_line["typ"] == 10) ? " selected=\"selected\"" : " "; ?>
                            value="10"><?php echo 'Radio'; ?></option>
                         <?php } ?>   
                            
                    </select>
                </div>
                
                <? input($translation->get("textkey"), "input_code", "text", $input_line["code"], 50) ?>
                <? input($translation->get("caption"), "input_name", "text", $input_line["name"], 250) ?>
                <? input($translation->get("caption_in_field"), "input_infield", "checkbox", $input_line["infield"]) ?>
                <? input($translation->get("mandatory_field"), "input_mandatory", "checkbox", $input_line["mandatory"]) ?>
                <? input($translation->get("active"), "input_active", "checkbox", $input_liner['active']); ?>
               
 
                
            </td>
            <td>
            <div class="main_input_option_string" >
                    <div id="example1">
                        <button type="button" class="r-btnAdd btnAdd btn btn-primary">Hinzufügen +</button>

                        <?php $totalOptions = 0; $queryOpt = 'SELECT * FROM contactform_line_option WHERE line_id = '.$input_line["id"]; 
                                   
                                    $result = @mysqli_query($GLOBALS['mysql_con'], $queryOpt); 
                                    $dataArray = array();
                                    $i = 0;
                                    if(@mysqli_num_rows($result) > 0){
                                        $totalOptions = @mysqli_num_rows($result);
                                        while( $rowData    = mysqli_fetch_array($result)){
                                        
                            ?>  
                            <div class="r-group moduleAppended rGroup<?=$i;?>">
                                <p>
                                    <label for="<?php if($i == 0){ echo 'input_option_0_0' ;} else { echo 'input_option_'.$i.'_name'; } ?>" data-pattern-text="<?=$translation->get("optionvalues")?> +=1:"><?=$translation->get("optionvalues")?>:</label><br>
                                    <input type="text" value="<?=$rowData['option_string']?>"  name="input_option[<?=$i;?>][name]" id="input_option_<?=$i;?>_name" class="form-control text" data-pattern-name="input_option[++][name]" data-pattern-id="input_option_++_name" />
                                </p>
                                
                                   <p>
                                    <label for="<?php if($i == 0){ echo 'input_option_0_0' ;} else { echo 'input_option_'.$i.'_bild'; } ?>" data-pattern-text="Bild +=1:">Bild:</label><br>
                                    <input type="file" name="input_option[<?=$i;?>][bild]" id="input_option_<?=$i;?>_bild" class="form-control file" data-pattern-name="input_option[++][bild]" data-pattern-id="input_option_++_bild" />
                                     <input value="<?= $rowData['field_img']?>" type="hidden" name="input_option[<?=$i;?>][old_bild]" id="input_option_<?=$i;?>_old_bild" class="form-control" data-pattern-name="input_option[++][old_bild]" data-pattern-id="input_option_++_old_bild" />
                                     <?php
                                        if($rowData["field_img"] != NULL && $rowData["field_img"] != ''){
                                            echo '<ul class="toolbar_menu">';
                                            echo "<div class='img_container user_img".$rowData['id']."'><img class='img-fluid' src='/userdata/collection/resize/".$rowData["field_img"]."'></div>";
                                            echo  button("delete", $translation->get("delete").' Bild', $formname, "delete_bild(this, '{$formname}',  '{$rowData['id']}')"); 
                                            echo '</ul>';
                                        }
                                     ?>
                                </p>
                                <div>
                                <label >Icon:</label> <br>
                                <input type="hidden" name="input_option[<?=$i;?>][icon]" id="input_option_<?=$i?>_icon" value="<?=$rowData['icon'] ;?>" class="form-control text"  />
                                    <?php if(!empty($icons)){?>
                                    <div class="dropdown">
                                        <button data-counter="<?=$i?>"   class="dropbtn btnNumber<?=$i?>"><?php if($rowData['icon'] != NULL && $rowData['icon'] != '' && $rowData['icon'] != ' ') { $htmlIcon = "<span class='material-icons'>" . $rowData['icon'] . '</span>'; echo $htmlIcon;} else { ?>--- <?php } ?></button>
                                        <div id="myDropdown<?=$i?>" class="dropdown-content dropdown">
                                            <a data-counter="<?= $i;?>" data-icon=" " class="iconSelect" role="button">---</a>
                                            <?php foreach($icons as $icon){ ?>
                                                <a data-counter="<?= $i;?>" data-icon="<?= $icon?>" class="iconSelect" role="button"><span class="material-icons md-24"><?=$icon?></span></a>
                                            <?php } ?>
                                        </div>
                                    </div>
                                    <?php } ?>
                                </div>
                                
                                <div class="">
                                  
                                        <label for="<?php if($i == 0){ echo 'input_option_0_0' ;} else { echo 'input_option_'.$i.'_nextSection'; } ?>" data-pattern-text="Nächste Abschnitt +=1:">Nächste Abschnitt:</label><br>
                                    
                                        <select class="select" name="input_option[<?=$i;?>][nextSection]" id="input_option_<?=$i;?>_nextSection"  data-pattern-name="input_option[++][nextSection]" data-pattern-id="input_option_++_nextSection">
                                        <option value="0" <?php if($rowData['next_section_id'] == '0'){ echo 'selected'; } ?>>---</option>
                                        <?php $resultSection = @mysqli_query($GLOBALS['mysql_con'], $query); while( $row    = mysqli_fetch_array($resultSection)){ ?>
                                            <option
                                            value="<?= $row['id']?>" <?php if($row['id'] == $rowData['next_section_id']){ echo 'selected';} ?>><?php echo $row['name'] ?></option>
                                        <?php } ?>
                                    </select>
                                </div>
                                <div class="">
                                        <label for="<?php if($i == 0){ echo 'input_option_0_0' ;} else { echo 'input_option_'.$i.'_linked_field'; } ?>" data-pattern-text="Link -Textfeld? +=1:">Link -Textfeld?:</label><br>
                                        <input <?php if($rowData['linked_field'] == 1){ echo 'checked';} ?> type="checkbox" name="input_option[<?=$i;?>][linked_field]" id="input_option_<?=$i;?>_linked_field" class="form-control checkbox" data-pattern-name="input_option[++][linked_field]" data-pattern-id="input_option_++_linked_field" />
                                </div>
                                <div class="">
                                    <label for="<?php if($i == 0){ echo 'input_option_0_0' ;} else { echo 'input_option_'.$i.'_linked_placeholde'; } ?>" data-pattern-text="Linklplatz Platzhalter +=1:">Linklplatz Platzhalter:</label> <br>
                                    <input type="text" name="input_option[<?=$i;?>][linked_placeholder]" id="input_option_<?=$i;?>_linked_placeholder" class="form-control text" data-pattern-name="input_option[++][linked_placeholder]" data-pattern-id="input_option_++_linked_placeholder" value="<?= $rowData['linked_placeholder'];?>" />
                                </div>     
                                
                                <p>
                                    <!-- Add a remove button for the item. If one didn't exist, it would be added to overall group -->
                                    <?php if($i != 0){ ?>
                                        <button type="button" data-counter="<?= $i;?>" class="r-btnRemove btnRemove btn btn-danger">Entfernen -</button>
                                    <?php } ?>
                                    <hr>
                                </p>
                                
                            </div>
                        <?php $i ++; }
                                    }else{
                        ?>             
                        <div class="r-group">
                            <p>
                                <label for="input_option_0_0" data-pattern-text="<?=$translation->get("optionvalues")?> +=1:"><?=$translation->get("optionvalues")?>:</label><br>
                                <input type="text" name="input_option[0][name]" id="input_option_0_name" class="form-control text" data-pattern-name="input_option[++][name]" data-pattern-id="input_option_++_name" />
                            </p>
                            <p>
                            <label for="input_option_0_0" data-pattern-text="Bild +=1:">Bild:</label><br>
                                <input type="file" name="input_option[0][bild]" id="input_option_0_bild" class="form-control file" data-pattern-name="input_option[++][bild]" data-pattern-id="input_option_++_bild" />
                            </p>
                            <label >Icon:</label> <br>
                                <input type="hidden" name="input_option[<?=$i;?>][icon]" id="input_option_<?=$i?>_icon" value="" class="form-control text"  />
                                    <?php if(!empty($icons)){?>
                                    <div class="dropdown">
                                        <button data-counter="<?=$i?>"   class="dropbtn btnNumber<?=$i?>">---</button>
                                        <div id="myDropdown<?=$i?>" class="dropdown-content dropdown">
                                            <a data-counter="<?= $i;?>" data-icon=" " class="iconSelect" role="button">---</a>
                                            <?php foreach($icons as $icon){ ?>
                                                <a data-counter="<?= $i;?>" data-icon="<?= $icon?>" class="iconSelect" role="button"><span class="material-icons md-24"><?=$icon?></span></a>
                                            <?php } ?>
                                        </div>
                                    </div>
                                    <?php } ?>
                            </div>
                            <!-- <div class="">
                                <label for="input_option_0_0" data-pattern-text="Icon +=1:">Icon:</label> <br>
                                <input type="text" name="input_option[0][icon]" id="input_option_0_icon" class="form-control text" data-pattern-name="input_option[++][icon]" data-pattern-id="input_option_++_icon" />
                            </div> -->
                            <div class="">
                                    <label for="input_option_0_0" data-pattern-text="Nächste Abschnitt +=1:">Nächste Abschnitt:</label><br>
                                
                                    <select class="select" name="input_option[0][nextSection]" id="input_option_0_nextSection"  data-pattern-name="input_option[++][nextSection]" data-pattern-id="input_option_++_nextSection">
                                    <option value="0" selected>---</option>
                                    <?php $result = @mysqli_query($GLOBALS['mysql_con'], $query); while( $row    = mysqli_fetch_array($result)){ ?>
                                        <option
                                        value="<?= $row['id']?>" <?php if($row['id'] == $input_line['next_section_id']){ echo 'selected';} ?>><?php echo $row['name'] ?></option>
                                    <?php } ?>
                                </select>
                            </div>
                            <div class="">
                                    <label for="input_option_0_0" data-pattern-text="Link -Textfeld? +=1:">Link -Textfeld?:</label><br>
                                    <input type="checkbox" name="input_option[0][linked_field]" id="input_option_0_linked_field" class="form-control checkbox" data-pattern-name="input_option[++][linked_field]" data-pattern-id="input_option_++_linked_field" />
                            </div>
                            <div class="">
                                <label for="input_option_0_0" data-pattern-text="Linklplatz Platzhalter +=1:">Linklplatz Platzhalter:</label> <br>
                                <input type="text" name="input_option[0][linked_placeholder]" id="input_option_0_linked_placeholder" class="form-control text" data-pattern-name="input_option[++][linked_placeholder]" data-pattern-id="input_option_++_linked_placeholder" />
                            </div>             
                             <p>
                                <!-- Add a remove button for the item. If one didn't exist, it would be added to overall group -->
                                 
                                <hr>
                            </p>
                        </div>   
                        <?php } ?>
                    </div>
                </div>
            </td>
            <td>&nbsp;</td>
        </tr>
    </table>
                                        <input type="hidden" value="<?= $totalOptions;?>" id="totalOption">
</form>
<script  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>
 
<script type="text/javascript">
    
    $(document).ready(function(){
        $('.btnAdd').click(function(){
            var counter = $('#totalOption').val();
             counter++;
             console.log('counter ist' + counter);
             $('#totalOption').val(counter);
            $('#example1').append(loadNextModule(counter));
        });
        $('.btnRemove').click(function(){
            counter = $(this).attr('data-counter');
            console.log('counter ist' + counter);
            $('.rGroup'+ counter).remove();
            
        });
         

        
        $('.dropbtn').click(function(){
            console.log('jazba');
            var counter = $(this).attr('data-counter');
         
         $("#myDropdown"+counter+".dropdown-content").show();
        });
        $('.iconSelect').click(function(){
            console.log('select');
            var id = $(this).attr('data-counter');
            var icon = $(this).attr('data-icon');
            var htmlIcon = "<span class='material-icons'>" + icon + '</span>';
            $("#input_option_" + id+"_icon").val(icon);
            $('.btnNumber' + id).html(htmlIcon);
        });
    });
  function delete_bild(_el, fornmame, opt_id){
        $('#opt_id').val(opt_id);
        loadCard('delete_line_contactform_bild', true, "<?= $translation->get('delete_bild_confirm')?>");
    }
    
    
    
   function loadNextModule(count = 0){
       var option = '';
       <?php $result = @mysqli_query($GLOBALS['mysql_con'], $query); while( $row    = mysqli_fetch_array($result)){ ?>
        var value = '<?= $row['id']?>';
        var name = '<?= $row['name']?>';
        option  =        option+       '<option  value="' + value + '" > ' + name + '</option>';
             <?php } ?>
            

    var html = '<p><hr></p>'+'<div class="r-group moduleAppended rGroup'+count+'">' +
                            '<p>' +
                               ' <label for="input_option_0_'+count+'" ><?=$translation->get("optionvalues")?> </label><br>' + 
                                '<input type="text" name="input_option['+count+'][name]" id="input_option_'+count+'_name" class="form-control text"  /> ' +
                            '</p> '+
                            '<p>'+
                           ' <label for="input_option_0_'+count+'" >Bild :</label><br>'+
                                '<input type="file" name="input_option['+count+'][bild]" id="input_option_'+count+'_bild" class="form-control file"  />'+
                            '</p>'+
                            '<div class="">'+
                                '<label for="input_option_0_'+count+'">Icon:</label> <br>'+
                                '<input type="text" name="input_option['+count+'][icon]" id="input_option_'+count+'_icon" class="form-control text"  />' +
                           ' </div>' +
                            '<div class="">' +
                                    '<label >Nächste Abschnitt :</label><br>' +
                                
                                    '<select class="select" name="input_option['+count+'][nextSection]" id="input_option_'+count+'_nextSection"   >'+
                                    '<option value="0" selected>---</option>'+
                                        option +
                                '</select>'+
                            '</div>'+
                            '<div class="">'+
                                   ' <label >Link -Textfeld?</label><br>'+
                                    '<input type="checkbox" name="input_option['+count+'][linked_field]" id="input_option_'+count+'_linked_field" class="form-control checkbox"  />'+
                            '</div>'+
                            '<div class="">'+
                                '<label >Linklplatz Platzhalter:</label> <br>'+
                                '<input type="text" name="input_option['+count+'][linked_placeholder]" id="input_option_'+count+'_linked_placeholder" class="form-control text"  />'+
                            '</div>   '   +       
                             '<p>'+
                                
                                '<button type="button" onclick="myFunctionDelete('+count+')" data-counter="'+count+'" class="r-btnRemove btnRemove btn btn-danger">Entfernen -</button>'+
                                
                           ' </p>'+
                        '</div> ';

                    return html;    

   }
   function   myFunctionDelete(counter){
       console.log('counter');
                jQuery('.rGroup'+ counter).remove();
            }
   
//     // Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
     $('.dropdown-content').hide();
  }
}
  </script>
