<div class="page-title">
    <h1><?php echo $this->user->lang("Customize HTML"); ?></h1>
    <p class="alert-content"><?php echo $this->user->lang('Add customized HTML, CSS, or Javascript to your Clientexec Template.'); ?></p>
</div>

<script data-cfasync="false" type="text/javascript">
    templateOptions = {};
    templateOptions.defaultTemplate = "<?php echo $this->default;?>";
</script>


<div class="cm-holder settings-wrapper">
    <form id="sitesettings" name="settings" method="post" action="index.php?fuse=admin&action=saveTemplateHTML">
        <div class="sec-box">
            <div class="texting">
                <h4><?php echo $this->user->lang("Template");?></h4>
                <p>
                    <?php echo $this->user->lang("Select the template you wish to add custom javascript/css or html for. These customizations are template specific.");?>
                </p>
                <div class="form-elem">
                    <select class="normalSelect2" id="templateselector" name="templateselector">
                        <?php
                        foreach ($this->templates as $template) {
                            if ($this->default === $template['name']) {
                                $checked = "selected='selected'";
                            } else {
                                $checked = "";
                            }
                            echo "<option value='".$template["name"]."' ".$checked.">".$template['name']."</option>";
                        }
                        ?>
                    </select>
                </div>
            </div>
        </div>
    </form>
    <div class="sec-box">
        <div class="texting">
            <input id="updatesettingbtn" data-loading-text="Saving..." type="submit" value="Update Settings" class="cm-btns orange lg">
         </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        templateOptions.template = "{{#arr}}<div class='texting configsetting_name'><h4>{{name}}</h4><p>{{description}}</p><div class='form-elem'>{{#input}}<input class='form-control' id='value_{{name}}' name='value_{{name}}' value='{{html}}' />{{/input}}{{^input}}<textarea style='min-height: 169px;' class='form-control' id='value_{{name}}' name='value_{{name}}'>{{html}}</textarea>{{/input}}</div>{{/arr}}";

        $('#templateselector').bind('change', function() {
            $('#updatesettingbtn').hide();
            $('.configsetting_name').remove();

             var nameOfTemplate = $(this).val();
             if (templateOptions.defaultTemplate == nameOfTemplate) {
                 $('#setDefault option[value="yes"]').attr('selected','selected');
             } else {
                 $('#setDefault option[value="no"]').attr('selected','selected');
             }

             $.ajax({
                url: 'index.php?action=getTemplateCustomHTML&fuse=admin',
                type: 'GET',
                data: {
                    'templateName':nameOfTemplate
                },
                success: function (data) {
                    if (data.error) return;
                    $('#updatesettingbtn').show();
                    if ((typeof(data.customizations)!=="undefined") && (data.customizations.length > 0)) {
                        var html = Mustache.render(templateOptions.template, {arr:data['customizations']});
                        $('#sitesettings .sec-box').append(html);
                    } else {
                        $('#sitesettings .sec-box').append("");
                    }
                }
            });
        });

        $('#templateselector').trigger('change');

        $("#updatesettingbtn").click(function() {
            $('#updatesettingbtn').button('loading');
            if ($('#setDefault').val() == "yes") {
                templateOptions.defaultTemplate = $('#templateselector').val();
            }

            var contactForm = $("#sitesettings");
            $.ajax({
                url: contactForm.attr('action'),
                type: contactForm.attr('method'),
                data: contactForm.serialize(),
                success: function (json) {
                    json = clientexec.parseResponse(json);
                    if (!json.error) {
                        $('#updatesettingbtn').button('reset');
                        clientexec.msg("Settings Updated");
                    }
                }
            });
            return false;
        });
    });
</script>