<template>
    <div class="backgroundTint shown">
        <div class="contentBox shown">
            <form ref="tableForm" action="/api/actionNotChanged" method="post">
                <div class="formRow">
                    <div class="formRow-label">service_id</div>

                    <div class="formRow-input" v-if="formType === 'update'">
                        <input type="text" name="service_id" class="formInput" readonly="readonly" v-bind:value="tableRow['service_id']">
                    </div>
                    <div class="formRow-input" v-else-if="formType === 'create'">
                        <input type="text" name="service_id" class="formInput" v-bind:value="tableRow['service_id']">
                    </div>
                </div>

                <div class="formRow">
                    <div class="formRow-label"> servtype </div>
                    <div class="formRow-input">
                        <input type="text" name="servtype" class="formInput" v-bind:value="tableRow['servtype']">
                    </div>
                </div>

                <div class="formRow">
                    <div class="formRow-label"> subtype </div>
                    <div class="formRow-input">
                        <input type="text" name="subtype" class="formInput" v-bind:value="tableRow['subtype']">
                    </div>
                </div>

                <div class="formRow">
                    <div class="formRow-label"> user_id </div>
                    <div class="formRow-input">
                        <input type="text" name="user_id" class="formInput" v-bind:value="tableRow['user_id']">
                    </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" v-bind:value="tableRow['referrer_user_id']">
                    </div>
                </div>

                <div class="formRow">
                    <div class="formRow-label"> state </div>
                    <div class="formRow-input">
                        <select name="state" v-bind:value="tableRow['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" v-bind:value="tableRow['creation_date']">
                    </div>
                </div>
                <div class="formRow">
                    <div class="formRow-label"> creation_time </div>
                    <div class="formRow-input">
                        <input type="time" name="creation_time" class="formInput" v-bind:value="tableRow['creation_time']">
                    </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%;"
                                v-bind:value="tableRow['creation_request_sent_date'].split(' ')[0]">
                        <input
                                type="time" name="creation_request_sent_time"
                                class="formInput" style="width: 50%;"
                                v-bind:value="tableRow['creation_request_sent_date'].split(' ')[1]">
                    </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" v-bind:value="tableRow['notified_about_expiration']">
                    </div>
                </div>

                <div class="formButtons">
                    <button type="button" @click="cancelCallback">Cancel</button>

                    <button type="submit" v-if="formType === 'update'">Update</button>
                    <button type="submit" v-else-if="formType === 'create'">Create</button>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
    export default {
        name: "EditFormBox",
        props: ['formType', 'cancelCallback', 'tableRow'],

        mounted() {
            let action = '';
            if (this.formType === 'create') action = '/api/add';
            else if (this.formType === 'update') action = '/api/update';

            this.$refs.tableForm.action = action;
        }
    }
</script>

<style scoped>
    .formRow {
        width: 100%;
        display: flex;
        flex-direction: column;
    }

    .formRow-label {
        font-size: 20px;
        color: #404040;
    }

    .formRow-input > input, .formRow-input > select {
        margin: 3px;
        width: 100%;
        border-radius: 5px;
        border: none;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
        padding: 5px;
        font-size: 1.4em;

        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .formRow-input > input[readonly="readonly"] {
        background-color: #bebebe;
        color: #4b4b4b;
    }

    .formInput[type="date"], .formInput[type="time"] {
        padding: 5px;
        font-size: 1.6em;
    }

    .formRow-input > select:hover, .formRow-input > input:not([readonly="readonly"]):hover {
        background-color: #fbfbfb;
    }

    .formButtons {
        display: flex;
        flex-direction: row;
        margin-top: 5px;
    }

    .formButtons > button {
        margin: 5px;
        width: 50%;
        padding: 5px;
        border: none;
        border-radius: 7px;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.4);
    }

    .formButtons > button:hover {
        background-color: #dadada;
    }

    .formButtons > button:focus {
        background-color: #d5d5d5;
    }

    .contentBox {
        padding: 20px;
        width: 500px;
        height: 695px;
        background-color: #f0f0f0;
        border-radius: 10px;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    }

    .backgroundTint {
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.6);
    }

    .shown {
        display: inline;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .hidden {
        display: none;
    }
</style>