<?php

function display_head_scripts() {
    $head_scripts = get_option('head_scripts');

    ?>
    
    <tr>
        <th scope="row">
            <label for="head_scripts"><?php esc_html_e( 'Head Scripts','gocreations' ); ?></label>
        </th>
        <td>
            <textarea name="head_scripts" rows="10" class="large-text" id="head_scripts"><?php echo esc_textarea($head_scripts); ?></textarea>
        </td>
    </tr>
    <?php
}

function display_body_scripts() {
    $body_scripts = get_option('body_scripts');

    ?>
    
    <tr>
        <th scope="row">
            <label for="body_scripts"><?php esc_html_e( 'Body Scripts','gocreations' ); ?></label>
        </th>
        <td>
            <textarea name="body_scripts" rows="10" class="large-text" id="body_scripts"><?php echo esc_textarea($body_scripts); ?></textarea>
        </td>
    </tr>
    <?php
}

function display_footer_scripts() {
    $footer_scripts = get_option('footer_scripts');

    ?>
    
    <tr>
        <th scope="row">
            <label for="footer_scripts"><?php esc_html_e( 'Footer Scripts','gocreations' ); ?></label>
        </th>
        <td>
            <textarea name="footer_scripts" rows="10" class="large-text" id="footer_scripts"><?php echo esc_textarea($footer_scripts); ?></textarea>
        </td>
    </tr>
    <?php
}


function display_advanced_css() {
    $advanced_css = get_option('advanced_css');

    ?>
    <tr>
        <th scope="row">
            <label for="advanced_css"><?php esc_html_e( 'Advanced CSS','gocreations' ); ?></label>
        </th>
        <td>
            <div id="ace-editor" class="ace-editor"></div>
            <textarea name="advanced_css" rows="10" class="large-text" id="advanced_css"><?php echo esc_textarea($advanced_css); ?></textarea>
        </td>
    </tr>
    <?php
}

?>
<div class="wrap">

    <h1><?php echo esc_html( get_admin_page_title() ); ?></h1>

    <form method="post" action="options.php">
        <p><?php esc_html_e( 'Advanced settings','gocreations' ); ?></p>

        <table class="form-table" role="presentation">
            <tbody>
                <?php
                settings_fields('advanced_options');
                do_settings_sections('gocars_online_advanced');
                ?>
            </tbody>
        </table>
        <?php
        submit_button();
        ?>

    </form>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.22.0/ace.js" type="text/javascript" charset="utf-8"></script>
<script>


var myLabel = myLabel || {};
var editor = ace.edit("ace-editor");
editor.setTheme("ace/theme/monokai");
editor.session.setMode("ace/mode/javascript");
editor.getSession().getDocument().setValue(jQuery('[name="advanced_css"]').val());

jQuery('body').on('input', '.ace_text-input', function (e) {
    var content = editor.getSession().getDocument().getValue();
    jQuery('[name="advanced_css"]').val(content);
});
jQuery('body').on('submit', 'form', function (e) {
    var content = editor.getSession().getDocument().getValue();
    jQuery('[name="advanced_css"]').val(content);
});



</script>