<!DOCTYPE html>
<html lang="en">

<head>
<?php include_once('jobcardheader.php');?>
</head>

<body>

    <!-- Loader starts -->
    <div class="loader-wrapper">
        <div class="loader bg-white">
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
            <h4>Have a great day at work today <span>&#x263A;</span></h4>
        </div>
    </div>
    <!-- Loader ends -->

    <!--Passcode modal-->
    <div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"
        id="PassCodeModal">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="myLargeModalLabel">
                        Please Enter PassCode</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body m-20">
                    <div class="row">
                        <div class="col-12 col-md-12 col-sm-12 col-12">
                            <div class="mb-2">
                                <label class="col-12 col-md-12 col-sm-12 col-form-label">Pass
                                    Code</label>
                                <div class="col-12 col-md-12 col-sm-12">
                                    <input type="text" name="Modal_PassCode" class="form-control"
                                        placeholder="Pass Code" id="modal_passcode">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" onclick="javascript:void(0);submitInvoice(this)">Ok</button>
                    <button class="btn btn-secondary" data-dismiss="modal">Cancel</button>


                    <button style="display: none;" type="button" id="show_passcode" class="btn green"
                        href="#responsive">
                        <i class="fa fa-plus"></i>
                    </button>

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

    <!-- Customer Modal  -->


    <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
        aria-hidden="true" id="CustomerModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="myLargeModalLabel">
                        Please Select Customer</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body m-20">
                    <div class="row">
                        <form id="customersearchForm" onsubmit="return false;">
                            <div class="row m-2 m-l-0 form-group">

                                <div class="col-12 col-sm-2 col-md-2 form-group">
                                    <input type="text" class="form-control form-control-sm" placeholder="Customer Name"
                                        autocomplete="off" id="Modal_Search_Customer" name="CustomerName" />
                                </div>

                                <div class="col-12 col-sm-2 col-md-2 form-group">
                                    <input type="text" class="form-control form-control-sm" placeholder="Mobile #"
                                        autocomplete="off" id="Search_MobileNumber" name="MobileNumber" />
                                </div>

                                <div class="col-12 col-sm-2 col-md-2 form-group">
                                    <input type="text" class="form-control form-control-sm" placeholder="Email"
                                        autocomplete="off" id="Search_Email" name="Email" />
                                </div>

                                <div class="col-12 col-sm-2 col-md-2 form-group" style="display: none;">
                                    <input type="text" class="form-control form-control-sm" placeholder="Plate Number"
                                        autocomplete="off" id="Search_PlateNumber" name="PlateNumber" />
                                </div>
                                <div class="col-12 col-sm-2 col-md-2 form-group" style="display: none;">
                                    <input type="text" class="form-control form-control-sm" placeholder="Chassis Number"
                                        autocomplete="off" id="Search_ChassisNumber" name="ChassisNumber" />
                                </div>


                                <div class="col-12 col-sm-2 col-md-2 form-group" style="display: none;">
                                    <input type="text" class="form-control form-control-sm" placeholder="Vehicle"
                                        autocomplete="off" id="Search_VehicleType" name="VehicleType" />
                                </div>


                                <div class="col-12 col-sm-2 col-md-2 form-group" style="display: none;">
                                    <input type="text" class="form-control form-control-sm" placeholder="Customer Type"
                                        autocomplete="off" id="Search_CustomerType" name="CustomerType" />
                                </div>


                                <div class="col-12 col-sm-2 col-md-2 form-group">
                                    <button class="btn-primary form-control form-control-sm"
                                        onclick="javascript:void(0);doCustomerSearch(this)">Search</button>
                                </div>

                            </div>
                        </form>

                        <div class="table-responsive mt-2">
                            <table class="table table-bordered table-hover table-striped table-condensed"
                                id="customer-search">
                                <thead class="thead-light">
                                    <tr>
                                        <th scope="col" style="width: 30px">#
                                        </th>
                                        <th scope="col" style="width: 300px">
                                            Customer Name</th>
                                        <th scope="col" style="width: 80px">
                                            Mobile #</th>
                                        <th scope="col" style="width: 100px">
                                            Email
                                        </th>
                                        <th scope="col" style="width: 80px">
                                            GLCode
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- <tr id="invoice-no-data">
                                        <td colspan="7" style="text-align:center"> 
                                            There's no data 
                                        </td>
                                    </tr> -->
                                </tbody>
                            </table>

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

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


    <!-- Chassis Modal  -->


    <div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
        aria-hidden="true" id="ChassisModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="myLargeModalLabel">
                        Please Select Chassis Number</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body m-20">
                    <div class="row">
                        <form id="chassissearchForm" onsubmit="return false;">
                            <div class="row m-2 m-l-0 form-group">


                                <div class="col-12 col-sm-2 col-md-2 form-group">
                                    <input type="text" class="form-control form-control-sm" placeholder="Chassis Number"
                                        autocomplete="off" id="Search_Chassis_ChassisNumber" name="ChassisNumber" />
                                </div>

                                <div class="col-12 col-sm-2 col-md-2 form-group">
                                    <input type="text" class="form-control form-control-sm" placeholder="Plate Number"
                                        autocomplete="off" id="Search_Chassis_PlateNumber" name="PlateNumber" />
                                </div>



                                <div class="col-12 col-sm-2 col-md-2 form-group">
                                    <input type="text" class="form-control form-control-sm" placeholder="Vehicle"
                                        autocomplete="off" id="Search_Chassis_VehicleType" name="VehicleType" />
                                </div>


                                <div class="col-12 col-sm-2 col-md-2 form-group" style="display: none;">
                                    <input type="text" class="form-control form-control-sm" placeholder="Customer Type"
                                        autocomplete="off" id="Search_Chassis_CustomerType" name="CustomerType" />
                                </div>


                                <div class="col-12 col-sm-2 col-md-2 form-group">
                                    <button class="btn-primary form-control form-control-sm"
                                        onclick="javascript:void(0);doChassisSearch(this)">Search</button>
                                </div>

                            </div>
                        </form>

                        <div class="table-responsive mt-2">
                            <table class="table table-bordered table-hover table-striped table-condensed"
                                id="chassis-search">
                                <thead class="thead-light">
                                    <tr>
                                        <th scope="col" style="width: 30px">#
                                        </th>
                                        <th scope="col" style="width: 300px">
                                            Chassis #</th>
                                        <th scope="col" style="width: 80px">
                                            Plate #</th>
                                        <th scope="col" style="width: 100px">
                                            Vehicle Type
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>

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

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


    <!-- Added Saeed 01-29-2020 -->
    <div class="modal fade modal-save" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"
        id="ReceivedAdvance">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myLargeModalLabel">Payment Receipt</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div class="modal-body">

                    <form id="generateAdvancePayment" onsubmit="return false;">
                        <div class="row m-20 form-group">

                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="select2-drpdwn">
                                    <div class="mb-2">
                                        <label class="form-label">Cash A/C</label>
                                        <select disabled="" class="col-12 col-sm-6 col-md-3" name="Advance_cboCash"
                                            id="Advance_cboCash">
                                            <option selected="selected">--Select Cash A/C--
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="select2-drpdwn">
                                    <div class="mb-2">
                                        <label class="form-label">Credit A/C</label>
                                        <select disabled="" class="col-12 col-sm-6 col-md-3" name="Advance_cboCredit"
                                            id="Advance_cboCredit">
                                            <option selected="selected">--Select Credit A/C--
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="select2-drpdwn">
                                    <div class="mb-2">
                                        <label class="form-label">Cash Amount</label>
                                        <input type="number" placeholder="Cash Amount" class="form-control"
                                            name="Advance_CashAmount" id="advance_cashamount" value="">
                                    </div>
                                </div>
                            </div>


                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="select2-drpdwn">
                                    <div class="mb-2">
                                        <label class="form-label">Credit Card Amount</label>
                                        <input type="number" placeholder="Card Amount" class="form-control"
                                            name="Advance_CreditCardAmount" id="advance_creditcardamount" value="">
                                    </div>
                                </div>
                            </div>



                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="select2-drpdwn">
                                    <div class="mb-2">
                                        <label class="form-label">Trans. #</label>
                                        <input type="text" placeholder="Trans. #" class="form-control"
                                            name="Advance_TransactionNo" id="advance_transactionno" value="">
                                    </div>
                                </div>
                            </div>


                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="select2-drpdwn">
                                    <div class="mb-2">
                                        <label class="form-label">Total Received</label>
                                        <input type="number" disabled readonly placeholder="Total Received" class="form-control"
                                            name="Advance_TotalReceived" id="advance_totalreceived" value="">
                                    </div>
                                </div>
                            </div>


                        </div>
                    </form>


                    <div class="col-12 col-sm-12 col-md-12">
                        <small>
                            <table class="table table-bordered table-hover" id="Advance_history_table">
                                <thead class="thead-dark">
                                    <tr>
                                        <th style="width: 30px">SNo</th>
                                        <th style="width: 400px">Voucher No</th>
                                        <th style="width: 300px">Voucher Date</th>
                                        <th style="width: 300px">Received Amount</th>
                                        <th style="width: 30px">Action</th>
                                    </tr>
                                </thead>

                                <tbody>
                                    
                                </tbody>
                            </table>
                        </small>
                    </div>

                </div>

                <div class="modal-footer justify-content-between">
                    <div class="col-4">
                        <button class="btn btn-danger" id="saveAdvancePayment">Save</button>
                    </div>
                    <div class="col-4">
                        <!-- <span>One of two columns</span> -->
                    </div>

                </div>

            </div>
        </div>
    </div>
    <!--Modal div end-->













    <!-- PRINT MODAL -->
    <div class="modal fade" id="printModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-reporting">
            <div class="modal-content modal-reporting">
                <div class="modal-header">
                    <h4 class="modal-title" id="myLargeModalLabel">Print Document</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <iframe id="reportPreview" class="container-fluid"></iframe>

                </div>
            </div>
        </div>
    </div>
    <!--page-wrapper Start-->
    <div class="page-wrapper">

        <!--Page Body Start-->
        <div class="page-body-wrapper">

            <!--Page Body Start-->
            <div class="page-body" style="margin-top:0!important">

                <!-- Container-fluid starts -->
                <div class="container-fluid">

                    <div class="row">
                        <div class="col-sm-12 col-xl-12 xl-100">
                            <div class="card">
                                <!-- <div class="card-header">
                                    <h5>JOB CARD</h5>
                                    <span>Use this form to define designation.</span>
                                    <div class="card-header-right">
                                        <i class="icofont icofont-maximize full-card"></i>
                                        <i class="icofont icofont-minus minimize-card"></i>
                                    </div>
                                </div> -->

                                <div class="card-body" id="bar-parent2">


                                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link  active" id="supplier-tabs" data-toggle="tab"
                                                href="#supplier" role="tab" aria-controls="supplier"
                                                aria-selected="true">Search</a>
                                        </li>

                                        <li class="nav-item">
                                            <a class="nav-link" id="basic-tab" data-toggle="tab" href="#basic"
                                                role="tab" aria-controls="basic" aria-selected="false">Create New</a>
                                        </li>

                                    </ul>

                                    <div class="tab-content" id="myTabContent">
                                        <div class="tab-pane fade" id="basic" role="tabpanel"
                                            aria-labelledby="basic-tab">

                                            <div id="firstSlide">

                                                <div class="row m-20 form-group">
                                                    <h5>
                                                        <span class="lbl_edit" id="RetreiveKeyField"></span>
                                                    </h5>
                                                </div>
                                                <div class="row m-20 ">


                                                    <div class="col-md-6 col-sm-6">

                                                        <div class="form-row m-b-5">

                                                            <div class="form-group col-md-6">
                                                                <label for="inputEmail3">Customer Type</label>
                                                                <div class="select2-drpdwn">
                                                                    <select id="cboCustomerType" name="CustomerType">
                                                                        <option value="">--Select Customer Type--
                                                                        </option>
                                                                    </select>
                                                                </div>
                                                            </div>


                                                            <div class="form-group col-md-6">
                                                                <label for="inputEmail3">GL Code</label>
                                                                <div class="select2-drpdwn">

                                                                    <select class="col-12 col-sm-6 col-md-3"
                                                                        name="Supplier_SupplierID"
                                                                        id="Supplier_cboSupplier">
                                                                        <option selected="selected">--Select GL Code--
                                                                        </option>
                                                                    </select>

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









                                                        <div class="form-row m-b-5">
                                                            <div class="form-group col-md-6">
                                                                <label>Mobile <span class="required"
                                                                        aria-required="true"> *
                                                                    </span></label>

                                                                <div class="input-group">


                                                                    <input type="text"
                                                                        class="form-control ui-autocomplete-input"
                                                                        name="Mobile" id="mobile" value=""
                                                                        autocomplete="off" required="">
                                                                    <div class="input-group-append">
                                                                        <span class="input-group-text">
                                                                            <i class="icofont icofont-ui-zoom-in"
                                                                                id="MobileSearch"
                                                                                onclick="showCustomer()"></i></span>
                                                                    </div>
                                                                </div>


                                                                <input type="hidden" class="form-control"
                                                                    name="customer_id" id="customer_id" value=""
                                                                    required="">
                                                            </div>

                                                            <div class="form-group col-md-6">
                                                                <label>Customer Name <span class="required"
                                                                        aria-required="true"> * </span></label>
                                                                <input type="text" class="form-control"
                                                                    name="CustomerName" id="customername" value=""
                                                                    required="">
                                                            </div>
                                                        </div>

                                                        <div class="form-row">
                                                            <div class="form-group col-md-6">
                                                                <label>Email</label>
                                                                <input type="text" class="form-control" name="Email"
                                                                    id="email" value="">
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label for="plateno">TRN</label>
                                                                <input id="trn" type="text" class="form-control"
                                                                    name="TRN" placeholder="Tax Reg Number" value="">
                                                            </div>
                                                        </div>


                                                        <div class="form-row">

                                                            <div class="form-group col-md-6">
                                                                <label>Plate Number <span class="required"
                                                                        aria-required="true"> * </span>
                                                                    <!-- <a
                                                                        href="javascript:void(0)" class="neplateno"
                                                                        style="font-size:12px;">New Plate
                                                                        No.</a> -->
                                                                </label>
                                                                <input type="text"
                                                                    class="form-control platenosugs plateno ui-autocomplete-input"
                                                                    name="PlateNo" id="plateno" value="" required=""
                                                                    autocomplete="off">
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label>Chassis Number</label>
                                                                <div class="input-group">
                                                                    <input type="text" class="form-control"
                                                                        name="ChassisNo" id="chassisno" value="">
                                                                    <div class="input-group-append">
                                                                        <span class="input-group-text">
                                                                            <i class="icofont icofont-ui-zoom-in"
                                                                                id="ChassisSearch"
                                                                                onclick="showChassis()"></i></span>
                                                                    </div>
                                                                </div>


                                                            </div>

                                                        </div>

                                                        <div class="form-row">
                                                            <div class="form-group col-md-6">
                                                                <label for="plateno">K.M Run</label>
                                                                <input type="text" id="kmrun" name="KMRun"
                                                                    class="form-control" value="">
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label for="installersby">Promise Date</label>
                                                                <!-- <input type="text" class="form-control hasDatepicker" id="datepicker2" readonly="" name="promisedDate" value=""> -->
                                                                <input type="text" readonly data-language="en"
                                                                    class="datepicker-here form-control"
                                                                    aria-describedby="basic-addon2"
                                                                    placeholder="Promised Date" name="PromisedDate"
                                                                    autocomplete="off" id="promiseddate" required>

                                                            </div>
                                                        </div>

                                                    </div>

                                                    <div class="col-md-6 col-sm-6">

                                                        <div class="form-row">

                                                            <div class="form-group col-md-4">
                                                                <label for="inputEmail3">Vehicle Brand</label>
                                                                <div class="select2-drpdwn">
                                                                    <select id="cboVehicleBrand" name="VehicleBrand">
                                                                        <option value="">--Select Vehicle
                                                                            Brand--
                                                                        </option>
                                                                    </select>
                                                                </div>
                                                            </div>

                                                            <div class="form-group col-md-4">
                                                                <label for="inputEmail3">Vehicle Model</label>
                                                                <div class="select2-drpdwn">
                                                                    <select id="cboVehicleModel" name="VehicleModel">
                                                                        <option value="">--Select Vehicle
                                                                            Model--
                                                                        </option>
                                                                    </select>
                                                                </div>
                                                            </div>

                                                            <div class="form-group col-md-4">
                                                                <label for="inputEmail3">Vehicle Type</label>
                                                                <div class="select2-drpdwn">
                                                                    <select id="cboVehicleType" name="VehicleType">
                                                                        <option value="">--Select Vehicle Type--
                                                                        </option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <!-- 
                                                            <div class="form-group col-md-2"
                                                                style="margin-bottom: 0;display:none">
                                                                <label for="inputEmail3">Vehicle Size</label>
                                                                <div class="col-12 col-md-12 col-sm-6">
                                                                    <div class="select2-drpdwn">
                                                                        <div class="mb-2">
                                                                            <select class="col-12 col-md-12 col-sm-6"
                                                                                id="cboVehicleSize" name="VehicleSize">
                                                                                <option value="">--Select Vehicle Size--
                                                                                </option>
                                                                            </select>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div> -->
                                                        </div>

                                                        <div class="form-row">
                                                            <div class="form-group col-md-6">
                                                                <label for="inputEmail3">Vehicle
                                                                    Color</label>
                                                                <div class="select2-drpdwn">
                                                                    <select id="cboVehicleColor" name="VehicleColor">
                                                                        <option value="">
                                                                            --Select
                                                                            Vehicle
                                                                            Color--
                                                                        </option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label for="inputEmail3">Veh
                                                                    Manufacture Year</label>
                                                                <div class="select2-drpdwn">
                                                                    <select id="cboManufacturerYear"
                                                                        name="ManufacturerYear">
                                                                        <option value="">--Select
                                                                            Manufacturer Year--
                                                                        </option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="form-row">
                                                            <div class="form-group col-md-6">
                                                                <label>Sales Person</label>
                                                                <div class="select2-drpdwn">
                                                                    <select id="cboSalesPerson" name="SalesPerson">
                                                                        <option value="">
                                                                            --Select Sales
                                                                            Person--</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label>Installers By</label>
                                                                <div class="select2-drpdwn">
                                                                    <select id="cboInstallersBy" name="InstallersBy">
                                                                        <option value="">
                                                                            --Select Installers
                                                                            By--</option>
                                                                    </select>
                                                                </div>
                                                            </div>
                                                        </div>

                                                        <div class="form-row">
                                                            <div class="form-group col-md-6">
                                                                <label>Jobcard Date</label>
                                                                <!-- <input type="text" class="form-control" name="JobcardDate" id="JobcardDate" value="2019-07-30" readonly="" data-dtp="dtp_SLeEp"> -->
                                                                <input type="text" disabled readonly data-language="en"
                                                                    class="datepicker-here form-control"
                                                                    aria-describedby="basic-addon2"
                                                                    placeholder="Jobcard Date" name="JobCardDate"
                                                                    autocomplete="off" id="jobcarddate" required>

                                                            </div>
                                                            <div class="form-group col-md-6">
                                                                <label>Prepared By<span class="required"
                                                                        aria-required="true">*</span></label>
                                                                <input type="text" readonly="" class="form-control"
                                                                    name="PreparedBy" id="preparedby">
                                                            </div>
                                                        </div>




                                                        <div class="form-row">
                                                            <div class="form-group col-md-4">
                                                                <label>Mulkiya No</label>
                                                                <input type="text" class="form-control" name="MulkiyaNo"
                                                                    id="mulkiyano">
                                                            </div>
                                                            <div class="form-group col-md-4">
                                                                <label>Parking No </label>
                                                                <input type="text" class="form-control" name="ParkingNo"
                                                                    id="parkingno">
                                                            </div>

                                                            <div class="form-group col-md-4">
                                                                <label>Key No</label>
                                                                <input type="text" class="form-control" name="KeyNo"
                                                                    id="keyno">
                                                            </div>


                                                        </div>


                                                    </div>

                                                    <div class="col-md-12 text-right">
                                                        <div class="form-group ">
                                                            <button type="button" class="btn btn-danger"
                                                                onclick="showSecondSlide()">Next <i
                                                                    class="fa fa-arrow-right"></i></button>
                                                            <!-- <button class="btn btn-primary"   onclick="javascript:void(0);submitInvoice(this)">Submit</button> -->

                                                        </div>
                                                    </div>

                                                    <!-- <div class="col-md-12 text-right">
                                                        <div class="form-group ">
                                                            <button type="button" class="btn btn-danger"
                                                                onclick="showCustomer()">Customer <i
                                                                    class="fa fa-arrow-left"></i></button>

                                                        </div>
                                                    </div> -->

                                                </div>
                                            </div>
                                            <div id="secondSlide" style="display: none;">
                                                <div class="row m-20 ">
                                                    <div class="col-md-12 col-sm-12">
                                                        <div class="top-bar-title padding-bottom">
                                                            <h4>Inspection Details</h4>
                                                        </div>
                                                        <table class="table table-bordered">
                                                            <tbody>
                                                                <tr>
                                                                    <td style="vertical-align:top;padding:0px;width:75%">
                                                                        <div class=""
                                                                            style="border: 1px solid #c0c0c0; padding:0px;">
                                                                            <img src="../assets/images/car.jpg"
                                                                                usemap="#Map" border="0"
                                                                                style="width:70%" id="carImage">
                                                                            <map name="Map" id="Map">
                                                                                <area shape="poly" href="#"
                                                                                    coords="326,161,295,157,285,157,280,165,284,175,338,202"
                                                                                    title="Left Rear Quater"
                                                                                    alt="Left Rear Quater">
                                                                                <area shape="poly" href="#"
                                                                                    coords="337,413,296,437,287,439,282,447,286,457,322,455"
                                                                                    title="Right Rear Quater"
                                                                                    alt="Right Rear Quater">
                                                                                <area shape="poly" href="#"
                                                                                    coords="577,441,546,427,473,409,486,459,540,459,573,459"
                                                                                    title="Right Front Window"
                                                                                    alt="Right Front Window">
                                                                                <area shape="poly" href="#"
                                                                                    coords="360,410,452,408,457,458,346,456"
                                                                                    title="Right Rear Window"
                                                                                    alt="Right Rear Window">
                                                                                <area shape="poly" href="#"
                                                                                    coords="577,173,575,153,487,158,475,205,528,197,557,186"
                                                                                    title="Left Front Window"
                                                                                    alt="Left Front Window">
                                                                                <area shape="poly" href="#"
                                                                                    coords="346,160,458,158,453,209,361,210"
                                                                                    title="Left Rear Window"
                                                                                    alt="Left Rear Window">
                                                                                <area shape="poly" href="#"
                                                                                    coords="172,126,195,130,198,151,172,154,167,188,166,208,144,217,141,214,140,189,166,190"
                                                                                    title="Left Tail Light"
                                                                                    alt="Left Tail Light">
                                                                                <area shape="poly" href="#"
                                                                                    coords="473,54,618,53,627,57,632,64,632,141,616,148,473,154,476,117"
                                                                                    title="Left Front Door"
                                                                                    alt="Left Front Door">
                                                                                <area shape="poly" href="#"
                                                                                    coords="370,55,472,52,476,108,472,155,332,158,324,146,325,126,331,119,355,95,364,80,366,60"
                                                                                    title="Left Rear Door"
                                                                                    alt="Left Rear Door">
                                                                                <area shape="poly" href="#"
                                                                                    coords="678,189,717,188,790,195,808,201,822,240,825,369,808,417,716,430,677,429,663,432,659,428,669,414,682,388,688,348,688,269,679,233,671,208,657,190,662,186,674,186"
                                                                                    title="Hood" alt="Hood">
                                                                                <area shape="poly" href="#"
                                                                                    coords="320,219,340,225,388,226,474,225,525,223,557,215,565,212,552,204,520,215,394,219,341,220,316,209,313,215"
                                                                                    title="Left Rail" alt="Left Rail">
                                                                                <area shape="poly" href="#"
                                                                                    coords="315,401,339,393,387,394,475,393,525,395,562,403,549,414,519,401,458,398,366,398,322,404,342,398"
                                                                                    title="Right Rail" alt="Right Rail">
                                                                                <area shape="poly" href="#"
                                                                                    coords="317,231,561,230,564,248,565,303,564,370,559,401,525,393,388,390,342,392,320,398,312,347,311,278"
                                                                                    title="Roof" alt="Roof">
                                                                                <area shape="poly" href="#"
                                                                                    coords="328,461,285,462,278,456,277,451,285,440,340,409,308,411,216,458,199,454,185,452,174,456,173,464,197,464,200,474,199,484,194,491,173,494,174,506,275,509,306,501,320,503,326,496,323,481"
                                                                                    title="Right Quarter Panel"
                                                                                    alt="Right Quarter Panel">
                                                                                <area shape="poly" href="#"
                                                                                    coords="747,511,800,513,795,499,785,492,712,476,678,475,664,471,654,464,646,465,615,445,608,450,626,465,632,474,632,556,656,561,658,543,666,521,680,507,702,502,722,500,735,506"
                                                                                    title="Right Fender"
                                                                                    alt="Right Fender">
                                                                                <area shape="poly" href="#"
                                                                                    coords="568,212"
                                                                                    title="Front Windsheild Glass"
                                                                                    alt="Front Windsheild Glass">
                                                                                <area shape="poly" href="#"
                                                                                    coords="567,211,656,191,671,211,685,268,685,347,678,384,669,410,656,425,561,402,568,317,564,243,559,218"
                                                                                    title="Front Windshield Glass"
                                                                                    alt="Front Windshield Glass">
                                                                                <area shape="poly" href="#"
                                                                                    coords="308,217,221,209,216,210,203,251,199,286,197,323,202,359,209,392,220,409,308,400,318,398,309,344,310,281,314,235,319,222"
                                                                                    title="Rear Windsheild Glass"
                                                                                    alt="Rear Windsheild Glass">
                                                                                <area shape="poly" href="#"
                                                                                    coords="170,212,172,279,171,407,125,391,118,384,120,238,122,228"
                                                                                    title="Trunk" alt="Trunk">
                                                                                <area shape="poly" href="#"
                                                                                    coords="114,180,115,436,95,437,90,431,82,430,66,430,60,423,70,409,69,363,72,360,73,256,69,214,63,197,65,188,80,186,92,184,96,180"
                                                                                    title="Rear Bumper"
                                                                                    alt="Rear Bumper">
                                                                                <area shape="poly" href="#"
                                                                                    coords="856,191,851,186,851,179,864,179,885,184,903,188,904,428,887,434,871,437,854,439,851,429,854,427,856,367,845,365,828,376,827,242,846,253,854,251"
                                                                                    title="Front Bumper"
                                                                                    alt="Front Bumper">
                                                                                <area shape="poly" href="#"
                                                                                    coords="362,571,658,574,659,593,361,594"
                                                                                    title="Right Rocker Panel"
                                                                                    alt="Right Rocker Panel">
                                                                                <area shape="poly" href="#"
                                                                                    coords="362,6,651,4,655,42,365,43"
                                                                                    title="Left Rocker Panel"
                                                                                    alt="Left Rocker Panel">
                                                                                <area shape="poly" href="#"
                                                                                    coords="327,157,286,155,277,160,278,171,344,212,319,210,220,161,199,160,196,163,182,163,174,161,172,153,199,153,198,131,192,127,173,124,175,111,207,111,258,110,275,108,290,114,309,117,322,114,333,110,323,123,323,139"
                                                                                    title="Left Quarter Panel"
                                                                                    alt="Left Quarter Panel">
                                                                                <area shape="poly" href="#"
                                                                                    coords="473,464,615,466,626,467,633,557,622,563,475,562,476,529,477,499"
                                                                                    title="Right Front Door"
                                                                                    alt="Right Front Door">
                                                                                <area shape="poly" href="#"
                                                                                    coords="330,461,473,463,476,498,474,538,473,563,372,563,367,561,366,545,362,529,356,520,334,501,325,481,327,493"
                                                                                    title="Right Rear Door"
                                                                                    alt="Right Rear Door">
                                                                                <area shape="circle" href="#"
                                                                                    coords="307,554,45"
                                                                                    title="Right Rear Wheel"
                                                                                    alt="Right Rear Wheel">
                                                                                <area shape="circle" href="#"
                                                                                    coords="711,555,46"
                                                                                    title="Right Front Wheel"
                                                                                    alt="Right Front Wheel">
                                                                                <area shape="circle" href="#"
                                                                                    coords="711,61,46"
                                                                                    title="Left Front Wheel"
                                                                                    alt="Left Front Wheel">
                                                                                <area shape="circle" href="#"
                                                                                    coords="306,61,45"
                                                                                    title="Left Rear Wheel"
                                                                                    alt="Left Rear Wheel">
                                                                                <area href="#" shape="poly"
                                                                                    coords="747,103,798,105,797,115,784,124,711,140,674,144,660,147,654,153,646,153,617,170,606,169,627,156,634,142,636,63,632,47,657,45,657,57,657,75,665,95,680,107,702,116,724,116,737,113"
                                                                                    title="Left Fender"
                                                                                    alt="Left Fender">
                                                                                <area href="#" shape="poly"
                                                                                    coords="819,494,831,515,808,515,802,513,799,500,789,493"
                                                                                    title="Right Headlight"
                                                                                    alt="Right Headlight">
                                                                                <area href="#" shape="poly"
                                                                                    coords="829,429,854,429,854,368,846,367,836,375,830,378,828,382"
                                                                                    title="Right Headlight"
                                                                                    alt="Right Headlight">
                                                                                <area href="#" shape="poly"
                                                                                    coords="827,186,850,189,855,193,854,252,844,249,827,239"
                                                                                    title="Left Headlight"
                                                                                    alt="Left Headlight">
                                                                                <area href="#" shape="poly"
                                                                                    coords="829,102,819,123,789,126,800,117,801,107,806,102"
                                                                                    title="Left Headlight"
                                                                                    alt="Left Headlight">
                                                                                <area href="#" shape="poly"
                                                                                    coords="750,103,799,105,803,100,830,101,835,95,834,76,822,74,816,56,829,57,822,49,804,45,765,45,766,67,760,84"
                                                                                    title="Front Bumper"
                                                                                    alt="Front Bumper">
                                                                                <area href="#" shape="poly"
                                                                                    coords="767,574,818,569,830,561,817,561,819,544,832,545,836,521,831,517,804,518,798,514,750,512,760,531,767,547"
                                                                                    title="Front Bumper"
                                                                                    alt="Front Bumper">
                                                                                <area href="#" shape="poly"
                                                                                    coords="817,491,788,479,721,465,688,463,676,464,659,465,678,474,710,476,787,491"
                                                                                    title="Hood" alt="Hood">
                                                                                <area href="#" shape="poly"
                                                                                    coords="680,155,721,149,787,138,814,129,819,123,788,126,715,142,683,144,669,146,659,152"
                                                                                    title="Hood" alt="Hood">
                                                                                <area href="#" shape="poly"
                                                                                    coords="615,462,591,445,582,447,577,455,581,465,613,465"
                                                                                    title="Right Door Mirror"
                                                                                    alt="Right Door Mirror">
                                                                                <area href="#" shape="poly"
                                                                                    coords="615,150,584,153,580,161,586,172,614,157"
                                                                                    title="Left Door Mirror"
                                                                                    alt="Left Door Mirror">
                                                                                <area href="#" shape="poly"
                                                                                    coords="273,511,174,508,168,512,162,519,161,535,162,547,170,551,171,559,252,566,252,552,254,537,258,528,266,519"
                                                                                    title="Rear Bumper"
                                                                                    alt="Rear Bumper">
                                                                                <area href="#" shape="poly"
                                                                                    coords="251,51,172,57,170,67,164,73,161,98,168,104,176,110,273,107,261,93,253,72"
                                                                                    title="Rear Bumper"
                                                                                    alt="Rear Bumper">
                                                                                <area href="#" shape="poly"
                                                                                    coords="173,465,198,467,198,485,172,494,167,427,165,411,142,402,138,428,167,427,172,465"
                                                                                    title="Right Tail Light"
                                                                                    alt="Right Tail Light">
                                                                                <area href="#" shape="poly"
                                                                                    coords="172,126,195,130,198,151,172,154,167,188,166,208,144,217,141,214,140,189,166,190"
                                                                                    title="Left Tail Light"
                                                                                    alt="Left Tail Light">
                                                                                <area href="#" shape="poly"
                                                                                    coords="483,157,469,212,456,212,461,157"
                                                                                    title="Left Center Pilar"
                                                                                    alt="Left Center Pilar">
                                                                                <area href="#" shape="poly"
                                                                                    coords="342,159,358,211,344,209,326,162"
                                                                                    title="Left RR Pilar"
                                                                                    alt="Left RR Pilar">
                                                                                <area href="#" shape="poly"
                                                                                    coords="631,145,617,150,555,199,617,175,611,168,624,158"
                                                                                    title="Left FR Pilar"
                                                                                    alt="Left FR Pilar">
                                                                                <area href="#" shape="poly"
                                                                                    coords="454,403,461,460,484,463,468,404"
                                                                                    title="Right Center Pilar"
                                                                                    alt="Right Center Pilar">
                                                                                <area href="#" shape="poly"
                                                                                    coords="358,407,346,401,325,460,340,462"
                                                                                    title="Right RR Pilar"
                                                                                    alt="Right RR Pilar">
                                                                                <area href="#" shape="poly"
                                                                                    coords="555,414,611,446,605,451,530,415"
                                                                                    title="Right FR Pilar"
                                                                                    alt="Right FR Pilar">
                                                                            </map>
                                                                        </div>
                                                                    </td>
                                                                    <td style="vertical-align:top;padding:5px;width:25%">
                                                                        <table class="table table-bordered RowsGroup"
                                                                            id="inspectiontable" style="width:100%">
                                                                            <thead>
                                                                                <tr>
                                                                                    <th style="width:70%">Problem</th>
                                                                                    <!-- <th>Problem</th> -->
                                                                                    <!-- <th>Take Image</th> -->
                                                                                    <th style="width:30%">Snap</th>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody id="scrac">
                                                                                <!-- 
                                                                                <tr>
                                                                                    <td>Rear Bumper<input type="hidden" name="insp[]" value="Rear Bumper"></td>
                                                                                    <td><input class="form-control" name="remark[]" placeholder="Explain problem"></td>
                                                                                    <td><input type="file" class="form-control" name="image[]" placeholder="Imgages"></td>
                                                                                    <td><a href="javascript:void(0);" class="remove" title="Remove"><i class="fa fa-trash-o"></i></a></td>
                                                                                </tr>
                                                                                <tr>
                                                                                    <td>Left Quarter Panel<input type="hidden" name="insp[]" value="Left Quarter Panel"></td>
                                                                                    <td><input class="form-control" name="remark[]" placeholder="Explain problem"></td>
                                                                                    <td><input type="file" class="form-control" name="image[]" placeholder="Imgages"></td>
                                                                                    <td><a href="javascript:void(0);" class="remove" title="Remove"><i class="fa fa-trash-o"></i></a></td>
                                                                                </tr>
                                                                                <tr>
                                                                                    <td>Left Quarter Panel<input type="hidden" name="insp[]" value="Left Quarter Panel"></td>
                                                                                    <td><input class="form-control" name="remark[]" placeholder="Explain problem"></td>
                                                                                    <td><input type="file" class="form-control" name="image[]" placeholder="Imgages"></td>
                                                                                    <td><a href="javascript:void(0);" class="remove" title="Remove"><i class="fa fa-trash-o"></i></a></td>
                                                                                </tr>
                                                                                -->
                                                                            </tbody>
                                                                        </table>
                                                                        <div class="form-group">
                                                                            <a href="#" id="takeOtherPictures"><i class='fa fa-camera'></i>&nbsp;Take other Images</a> <!--PICTURE_LINE-->
                                                                            <input type="hidden" id="PictureLocation" name="PictureLocation"><!--PICTURE_LINE-->

                                                                            <!-- <input type="file" class="form-control"
                                                                                id="Takephoto" name="Takephoto[]"
                                                                                multiple=""> -->
                                                                        </div>
                                                                        <div class="top-bar-title padding-bottom">
                                                                            <h6><b>Fuel Level</b></h6>
                                                                            <div class="slidecontainer">
                                                                                <input type="range" min="1" max="100"
                                                                                    value="1" name="FuelLevel"
                                                                                    class="slider1" id="myRange">
                                                                                <p>Value:
                                                                                    <span
                                                                                        id="fuel_level_percent">1</span>%
                                                                                </p>
                                                                            </div>
                                                                        </div>








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

                                                                            <div class="form-row">
                                                                                <h6><b>Check-In</b></h6>
                                                                                <div class="form-group col-md-12">
                                                                                    <button type="button" id="CheckIn"
                                                                                        class="btn btn-danger"><i
                                                                                            class="fa fa-arrow-right"></i>
                                                                                        Check-In</button>
                                                                                </div>
                                                                            </div>

                                                                        </div>

                                                                        <div class="col-md-12 col-sm-12">
                                                                            <div class="form-row">
                                                                                <h6><b>Check-Out</b></h6>
                                                                                <div class="form-group col-md-12">
                                                                                    <button type="button" id="CheckOut"
                                                                                        class="btn btn-warning"><i
                                                                                            class="fa fa-arrow-left"></i>
                                                                                        Check-Out</button>
                                                                                </div>
                                                                            </div>

                                                                        </div>


                                                                        <!-- <div class="top-bar-title padding-bottom">
                                                                            <h6><b>Check-Out</b></h6>
                                                                            <button type="button" class="btn btn-danger"><i
                                                                                class="fa fa-arrow-right"></i>
                                                                                Check-Out</button>
                                                                        </div> -->



                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>

                                                    <div class="col-lg-12 col-md-12">


                                                        <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                            <tbody>
                                                                <tr>
                                                                    <td align="left" valign="top"
                                                                        style="padding-top:30px;">
                                                                        <table border="0" cellspacing="0"
                                                                            cellpadding="0" width="100%">
                                                                            <tbody>


                                                                                <tr>
                                                                                    <td align="left" valign="top"
                                                                                        width="100%">
                                                                                        <table
                                                                                            class="table table-bordered"
                                                                                            width="100%" border="0"
                                                                                            cellspacing="0"
                                                                                            cellpadding="0"
                                                                                            id="warningtable">
                                                                                            <thead>
                                                                                                <tr>
                                                                                                    <td
                                                                                                        style="border:1px solid #000;">
                                                                                                        <strong>Warning
                                                                                                            Lights</strong>
                                                                                                    </td>
                                                                                                    <td
                                                                                                        style="border:1px solid #000;">
                                                                                                        <strong>Yes</strong>
                                                                                                    </td>
                                                                                                    <td
                                                                                                        style="border:1px solid #000;">
                                                                                                        <strong>No</strong>
                                                                                                    </td>
                                                                                                </tr>
                                                                                            </thead>
                                                                                            <tbody>

                                                                                                <!-- <tr>
                                                                                                    <td style="border:1px solid #000;">ABS/ESP LIGHT</td>
                                                                                                    <td style="border:1px solid #000;width: 10%;">
                                                                                                        <label class="switchToggle1" style="margin-bottom:0px;">
                                                                                                            <input type="radio" name="warninglights[1]" id="warninglights1" value="1">
                                                                                                            <span class="slider aqua round"></span> 
                                                                                                        </label></td>
                                                                                                    <td style="border:1px solid #000;width: 10%;">
                                                                                                        <label class="switchToggle1" style="margin-bottom:0px;">
                                                                                                            <input type="radio" name="warninglights[1]" checked="" id="warninglights1" value="0">
                                                                                                            <span class="slider aqua round"></span> 
                                                                                                        </label></td>
                                                                                                </tr> -->

                                                                                            </tbody>
                                                                                        </table>
                                                                                    </td>
                                                                                </tr>
                                                                                <!-- <tr>
                                                                                        <td>Remark:</td>
                                                                                    </tr>
                                                                                    <tr>
                                                                                        <td><textarea class="form-control" name="remarks" id="remarks" rows="4"></textarea></td>
                                                                                    </tr>
                                                                                    -->
                                                                            </tbody>
                                                                        </table>
                                                                    </td>
                                                                    <td align="left" valign="top" width="20"
                                                                        style="padding-top:30px;">&nbsp;</td>
                                                                    <td align="left" valign="top"
                                                                        style="padding-top:30px;">
                                                                        <table class="table table-bordered" width="100%"
                                                                            border="0" cellspacing="0" cellpadding="0"
                                                                            id="checklisttable">
                                                                            <thead>
                                                                                <tr>
                                                                                    <td colspan="2"
                                                                                        style="border:0px solid #000;">
                                                                                        <strong>Check
                                                                                            List:</strong>
                                                                                    </td>
                                                                                </tr>
                                                                            </thead>
                                                                            <tbody>

                                                                                <!-- <tr>
                                                                    <td style="border:1px solid #000; width: 10%;">
                                                                          <label class="switchToggle1" style="margin-bottom:0px;">
                                                                              <input type="checkbox" name="checklist[]" id="checklist1" value="1">
                                                                              <span class="slider aqua round"></span> 
                                                                          </label>
                                                                    </td>
                                                                    <td style="border:1px solid #000;">Radio</td>
                                                                  </tr> -->


                                                                            </tbody>
                                                                        </table>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>
                                                    </div>

                                                    <hr>

                                                    <div class="col-md-12" style="display:none">
                                                        <div class="table-responsive">
                                                            <table
                                                                class="table table-bordered dt-responsive nowrap RowsGroupParticular"
                                                                cellspacing="0" width="100%" style="margin-bottom:0px;">
                                                                <tbody>
                                                                    <tr>
                                                                        <td width="35%" bgcolor="#f7f3dd">Parts</td>
                                                                        <td width="10%" bgcolor="#f7f3dd">Qty</td>
                                                                        <td width="2%" bgcolor="#f7f3dd">#</td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td bgcolor="#ffffff"><input type="text"
                                                                                index="1" class="form-control"
                                                                                id="Particular1" name="Particular[]"
                                                                                value="" autocomplete="off">
                                                                            <input type="hidden" class="form-control"
                                                                                id="Particular_id1"
                                                                                name="Particular_id[]" value="">
                                                                            <input type="hidden" name="part_id[]"
                                                                                value=""></td>
                                                                        <td bgcolor="#ffffff"><input type="text"
                                                                                class="form-control" id="Qty1"
                                                                                name="Qty[]" value="1"
                                                                                onkeyup="calculateCost(1);"
                                                                                autocomplete="off"></td>
                                                                        <td bgcolor="#ffffff">&nbsp;
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                            <table
                                                                class="table table-striped table-bordered dt-responsive nowrap"
                                                                cellspacing="0" width="100%">
                                                                <tbody>
                                                                    <tr>
                                                                        <td align="right" bgcolor="#ffffff" colspan="2">
                                                                            <span class="add btn btn-xs btn-success"
                                                                                id="addButtonParticular">Add
                                                                                More Item</span></td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-12">
                                                        <div class="form-group">
                                                            <label
                                                                style="margin-top:10px;margin-bottom:unset;">Description</label>
                                                            <textarea class="form-control" name="partdesc"
                                                                id="summernote" rows="10"></textarea>

                                                        </div>
                                                    </div>
                                                    <div class=" col-md-12 text-right">
                                                        <div class="form-group ">
                                                            <button type="button" class="btn btn-primary m-r-20"
                                                                onclick="showFirstSlide()"><i
                                                                    class="fa fa-arrow-left"></i>
                                                                Previous</button>
                                                            <button type="button" class="btn btn-danger"
                                                                onclick="showThirdSlide()"><i
                                                                    class="fa fa-arrow-right"></i>
                                                                Next</button>
                                                            <!-- <button class="btn btn-danger"   onclick="javascript:void(0);submitInvoice(this)">Submit</button> -->
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div id="thirdSlide" style="display:none">
                                                <div class="row m-20 ">
                                                    <div class="col-sm-12">
                                                        <!-- <div class="card"> -->
                                                        <!-- <div class="card-header"> -->
                                                        <h5>Items / Services</h5>
                                                        <span>Enter <code>items</code> and <code>services</code>
                                                            required in this job card</span>
                                                        <!-- <div class="card-header-right">
                                                                    <i class="icofont icofont-maximize full-card"></i>
                                                                    <i class="icofont icofont-minus minimize-card"></i>
                                                                </div> -->

                                                        <!-- </div>
                                                            <div class="card-body"> -->
                                                        <hr />

                                                        <div class="row"
                                                            style="margin-left: -3px!important;margin-right: -3px!important;">

                                                            <div class="col-xl-12 xl-100 col-lg-12">
                                                                <div class="card mb-0">
                                                                    <!-- <div class="card-header">
                                                                                <h5 class="pull-left">Item / Service</h5>
                                                                            </div>
                                                                             -->
                                                                    <div class="card-body pb-0">



                                                                        <div class="row">

                                                                            <div class="col-2 col-sm-2 col-md-2"
                                                                                style="display:none;">
                                                                                <div class="select2-drpdwn">
                                                                                    <div class="mb-2">
                                                                                        <label
                                                                                            class="form-label">Company</label>
                                                                                        <select
                                                                                            class="col-12 col-sm-12 col-md-12"
                                                                                            id="cboItem_Company">
                                                                                        </select>
                                                                                    </div>
                                                                                </div>
                                                                            </div>

                                                                            <div class="col-2 col-sm-2 col-md-2">
                                                                                <div
                                                                                    class="select2-drpdwn small-select">
                                                                                    <div class="mb-2">
                                                                                        <label
                                                                                            class="col-form-label-xs">Type</label>
                                                                                        <select
                                                                                            class="col-12 col-sm-12 col-md-12"
                                                                                            id="cboItem_BaseType">
                                                                                        </select>
                                                                                    </div>
                                                                                </div>
                                                                            </div>

                                                                            <div class="col-2 col-sm-2 col-md-2">
                                                                                <div class="select2-drpdwn">
                                                                                    <div class="mb-2">
                                                                                        <label class="form-label">Main
                                                                                            Category</label>
                                                                                        <select
                                                                                            class="col-12 col-sm-12 col-md-12"
                                                                                            id="cboItem_MainCategory">
                                                                                        </select>
                                                                                    </div>
                                                                                </div>
                                                                            </div>

                                                                            <div class="col-2 col-sm-2 col-md-2">
                                                                                <div class="select2-drpdwn">
                                                                                    <div class="mb-2">
                                                                                        <label class="form-label">Sub
                                                                                            Category</label>
                                                                                        <select
                                                                                            class="col-12 col-sm-12 col-md-12"
                                                                                            id="cboItem_SubCategory">
                                                                                        </select>
                                                                                    </div>
                                                                                </div>
                                                                            </div>

                                                                            <div class="col-2 col-sm-2 col-md-2">
                                                                                <div class="select2-drpdwn">
                                                                                    <div class="mb-2">
                                                                                        <label
                                                                                            class="form-label">Brand</label>
                                                                                        <select
                                                                                            class="col-12 col-sm-12 col-md-12"
                                                                                            id="cboItem_Brand">
                                                                                        </select>
                                                                                    </div>
                                                                                </div>
                                                                            </div>

                                                                            <div class="col-2 col-sm-2 col-md-2">
                                                                                <div class="select2-drpdwn">
                                                                                    <div class="mb-2">
                                                                                        <label
                                                                                            class="form-label">Level</label>
                                                                                        <select
                                                                                            class="col-12 col-sm-12 col-md-12"
                                                                                            id="cboItem_ItemLevel">
                                                                                        </select>
                                                                                    </div>
                                                                                </div>
                                                                            </div>

                                                                            <div class="col-4 col-sm-4 col-md-4">
                                                                                <div class="select2-drpdwn">
                                                                                    <div class="mb-2">
                                                                                        <label
                                                                                            class="form-label">Item</label>
                                                                                        <select
                                                                                            class="col-12 col-sm-12 col-md-12"
                                                                                            id="cboItem_Item">
                                                                                        </select>
                                                                                        <!--::CREATE_ITEM-->
                                                                                        <a href="javascript:void(0)"
                                                                                            id="button_CreateItem"
                                                                                            tabindex="-1">Create New</a>

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

                                                                            <!-- <div class="col-2 col-md-2 col-sm-2">
                                                                                        <div class="form-group">
                                                                                            <div class="mb-2">
                                                                                                <label
                                                                                                    class="form-label">Batch
                                                                                                    Number</label>
                                                                                                <input type="text" class="form-control"
                                                                                                    placeholder="Batch #"
                                                                                                    id="invoice_txtPartNumber">
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                     -->
                                                                            <div class="col-8 col-md-8 col-sm-8">
                                                                                <div class="form-group">
                                                                                    <div class="mb-2">
                                                                                        <label
                                                                                            class="form-label">Narration</label>
                                                                                        <input type="text"
                                                                                            class="form-control"
                                                                                            placeholder="Narration"
                                                                                            id="invoice_txtNarration">
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                        <hr>
                                                                        <div class="row">

                                                                            <div class="col-2 col-md-2 col-sm-2"
                                                                                style="display: none;">
                                                                                <div class="select2-drpdwn">
                                                                                    <div class="mb-2">
                                                                                        <label
                                                                                            class="form-label text-truncate">Unit</label>
                                                                                        <select class=" col-sm-12"
                                                                                            onchange="javascript:doCalculation()"
                                                                                            id="invoice_cboUnit">
                                                                                            <option>Unit
                                                                                            </option>
                                                                                        </select>
                                                                                    </div>
                                                                                </div>
                                                                            </div>

                                                                            <div class="col-2 col-md-2 col-sm-2">
                                                                                <div class="form-group">
                                                                                    <label
                                                                                        class="form-label text-truncate">Qty
                                                                                        | Unit</label>
                                                                                    <input
                                                                                        oninput="javascript:doCalculation()"
                                                                                        min="0" type="number"
                                                                                        class="form-control"
                                                                                        placeholder="Qty"
                                                                                        id="invoice_txtQty">
                                                                                </div>
                                                                            </div>

                                                                            <div class="col-2 col-md-2 col-sm-2">
                                                                                <div class="form-group">
                                                                                    <label
                                                                                        class="form-label text-truncate">Price</label>
                                                                                    <input
                                                                                        oninput="javascript:doCalculation()"
                                                                                        min="0" type="number"
                                                                                        class="form-control"
                                                                                        placeholder="Price"
                                                                                        id="invoice_txtPrice" disabled>
                                                                                </div>
                                                                            </div>

                                                                            <div class="col-2 col-md-2 col-sm-2">
                                                                                <div class="form-group">
                                                                                    <label
                                                                                        class="form-label text-truncate">Amount</label>
                                                                                    <input disabled="disabled"
                                                                                        oninput="javascript:doCalculation()"
                                                                                        min="0" type="number"
                                                                                        class="form-control"
                                                                                        placeholder="Amount"
                                                                                        id="invoice_txtAmount">
                                                                                </div>
                                                                            </div>

                                                                            <div class="col-1 col-md-1 col-sm-1">
                                                                                <div class="form-group">
                                                                                    <label
                                                                                        class="form-label text-truncate">Dis
                                                                                        %</label>
                                                                                    <input
                                                                                        oninput="javascript:doCalculation()"
                                                                                        min="0" type="number"
                                                                                        class="form-control"
                                                                                        placeholder="Disc"
                                                                                        id="invoice_txtDiscount">
                                                                                    <input
                                                                                        oninput="javascript:doCalculation()"
                                                                                        min="0" type="hidden"
                                                                                        class="form-control"
                                                                                        placeholder="VAT"
                                                                                        id="invoice_txtDiscountAmount">
                                                                                </div>
                                                                            </div>

                                                                            <div class="col-1 col-md-1 col-sm-1">
                                                                                <div class="form-group">
                                                                                    <label
                                                                                        class="form-label text-truncate">VAT
                                                                                        %</label>
                                                                                    <input
                                                                                        oninput="javascript:doCalculation()"
                                                                                        min="0" type="number"
                                                                                        class="form-control"
                                                                                        placeholder="VAT"
                                                                                        id="invoice_txtVAT">
                                                                                    <input
                                                                                        oninput="javascript:doCalculation()"
                                                                                        min="0" type="hidden"
                                                                                        class="form-control"
                                                                                        placeholder="VAT"
                                                                                        id="invoice_txtVATAmount">
                                                                                </div>
                                                                            </div>

                                                                            <div class="col-2 col-md-2 col-sm-2">
                                                                                <div class="form-group">
                                                                                    <label
                                                                                        class="form-label text-truncate">Net
                                                                                        Amt</label>
                                                                                    <input disabled="disabled"
                                                                                        oninput="javascript:doCalculation()"
                                                                                        min="0" type="number"
                                                                                        class="form-control"
                                                                                        placeholder="Net Amt"
                                                                                        id="invoice_txtNetAmount">
                                                                                </div>
                                                                            </div>

                                                                            <div class="col-md-1 form-inline">
                                                                                <button
                                                                                    oninput="javascript:doCalculation()"
                                                                                    onclick="javascript:addRow(this)"
                                                                                    class="mt-3 col-md-12 btn btn-primary"
                                                                                    style="padding-right: 0px!important;padding-left: 0px!important;">Post</button>
                                                                            </div>

                                                                        </div>


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


                                                        <div class="table-responsive mt-2">
                                                            <table
                                                                class="table table-bordered table-hover table-striped table-condensed"
                                                                id="invoice">
                                                                <thead class="thead-light">
                                                                    <tr>
                                                                        <th scope="col" style="width: 30px">
                                                                            #</th>
                                                                        <th scope="col" style="width: 140px">
                                                                            Item</th>
                                                                        <th scope="col" style="width: 50px">
                                                                            Qty</th>
                                                                        <th scope="col" style="width: 50px">
                                                                            Amt</th>
                                                                        <th scope="col" style="width: 50px">
                                                                            Disc</th>
                                                                        <th scope="col" style="width: 40px">
                                                                            VAT</th>
                                                                        <th scope="col" style="width: 50px">
                                                                            Net Amt</th>
                                                                        <th scope="col" style="width: 50px">
                                                                            Narration</th>
                                                                        <th scope="col"
                                                                            style="width: 40px;text-align: center;vertical-align: middle">
                                                                            <i class="fa fa-reorder"></i>
                                                                        </th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr id="invoice-no-data">
                                                                        <td colspan="9" style="text-align:center">
                                                                            There's no data
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                        <table class="table table-bordered table-condensed ">
                                                            <tbody>
                                                                <tr>
                                                                    <td align="right" width="80%">Without VAT
                                                                        Value</td>
                                                                    <td align="right"><span id="totalValue">0</span>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td align="right">Total
                                                                        Discount</td>
                                                                    <td align="right"><span id="totalDiscount">0</span>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td align="right">Total Vat
                                                                    </td>
                                                                    <td align="right"><span id="totalTax">0</span>
                                                                    </td>
                                                                </tr>
                                                                <tr>
                                                                    <td align="right">Total
                                                                        Price</td>
                                                                    <td align="right"><span id="grandTotal">0</span>
                                                                    </td>
                                                                </tr>
                                                            </tbody>
                                                        </table>

                                                        <!-- </div> -->

                                                        <!-- <div class="col-md-12">
                                                                <div class="form-group">
                                                                    <label>Description</label>
                                                                    <textarea class="form-control" name="partdesc"
                                                                        id="summernote" rows="10"></textarea>

                                                                </div>
                                                            </div> -->



                                                        <!-- <div class="card-footer"> -->
                                                        <button type="button" class="btn btn-danger m-r-20"
                                                            onclick="showSecondSlide()"><i class="fa fa-arrow-left"></i>
                                                            Previous</button>
                                                        <button class="btn btn-primary"
                                                            onclick="javascript:void(0);ValidatePassCode(this)">Submit</button>
                                                        <button class="btn btn-secondary"
                                                            onclick="javascript:void(0);resetInvoice(this)">Clear</button>

                                                        <button class="btn btn-danger"
                                                            onclick="javascript:void(0);ClearForm(true,true)">Cancel</button>
                                                        <!-- </div> -->

                                                        <!-- </div> -->
                                                    </div>
                                                </div>
                                            </div>
                                        </div>



                                        <div class="tab-pane fade  show active" id="supplier" role="tabpanel"
                                            aria-labelledby="supplier-tab">

                                            <form id="searchForm" onsubmit="return false;">
                                                <div class="row m-20 form-group">

                                                    <!-- 
                                                    <label
                                                        class="col-sm-1 col-1 col-md-1  col-form-label">Company</label>
                                                    <div class="col-12 col-md-2 col-sm-2">
                                                        <input type="text" class="form-control"
                                                            aria-describedby="basic-addon2" placeholder="Search"
                                                            id="Search_Company" name="Company">
                                                    </div> -->

                                                    <div class="col-12 col-sm-2 col-md-2 form-group"
                                                        style="display: none;">
                                                        <input type="text" class="form-control form-control-sm"
                                                            aria-describedby="basic-addon2" placeholder="Company"
                                                            id="Search_Company" name="Company">
                                                    </div>

                                                    <div class="col-12 col-sm-2 col-md-2 form-group">
                                                        <input type="text" class="form-control form-control-sm"
                                                            aria-describedby="basic-addon2" placeholder="Customer"
                                                            id="Search_Customer" name="Customer">
                                                    </div>



                                                    <div class="col-12 col-sm-2 col-md-2 form-group">
                                                        <input type="text" class="form-control form-control-sm"
                                                            aria-describedby="basic-addon2" placeholder="Mobile #"
                                                            id="Invoice_Search_CustomerMobile" name="MobileNumber">
                                                    </div>

                                                    
                                                    <div class="col-12 col-sm-2 col-md-2 form-group">
                                                        <input type="text" class="form-control form-control-sm"
                                                            aria-describedby="basic-addon2" placeholder="Plate #"
                                                            id="Invoice_Search_PlateNumber" name="PlateNumber">
                                                    </div>


                                                    <div class="col-12 col-sm-2 col-md-2 form-group">
                                                        <input type="text" class="form-control form-control-sm"
                                                            aria-describedby="basic-addon2" placeholder="Chassis #"
                                                            id="Invoice_Search_ChassisNumber" name="ChassisNumber">
                                                    </div>
                                                    <!-- <label
                                                        class="col-sm-1 col-1 col-md-1  col-form-label">Customer</label>
                                                    <div class="col-12 col-md-2 col-sm-2">
                                                        <input type="text" class="form-control"
                                                            aria-describedby="basic-addon2" placeholder="Search"
                                                            id="Search_Customer" name="Customer">
                                                    </div> -->

                                                    <!-- <label class="col-sm-1 col-1 col-md-1  col-form-label">Job
                                                        Card Date</label>
                                                    <div class="col-12 col-md-2 col-sm-2">
                                                        <input type="text" class="form-control"
                                                            aria-describedby="basic-addon2" placeholder="Search"
                                                            id="Search_BillDate" name="BillDate">
                                                    </div> -->


                                                    <!-- <div class="col-12 col-sm-2 col-md-2 form-group">
                                                        <input type="date" class="form-control form-control-sm"
                                                            aria-describedby="basic-addon2" placeholder="JC_Date"
                                                            id="Search_BillDate" name="BillDate">
                                                    </div> -->

                                                    <div class="col-12 col-sm-2 col-md-2 form-group">
                                                        <input type="text" class="form-control form-control-sm"
                                                            aria-describedby="basic-addon2" placeholder="Job Card #"
                                                            id="Search_ReferenceNo" name="ReferenceNo">
                                                    </div>


                                                    <div class="col-12 col-sm-2 col-md-2 form-group">
                                                        <input type="text" data-language="en"
                                                            class="datepicker-here form-control form-control-sm"
                                                            aria-describedby="basic-addon2" placeholder="JC_Date"
                                                            name="BillDate" autocomplete="off" id="Search_BillDate">
                                                    </div>


                                                    <div class="col-12 col-sm-2 col-md-2 form-group">
                                                        <input type="text" data-language="en"
                                                            class="datepicker-here form-control form-control-sm"
                                                            aria-describedby="basic-addon2" placeholder="PR.Date"
                                                            name="PromiseDate" autocomplete="off" id="Invoice_Search_PromiseDate">
                                                    </div>
                                                    

                                                    <div class="col-12 col-sm-2 col-md-2 form-group">
                                                        <select class="col-12 col-sm-12 col-md-12" id="Invoice_Search_OrderStatus">
                                                            <option selected="selected" value="">--Order Status--</option>
                                                            <option value="1">PENDING</option>
                                                            <option value="2">ACCEPTED</option>
                                                            <option value="3">REJECTED</option>
                                                            <option value="4">CLOSED</option>
                                                          </select>
                                                    </div>

                                                    <!-- <label class="col-sm-1 col-1 col-md-1  col-form-label">Job
                                                        Card #</label>
                                                    <div class="col-12 col-md-2 col-sm-2">
                                                        <input type="text" class="form-control"
                                                            aria-describedby="basic-addon2" placeholder="Search"
                                                            id="Search_ReferenceNo" name="ReferenceNo">
                                                    </div> -->


            


                                                    <!-- <div class="col-12 col-sm-2 col-md-2 form-group">
                                                        <input type="text" class="form-control form-control-sm"
                                                            aria-describedby="basic-addon2" placeholder="Narration"
                                                            id="Search_Narration" name="Narration">
                                                    </div> -->

                                                    <div class="col-12 col-sm-2 col-md-2 form-group">
                                                        <button class="btn btn-primary" onclick="javascript:void(0);"
                                                            id="doSearch">Search</button>
                                                    </div>

                                                </div>
                                                <!-- <div class="row m-20 form-group">
                                                    <label
                                                        class="col-sm-1 col-1 col-md-1  col-form-label">Narration</label>
                                                    <div class="col-12 col-md-2 col-sm-2">
                                                        <input type="text" class="form-control"
                                                            aria-describedby="basic-addon2" placeholder="Search"
                                                            id="Search_Narration" name="Narration">
                                                    </div>
                                                    <button type="submit" class="btn btn-primary"
                                                        onclick="javascript:void(0);" id="doSearch">Search</button>
                                                </div> -->
                                            </form>

                                            <div class="row m-20">

                                                <div class="table-responsive mt-2">

                                                    <!-- class="table table-bordered table-hover table-striped table-condensed" -->
                                                    <table class="table table-bordered" id="invoice-search">
                                                        <thead class="thead-light">
                                                            <tr>
                                                                <th scope="col" style="width: 30px">#
                                                                </th>
                                                                <th scope="col" style="width: 100px">
                                                                    Customer</th>
                                                                <th scope="col" style="width: 100px">
                                                                    Company</th>
                                                                <th scope="col" style="width: 100px">
                                                                    Job Card Date</th>
                                                                <th scope="col" style="width: 100px">
                                                                    JobCard #</th>
                                                                <th scope="col" style="width: 100px">
                                                                    Customer Detail</th>
                                                                <th scope="col" style="width: 100px">
                                                                    Order Status</th>
                                                                <th scope="col"
                                                                    style="width: 40px;text-align: center;vertical-align: middle">
                                                                    <i class="icon-list"></i></th>
                                                            </tr>
                                                        </thead>
                                                        <tbody>
                                                            <!-- <tr id="invoice-no-data-search">
                                                                <td colspan="10" style="text-align:center">
                                                                    There's no data
                                                                </td>
                                                            </tr> -->
                                                        </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>










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

                </div>

                <!-- Container-fluid Ends -->
            </div>
            <!--Page Body Ends-->

        </div>
    </div>

    <button style="display: none;" type="button" data-toggle="modal" data-target="#saveModal"
        style="width:100%;overflow:hidden" class="btn btn-danger" data-original-title="btn btn-danger" title=""><i
            class="fa fa-save"></i>&nbsp;&nbsp;Save</button>


    <div class="modal fade modal-save" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"
        id="saveModal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myLargeModalLabel">Generate Sales Invoice</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>

                <div class="modal-body">



                    <form id="generateInvoiceForm" onsubmit="return false;">
                        <!-- <div class="row m-20 form-group">
    
                                <label class="col-sm-3 col-3 col-md-3  col-form-label">Customer Name</label>
                                <div class="col-6 col-md-6 col-sm-6">
                                    <input type="text" class="form-control" aria-describedby="basic-addon2"
                                        placeholder="Enter Customer Name" id="Customer_Name" name="CustomerName"
                                        value="Walk-in Customer">
                                </div>
                            </div>
                            <div class="row m-20 form-group">
    
                                <label class="col-sm-3 col-3 col-md-3  col-form-label">Phone</label>
                                <div class="col-6 col-md-6 col-sm-6">
                                    <input type="text" class="form-control" aria-describedby="basic-addon2"
                                        placeholder="Enter Phone Number" id="Customer_Phone" name="Mobile">
                                </div>
                            </div>
    
                            <div class="row m-20 form-group">
    
                                <label class="col-sm-3 col-3 col-md-3  col-form-label">Vehicle #</label>
                                <div class="col-6 col-md-6 col-sm-6">
                                    <input type="text" class="form-control" aria-describedby="basic-addon2"
                                        placeholder="Enter Vehicle Registration #" id="Customer_VehicleNumber"
                                        name="PlateNumber">
                                </div>
                            </div> -->

                        <div class="row m-20 form-group">


                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="select2-drpdwn">
                                    <div class="mb-2">
                                        <label class="form-label" id="lblDebitTo">Sales A/c</label>
                                        <select class="col-12 col-sm-6 col-md-3" name="cboDebitTo" id="cboDebitTo">
                                            <option selected="selected">--Select Sales Head--
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="select2-drpdwn">
                                    <div class="mb-2">
                                        <label class="form-label">VAT Ledger</label>
                                        <select class="col-12 col-sm-6 col-md-3" name="cboVATLedgerID"
                                            id="cboVATLedgerID">
                                            <option selected="selected">--Select VAT A/c--
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>



                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="select2-drpdwn">
                                    <div class="mb-2">
                                        <label class="form-label">COGS Ledger</label>
                                        <select class="col-12 col-sm-6 col-md-3" name="cboCOGSLedger"
                                            id="cboCOGSLedger">
                                            <option selected="selected">--Select COGS A/c--
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>



                            <div class="col-12 col-sm-6 col-md-3">
                                <div class="select2-drpdwn">
                                    <div class="mb-2">
                                        <label class="form-label">Stock Ledger</label>
                                        <select class="col-12 col-sm-6 col-md-3" name="cboStockLedger"
                                            id="cboStockLedger">
                                            <option selected="selected">--Select Stock A/c--
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>





                        </div>



                    </form>

                </div>

                <div class="modal-footer justify-content-between">
                    <div class="col-4">
                        <button class="btn btn-danger" id="saveInvoice">Save</button>
                    </div>
                    <div class="col-4">
                        <!-- <span>One of two columns</span> -->
                    </div>

                </div>

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





    <!-- PRINT MODAL ::CREATE_ITEM -->
    <div class="modal fade" id="modal_CreateItem" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg modal-reporting">
            <div class="modal-content modal-reporting">
                <div class="modal-header">
                    <h4 class="modal-title">Create Item</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <iframe id="frame_CreateItem" class="container-fluid"></iframe>

                </div>
            </div>
        </div>
    </div>
<?php include_once('jobcardfooter.php');?>
</body>

</html>