// Opening the sidebar
function showSidebar() {
 
    // Including Bootstrap
    var sidebarHTML = '<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">';
    // Including jQuery
    sidebarHTML += '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>';
 
    // Creating a form
    sidebarHTML += '<form style="padding: 20px;text-align:center;">\
        <div class="form-group">\
            <label for="name">Name</label>\
            <input type="text" class="form-control" id="name" name="name" value="">\
        </div>\
        <div class="form-group">\
            <label for="abrakadabra">Some abrakadabra</label>\
            <textarea class="form-control" id="abrakadabra" name="abrakadabra" rows="3"></textarea> \
        </div>\
        <div class="form-group">\
            <label for="strNum">Row number to enter the data</label>\
            <input type="text" class="form-control" id="strNum" name="strNum" value="">\
        </div>\
        <button type="submit" class="btn btn-primary">Write Data to Table</button>\
        <br><br><br>\
        <button type="button" id="sidebarClose" class="btn btn-danger">Close Sidebar</button>\
    </form>';
 
    // Adding scripts
    // When the form is submitted, call the function writeStrInTable() and pass the entered data to it
    // When the 'Close Sidebar' button is clicked, close it
    sidebarHTML += "<script>\
     $(document).on('submit', 'form', function () { \
        google.script.run \
     .withSuccessHandler(function (resultMsg) { \
                  alert(resultMsg);\
         })\
     .writeStrInTable(\
                { name: $('#name').val(), abrakadabra: $('#abrakadabra').val(), strNum: $('#strNum').val() }\
     );\
        return false;\
     });\
\
     $('#sidebarClose').on('click', function() {\
        google.script.host.close();\
     });\
     </script>";
 
 
    var htmlOutput = HtmlService
        .createHtmlOutput(sidebarHTML)
        .setTitle('My add-on');

    SpreadsheetApp.getUi().showSidebar(htmlOutput);
 
}
 
function writeStrInTable(e) {
    var name = e.name;
    var abrakadabra = e.abrakadabra;
    var strNum = parseInt(e.strNum);
 
    
    // Getting the object of the active (currently open) table
    var ss = SpreadsheetApp.getActiveSpreadsheet();
    var sheet = ss.getActiveSheet();
 
    // Writing the received data to the table
    sheet.getRange("A" + strNum).setValue(name);
    sheet.getRange("B" + strNum).setValue(abrakadabra);
 
    return "Everything went smoothly!";
}

function showSidebar_() {
    // bootstrap and jQuery and creating form
    var sidebarHTML = '<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">';
    sidebarHTML += '<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>';
    sidebarHTML += '<form style="padding: 20px;text-align:center;">\
        <div class="form-group">\
            <label for="name">Name</label>\
            <input type="text" class="form-control" id="name" name="name" value="">\
        </div>\
        <div class="form-group">\
            <label for="abrakadabra">Some abrakadabra</label>\
            <textarea class="form-control" id="abrakadabra" name="abrakadabra" rows="3"></textarea> \
        </div>\
        <div class="form-group">\
            <label for="strNum">Row number to enter the data</label>\
            <input type="text" class="form-control" id="strNum" name="strNum" value="">\
        </div>\
        <div class="form-group">\
          <label for="date">Date</label>\
          <input type="date" class="form-control" id="date" name="date" value="">\
        </div>\
        <button type="submit" class="btn btn-primary">Write Data to Table</button>\
        <br><br><br>\
        <button type="button" id="sidebarClose" class="btn btn-danger">Close Sidebar</button>\
    </form>';
    sidebarHTML += "<script>\ // + scripts
     $(document).on('submit', 'form', function () { \
        google.script.run \
     .withSuccessHandler(function (resultMsg) { \
                  alert(resultMsg);\
         })\
     .writeStrInTable(\
                { name: $('#name').val(), abrakadabra: $('#abrakadabra').val(), date: $('#date').val(), strNum: $('#strNum').val() }\
     );\
        return false;\
     });\
\
     $('#sidebarClose').on('click', function() {\
        google.script.host.close();\
     });\
     </script>";
    var htmlOutput = HtmlService
        .createHtmlOutput(sidebarHTML)
        .setTitle('Info sidebar');
    SpreadsheetApp.getUi().showSidebar(htmlOutput);
}

function writeStrInTable(e) {
    var name = e.name;
    var abrakadabra = e.abrakadabra;
    var date = e.date;
    var strNum = parseInt(e.strNum);
    var ss = SpreadsheetApp.getActiveSpreadsheet(); // get object
    var sheet = ss.getActiveSheet(); // get active table
    // Write Data to Table
    sheet.getRange("A" + strNum).setValue(name);
    sheet.getRange("B" + strNum).setValue(abrakadabra);
    sheet.getRange("C" + strNum).setValue(date);
    return "Everything went smoothly!";
}