<template>
    <div class="git-div-container disp-style-col">
        <!--PLACE DESIGN HTML HERE-->
        <h3>Add Previous Annual Inspection</h3>
        <div style="width: 100%; margin-top: 10px; height:absolute;" class="git-div-border">
            <h4>Application Details</h4> <br>
           <table  style="width:100%;">
               <tr>
                   <td >
                       <div > 
                               <label for=""> Locator Name </label><br>
                                <select style="width:95%;"  >
                                    <option value="" disabled selected hidden>Select a Locator</option>
                                    <option value="">A</option>
                                    <option value="">B</option>
                                    <option value="">C</option>
                                </select>
                       </div>
                   </td>

                   <td>
                       <div >
                           
                               <label for=""> Application NO.</label>
                                    <input type="text" style="width:95%;" placeholder="Enter Application NO.">
                           
                            
                       </div>
                   </td>
               </tr>

                <tr>
                   <td >
                       <div>
                           
                               <label for=""> Electrical Permit NO.</label>
                                    <input type="text" style="width:95%;" placeholder="Enter Electrical Permit NO.">
                         
                            
                       </div>
                   </td>

                   <td>
                       <div>
                           
                            <label for="">  Mechanical Permit NO.</label>
                               <input type="text" style="width:95%;" placeholder="Enter Mechanical Permit NO." >
                           
                            
                       </div>
                   </td>
               </tr>
               <tr>
                   <td>
                       <div class="checkbox">
                           <label><input type="checkbox" value="">Old Locator</label>
                       </div>
                   </td>
               </tr><br>

           </table>


            <table style="width:100%;">
                <h4>OR Details</h4>
                <tr>
                    <td >
                        
                        <div>
                            
                               <label for="">Transaction Fee/Amount Paid</label>
                                <input type="text" style="width:95%;" placeholder="Transaction Fee/Amount Paid">
                            
                        </div>
                    </td>
                    
                    <td>
                        <div>
                            
                              <label for="">Official Receipt NO.</label>
                                <input type="text" style="width:95%;" placeholder="Official Receipt NO.">
                             
                        </div>
                    </td>

                    <td>
                        <div>
                            
                               <label for=""> Date Paid</label>          
                                <input type="text" style="width:95%;" placeholder="Date Paid">
                             
                        </div>
                    </td>
                </tr>
                
            </table><br>

            <table style="width:100%;">
                <h4>Upload Certificates</h4>

                <tr >
                    
                    <td >
                        <div><p></p></div><br>
                        <div><label for=""> Electrical Certification</label></div><br>
                        <div><label for=""> Airconditioning/Refrigeration Certification</label></div><br>
                        <div><label for=""> Elevator Certification</label></div><br>
                        <div><label for=""> Unified Pressure Vessels Certification</label></div><br>
                        <div><label for=""> Internal Combustion Engine Certification</label></div><br>
                        <div><label for=""> Other Machineries Certification</label></div><br>
                        
                    </td>

                     <td>
                        <div><p></p></div><br>
                        <div><input type="file" class="form-control-file" ></div><br>
                        <div><input type="file" class="form-control-file" ></div><br>
                        <div><input type="file" class="form-control-file" ></div><br>
                        <div><input type="file" class="form-control-file" ></div><br>
                        <div><input type="file" class="form-control-file" ></div><br>
                        <div><input type="file" class="form-control-file" ></div><br>
                        
                    </td>
                     <td>
                        <div >Validity From</div><br>
                        <div><input type="text"></div><br>
                        <div><input type="text"></div><br>
                        <div><input type="text"></div><br>
                        <div><input type="text"></div><br>
                        <div><input type="text"></div><br>
                        <div><input type="text"></div><br>
                        
                    </td>
                     <td>
                        <div >Validity To</div><br>
                        <div><input type="text"></div><br>
                        <div><input type="text"></div><br>
                        <div><input type="text"></div><br>
                        <div><input type="text"></div><br>
                        <div><input type="text"></div><br>
                        <div><input type="text"></div><br>
                        
                    </td>
                   
                </tr>


            </table>
            <button class="git-btn git-btn-success" style=" font-size: 15px; margin-left:50%;">SUBMIT</button>
        </div>
        
    </div>
</template>
// <script>
//     export default{
//         data() {
//             return {
//                 //DATA HERE
//                 groups: [
//                     {
//                         id: 0,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 1,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 3,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 4,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 5,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 6,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 7,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 8,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 9,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 0,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 1,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 3,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 4,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 5,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 6,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 7,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 8,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 9,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 0,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 1,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 3,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 4,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 5,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 6,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 7,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 8,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     },
//                     {
//                         id: 9,
//                         fname: "John",
//                         lname: "Geenagu",
//                         email: "johngagz@gmail.com"
//                     }
//                 ]
//             }
//         },
//         mounted() {
//             this.$loading(true);
//             this.$loading(false);
//         },
//         methods: {
//         }
//     }
// </script>
<style lang="css" scoped>

</style>    