@extends('layouts.acc_layout')

@section('title', '| View Vehicle Allowance Auto Voucher Authorization')

@section('stylesheets')
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
    <style>
        .panel .panel-body {
            color: #2c2e2f;
        }
        .table-custom {
            table-layout: fixed;
            width: 100% !important;
            border-collapse: collapse !important;
            border: 1px solid #2c2e2f !important;
        }
        .table-custom  th,td {
            border: 1px solid #c6c7cc;
            /* padding: 10px 15px; */
        }
        .table-custom th {
            font-weight: bold;
            text-align: center;
            padding: 5px 10px;
        }
        
    </style>
@endsection


@section('content')


<div class="row">
    <div class="col-md-1"></div>
    <div class="col-md-10 fullbody">
        <div class="viewTitle" style="border-bottom: 1px solid white;"></div>
        <div class="panel panel-default panel-border">
            <div class="panel-body">
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel-heading">

                            @if ($action =='forword')
                                <div class="panel-title col-md-6">Approve Vehicle Allowance Auto Voucher Authorization</div>
                            @else
                                <div class="panel-title col-md-6">View Vehicle Allowance Auto Voucher Authorization</div>
                            @endif

                            <div class="text-right col-md-6">
                                <a href="{{ url('vehicleAllowanceAutoVoucherAuthorizationList') }}" class="btn btn-info btn-sm" style="margin-bottom: 0;">
                                    <i class="fa fa-list"></i> View Voucher Authorization List
                                </a>
                            </div>

                        
                        </div>



                        <div class="panel-body">
                            

                            {!! Form::open(array('url' => '','id'=>'entryForm', 'role' => 'form', 'class'=>'form-horizontal form-groups')) !!}

                            <input type="hidden" name="id" value="{{ $monthlyLog->id }}">
                            
                            <div class="table-responsive">
                                <table id="bankReconcile" class="table table-striped table-bordered" width="100%" style="color:black; border-collapse: collapse;" border="1px solid ash;">
                                    <thead>

                                        <tr>
                                            <th colspan="7">User Information for the Month of {{date('M-Y', strtotime($monthlyLog->allowanceMonth))}}</th>
                                            
                                        </tr>
                                        <tr>
                                            <th>Employee</th>
                                            <th>Designation</th>
                                            <th colspan="3">Branch</th>
                                            <th colspan="3">Mobile No.</th>
                                        </tr>
                                    </thead>

                                    <tbody>
                                
                                        <tr>
                                            <td height="40" style="text-align: left; padding-left: 1em;">{{substr($billEmpInfo->emp_id, 0, 5)}}-{{$billEmpInfo->emp_name_english}}</td>
                                            <td style="text-align: left; padding-left: 1em;">{{$billEmpInfo->position_name}}</td>
                                            <td colspan="3" style="text-align: left; padding-left: 1em;">{{$userBranchId}}</td>
                                            <td colspan="2" style="text-align: center;">{{$billEmpInfo->mobile}}</td>
                                        </tr>
                                        
                                        <thead>
                                            <tr>
                                                <th rowspan="2">Vehicle No</th>
                                                <th colspan="5">Meter Reading (K.M)</th>
                                                <th rowspan="2">Remarks <br> (Billing Distence K.M)</th>
                                            </tr>
                                        
                                            <tr>
                                                <th>Previous</th>
                                                <th>Present</th>
                                                <th>Total Use</th>
                                                <th>Official Use</th>
                                                <th>Personal Use</th>
                                            </tr>
                                        </thead>
                                
                                        <tr>
                                            <td height="40" style="text-align: center;">{{ $userVehicleNo }}</td>
                                            <td style="text-align: right; padding-right: 1em;">{{ $previousMeterReading }}</td>
                                            <td style="text-align: right; padding-right: 1em;">{{ $monthlyLog->meterReading }}</td>
                                            <td style="text-align: right; padding-right: 1em;">{{ $monthlyLog->meterReading - $previousMeterReading }}</td>
                                            <td style="text-align: right; padding-right: 1em;">{{ $monthlyLog->meterReading - $previousMeterReading - $monthlyLog->personalUse }}</td>
                                            <td style="text-align: right; padding-right: 1em;">{{ $monthlyLog->personalUse }}</td>
                                            <td style="text-align: right; padding-right: 1em;">{{ $billingDistance }}</td>
                                        </tr>
                                    </tbody>
                                 
                            
                                </table>
                            </div>
                                        
                            <br>
                                
                            <div class="table-responsive">
                                <table id="bankReconcile" class="table table-striped table-bordered" width="100%" style="color:black; border-collapse: collapse;" border="1px solid ash;">
                                    <thead>
                                        <tr>
                                            <th colspan="9">Bill Part</th>
                                        </tr>
                                        <tr>
                                            <th width="50">SL#</th>
                                            <th>Description</th>
                                            <th>Unit</th>
                                            <th>Total Amount</th>
                                        </tr>
                                        
                                        
                                    </thead>
                                    <tbody>
                            
                                        <tr>
                                            <td height="30" style="text-align: center;">1</td>
                                            <td>Official Use (K.M)</td>
                                            <td style="text-align: center;">{{ $billingDistance }}</td>
                                            <td style="text-align: right; padding-right: 1em;">{{ number_format($monthlyLog->fuelCost, 2) }}</td>
                                        </tr>
                                        <tr>
                                            <td height="30" style="text-align: center;">2</td>
                                            <td>Mobil Expence</td>
                                            <td style="text-align: center;">1</td>
                                            <td style="text-align: right; padding-right: 1em;">{{ number_format($monthlyLog->mobilCost, 2) }}</td>
                                        </tr>
                                        <tr>
                                            <td height="30" style="text-align: center;">3</td>
                                            <td>Servicing Charge</td>
                                            <td style="text-align: center;">1</td>
                                            <td style="text-align: right; padding-right: 1em;">{{ number_format($monthlyLog->servicingCost, 2) }}</td>
                                        </tr>
                                        
                                        <tr>
                                            <td height="30" style="text-align: center; font-weight: bold;" colspan="3">Total Amount</td>
                                            <td style="text-align: right; padding-right: 1em; font-weight: bold;">{{ number_format($monthlyLog->fuelCost + $monthlyLog->mobilCost + $monthlyLog->servicingCost , 2) }}</td>
                                            
                                        </tr>
                                        <tr>
                                            <td height="30" style="text-align: center; font-weight: bold;" colspan="3">Total Amount In Words</td>
                                            <td style="padding-left: 1em; font-weight: bold;">{{$totalBillAmountInWords}}</td>
                                        </tr>
                                        
                                    </tbody>
                                    
                                </table>
                
                            </div>
                            
                            <br>

                           
                            <div class="tab-pane with-bg" id="fwv-2">
                                <div class="row">
                                    <div class="panel panel-default" style="padding:0!important;">
                                        
                                        <div class="panel-body" style="padding:5px 10px;">
                                        
                                            <div class="col-md-12">  

                                                <div class="panel-subtitle" style="text-align: left; text-decoration: underline; font-size: 20px;"><strong>Log Book Image:</strong></div><br>

                                                <img id="logBookImage" src="{{ asset('uploads/vehicleAllowanceMonthlyLog/'.$monthlyLog->logBookImage) }}"  style="width: 100%; height: 100%;">
        
                                                
                                            </div>
                                        </div>
                                    </div>
                                </div>                
                            </div>
                        @if ($action =='forword' && $isAllowApproval == true)
                            <div class="col-md-12">
                                {!! Form::label('remarks', 'Remarks:', ['class' => 'control-label']) !!} <small class="muted">(Optional)</small>
                                {!! Form::textarea('remarks', null, [
                                    'class' => 'form-control mini_textarea',
                                    'placeholder' => 'Write something here...',
                                    'style'=>"margin-bottom: 10px;"
                                ]) !!}
                            </div>
                        @endif
                    </div>

                    

                    <div class="form-group">
                        {!! Form::label('submit', ' ', ['class' => 'col-sm-5 control-label']) !!}
                        <div class="col-sm-5">
                            @if ($action =='forword' && $isAllowApproval == true)
                                    {!! Form::submit('Approve', ['id' => 'add', 'class' => 'btn btn-info']) !!}
                            
                                <a href="{{ url('vehicleAllowanceAutoVoucherAuthorizationList/') }}" class="btn btn-danger closeBtn">Close</a>
                                <span id="success" style="color:green; font-size:20px;" class="pull-right"></span>
                            @endif
                            
                        </div>
                    </div>

                    {!! Form::close() !!}
                            
                         @include('gnr.tools.approvalConfig.approvalLogs')
                    </div>
                    
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-1"></div>
    </div>
</div>
</div>



<script type="text/javascript">
    
    $(document).ready(function() {
    

        $('form').submit(function(event) {
            event.preventDefault();
            $.ajax({
                type: 'post',
                url:   "{{url('vehicleAllowanceAutoVoucherApprovalItem/')}}",
                data: $('form').serialize(),
                dataType: 'json',
                success: function(_response) {
                    if (_response.errors) {

                    } else {
                        if(_response.responseTitle == "Success!"){
                            toastr.success(_response.responseText, _response.responseTitle, opts);
                            setTimeout(function(){
                                window.location.href ="{{ url('vehicleAllowanceAutoVoucherAuthorizationList/') }}";
                            }, 2000);
                        }else{
                            toastr.warning(_response.responseText, _response.responseTitle, opts);
                        }
                    }
                    
                },
                error: function(_response) {
                    // Handle error
                    alert(_response.errors);
                }
            });
        });
    
    
    });
    
    
    </script>


@endsection