@extends('layouts.admin')
@section('content')



<main role="main" class="flex-shrink-0">
    <div class="container custom-container">
        <style>
        .btn-header-link::after {
            display: none !important;
        }

        .modal-dialog {
            max-width: 90%;
        }
            /* file upload */
            .file-upload {
                display: flex;
                align-items: center;
                font-family: Arial, sans-serif;
                margin-bottom: 10px;
            }

            .file-input {
                display: none;
            }

            .file-label {
                display: inline-block;
                padding: 8px 12px;
                border: 1px solid #ccc;
                border-radius: 4px;
                background-color: #f8f9fa;
                cursor: pointer;
                margin-right: 10px;
                white-space: nowrap;
            }

            .file-label:hover {
                background-color: #e2e6ea;
            }

            .file-name {
                font-size: 14px;
                color: #6c757d;
                max-width: 200px; /* Adjust the max-width as needed */
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }


            .field-centrebillmst-observerfile{
                margin-bottom: 0px !important;
            }


        /* .disabled-input {
                pointer-events: none;
            } */
        </style>
        <div class="login-5 mt-50 mb-50">
            @if (session('error'))
                <div class="alert alert-danger alert-dismissible fade show mt-5" role="alert">
                    {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif
            <ul class="nav nav-pills justify-content-left mb-3">
                @if($BillData->BillType == 1)
                <li class="active">
                    <a href="#local" id="localBtn" class="d-none btn btn-success me-3 mb-2 tablinks"
                        style="padding:13px; font-size: 18px;color:white" data-toggle="tab"
                        onclick="openTab(event, 'local')">Remuneration</a> 
                </li>
                @elseif($BillData->BillType == 2)                
                <li class="active">
                    <a href="#local" id="localBtn" class="btn btn-success me-3 mb-2 tablinks"
                        style="padding:13px; font-size: 18px;color:white" data-toggle="tab"
                        onclick="openTab(event, 'local')">Remuneration</a>
                </li>
                <input type="hidden" value="" id="fromvalue">
                <li id="outstation_li">
                    <a href="#outstation" id="outstationBtn" class="btn btn-secondary tablinks"
                        style="padding:13px; font-size: 18px;color:white" data-toggle="tab"
                        onclick="openTab(event, 'outstation')">Outstation TA Bill 
                  </a>
                </li>
                @endif
            </ul>
            <div class="accordion">
                <div class="card local" id="local">
                    <div class="card-header" id="faqhead1">
                        <a href="javascript:void(0)" class="btn-header-link fs-4 fw-bold d-block text-center"
                            aria-expanded="true" aria-controls="faq1">
                            @if(Session::get('role') == config('constants.RoleName')['10'])
                            Annexure A-4 (TO BE FILLED BY VIRTUAL OBSERVER AND SUBMITTED TO RC )
                           @elseif(Session::get('role') == config('constants.RoleName')['3'])
                            Annexure A-4 (TO BE FILLED BY FLYING SQUAD OBSERVER AND SUBMITTED TO RC )
                           @else
                           Annexure A-4 (TO BE FILLED BY OBSERVER/SPECIAL
                            Observer AND SUBMITTED TO RC )
                        @endif
                        
                        
                        </a>
                    </div>
                    <div class="custom-form RemunerationMain">
                        <form method="POST" action="{{ route('tabillSave') }}"  enctype="multipart/form-data">
                            @csrf
                            <input type="hidden" name="event_type" value ="1"> 
                            <div id="faq1" class="collapse show" aria-labelledby="faqhead1" data-parent="#faq1">
                                <div class="card-body">
                                    <div class="custom-form">
                                        <div class="row">
                                         
                                          @if(Session::get('role') != config('constants.RoleName')['10'])
                                            <div class="col-md-12">
                                                <div class="d-flex align-items-center">
                                                    <label class="form-label fs-5 fw-bold">Select Bill Type</label><br>
                                                    @if($BillData->BillType == 1)
                                                    <input type="radio" style="margin:10px" name="billType" value="1"
                                                        checked> Local
                                                        @elseif($BillData->BillType == 2)   
                                                        <input type="radio" class="d-none" style="margin:10px" name="billType" value="1"
                                                        checked><b class="d-none"> Local</b>
                                                    <input type="radio" checked style="margin:10px" name="billType" value="2">
                                                    Local + Outstation
                                                    @endif
                                                    <div class="invalid-feedback"></div>
                                                </div>
                                            </div><br>
                                            @endif
                                            @if(isset($ArrayFields) && !empty($ArrayFields))
                                                                @foreach($ArrayFields as $row)
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label class="form-label">{{$row['fieldLabel']}}@if($row['isRequired']==1) <span class="text-danger">*</span>@endif</label>
                                                                            <input 
                                                                                @if($row['fieldType'] == 'number') 

                                                                                    type="text" 
                                                                                    onkeypress="return blockSpecialChar(event,'numeric')" 
                                                                                @else 
                                                                                    type="{{$row['fieldType']}}" 
                                                                                @endif 
                                                                                class="form-control form-control-sm common-fields" 
                                                                                
                                                                                value="{{$row['fieldValue']}}" 
                                                                                @if($row['readonly'] == 1) 
                                                                                    readonly 
                                                                                @endif 
                                                                                maxlength="{{$row['maxLength']}}" 
                                                                                minlength="{{$row['minLength']}}">
                                                                            <div class="invalid-feedback"></div>
                                                                        </div>
                                                                    </div>
                                                                @endforeach
                                                                @endif     

                            <div class="table-responsive">
                                <table class="table cco-table table-bordered RemunerationOnlineTable">
                                    <thead>
                                        <tr>
                                            <th  width="5%">#</th>
                                            <th width="40%">Details</th>
                                            <th width="15%">Duty Dates  </th>
                                            <th width="10%">Duty days </th>
                                            <th width="30%">Amount<span class="text-danger"> * </span> </th>

                                        </tr>
                                    </thead>
                                    <tbody>
                                    @php
                                    $i=0;
                                    @endphp
                                    @if(isset($RemunerationFieldsData) && !empty($RemunerationFieldsData))
                                        @foreach($RemunerationFieldsData as $k => $Remuneration)
                                            @php
                                            $i++;
                                            $Remuneration = (array)$Remuneration;
                                            @endphp
                                            @if($Remuneration['Remuneration Text'] !='' && $Remuneration['Mock Drill Text'] !='')
                                            <!-- @if(($Remuneration['Source Code'] =='MISCELLANEOUS CHARGE') || ($Remuneration['Source Code'] =='ADVANCEPAYMENT') || ($Remuneration['Source Code'] =='TDS WITH LABEL' ) ||  $Remuneration['Remuneration Amount']>0)  -->
                                            <tr>
                                            <input type="hidden"   value="{{$BillData->Dutydays}}" name="Remuneration##Days" />
                                                @if($Remuneration['isTds']==1)
                                                    <input type="hidden"  class="tds" value="{{$Remuneration['tdsPrecentage']}}" name="TDS##Percent" />
                                                @endif
                                                <input type="hidden" class="RemunerationAmount" name="Remuneration##Rate" value="{{$Remuneration['Remuneration Amount']}}" />
                                                <!-- <input type="hidden" class="ConveyanceAmount" value="{{$Remuneration['Conveyance Amount']}}" />
                                                <input type="hidden" class="FoodAmount" value="{{$Remuneration['Food Amount']}}" />
                                                <input type="hidden" class="MockDrillCharge" value="{{$Remuneration['Mock Drill Charge']}}" />
                                                <input type="hidden" class="OtherCharges" value="{{$Remuneration['Other Charges']}}" />
                                                <input type="hidden" class="MockDrillConveyance" value="{{$Remuneration['Mock Drill Conveyance']}}" /> -->
                                                
                                                <td>*</td>
                                                <td>{{$Remuneration['Remuneration Text']}}</td>
                                                <td>  </td>
                                                <td>  </td>
                                                <td><input type="text" class="form-control form-control-sm RemunerationSection " readonly="readonly" maxlength=8 name="{{$Remuneration['Field_Name']}}" value="" onkeypress="return blockSpecialChar(event,'numeric')"></td>  
                                            </tr>                                    
                                            <!-- @endif -->
                                            @else
                                                @if($BillData->A_MT == 1)   
                                                    <tr>
                                                    @if($Remuneration['isTds']==1)
                                                      <input type="hidden"  class="tds" value="{{$Remuneration['tdsPrecentage']}}" name="TDS##Percent" />
                                                    @endif
                                                        <input type="hidden" class="RemunerationAmount" value="{{$Remuneration['Remuneration Amount']}}" />
                                                            <!-- <input type="hidden" class="ConveyanceAmount" value="{{$Remuneration['Conveyance Amount']}}" />
                                                            <input type="hidden" class="FoodAmount" value="{{$Remuneration['Food Amount']}}" />
                                                            <input type="hidden" class="MockDrillCharge" value="{{$Remuneration['Mock Drill Charge']}}" />
                                                            <input type="hidden" class="OtherCharges" value="{{$Remuneration['Other Charges']}}" />
                                                            <input type="hidden" class="MockDrillConveyance" value="{{$Remuneration['Mock Drill Conveyance']}}" /> -->

                                                            <td>*</td>
                                                        <td>{{$Remuneration['Remuneration Text']}}</td>
                                                        @if($Remuneration['Source Code'] == 'MOCKDRILL' || $Remuneration['Source Code'] == 'MOCKDRILL CONVEYANCE')
                                                        <td></td>
                                                        @else
                                                        @if($Remuneration['No_ of Days'] == 1)
                                                            <td>{!! str_replace(',','<br>',implode(',',$dutydays))  ?? '' !!} </td>
                                                        @else
                                                            <td></td>
                                                        @endif
                                                        @endif

                                                        @if($Remuneration['Source Code'] == 'MOCKDRILL' || $Remuneration['Source Code'] == 'MOCKDRILL CONVEYANCE')
                                                        <td>  1 </td>
                                                        @elseif($Remuneration['No_ of Person'] == 1)
                                                        <td>
                                                            {{ $BillData->Dutydays ?? '' }}
                                                        </td>
                                                        @else
                                                            <td></td>
                                                        @endif 
                                                            <td>
                                                     
                                                        
                                                     <input
                                                         type="text"
                                                         @if ($Remuneration['Source Name'] == 'TDS Amount')                                                                
                                                             id="tds"
                                                         @elseif ($Remuneration['Source Name'] == 'Advance Payment')
                                                             id="advancePayment"                                                            
                                                         @endif

                                                         @if($Remuneration['readonly'] == 1)
                                                         readonly="readonly"
                                                         @endif
                                                         class="form-control form-control-sm
                                                             @if ($Remuneration['Source Code'] == 'MOCKDRILL' || $Remuneration['Source Code'] == 'MOCKDRILL CONVEYANCE')
                                                                 mockdrilldutydays
                                                             @endif
                                                             @if ($Remuneration['Source Name'] != 'TDS Amount' && 
                                                                 $Remuneration['Source Name'] != 'Advance Payment' && 
                                                                 $Remuneration['Source Name'] != 'MISCELLANEOUS CHARGE')
                                                                 RemunerationSection
                                                             @elseif ($Remuneration['Source Name'] == 'Advance Payment')
                                                                 valid-field-1
                                                             @elseif ($Remuneration['Source Name'] == 'MISCELLANEOUS CHARGE')
                                                                 RemunerationSection valid-field-1 MiscellanousCharge
                                                             @endif"
                                                         maxlength="8" @if($Remuneration['isExtrafield'] == 1)
                                                         name="Extrafields[{{ $Remuneration['Field_Name'] }}]" @else name="{{ $Remuneration['Field_Name']}}" @endif
                                                         onkeypress="return blockSpecialChar(event, 'numeric')"
                                                         @if ($Remuneration['Source Name'] == 'MISCELLANEOUS CHARGE')
                                                             value="{{ isset($getlocalbillDetail->Amount) ? number_format($getlocalbillDetail->Amount, 0, '', '') : '' }}"
                                                         @elseif ($Remuneration['Source Name'] == 'Advance Payment')
                                                             value="{{ isset($getlocalbillDetail->{'Advance Payment'}) ? number_format($getlocalbillDetail->{'Advance Payment'}, 0, '', '') : '' }}"
                                                         @endif > 
                                                            @if($Remuneration['isAttechment']==1)       
                                                            <div class="file-upload mt-3 mb-3" data-upload-id="1">
                                                                <label for="fileInput1" class="file-label fw-semi-bold mb-0" data-label-id="1">Attach Document</label>
                                                                <input type="file" name="files[{{$Remuneration['Field_Name']}}]" id="AttachDocument" class="form-control file-input mt-3 mb-3 form-control-sm @if($Remuneration['isAttechmentRequired']==1) @endif">
                                                                <span class="file-name" data-name-id="2">No file chosen</span>
                                                            </div>
                                                            @endif
                                                        </td>  
                                                    </tr> 
                                                @elseif($Remuneration['Source Code'] != 'MOCKDRILL' && $Remuneration['Source Code'] != 'MOCKDRILL CONVEYANCE')   
                                                <tr>
                                                    <input type="hidden" class="RemunerationAmount" value="{{$Remuneration['Remuneration Amount']}}" />
                                                        <!-- <input type="hidden" class="ConveyanceAmount" value="{{$Remuneration['Conveyance Amount']}}" />
                                                        <input type="hidden" class="FoodAmount" value="{{$Remuneration['Food Amount']}}" />
                                                        <input type="hidden" class="MockDrillCharge" value="{{$Remuneration['Mock Drill Charge']}}" />
                                                        <input type="hidden" class="OtherCharges" value="{{$Remuneration['Other Charges']}}" />
                                                        <input type="hidden" class="MockDrillConveyance" value="{{$Remuneration['Mock Drill Conveyance']}}" /> -->

                                                        <td>*</td>
                                                        <td>{{$Remuneration['Remuneration Text']}}</td>
                                                        @if($Remuneration['No_ of Days'] == 1)
                                                            <td>{!! str_replace(',','<br>',implode(',',$dutydays))  ?? '' !!} </td>
                                                        @else
                                                            <td></td>
                                                        @endif

                                                        @if($Remuneration['Source Code'] == 'MOCKDRILL' || $Remuneration['Source Code'] == 'MOCKDRILL CONVEYANCE')
                                                        <td>  1 </td>
                                                        @elseif($Remuneration['No_ of Person'] == 1)
                                                        <td>
                                                            {{ $BillData->Dutydays ?? '' }}
                                                        </td>
                                                        @else
                                                            <td></td>
                                                        @endif 
                                                        <td>
                                                     
                                                        
                                                        <input
                                                            type="text"
                                                            @if ($Remuneration['Source Name'] == 'TDS Amount')                                                                
                                                                id="tds"
                                                            @elseif ($Remuneration['Source Name'] == 'Advance Payment')
                                                                id="advancePayment"                                                            
                                                            @endif

                                                            @if($Remuneration['readonly'] == 1)
                                                            readonly="readonly"
                                                            @endif
                                                            class="form-control form-control-sm
                                                                @if ($Remuneration['Source Code'] == 'MOCKDRILL' || $Remuneration['Source Code'] == 'MOCKDRILL CONVEYANCE')
                                                                    mockdrilldutydays
                                                                @endif
                                                                @if ($Remuneration['Source Name'] != 'TDS Amount' && 
                                                                    $Remuneration['Source Name'] != 'Advance Payment' && 
                                                                    $Remuneration['Source Name'] != 'MISCELLANEOUS CHARGE')
                                                                    RemunerationSection
                                                                @elseif ($Remuneration['Source Name'] == 'Advance Payment')
                                                                    valid-field-1
                                                                @elseif ($Remuneration['Source Name'] == 'MISCELLANEOUS CHARGE')
                                                                    RemunerationSection valid-field-1 MiscellanousCharge
                                                                @endif"
                                                            maxlength="8" @if($Remuneration['isExtrafield'] == 1)
                                                            name="Extrafields[{{ $Remuneration['Field_Name'] }}]" @else name="{{ $Remuneration['Field_Name']}}" @endif
                                                            onkeypress="return blockSpecialChar(event, 'numeric')"
                                                            @if ($Remuneration['Source Name'] == 'MISCELLANEOUS CHARGE')
                                                                value="{{ isset($getlocalbillDetail->Amount) ? number_format($getlocalbillDetail->Amount, 0, '', '') : '' }}"
                                                            @elseif ($Remuneration['Source Name'] == 'Advance Payment')
                                                                value="{{ isset($getlocalbillDetail->{'Advance Payment'}) ? number_format($getlocalbillDetail->{'Advance Payment'}, 0, '', '') : '' }}"
                                                            @endif > 

                                                        @if($Remuneration['isAttechment']==1)       
                                                        <div class="file-upload mt-3 mb-3" data-upload-id="1">
                                                            <label for="fileInput1" class="file-label fw-semi-bold mb-0" data-label-id="1">Attach Document</label>
                                                            <input type="file" name="files[{{$Remuneration['Field_Name']}}]" id="AttachDocument" class="form-control uploaded_file uploaded_file file-input mt-3 mb-3 form-control-sm @if($Remuneration['isAttechmentRequired']==1) @endif">
                                                            <span class="file-name" data-name-id="2">No file chosen</span>
                                                        </div>
                                                        @endif
                                                    </td>  
                                                </tr>
                                                @endif
                                            @endif                           
                                        @endforeach
                                         
                                        <tr>
                                            <td>*</td>
                                            <td class='fw-bold'>TOTAL AMOUNT CLAIMED</td>
                                            <td></td>
                                            <td></td>
                                            <td><input type="text" class="form-control unsetValue form-control-sm required" id="NetPaybleAmount" maxlength=8 minlength=1 name="Net##Payable##After##Deduction" onkeypress="return blockSpecialChar(event,'numeric')" readonly></td>
                                        </tr>   
                                    @endif                              
                                    </tbody>
                                </table>

                            </div>
                            </div>
                            </div>

                            
                                                            <div class="text-end">
                                <button class="btn btn-warning me-4 mb-2 mt-0" id="preview"
                                    type="button">Preview</button> 
                                    <!-- <button type="Submit" id="outsideFormPreviewBt111111" class="btn btn-warning me-2 modalPopupOut">Preview</button>                  -->
                                <input type="Submit" class='btn btn-success d-none  finalSubmitOfflineBtn' name="submit"
                                    value="1">
                          
                                
                            </div>
                                                    </div>
                    </div>
                        </form>
                    </div>
                </div>
            </div>
<!-- Outstaion from  -->

            <div class="tab-pane active local" id="outstation">
                    <div class="row no-gutters">
                        <div class="col-sm-12">
                            <div id="main">
                                <div class="">
                                    <form id="outstation-form" action="{{route('tabillSave')}}" method="post" autocomplete="off"
                                         enctype="multipart/form-data">
                                        @csrf                                      
                                        <div class="accordion" id="faq">
                                            <div class="card">
                                                <div class="card-header" id="faqhead1">
                                                    <a href="#" class="btn btn-header-link fs-4 text-center"
                                                        data-toggle="collapse" data-target="#faq3" aria-expanded="true"
                                                        aria-controls="faq3">Outstation TA Claim Form (TO BE FILLED BY
                                                        OUTSTAION TRAVELERS ONLY)</a>
                                                </div>
                                                <div id="faq1" class="collapse show" aria-labelledby="faqhead1"
                                                    data-parent="#faq1">
                                                    <div class="card-body">
                                                        <div class="custom-form">
                                                            <div class="row">
                                                            @if(isset($ArrayFields) && !empty($ArrayFields))
                                                                @foreach($ArrayFields as $row)
                                                                    <div class="col-md-6">
                                                                        <div class="form-group">
                                                                            <label class="form-label">{{$row['fieldLabel']}}@if($row['isRequired']==1) <span class="text-danger">*</span>@endif</label>
                                                                            <input 
                                                                                @if($row['fieldType'] == 'number') 
                                                                                    type="text" 
                                                                                    onkeypress="return blockSpecialChar(event,'numeric')" 
                                                                                @else 
                                                                                    type="{{$row['fieldType']}}" 
                                                                                @endif 
                                                                                class="form-control form-control-sm common-fields" 
                                                                                name="{{$row['fieldName']}}"  
                                                                                value="{{$row['fieldValue']}}" 
                                                                                id= "{{$row['fieldName']}}"
                                                                                @if($row['readonly'] == 1) 
                                                                                    readonly 
                                                                                @endif 
                                                                                maxlength="{{$row['maxLength']}}" 
                                                                                minlength="{{$row['minLength']}}">
                                                                            <div class="invalid-feedback"></div>
                                                                        </div>
                                                                    </div>
                                                                @endforeach
                                                                @endif          
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card">
                                                <div class="card-header" id="faqhead2">
                                                    <a href="#" class="btn btn-header-link fs-4 text-center"
                                                        data-toggle="collapse" data-target="#faq4" aria-expanded="true"
                                                        aria-controls="faq4">Amount Claimed (Details Overleaf)</a>
                                                </div>
                                                <div id="faq4" class="collapse show" aria-labelledby="faqhead2"
                                                    data-parent="#faq">
                                                    <div class="card-body">
                                                        <div class="table-responsive">
                                                            <!-- <div class="summary">Showing <b>1-15</b> of <b>20</b> items.</div> -->
                                                            <table
                                                                class="table table-striped table-bordered TableAmountClaimed">
                                                                <thead class="thead-light">
                                                                    <tr>
                                                                        <th>Sr. No.</th>
                                                                        <th>Expenditure Head</th>
                                                                        <th>Amount </th>
                                                                        <!-- <th>Receipt Serial Number</th> -->
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr>
                                                                        <td>1</td>
                                                                        <td>Transportation</td>
                                                                        <td id="fare-amount"> </td>
                                                                        <!-- <td> </td> -->
                                                                    </tr>
                                                                    <tr>
                                                                        <td>2</td>
                                                                        <td>Hotel (Boarding) Expenses</td>
                                                                        <td id="room-rent"> </td>
                                                                        <!-- <td> </td> -->
                                                                    </tr>
                                                                    <tr>
                                                                        <td>3</td>
                                                                        <td>Food Expenses</td>
                                                                        <td id="food-expense"></td>
                                                                        <!-- <td> </td> -->
                                                                    </tr>
                                                                    <tr>
                                                                        <td></td>
                                                                        <td><strong>TOTAL AMOUNT</strong></td>
                                                                        <td id="expense-total-amount"> </td>
                                                                        <!-- <input type="hidden" id="expense-total-amount-input" name="OutstationTotalAmount" class="expense-total-amount" readonly> -->
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                           
                                                            <p>
                                                                Certified that the particulars filled in above are
                                                                correct and true. All the expenditure incurred/money
                                                                paid is in the intrest of organisation.
                                                            </p>
                                                            <!-- <p><b>This document does not require a physical signature as it contains a computer-generated name.</b></p> -->
                                                            <div class="row">
                                                                <div class="col-md-8 mb-0 pb-0">
                                                                    <p>
                                                                        <span><strong>(Signature, ID &amp; Seal of City
                                                                                Coordinator)</strong></span>
                                                                    </p>
                                                                </div>
                                                            </div>
                                                        </div>                                                       
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card">
                                                <div class="card-header" id="faqhead6">
                                                    <a href="#" class="btn btn-header-link fs-4 text-center"
                                                        data-toggle="collapse" data-target="#faq6" aria-expanded="true"
                                                        aria-controls="faq6">(A) Travelling Details:</a>
                                                </div>
                                                <div id="faq6" class="collapse show" aria-labelledby="faqhead6"
                                                    data-parent="#faq6">
                                                    <div class="card-body">
                                                        <div class="table-responsive">
                                                            <table
                                                                class="table table-striped table-bordered travel-details-tbl">
                                                                <thead class="thead-light">
                                                                    <tr>
                                                                        <th colspan="3">Departure</th>
                                                                        <th colspan="3">Arrival</th>
                                                                        <th>Mode of</th>
                                                                        <th>Travel Type</th>
                                                                        <th>Distance</th>
                                                                        <th>Air/Rail/Taxi</th>
                                                                        <th>Amount of</th>
                                                                        <th>Eligible Taxes</th>
                                                                        <th style="min-width: 200px !important;">File
                                                                        </th>
                                                                        <th>Action</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr>
                                                                        <td>Date</td>
                                                                        <td>Time</td>
                                                                        <td>From</td>
                                                                        <td>Date</td>
                                                                        <td>Time</td>
                                                                        <td>To</td>
                                                                        <td>Journey</td>
                                                                        <td></td>
                                                                        <td>in Kms</td>
                                                                        <td>Receipt No</td>
                                                                        <td>Fare Paid (Air/Rail/Taxi)</td>
                                                                        <td></td>
                                                                        <td>Copy of Bill/RC</td>
                                                                        <td>Action</td>
                                                                    </tr>
                                                                    <tr class="travel-row">
                                                                        <td>
                                                                            <div>
                                                                                <input type="date"
                                                                                    name="TabillMst[DepartureDate][]"
                                                                                    class="hasDatepicker date-input p-2 valid-field"
                                                                                    placeholder="dd-mm-yyyy"
                                                                                    id="DepartureDate0"
                                                                                    onchange="dateTime(this.id,this.value,0)">
                                                                                <div class="invalid-feedback d-none">
                                                                                </div>
                                                                            </div>
                                                                        </td>
                                                                        <td>
                                                                            <div class="mb-3 field-DepartureTime0">
                                                                                <input type="time" id="DepartureTime0"
                                                                                    class="p-2 valid-field time-input"
                                                                                    name="TabillMst[DepartureTime][]"
                                                                                    autocomplete="off"
                                                                                    onchange="dateTime(this.id,this.value,0)">
                                                                                <div class="invalid-feedback"></div>
                                                                            </div>
                                                                            <div class="invalid-feedback d-none"></div>
                                                                        </td>
                                                                        <td>
                                                                            <div class="mb-3 field-DepartureFrom0">
                                                                                <input type="text" id="DepartureFrom0"
                                                                                    class="p-2 valid-field"
                                                                                    name="TabillMst[DepartureFrom][]"
                                                                                    placeholder="From"
                                                                                    oninput="inputData(this.id,this.value,0)"
                                                                                    onkeypress="return lettersOnly(event)">
                                                                                <div class="invalid-feedback"></div>
                                                                            </div>
                                                                            <div class="invalid-feedback d-none"></div>
                                                                        </td>
                                                                        <td>
                                                                            <input type="date"
                                                                                name="TabillMst[ArrivalDate][]"
                                                                                class="hasDatepicker date-input p-2 valid-field"
                                                                                placeholder="dd-mm-yyyy"
                                                                                id="ArrivalDate0"
                                                                                onchange="dateTime(this.id,this.value,0)">
                                                                            <div class="invalid-feedback d-none"></div>
                                                                        </td>
                                                                        <td>
                                                                            <div class="mb-3 field-ArrivalTime0">
                                                                                <input type="time" id="ArrivalTime0"
                                                                                    class="p-2 valid-field time-input"
                                                                                    name="TabillMst[ArrivalTime][]"
                                                                                    autocomplete="off"
                                                                                    onchange="dateTime(this.id,this.value,0)">
                                                                                <div class="invalid-feedback"></div>
                                                                            </div>
                                                                            <div class="invalid-feedback d-none"></div>
                                                                        </td>
                                                                        <td>
                                                                            <div class="mb-3 field-ArrivalTo0">
                                                                                <input type="text" id="ArrivalTo0"
                                                                                    class="p-2 valid-field"
                                                                                    name="TabillMst[ArrivalTo][]"
                                                                                    placeholder="To"
                                                                                    oninput="inputData(this.id,this.value,0)"
                                                                                    onkeypress="return lettersOnly(event)">
                                                                                <div class="invalid-feedback"></div>
                                                                            </div>
                                                                            <div class="invalid-feedback d-none"></div>
                                                                        </td>
                                                                        <td id="">
                                                                            <select name="TabillMst[JourneyMode][]"
                                                                                placeholder="Journey"
                                                                                class="p-2 valid-field"
                                                                                id="JourneyMode0"
                                                                                onchange="dateTime(this.id,this.value,0);addTextBoxFun(0,this.value)">
                                                                                <option value=" ">--Select--</option>
                                                                                <option value="By Air">By Air</option>
                                                                                <option value="By Railways">By Railways
                                                                                </option>
                                                                                <option value="By roadways">By roadways
                                                                                </option>
                                                                                <option value="By own vehicle">By own
                                                                                    vehicle</option>
                                                                                <option value="Others">Others</option>
                                                                            </select>
                                                                            <div class="invalid-feedback d-none"></div>
                                                                            <input type="text"
                                                                                name="TabillMst[OtherJourneyMode][]"
                                                                                placeholder="Enter other journey mode"
                                                                                class="p-2 mt-1 d-none"
                                                                                id="OtherJourneyMode0"
                                                                                oninput="inputData(this.id,this.value,0)">
                                                                        </td>
                                                                        <td id="">
                                                                            <select name="TabillMst[TravelType][]"
                                                                                placeholder="Journey"
                                                                                class="p-2 valid-field" id="TravelType0"
                                                                                onchange="dateTime(this.id,this.value,0);makeReadonlyFun(0,this.value)">
                                                                                <option value=" ">--Select--</option>
                                                                                <option value="local">Local</option>
                                                                                <option value="outstation">Outstation
                                                                                </option>
                                                                            </select>
                                                                            <div class="invalid-feedback d-none"></div>
                                                                        </td>
                                                                        <td>
                                                                            <div class="mb-3 field-Distance0">
                                                                                <input type="text" id="Distance0"
                                                                                    class="p-2 valid-field"
                                                                                    name="TabillMst[Distance][]"
                                                                                    maxlength="8"
                                                                                    placeholder="Distance(km)"
                                                                                    oninput="inputData(this.id,this.value,0);calculateDistAmt(0,this.value)"
                                                                                    onkeypress="return blockSpecialChar(event,'numeric')" >
                                                                                <div class="invalid-feedback"></div>
                                                                            </div>
                                                                            <div class="invalid-feedback d-none"></div>
                                                                        </td>
                                                                        <td>
                                                                            <div class="mb-3 field-ReceiptNo0">
                                                                                <input type="text" id="ReceiptNo0"
                                                                                    class="p-2 valid-field"
                                                                                    name="TabillMst[ReceiptNo][]"
                                                                                    placeholder="Receipt No"
                                                                                    oninput="inputData(this.id,this.value,0)">
                                                                                <div class="invalid-feedback"></div>
                                                                            </div>
                                                                            <div class="invalid-feedback d-none"></div>
                                                                        </td>
                                                                        <td>
                                                                            <div class="mb-3 field-FareAmount0">
                                                                                <input type="text" id="FareAmount0"
                                                                                    class="fare-amount p-2 valid-field"
                                                                                    name="TabillMst[FareAmount][]"
                                                                                    placeholder="Fare Paid"
                                                                                    onkeypress="return blockSpecialChar(event,'numeric')"
                                                                                    oninput="inputData(this.id,this.value,0)">
                                                                                <div class="invalid-feedback"></div>
                                                                            </div>
                                                                            <div class="invalid-feedback d-none"></div>
                                                                        </td>
                                                                        <td>
                                                                            <div class="mb-3 field-EligibleTax0">
                                                                                <input type="text" id="EligibleTax0"
                                                                                    class="fare-amount p-2 valid-field"
                                                                                    name="TabillMst[EligibleTax][]"
                                                                                    placeholder="Eligible Tax"
                                                                                    onkeypress="blockSpecialChar(event,'numeric')"
                                                                                    oninput="inputData(this.id,this.value,0)">
                                                                                <div class="invalid-feedback"></div>
                                                                            </div>
                                                                            <div class="invalid-feedback d-none"></div>
                                                                        </td>
                                                                        <td>
                                                                            <div class="mb-3 field-TravelFile0">
                                                                                <input type="hidden"
                                                                                    name="TabillMst[TravelFile][]"
                                                                                    value=""><input type="file"
                                                                                    id="TravelFile0"
                                                                                    class="new p-2 valid-field uploaded_file"
                                                                                    name="TabillMst[TravelFile][]">
                                                                                <div class="invalid-feedback"></div>
                                                                            </div>
                                                                            <div class="invalid-feedback d-none"></div>
                                                                        </td>
                                                                        <td>
                                                                            NA
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                            <div class="text-center mb-2">
                                                                <button type="button" class="btn btn-success me-2"
                                                                    onclick="addMoreTravel()">Add More+</button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="card">
                                                <div class="card-header" id="faqhead7">
                                                    <a href="#" class="btn btn-header-link fs-4 text-center"
                                                        data-toggle="collapse" data-target="#faq7" aria-expanded="true"
                                                        aria-controls="faq7">(B) Details of Hotel / Food Bill etc. (if
                                                        applicable):</a>
                                                </div>
                                                <div id="faq7" class="collapse show" aria-labelledby="faqhead7"
                                                    data-parent="#faq7">
                                                    <div class="card-body">
                                                        <div class="table-responsive">
                                                            <table class="table table-striped table-bordered">
                                                                <thead class="thead-light">
                                                                    <tr>
                                                                        <th>Name &amp; Address of Hotel/Guest House with
                                                                            Phone No</th>
                                                                        <th>No. of days</th>
                                                                        <th>Bill No.</th>
                                                                        <th>Bill Date</th>
                                                                        <th>Room Rent Paid</th>
                                                                        <th>Food Charges</th>
                                                                        <th>Total Amount</th>
                                                                        <th style="min-width: 200px !important;">File
                                                                        </th>
                                                                        <th>Action</th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr>
                                                                        <td>
                                                                            <div class="mb-3 field-HotelName0">
                                                                                <textarea id="HotelName0" class=""
                                                                                    name="TabillHotel[HotelName][]"
                                                                                    maxlength="100"
                                                                                    placeholder="Name/Address"
                                                                                    oninput="inputData(this.id,this.value,0);chkValidation(this.id,this.value,0)"></textarea>
                                                                                <div class="invalid-feedback"></div>
                                                                            </div>
                                                                            <div class="invalid-feedback d-none"></div>
                                                                        </td>
                                                                        <td>
                                                                            <div class="mb-3 field-DaysNumber0">
                                                                                <input type="text" id="DaysNumber0"
                                                                                    class="p-2"
                                                                                    name="TabillHotel[DaysNumber][]"
                                                                                    maxlength="8"
                                                                                    placeholder="No. of days"
                                                                                    oninput="inputData(this.id,this.value,0);chkValidation(this.id,this.value,0)"
                                                                                    onkeypress="return blockSpecialChar(event,'numeric')">
                                                                                <div class="invalid-feedback"></div>
                                                                            </div>
                                                                            <div class="invalid-feedback d-none"></div>
                                                                        </td>
                                                                        <td>
                                                                            <div class="mb-3 field-BillNoDate0">
                                                                                <input type="text" id="BillNoDate0"
                                                                                    class="p-2"
                                                                                    name="TabillHotel[BillNoDate][]"
                                                                                    maxlength="100"
                                                                                    placeholder="Bill No."
                                                                                    oninput="inputData(this.id,this.value,0);chkValidation(this.id,this.value,0)">
                                                                                <div class="invalid-feedback"></div>
                                                                            </div>
                                                                            <div class="invalid-feedback d-none"></div>
                                                                        </td>
                                                                        <td>
                                                                            <input type="date"
                                                                                name="TabillHotel[BillDate][]"
                                                                                placeholder="dd-mm-yyyy" class="hasDatepicker p-2"
                                                                                id="BillDate0"
                                                                                onchange="dateTime(this.id,this.value,0);chkValidation(this.id,this.value,0)">
                                                                            <div class="invalid-feedback d-none"></div>
                                                                        </td>
                                                                        <td>
                                                                            <div class="mb-3 field-RoomRentPaid0">
                                                                                <input type="text" id="RoomRentPaid0"
                                                                                    class="room-rent p-2"
                                                                                    name="TabillHotel[RoomRentPaid][]"
                                                                                    maxlength="100"
                                                                                    placeholder="Room Rent Paid"
                                                                                    oninput="inputData(this.id,this.value,0);chkValidation(this.id,this.value,0)"
                                                                                    onkeypress="return  blockSpecialChar(event,'numeric')">
                                                                                <div class="invalid-feedback"></div>
                                                                            </div>
                                                                            <div class="invalid-feedback d-none"></div>
                                                                        </td>
                                                                        <td>
                                                                            <div class="mb-3 field-FoodCharge0">
                                                                                <input type="text" id="FoodCharge0"
                                                                                    class="food-charge p-2"
                                                                                    name="TabillHotel[FoodCharge][]"
                                                                                    maxlength="100"
                                                                                    placeholder="Food Charges"
                                                                                    oninput="inputData(this.id,this.value,0);chkValidation(this.id,this.value,0)"
                                                                                    onkeypress="return  blockSpecialChar(event,'numeric')">
                                                                                <div class="invalid-feedback"></div>
                                                                            </div>
                                                                            <div class="invalid-feedback d-none"></div>
                                                                        </td>
                                                                        <td>
                                                                            <div class="mb-3 field-TotalAmount0">
                                                                                <input type="text" id="TotalAmount0"
                                                                                    class="p-2"
                                                                                    name="TabillHotel[TotalAmount][]"
                                                                                    readonly="" maxlength="100"
                                                                                    placeholder="Total Amount"
                                                                                    onkeypress="return blockSpecialChar(event,'characterNumericAndAllowSomespecials')"
                                                                                    oninput="inputData(this.id,this.value,0);chkValidation(this.id,this.value,0)">
                                                                                <div class="invalid-feedback"></div>
                                                                            </div>
                                                                            <div class="invalid-feedback d-none"></div>
                                                                        </td>
                                                                        <td>
                                                                            <div class="mb-3 field-HotelFile0">
                                                                                <input type="hidden"
                                                                                    name="TabillHotel[HotelFile][]"
                                                                                    value=""><input type="file"
                                                                                    id="HotelFile0" class="p-2 uploaded_file"
                                                                                    name="TabillHotel[HotelFile][]"
                                                                                    onchange="chkValidation(this.id,this.value,0)">
                                                                                <div class="invalid-feedback"></div>
                                                                            </div>
                                                                            <div class="invalid-feedback d-none"></div>
                                                                        </td>
                                                                        <td>
                                                                            NA
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                            <div class="text-center">
                                                                <button type="button" class="btn btn-success me-2"
                                                                    onclick="addMoreHotel()">Add More+</button>
                                                            </div>
                                                            <p>
                                                                *Orignal Bills (verified by yourself) must be enclosed
                                                                with his form. It is certified that the particulars
                                                                filled in above are correct and true.<br>
                                                                All the money paid is the interest of organisation.
                                                            </p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="text-end">
                                   <button type="button" id="outsideFormPreviewBtn" class="btn btn-warning me-2 modalPopupOut">Preview</button>       
                                  <!-- <button type="Submit" id="outsideFormPreviewBt111111" class="btn btn-warning me-2 modalPopupOut">Preview</button>                                      -->
                                <button type="submit" class="btn btn-success float-end d-none outsideFormSubmitBtn finalSubmitOnlineBtn" name="submit" value="2" style="float:right"><i class="ri-save-line float-start me-1"></i> Submit</button>    
                                                            
                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
<!-- end outstation -->

<div id="div_show" class="fs-1 fw-bold text-danger text-center"><br/><b>Please Fill the Remuneration To Continue<b></div> 
         </div>
      </div>
</div>
<!-- ---- model Local from----- -->
    <div class="modal fade" id="PreviewModal" tabindex="-1" aria-labelledby="PreviewModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="PreviewModalLabel">Preview</h5>
                    {{-- <button type="button" class="btn-close EditBill" data-bs-dismiss="modal"
                        aria-label="Close"></button> --}}
                        {{-- <button type="button" class="close EditBill" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                          </button> --}}
                </div>
                <div class="modal-body ">
                    <div class="RemunerationModal">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success verifyAadhaarBtn" data-id="1"
                        id="verifyAadhaarBtn">Verify Email</button>
                    <button type="button" class="btn btn-primary EditBill clearHtml"
                        data-bs-dismiss="modal">Edit</button>
                </div>
            </div>
        </div>
    </div>
    </div>
    <div class="modal fade" id="AadharModal" tabindex="-1" aria-labelledby="AadharModalLabel" aria-hidden="true"
        data-bs-backdrop="static">
        <div class="overlay">
            <div id="loader"><img src="{{ asset('assets/images/loader.gif')}}" width="200" alt="Loading..."></div>
        </div>
        <div class="modal-dialog" style="max-width: 700px!important">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Email Verification</h1>
                    {{-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> --}}
                    {{-- <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button> --}}
                </div>
                <div class="modal-body">
                    <div class="my-4 aadharverify">
                        <p class="text-center fs-4 text-danger">Kindly Generate Email OTP For Verification </p>
                    </div>
                    <div class="row text-center" id="divMessage">
                        <span id="spnResult" class="" style="color: green; font-weight: bold; font-size: 14px;padding-left:20px"></span>
                    </div>
                    <div class="my-4 otpverify d-none">
                        <label class="fs-5 fw-bold">Enter OTP</label>
                        <input type="text" name="Otp" id="Otp" class="form-control form-control-sm"
                            placeholder="Enter OTP" autocomplete="off" maxlength="4"
                            onkeypress="return blockSpecialChar(event,'numeric')">
                        <span class="OTPTxt text-danger d-block overflow-auto visibility-hidden"></span>
                        <span class="control-label" id="OtpLabel"
                            style="text-align:left;margin-left:5px;font-size:12px;font-weight:bold; ">Please validate
                            the OTP within 10 minutes of receiving it</span>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="fw-bold" id="countdown"></div>
                    <button type="button" class="btn btn-info my-3" style="display:none" id="resendOTPBtn"
                        onclick="onGenerateEmailOTP()">Resend OTP</button>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                        onclick="resetAadharVerification()">Cancel</button>
                    <button type="button" class="btn btn-warning my-3" id="generateAadhaarOTPBtn"
                        onclick="onGenerateEmailOTP()">Generate OTP</button>
                    <button id="btnValidateOTP" class="btn btn-warning my-3" style="display:none"
                        onclick="onValidateEmailOtp()">Validate OTP</button>
                    <button type="submit" class="btn btn-success FinalSubmit d-none">Final Submit</button>
                </div>
            </div>
        </div>
    </div>
<!-- outstation model -->
    <div class="my-4 d-flex gx-2 justify-content-end">
        <div class="me-3 text-right"></div>
            <div class="modal fade" id="exampleModalOut" tabindex="-1" aria-labelledby="exampleModalOutLabel" aria-hidden="true">
                <div class="modal-dialog modal-dialog-scrollable">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalOutLabel">Preview</h5>
                            {{-- <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> --}}
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                              </button>
                        </div>
                        <div class="modal-body card">
                            <div class="card-header text-center fw-bold fs-4">
                            Outstation TA Claim Form (TO BE FILLED BY OUTSTAION TRAVELERS ONLY)
                            </div>
                            <div class="">
                                <table class="table cco-table table-striped table-bordered">
                                    <tbody>
                                        <tr>
                                            <th>Name of Exam:</th>
                                            <td id="examNameOutTd"></td>
                                            <th>Date of Exam:</th>
                                            <td id="examDateOutTd">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                                            
                                        </tr>
                                        <tr>
                                            <th>Centre Code: </th>
                                            <td id="centNoOutTd">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                                            <th>Name of Observer/Deputy Observer</th>
                                            <td id="NameOutTd">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <th>Address for Communication</th>
                                            <td id="AddressOutTd">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                                            <th>Registered Contact No.</th>
                                            <td id="ContactOutTd">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <th>PAN No.</th>
                                            <td id="PANOutTd">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                                            <th>Name of CC with Contact Number</th>
                                            <td id="CCNameOutTd">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <th>Bank Name and Branch</th>
                                            <td id="BankName_BranchOutTd">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                                            <th>Bank Account No.</th>
                                            <td id="AccountNoOutTd">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                                        </tr>
                                        <tr>
                                            <th>IFSC Code</th>
                                            <td id="IFSCOutTd" colspan="3">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            <div class="">
                                <div class="card-header text-center fw-bold fs-4 ">
                                    Amount Claimed (Details Overleaf)
                                </div>
                                    <table class="table table-striped table-bordered RemunerationTableModalOut">
                                    </table>
                                    <p>
                                        Certified that the particulars filled in above are correct and true. All the expenditure incurred/money paid is in the intrest of organisation.
                                    </p>                                                
                                </div>
                            
                            <div class="card-header text-center fw-bold fs-4 ">
                                (A) Travelling Details:
                            </div>
                            <div class="">
                                <table class="table cco-table table-striped table-bordered" >
                                    <thead class="thead-light">
                                        <tr>
                                            <th colspan="3">Departure</th>
                                            <th colspan="3">Arrival</th>
                                            <th>Mode of</th>
                                            <th>Travel Type</th>
                                            <th>Distance</th>
                                            <th>Air/Rail/Taxi</th>
                                            <th>Amount of</th>
                                            <th>Eligible Taxes</th>
                                            <!-- <th style="min-width: 200px !important;">File</th> -->
                                            <!-- <th>Action</th> -->
                                        </tr>
                                    </thead>
                                    <tbody id="travellPreview">
                                        <tr>
                                            <td>Date</td>
                                            <td>Time</td>
                                            <td>From</td>
                                            <td>Date</td>
                                            <td>Time</td>
                                            <td>To</td>
                                            <td>Journey</td>
                                            <td></td>
                                            <td>in Kms</td>
                                            <td>Receipt No</td>
                                            <td>Fare Paid (Air/Rail/Taxi)</td>
                                            <td></td>
                                        </tr>
                                        <tr class="travel-row">
                                            <td><p id="DepartureDate0Td"></p></td>
                                            <td><p id="DepartureTime0Td"></p></td>
                                            <td><p id="DepartureFrom0Td"></p></td>
                                            <td><p id="ArrivalDate0Td"></p></td>
                                            <td><p id="ArrivalTime0Td"></p></td>
                                            <td><p id="ArrivalTo0Td"></p></td>
                                            <td><p id="JourneyMode0Td"></p><p id="OtherJourneyMode0Td"></p></td>
                                            <td><p id="TravelType0Td"></p></td>
                                            <td><p id="Distance0Td"></p></td>
                                            <td><p id="ReceiptNo0Td"></p></td>
                                            <td><p id="FareAmount0Td"></p></td>
                                            <td><p id="EligibleTax0Td"></p></td>
                                        </tr>
                                    <tbody>                                   
                                </table>
                            </div>  
                            
                            <div class="card-header text-center fw-bold fs-4 ">
                                (B) Details of Hotel / Food Bill etc. (if applicable):
                            </div>
                            <div class="">
                                <div class="table-responsive">
                                    <table class="table table-striped table-bordered">
                                        <thead class="thead-light">
                                            <tr>
                                                <th>Name & Address of Hotel/Guest House with Phone No</th>
                                                <th>No. of days</th>
                                                <th>Bill No.</th>
                                                <th>Bill Date</th>
                                                <th>Room Rent Paid</th>
                                                <th>Food Charges</th>
                                                <th>Total Amount</th>
                                                <!-- <th style="min-width: 200px !important;">File</th> -->
                                                <!-- <th>Action</th> -->
                                            </tr>
                                        </thead>
                                        <tbody id="HotelDetailPreview">
                                            <tr class="hotel-detail-row">
                                                <td><p id="HotelName0Td"></p></td>
                                                <td><p id="DaysNumber0Td"></p></td>
                                                <td><p id="BillNoDate0Td"></p></td>
                                                <td><p id="BillDate0Td"></p></td>
                                                <td><p id="RoomRentPaid0Td"></p></td>
                                                <td><p id="FoodCharge0Td"></p></td>
                                                <td><p id="TotalAmount0Td"></p></td>
                                                <!-- <td><p id="HotelFile0Td"></p></td> -->
                                            </tr>                                                        
                                        </tbody>
                                    </table>
                                    <p>
                                        *Orignal Bills (verified by yourself) must be enclosed with his form. It is certified that the particulars filled in above are correct and true.<br>
                                        All the money paid is the interest of organisation.
                                    </p>                                                
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-success verifyAadhaarBtn" id="verifyAadhaarBtn" data-id="2">Verify Email</button>
                                
                                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Edit</button>
                            </div>                                                        
                        </div>
                    </div>
                </div>
            </div>
    </div>
</main>
@endsection
@section('script')


<!-- Local from script -->
<script>
   
    var totalTds = 0;
    $('#preview').click(function() {
        var formIsValid = true;
        $('.valid-field-1').each(function() {
            if ($(this).val().trim() === '') {
                $(this).next('span.text-danger').remove();
                $(this).after('<span class="text-danger">*This field is required</span>');
                
                if (formIsValid) {                   
                    $(this).focus();
                    formIsValid = false;
                }
            } else {                
                $(this).next('span.text-danger').remove();                
            }
           
        });    

        if (!formIsValid) {        
            return false;
        } else {           
            $('#PreviewModal').modal('show');
            var tableHtml = $('.RemunerationMain').clone();
            tableHtml.find('input:not(.common-fields)').addClass('border-0').prop({'readonly': true, }).css('pointer-events', 'none');
            tableHtml.find('input.common-fields').prop({'readonly': true,}).css('pointer-events', 'none'); 
            tableHtml.find('#preview').hide();
            tableHtml.find('.file-label').hide();
            $('.RemunerationModal').html(tableHtml);
        }
    });

    $('#AttachDocument').removeClass('valid-field-1');
        $(document).on('input', '.MiscellanousCharge', function() {
           var MiscellanousCharge = $('.MiscellanousCharge').val();
           if(MiscellanousCharge > 0)   
           {
             $('#AttachDocument').addClass('valid-field-1');
           }
           else
           {     
            $('span.text-danger').remove();        
            $('#AttachDocument').removeClass('valid-field-1');
           }
        });


// email otp

$(document).on('click', '.verifyAadhaarBtn', function() {
    $('#PreviewModal').modal('hide');
    var FormId = $(this).data('id');
    if (FormId == 1) {
        $('#exampleModal').modal('hide');
    } else {
        $('#exampleModalOnline').modal('hide');
    }
    resetAadharVerification();
    $('#AadharModal').modal('show').attr('data-id', +FormId);
});

function resetAadharVerification() {
    $('#Otp').val('');
    $('.otpverify').addClass('d-none');
    $('.aadharverify ').removeClass('d-none');
    $('#aadhaarNumberTxt').val('');
    $('.aadhaarNumberTxt').text('');
    $('.aadhaarNumberTxt').addClass('visibility-hidden');
    $('#btnValidateOTP').hide();
    $('#generateAadhaarOTPBtn').show();
    $('.OTPTxt').text('');
    $('#resendOTPBtn').hide();
    $('#spnResult').text('');
    $('.FinalSubmit').removeClass('d-block');
    $('.FinalSubmit').addClass('d-none');

}

function onGenerateEmailOTP() {
    var ExamType = '