@extends('layouts.layout')

@section('content')


<!-- Content Header (Page header) -->
<section class="content-header">
    <h1>
        {{ ucwords(str_replace('_', ' ', $url)) }}
        <small>Version 2.0</small>
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> SysManager</a></li>
        <li class="active">{{ ucwords(str_replace('_', ' ', $url)) }}</li>
    </ol>
</section>

<!-- ADD FORM -->

<!-- Main content -->
<section class="content">
    <div class="row">

                <!-- left column -->
        <div class="col-md-12">
            <!-- general form elements -->
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title"> - <b></b>  </h3>
                </div>
                <!-- /.box-header -->
                <!-- form start -->



                <form id="invoiceState" name="invoiceState" class="invoiceState"  method="POST" role="form" enctype="multipart/form-data" onsubmit="return false;">

                    <div class="box-body">

                        <div class="col-sm-12">

<!--<h5>   </h5>-->

                            <div class="nav-tabs-custom">
                                <ul class="nav nav-tabs">
                                    <li class="active"><a href="#tab_1" data-toggle="tab">Details</a></li>
                                    <li><a href="#tab_2" data-toggle="tab">Payments </a></li>
                                    <li><a href="#tab_3" data-toggle="tab">History</a></li>
                                </ul>
                            </div>



                            <div class="tab-content">

                                <div class="tab-pane active" id="tab_1">

                                    <div class="">
                                        <!-- /.box-header -->
                                        <div class="box-body pad">

                                            <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Reservation Date</label>
                                                    <input readonly value="" type="text" class="form-control datepicker" id="researvationDate" name="researvationDate" placeholder="">

                                                </div>
                                            </div>

                                            <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Client Name</label>
                                                    <input readonly value="" type="text" class="form-control" id="client_name" name="client_name">

                                                </div>
                                            </div>

                                            <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Office</label>
                                                    <input readonly value="" type="text" class="form-control" id="office" name="office">

                                                </div>
                                            </div>

                                            <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Client Type</label>
                                                    <input readonly value="" type="text" class="form-control" id="client_type" name="client_id">

                                                </div>
                                            </div>
                                            
                                            
                                            <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Credit Type</label>
                                                    <input readonly value="" type="text" class="form-control" id="client_type" name="client_id">

                                                </div>
                                            </div>

                                            <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Contact Name</label>
                                                    <input value="" type="text" class="form-control" id="contact_name" name="contact_name">

                                                </div>
                                            </div>

                                            <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Email</label>
                                                    <input value="" type="text" class="form-control" id="contact_email" name="contact_email">

                                                </div>
                                            </div>

                                            <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Purchase Order</label>
                                                    <input value="" type="text" class="form-control" id="purchase_order" name="purchase_order" >

                                                </div>
                                            </div>

                                            <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Template</label>
                                                    <select class="form-control" name="invoice_template" id="invoice_template">
                                                        <option value="">Select</option>
                                                        <option value="hertz">Hertz LetterHead</option>
                                                        <!--<option value="ci">C & I Letter Head</option>-->
                                                        <option value="plain">Plain</option>
                                                    </select>
                                                </div>
                                            </div>

                                            <div class="col-sm-3">
                                                <div class="form-group" name="invoice_date" id="invoice_date">
                                                    <label for="exampleInputEmail1">Invoice Date</label>
                                                    <input value="2026-08-16" type="text" class="form-control" id="invoice_date" name="invoice_date">

                                                </div>
                                            </div>


                                            <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">TIN Number</label>
                                                    <input value="01056712-001" type="text" class="form-control" id="tin_number" name="tin_number">

                                                </div>
                                            </div>


                                            <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">VAT Number</label>
                                                    <input value="01056712-001" type="text" class="form-control" id="vat_number" name="vat_number">

                                                </div>
                                            </div>

                                            <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Payment Terms</label>
                                                    <input value="" type="text" class="form-control" id="payment_terms" name="payment_terms">

                                                </div>
                                            </div>


                                            <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Vendor Number</label>
                                                    <input value="" type="text" class="form-control" id="vendor_number" name="vendor_number">

                                                </div>
                                            </div>

                                                                                         <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Bank Account/Currency</label>
                                                    <select class="form-control" id="getBanks" name="getBanks">
                                                        <option value="">Select</option>
                                                                                                            </select>

                                                </div>
                                            </div>
                                            
                                            <!-- <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Contract Type</label>
                                                    <input value="" type="text" class="form-control" id="contract_type" name="contract_type">

                                                </div>
                                            </div>-->

                                                                                        
                                             <div class="col-sm-3">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Request Approval</label>
                                                    <select class="form-control select2" name="request_approval" id="request_approval">
                                                        <option value="">Select</option>
                                                        <option value="0">None</option>
                                                                                                            </select>
                                                </div>
                                            </div>

                                            

                                            <div class="col-sm-6">
                                                <div class="form-group">
                                                    <label for="exampleInputEmail1">Payment Details</label>
                                                    <textarea style="height:90px" class="form-control" id="bankDetails" name="bankDetails"></textarea>
                                                </div>
                                            </div>






                                         

                                            <!-- ////////////////////////////////////////////////////// BEGINNING OF ADDED TRIPS ///////////////////////////////-->
                                            <div class="col-sm-12">
                                                <hr/>
                                                <!--<h4>ADDED TRIPS &nbsp; <span class="fa fa-plus-square add" title="Add More" ></span></h4>-->
                                                <h4>TRIP ITEMS &nbsp;  
                                                                                                   </h4>


                                                <div id="settings">
                                                    <table class="table table-bordered table-responsive table-condensed table-hover" id="item_table">
                                                        <tr>
                                                            <th>Trip ID</th>
                                                            <th>Description</th>
                                                            <th>Start Date</th>
                                                            <!--<th>Services</th>-->
                                                            <th>Unit Cost</th>
                                                            <th>VAT</th>
                                                            <th>Net Value</th>


                                                        </tr>

                                                        
                                                    </table>

                                                    <div class="col-md-12">
                                                        <div class="col-md-12">
                                                            <b>Kindly reconfirm availability of vehicle for invoice sent 2hrs before payment.</b>
                                                            <b>Please note that payment validates reservation of vehicle.</b>
                                                            <br/>
                                                            Comment
                                                            <textarea name="comment" id="comment" style="height:110px; width:100%" class="form-control">
                                                               <b style='font-size:16px'> Kindly reconfirm availability of vehicle for invoice sent. This SHOULD be done 2hrs before payment.</b>
                                             <b style='font-size:16px'>Please note that payment validates reservation of vehicle.</b>

                                        •       Please note that our working period is between 6am – 6pm.
                                        •       Normal Overtime Rate (7pm – 12 midnight) ----------------N2,000 per hour
                                        •       Abnormal Overtime Rate (12 midnight — 6 am) ------------N2,500 per hour
                                        •       Weekend Allowance-----------------------------------------------N3,000 per day
                                        •       Public holiday allowance-------------------------------------------N5,000 per day
                                        •       Travel Allowance------------------------------------------------------N4,000 per day
                                        •       Outstation allowance------------------------------------------------N10,000 per night        
                                        •       Toll – pass/Parking Toll is excluded 
                                        
                                                            </textarea>
                                                        </div>
                                                    </div>

                                                    <div class="col-md-12">
                                                        <div class="col-md-12">
                                                           
                                                            <hr/>
                                                            <div class="pull-left btn btn-xs btn-danger" id="postInvoice" class="postInvoice" name="postInvoice">Submit</div>
                                                            <div id="mainSuming" style="font-weight:bolder;" class="pull-right">
                                                                Total Unit Cost : <span id="totalUnitCost" ></span>
                                                                <input type="hidden" id="totalUnitcostID"  name="totalUnitcostID"  />
                                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                                Total VAT : <span id="totalVat"></span>
                                                                 <input type="hidden" id="totalVatID" name="totalVatID"  />
                                                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                                                GRAND TOTAL : <span id="grandTotal"></span>
                                                                 <input type="hidden" id="grandTotalID" name="grandTotalID"  />
                                                                 <input type="hidden" id="reservationID" name="reservationID" value="" />
                                                                 <input type="hidden" id="cleint_ID" name="cleint_ID" value="" /> 
                                                                 
                                                            </div>


                                                                                                                </div>
                                                    </div>


                                                </div>
                                            </div>

                                            <!-- //////////////////////////////////// END OF ADDED TRIPS /////////////////////////////////////////////////-->                                           





                                        </div>
                                    </div>
                                    <!-- /.box -->
                                </div>



                                <!--///////////////////////////////////////// BEGINNING OF TAB 2 ///////////////////////////////////////////// -->
                                <!-- /.tab-pane -->
                                <div class="tab-pane first_tab tab_second" id="tab_2">

                                    <!--payment goes here-->

                                </div>


                                <!--///////////////////////////////////////// BEGINNING OF TAB 2 ///////////////////////////////////////////// -->
                                <!-- /.tab-pane -->
                                <div class="tab-pane first_tab" id="tab_3">

                                    <div class="col-sm-12">&nbsp;</div>

                                </div>



                                <!--///////////////////////////////////////// ADDITIONAL SERVICE ///////////////////////////////////////////// -->
                                <!-- /.tab-pane -->


                            </div>


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



            </div>
            </section>


            <script src="{{ URL::asset('js/global.js') }}"></script>
            <!-- <input type='hidden' value='' id='checkID' name='checkID[]'/> -->
            <script src="{{ URL::asset('js/vatable.js') }}"></script>
             <script src="{{ URL::asset('js/bookingInvoice.js') }}"></script>
            <script type="text/javascript">
                    $(document).ready(function () {
                        $(document).on('click', '.add', function () {
                            var html = "";
                            html += "<tr>";

                            html += "<td><input type='text' value='0' id='tripID' readonly name='tripID[]' style='width:40px; background-color:grey' /></td>";
                             html += "<td><input type='hidden' value='' id='checkID' name='checkID[]'/><textarea id='textDescription' name='textDescription[]' class='form-control' style='height:70px; vertical-align: top'></textarea></td>";
                            html += "<td><input id='startDate' name='startDate[]' value='2026-08-16' class='form-control' type='text' /></td>";
                            html += "<td><input id='amount' name='amount[]'  class='form-control amount' type='number' min='0' /></td>";
                            html += "<td><input id='vatable' name='vatable[]' class='form-control vatable' type='number' min='0'/></td>";
                            html += "<td><input id='totalCost' name='totalCost[]' readonly value='' class='form-control totalCost' type='text' /></td>";
                            //html += "<td><button type='type' name='remove' class='btn btn-danger btn-xs remove'><i class='fa fa-remove'></i></button></td></tr>";
                            $('#item_table').append(html);
                        });


                        $(document).on('click', '.remove', function () {
                            var r = confirm("Please make sure this particular row you want to remove all details, eg. Payment details, amount, select code and date is empty before your remove");
                            if (r == true) {
                                $(this).closest('tr').remove();
                            }
                        });




                        $("#settings").on("change keyup keydown paste propertychange bind mouseover", function () {
                            calculateOtherSum();

                        });


                        function calculateOtherSum() {
                            var sum = 0;
                            var sumVat = 0;
                            var sumAmount = 0;
                            var grandTotal = 0;
                            $(".totalCost").each(function () {
                                if (this.value.length !== "") {

                                    var vatable = $(this).closest("tr").find(".vatable").val();
                                    var amount = $(this).closest("tr").find(".amount").val();
                                    var totalValue = (Number(vatable) + Number(amount));


                                     $(this).val(totalValue.toFixed(2));
                                    sum += parseFloat(totalValue.toFixed(2));

                                     
                                     sumVat += parseFloat(Number(vatable).toFixed(2));
                                     sumAmount += parseFloat(Number(amount).toFixed(2));
                                     
                                    
                                     var totalCosting = $(this).closest("tr").find(".totalCost").val();
                                     grandTotal += parseFloat(Number(totalCosting).toFixed(2)); 

                                }
                            });

                             $('#totalUnitcostID').val(sumAmount.toFixed(2));
                             $('#totalUnitCost').html(sumAmount);
                             
                             $('#totalVat').html(sumVat);
                             $('#totalVatID').val(sumVat);
                             
                             $('#grandTotal').html(grandTotal);
                             $('#grandTotalID').val(grandTotal);
                             
                            
                        }


                    });
            </script>

            @endsection