const baseFormFields = `<form id="tableForm" action="/api/update" method="post">
    <div class="formRow">
        <div class="formRow-label">service_id</div>
        <div class="formRow-input"><input type="text" name="service_id" class="formInput" id="formServiceId" disabled></div>
    </div>
    
    <div class="formRow">
        <div class="formRow-label"> servtype </div>
        <div class="formRow-input">
            <input type="text" name="servtype" class="formInput">
        </div>
    </div>

    <div class="formRow">
        <div class="formRow-label"> subtype </div>
        <div class="formRow-input">
            <input type="text" name="subtype" class="formInput">
        </div>
    </div>

    <div class="formRow">
        <div class="formRow-label"> user_id </div>
        <div class="formRow-input">
            <input type="text" name="user_id" class="formInput">
        </div>
    </div>

    <div class="formRow">
        <div class="formRow-label"> referrer_user_id </div>
        <div class="formRow-input">
            <input type="text" name="referrer_user_id" class="formInput">
        </div>
    </div>

    <div class="formRow">
        <div class="formRow-label"> state </div>
        <div class="formRow-input">
            <select name="state">
                <option>N</option>
                <option>A</option>
                <option>S</option>
                <option>D</option>
                <option>O</option>
            </select>
        </div>
    </div>

    <div class="formRow">
        <div class="formRow-label"> creation_date </div>
        <div class="formRow-input">
            <input type="date" name="creation_date" class="formInput">
        </div>
    </div>
    <div class="formRow">
        <div class="formRow-label"> creation_time </div>
        <div class="formRow-input">
            <input type="time" name="creation_time" class="formInput">
        </div>
    </div>

    <div class="formRow">
        <div class="formRow-label"> creation_request_sent_date </div>
        <div class="formRow-input" style="display: flex; flex-direction: row">
            <input type="date" name="creation_request_sent_date" class="formInput" style="width: 50%;">
            <input type="time" name="creation_request_sent_time" class="formInput" style="width: 50%;">
        </div>
    </div>

    <div class="formRow">
        <div class="formRow-label"> notified_about_expiration </div>
        <div class="formRow-input">
            <input type="text" name="notified_about_expiration" class="formInput">
        </div>
    </div>
</form>`;

const formCreateButtons = `<div class="formButtons">
    <button type="button" onclick="hideForm()">Cancel</button>
    <button type="submit">Create</button>
</div>`;

const formEditButtons = `<div class="formButtons">
    <button type="button" onclick="hideForm()">Cancel</button>
    <button type="submit">Update</button>
</div>`;

function showContentBox() {
    let elem = document.getElementById('backgroundTint');
    elem.classList.remove('hidden');
    elem.classList.add('shown');

    elem = document.getElementById('contentBox');
    elem.classList.remove('hidden');
    elem.classList.add('shown');
}

function hideContentBox() {
    let elem = document.getElementById('backgroundTint');
    elem.classList.remove('shown');
    elem.classList.add('hidden');

    elem = document.getElementById('contentBox');
    elem.classList.remove('shown');
    elem.classList.add('hidden');
}

function showForm() {
    let newEntryBtn = document.getElementById('newEntryBtn');
    newEntryBtn.style.display = 'none';

    showContentBox();
    let contentBox = document.getElementById('contentBox');
    while (contentBox.firstChild)
        contentBox.removeChild(contentBox.firstChild);

    contentBox.appendChild(elementFromHTML(baseFormFields));
    return contentBox;
}

function hideForm() {
    let newEntryBtn = document.getElementById('newEntryBtn');
    newEntryBtn.style.display = 'inline';

    let contentBox = document.getElementById('contentBox');
    while (contentBox.firstChild)
        contentBox.removeChild(contentBox.firstChild);

    hideContentBox();
}

function showEditForm() {
    let contentBox = showForm();
    contentBox.firstChild.appendChild(elementFromHTML(formEditButtons));
    contentBox.firstChild.action = '/api/update';
}

function showCreateForm() {
    let contentBox = showForm();
    contentBox.firstChild.appendChild(elementFromHTML(formCreateButtons));
    contentBox.firstChild.action = '/api/add';
    document.getElementById('formServiceId').disabled = false;
}