<template>
    <div class="git-div-container disp-style-col">
        <!--PLACE DESIGN HTML HERE-->
        <h3>PROCESS ID<button class="git-btn:hover  fa fa-arrow-left" style="border:0px;" >BACK</button></h3>
        <div style="width: 100%; margin-top: 10px; height:absolute;" class="git-div-border">
            
                <div style="width: 100%; margin-top: 10px; align-items:LEFT;" >     
                    <table class="table table-frozen-th table-hover" >
                        <thead >
                            <tr>
                                <th>
                                        <h5> PERSONAL INFO</h5>
                                        <img src="/images/pid.jpg" alt="">
                                        
                                </th>
                            </tr>
                        </thead>

                        <tbody >
                            <tr><td><label>ID # : </label><br><input type="text" style="width: 86%;border:hidden; " :readonly="this.isReadonly">
                            <button class="git-btn git-btn-success" style="margin-right: auto; font-size: 10px">EDIT ID #</button>
                            </td></tr>
                            <tr><td><label>FIRST NAME: </label><input v-model= "txt_first_name" type="text" style="width: 100%;border:hidden;" :readonly="this.isReadonly"></td></tr>
                            <tr><td><label>MIDDLE NAME:</label><input v-model= "txt_middle_name" type="text" style="width: 100%;border:hidden" :readonly="this.isReadonly"></td></tr>
                            <tr><td><label>LAST NAME: </label><input v-model= "txt_last_name" type="text" style="width: 100%;border:hidden" :readonly="this.isReadonly"></td></tr>
                            <tr><td><label>EXTENSION NAME: </label><input v-model= "txt_extension_name" type="text" style="width: 100%;border:hidden" :readonly="this.isReadonly"></td></tr>

                           <div class="dropdown">
                               <p>
                                   SEX: <br>
                                    <select name="" id="" style="border:hidden;" >
                                        <option value="">MALE</option>
                                        <option value="">FEMALE</option>
                                    </select>
                               </p>
                                </div>

                            <tr><td><label>POSITION: </label><input v-model= "txt_position" type="text" style="width: 100%;border:hidden" :readonly="this.isReadonly"></td></tr>
                            <tr><td><label>BIRTHDATE: </label><input v-model= "txt_birthdate" type="text" style="width: 100%;border:hidden" :readonly="this.isReadonly"></td></tr>
                            <tr><td><label>BLOOD TYPE: </label><input v-model= "txt_blood_type" type="text" style="width: 100%;border:hidden" :readonly="this.isReadonly"></td></tr>
                            <tr><td><label>SSS #: </label><input v-model= "txt_sss" type="text" style="width: 100%;border:hidden" :readonly="this.isReadonly"></td></tr>
                            <tr><td><label>TIN #: </label><input v-model= "tin" type="text" style="width: 100%;border:hidden" :readonly="this.isReadonly"></td></tr>
                            <tr><td><label>SIGNATURE # : </label><br><input v-model= "signature" type="text" style="width: 87%;border:hidden" :readonly="this.isReadonly">&nbsp;<img style="width:100px; height:50px;" src="/images/signature.png" alt="" ></td></tr>

                           
                           
                        </tbody><br>
                        <thead >
                            <tr><th><h5>EMERGENCY CONTACT</h5></th></tr>
                        </thead>

                        <tbody>
                            <tr><td><label>FIRST NAME: </label><input v-model= "firstname" type="text" style="width: 100%;border:hidden;" :readonly="this.isReadonly" ></td></tr>
                            <tr><td><label>MIDDLE NAME: </label><input v-model= "middlename" type="text" style="width: 100%;border:hidden" :readonly="this.isReadonly"></td></tr>
                            <tr><td><label>LAST NAME:</label><input v-model= "lastname" type="text" style="width: 100%;border:hidden" :readonly="this.isReadonly"></td></tr>
                            <tr><td><label>EXTENSION NAME: </label><input v-model= "extensionname" type="text" style="width: 100%;border:hidden" :readonly="this.isReadonly"></td></tr>
                            <tr><td><label>RELATIONSHIP: </label><input v-model= "relationship" type="text" style="width: 100%;border:hidden" :readonly="this.isReadonly"></td></tr>
                            <tr><td><label>CONTACT #: </label><input v-model= "contact" type="text" style="width: 100%;border:hidden" :readonly="this.isReadonly"></td></tr>
                            <tr><td><label>ADDRESS: </label><input v-model= "address" type="text" style="width: 100%;border:hidden" :readonly="this.isReadonly"></td></tr>
                       </tbody>
                    </table>
                </div>               
        </div><br>
        <button class="git-btn git-btn-success" style="margin-right: auto; font-size: 15px">PROCESS</button>
    </div>
</template>
<script>
    export default{
        
        data() {
            
            return {
                //DATA HERE
              isReadonly: true,
                groups: [
                     
                        
                    
                ]
            }
        },
        mounted() {
            this.$loading(true);
            this.$loading(false);
        },
        methods: {
        }
    }
</script>
<style lang="css" scoped>

</style>    