{% extends 'base.html.twig' %}

{% block body %}
	<!-- BEGIN: Subheader -->
    <!--
    <div class="m-subheader">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="m-subheader__title">Job Order</h3>
            </div>
        </div>
    </div>
    -->
    <!-- END: Subheader -->
    <div class="m-content">
        <!--Begin::Section-->
        <div class="row">
            <div class="col-xl-12">
            	<div class="m-portlet m-portlet--mobile">
                    <div class="m-portlet__head">
                        <div class="m-portlet__head-caption">
                            <div class="m-portlet__head-title">
                                <span class="m-portlet__head-icon">
                                    <i class="flaticon-transport"></i>
                                </span>
                                {% if mode == "advanceorder" %}
                                    <h3 class="m-portlet__head-text">
                                        Advance Order Job Order
                                    </h3>
                                {% else %}
                                    <h3 class="m-portlet__head-text">
                                        Advance Order Job Order #{{ obj.getID }} - {{ obj.getStatusText }}
                                    </h3>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                    <form id="row-form" class="m-form m-form--fit m-form--label-align-right" method="post" action="{{ submit_url }}">
                        <input type="hidden" id="vid" name="vid" value="0">
                        <input type="hidden" id="invoice-change" name="invoice_change" value="0">
                        <div class="m-portlet__body">
                            {%if ftags.vehicle_dropdown %}
                                <div class="m-form__section m-form__section--first">
                                    <div class="form-group m-form__group row">
                                        <div class="col-lg-6">
                                            <label data-field="customer_vehicle">Select a vehicle:
                                                <span style="color:red"> *</span>
                                            </label>
                                            <select class="form-control m-select2" id="customer-vehicle" name="customer_vehicle"></select>
                                            <div class="form-control-feedback hide" data-field="customer_vehicle"></div>
                                        </div>
                                        <!--
                                        <div class="col-lg-6">
                                            <label></label>
                                            <div style="display:block; margin-top: 5px">
                                                <a href="{{ url('customer_create', {'ref':'jo'}) }}" class="btn btn-success">Create New Customer / Vehicle</a>
                                            </div>
                                        </div>
                                        -->
                                    </div>
                                </div>
                                <div class="m-form__section">
                                    <div class="form-group m-form__group row">
                                        <div class="col-lg-6">
                                            <label data-field="ref_jo">Reference Job Order:</label>
                                            <select class="form-control m-select2" id="ref-jo" name="ref_jo"></select>
                                            <div class="form-control-feedback hide" data-field="ref_jo"></div>
                                        </div>
                                    </div>
                                </div>
                            {% else %}
                                <input type="hidden" id="customer-vehicle" name="customer_vehicle" value="{{ obj.getCustomerVehicle.getID|default('0') }}">
                            {% endif %}
                            {% if obj.getReferenceJO %}
                                <div class="m-form__section m-form__section--first">
                                    <div class="form-group m-form__group row">
                                        <div class="col-lg-6">
                                            <label data-field="ref_jo">Reference Job Order:</label>
                                            <input type="text" name="ref_jo" id="ref-jo" class="form-control m-input" value="{{ '#' ~ obj.getReferenceJO.getID ~ ' - ' ~ obj.getReferenceJO.getCustomer.getFirstName ~ ' ' ~ obj.getReferenceJO.getCustomer.getLastName ~ ' (Plate No: ' ~ obj.getReferenceJO.getCustomerVehicle.getPlateNumber ~ ') - ' ~ service_types[obj.getReferenceJO.getServiceType] }}" disabled>
                                            <div class="form-control-feedback hide" data-field="ref_jo"></div>
                                        </div>
                                    </div>
                                </div>
                            {% endif %}

                            <div class="m-form__section{{ mode != 'create' and not obj.getReferenceJO ? ' m-form__section--first' }}">
                                <div class="m-form__heading flex-row">
                                    <h3 class="m-form__heading-title">
                                        Customer Details
                                    </h3>
                                    <span class="m-switch m-switch--icon block-switch">
                                        <label>
                                            <input type="checkbox" name="new_customer" id="flag-new-customer" value="1">
                                            <label class="switch-label">New Customer</label>
                                            <span></span>
                                        </label>
                                    </span>
                                </div>
                                <div class="form-group m-form__group row">
                                    <div class="col-lg-6">
                                        <label data-field="first_name">First Name</label>
                                        <input type="text" name="first_name" id="customer-first-name" class="form-control m-input cust_field" value="{{ obj.getCustomer.getFirstName|default('') }}" data-vehicle-field="1" disabled>
                                        <div class="form-control-feedback hide" data-field="first_name"></div>
                                    </div>
                                    <div class="col-lg-6">
                                        <label data-field="last_name">Last Name</label>
                                        <input type="text" name="last_name" id="customer-last-name" class="form-control m-input cust_field" value="{{ obj.getCustomer.getLastName|default('') }}" data-vehicle-field="1" disabled>
                                        <div class="form-control-feedback hide" data-field="last_name"></div>
                                    </div>
                                </div>
                                <div class="form-group m-form__group row">
                                    <div class="col-lg-6">
                                        <label data-field="phone_mobile">Mobile Phone</label>
                                        <div class="input-group m-input-group">
                                            <span class="input-group-addon">{% trans %}country_code_prefix{% endtrans %}</span>
                                            <input type="text" name="phone_mobile" id="customer-phone-mobile" class="form-control m-input cust_field" value="{{ obj.getCustomer.getPhoneMobile|default('') }}" data-vehicle-field="1" disabled>
                                            <div class="form-control-feedback hide" data-field="phone_mobile"></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                        <label data-field="phone_landline">Second Number</label>
                                        <div class="input-group m-input-group">
                                            <span class="input-group-addon">{% trans %}country_code_prefix{% endtrans %}</span>
                                            <input type="text" name="phone_landline" id="customer-phone-landline" class="form-control m-input cust_field" value="{{ obj.getCustomer.getPhoneLandline|default('') }}" data-vehicle-field="1" disabled>
                                            <div class="form-control-feedback hide" data-field="phone_landline"></div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group m-form__group row">
                                    <div class="col-lg-6">
                                        <label data-field="phone_office">Office Phone</label>
                                        <div class="input-group m-input-group">
                                            <span class="input-group-addon">{% trans %}country_code_prefix{% endtrans %}</span>
                                            <input type="text" name="phone_office" id="customer-phone-office" class="form-control m-input cust_field" value="{{ obj.getCustomer.getPhoneOffice|default('') }}" data-vehicle-field="1" disabled>
                                            <div class="form-control-feedback hide" data-field="phone_office"></div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">
                                    </div>
                                </div>
                                <div class="form-group m-form__group row">
                                    <div class="col-lg-6">
                                        <label data-field="customer_notes">Customer Notes</label>
                                        <textarea name="customer_notes" id="customer-customer-notes" class="form-control m-input cust_field" data-vehicle-field="1" rows="4" disabled>{{ obj.getCustomer ? obj.getCustomer.getCustomerNotes }}</textarea>
                                        <div class="form-control-feedback hide" data-field="customer_notes"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="m-form__section">
                                <div class="m-form__heading">
                                    <h3 class="m-form__heading-title">
                                        Vehicle Details
                                    </h3>
                                </div>
                                <div class="form-group m-form__group row">
                                    <div class="col-lg-3">
                                        <label data-field="cv_mfg">Manufacturer</label>
										<select name="cv_mfg" class="form-control m-input cv_field" id="cv-mfg" data-required="0" disabled>
											<option value="">Select a manufacturer</option>
											{% for manufacturer in vmfgs %}
                                                {% set vmfg_id = obj.getCustomerVehicle ? obj.getCustomerVehicle.getVehicle.getManufacturer.getID : 0 %}
												<option value="{{ manufacturer.getID() }}" {% if vmfg_id == manufacturer.getID %}selected{% endif %}>{{ manufacturer.getName() }}</option>
											{% endfor %}
										</select>
                                        <div class="form-control-feedback hide" data-field="cv_mfg"></div>
                                    </div>
                                    <div class="col-lg-6">
                                        <label data-field="cv-make">Make</label>
										<select name="cv_make" class="form-control m-input" id="cv-make" data-required="0" disabled>
                                            <option value="">Select a make</option>
                                            {% for make in vmakes %}
                                                {% set vmake_id = obj.getCustomerVehicle ? obj.getCustomerVehicle.getVehicle.getID : 0 %}

												<option value="{{ make.getID() }}" {% if vmake_id == make.getID %}selected{% endif %}>{{ make.getMake() }}</option>
                                            {% endfor %}
                                        </select>
                                        <div class="form-control-feedback hide" data-field="cv_make"></div>
                                    </div>
                                    <div class="col-lg-3">
                                        <label data-field="cv_year">Model Year</label>
                                        <select name="cv_year" class="form-control m-input cv_field" id="cv-year" data-required="0" disabled>
                                            <option value="">Select a year</option>
                                            {% for year in model_years %}
                                                {% if obj.getCustomerVehicle %}
                                                    <option value="{{ year }}"{{ obj.getCustomerVehicle.getModelYear == year ? ' selected' }}>{{ year }}</option>
                                                {% else %}
                                                    <option value="{{ year }}">{{ year }}</option>
                                                {% endif %}
                                            {% endfor %}
                                        </select>
                                        <div class="form-control-feedback hide" data-field="cv_year"></div>
                                    </div>
                                </div>
                                <div class="form-group m-form__group row">
                                    <div class="col-lg-3">
                                        <label data-field="plate_number">Plate #
                                            <span style="color:red"> *</span>
                                        </label>
                                        <input type="text" name="plate_number" id="cv-plate" class="form-control m-input cv_field" value="{{ obj.getCustomerVehicle.getPlateNumber|default('') }}" data-vehicle-field="1" disabled>
                                        <div class="form-control-feedback hide" data-field="plate_number"></div>
                                    </div>
                                    <!--
                                    <div class="col-lg-3">
                                        <label data-field="vehicle_color">Color</label>
                                        <input type="text" name="vehicle_color" id="vehicle-color" class="form-control m-input cv_field" value="{{ obj.getCustomerVehicle ? obj.getCustomerVehicle.getColor }}" data-vehicle-field="1" disabled>
                                        <div class="form-control-feedback hide" data-field="vehicle_color"></div>
                                    </div>
                                    -->
                                </div>
                            </div>
                            <div class="m-form__section">
                                <div class="m-form__heading">
                                    <h3 class="m-form__heading-title">
                                        Battery Details
                                    </h3>
                                </div>
                                <div class="form-group m-form__group row">
                                    <div class="col-lg-3">
                                        <label data-field="current_battery">Current Battery</label>
                                        <input type="text" name="current_battery" id="current-battery" class="form-control m-input battery_field" value="{{ obj.getCustomerVehicle and obj.getCustomerVehicle.getCurrentBattery ? obj.getCustomerVehicle.getCurrentBattery.getManufacturer.getName ~ ' ' ~ obj.getCustomerVehicle.getCurrentBattery.getModel.getName ~ ' ' ~ obj.getCustomerVehicle.getCurrentBattery.getSize.getName ~ ' (' ~ obj.getCustomerVehicle.getCurrentBattery.getProductCode ~ ')' }}" data-vehicle-field="1" disabled>
                                        <div class="form-control-feedback hide" data-field="current_battery"></div>
                                    </div>
                                    <div class="col-lg-3">
                                        <label data-field="warranty_code">Serial Number</label>
                                        <input type="text" name="warranty_code" id="warranty-code" class="form-control m-input battery_field" value="{{ obj.getCustomerVehicle ? obj.getCustomerVehicle.getWarrantyCode }}">
                                        <div class="form-control-feedback hide" data-field="warranty_code"></div>
                                    </div>
                                    <div class="col-lg-3">
                                        <label data-field="warranty_expiration">Warranty Expiration Date</label>
                                        <input type="text" name="warranty_expiration" id="warranty-expiration" class="form-control m-input battery_field" value="{{ obj.getCustomerVehicle.getCurrentBattery|default(false) ? obj.getCustomerVehicle.getWarrantyExpiration|date("d M Y") : '' }}" data-vehicle-field="1" disabled>
                                        <div class="form-control-feedback hide" data-field="warranty_expiration"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="m-form__seperator m-form__seperator--dashed"></div>
                            <div class="m-form__section m-form__section">
                                <div class="m-form__heading flex-row">
                                    <h3 class="m-form__heading-title">
                                        Transaction Details
                                    </h3>
                                    <span class="m-switch m-switch--icon block-switch">
                                        <label>
                                            <input type="checkbox" name="flag_advance" id="flag-advance" value="1"{{ obj.isAdvanceOrder ? ' checked' }} checked disabled>
                                            <label class="switch-label">This is an advance order</label>
                                            <span></span>
                                        </label>
                                    </span>
                                </div>
                                <div class="form-group m-form__group row">
                                    <div class="col-lg-6">
                                        <label data-field="service_type">Service Type</label>
                                        <select id="service_type" class="form-control m-input" name="service_type">
                                            <!--<option value=""></option>-->
                                            {% for key, service in service_types %}
                                                <option value="{{ key }}"{{ obj.getServiceType == key ? ' selected' }}>{{ service }}</option>
                                            {% endfor %}
                                        </select>
                                        <div class="form-control-feedback hide" data-field="service_type"></div>
                                    </div>
                                    <div class="col-lg-3">
                                        <label data-field="warranty_class">Warranty Class</label>
                                        <select class="form-control m-input" id="warranty-class" name="warranty_class">
                                            <!--<option value=""></option>-->
                                            {% for key, class in warranty_classes %}
                                                <option value="{{ key }}"{{ obj.getWarrantyClass == key ? ' selected' }}>{{ class }}</option>
                                            {% endfor %}
                                        </select>
                                        <div class="form-control-feedback hide" data-field="warranty_class"></div>
                                    </div>
                                    <div class="col-lg-3">
                                        <label data-field="mode_of_payment">Mode of Payment</label>
                                        <select class="form-control m-input" id="mode-of-payment" name="mode_of_payment">
                                            <!--<option value=""></option>-->
                                            {% for key, class in modes_of_payment %}
                                                <option value="{{ key }}"{{ obj.getModeOfPayment == key ? ' selected' }}>{{ class }}</option>
                                            {% endfor %}
                                        </select>
                                        <div class="form-control-feedback hide" data-field="mode_of_payment"></div>
                                    </div>
                                </div>
                                <div class="form-group m-form__group row">
                                    <div class="col-lg-6">
                                        <label>Transaction Date</label>
                                        <input type="text" name="date_transaction" class="form-control m-input" value="{{ obj.getDateCreate|default("now")|date('d M Y - g:i A') }}" disabled>
                                        <div class="form-control-feedback hide" data-field="date_transaction"></div>
                                    </div>
                                    <div class="col-lg-3">
                                        <label data-field="date_schedule">Scheduled Date</label>
                                        <div class="input-group date dp">
                                            <input type="text" id="date-schedule-date" name="date_schedule_date" class="form-control m-input" data-default-value="{{ obj.getDateSchedule|default("now")|date('Y-m-d') }}" value="{{ obj.getDateSchedule|default("now")|date('d M Y') }}" readonly placeholder="Select a date" disabled>
                                            <span class="input-group-addon">
                                                <i class="la la-calendar glyphicon-th"></i>
                                            </span>
                                        </div>
                                        <div class="form-control-feedback hide" data-field="date_schedule_date"></div>
                                    </div>
                                    <div class="col-lg-3">
                                        <label data-field="date_schedule">Scheduled Time</label>
                                        <div class="input-group">
                                            <input type="text" id="date-schedule-time" name="date_schedule_time" class="form-control m-input tp" data-default-value="{{ obj.getDateSchedule|default("now")|date('g:i A') }}" value="{{ obj.getDateSchedule|default("now")|date('g:i A') }}" readonly placeholder="Select a time" disabled>
                                            <span class="input-group-addon">
                                                <i class="la la-clock-o glyphicon-th"></i>
                                            </span>
                                        </div>
                                        <div class="form-control-feedback hide" data-field="date_schedule_time"></div>
                                    </div>
                                </div>
                                <div class="form-group m-form__group row">
                                    <div class="col-lg-6">
                                        <div class="col-lg-12 form-group-inner">
                                            <label data-field="source">Transaction Origin</label>
                                            <select class="form-control m-input" id="source" name="source">
                                                {% for key, class in sources %}
                                                    <option value="{{ key }}"{{ obj.getSource == key ? ' selected' }}>{{ class }}</option>
                                                {% endfor %}
                                            </select>
                                            <div class="form-control-feedback hide" data-field="mode_of_payment"></div>
                                        </div>
                                        <br>
                                        <div class="col-lg-12 form-group-inner">
                                            <label data-field="delivery_instructions">{% trans %}delivery_instructions_label{% endtrans %}</label>
                                            <textarea name="delivery_instructions" class="form-control m-input" rows="4">{{ obj.getDeliveryInstructions }}</textarea>
                                        </div>
                                        <br>
                                        <div class="col-lg-12 form-group-inner">
                                            <label data-field="cancel_reason">Cancellation Reason</label>
                                            <input type="text" id="cancel-reason" name="cancel_reason" class="form-control m-input" value="{{ obj.getCancelReasonName|default('') }}" disabled>
                                            <div class="form-control-feedback hide" data-field="cancel_reason"></div>
                                        </div> 
                                    </div>
                                    <div class="col-lg-6">
                                        <div class="col-lg-12 form-group-inner">
                                            <label>
                                                Responsible Party
                                                <span style="color:red"> *</span>
                                            </label>
                                            <input type="text" name="responsible_party" class="form-control m-input" value="{{ obj.getResponsibleParty|default('') }}" >
                                            <div class="form-control-feedback hide" data-field="responsible_party"></div>
                                        </div>
                                        <div class="col-lg-12 form-group-inner">
                                            <label>Prepared By</label>
                                            <input type="text" name="created_by" class="form-control m-input" value="{{ obj.getCreatedBy.getFullName|default('') }}" disabled>
                                            <div class="form-control-feedback hide" data-field="date_transaction"></div>
                                        </div>
                                        <br>
                                        <div class="col-lg-12 form-group-inner">
                                            <label>Dispatched By</label>
                                            <input type="text" name="created_by" class="form-control m-input" value="{{ obj.getProcessedBy.getFullName|default('') }}" disabled>
                                            <div class="form-control-feedback hide" data-field="date_transaction"></div>
                                        </div>
                                        <br>
                                        <div class="col-lg-12 form-group-inner">
                                            <label>Rider Assigned By</label>
                                            <input type="text" name="created_by" class="form-control m-input" value="{{ obj.getAssignedBy.getFullName|default('') }}" disabled>
                                            <div class="form-control-feedback hide" data-field="date_transaction"></div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="m-form__seperator m-form__seperator--dashed"></div>
                            <div class="m-form__section">
                                <div class="m-form__heading">
                                    <h3 class="m-form__heading-title">
                                        Location
                                    </h3>
                                </div>
                                <div class="form-group m-form__group row">
                                    <div class="col-lg-6">
                                        <label data-field="delivery_address">Delivery Address
                                            <span style="color:red"> *</span>
                                        </label>
                                        <textarea name="delivery_address" class="form-control m-input" rows="4">{{ obj.getDeliveryAddress }}</textarea>
                                        <div class="form-control-feedback hide" data-field="delivery_address"></div>
                                    </div>
                                    <div class="col-lg-6">
                                        <label data-field="landmark">Landmark</label>
                                        <textarea name="landmark" class="form-control m-input" rows="4">{{ obj.getLandmark|default('') }}</textarea>
                                        <div class="form-control-feedback hide" data-field="landmark"></div>
                                    </div>
                                </div>
                                <div class="form-group m-form__group row">
                                    <div class="col-lg-12">
                                        <label name="coordinates" data-field="coordinates">Coordinates
                                            <span style="color:red"> *</span>
                                        </label>
                                        <div class="form-control-feedback hide" data-field="coordinates"></div>
                                        <input type="hidden" id="map_lat" name="coord_lat" value="">
                                        <input type="hidden" id="map_lng" name="coord_lng" value="">
                                        <div class="input-group">
                                            <input type="text" class="form-control" id="m_gmap_address" placeholder="Search">
                                            <span class="input-group-btn">
                                                <button class="btn btn-primary" id="m_gmap_btn">
                                                    <i class="fa fa-search"></i>
                                                </button>
                                            </span>
                                        </div>
                                        <div id="m_gmap" style="height:600px;"></div>
                                    </div>
                                </div>
                            </div>

                            <div class="m-form__section">
                                <div class="m-form__heading">
                                    <h3 class="m-form__heading-title">
                                        {% if mode in ['view-all'] %}
                                            Assigned Hub
                                        {% else %}
                                            Nearest Hubs
                                        {% endif %}
                                    </h3>
                                </div>
                                <div class="form-group m-form__group row">
                                    <div class="col-lg-12">
                                        {% if mode != 'view-all' %}
                                            <label name="hub" data-field="hub">Click on a row to select a hub
                                                <span style="color:red"> *</span>
                                            </label>
                                        {% endif %}
                                        <div class="form-control-feedback hide" data-field="hub"></div>
                                        <input type="hidden" id="hub-field" name="hub_id" value="">
                                        <div class="table-frame" data-name="hub">
                                            <table id="hubs-table" class="table table-compact table-hover table-clickable m-table">
                                                <thead>
                                                    <tr>
                                                        <th>Hub</th>
                                                        <th>Branch</th>
                                                        <th>Contact Numbers</th>
                                                        <th>Distance in KM</th>
                                                    </tr>
                                                </thead>
                                                <tbody id="nearest_hubs">
                                                <!-- {% if mode in ['onestep-edit'] %}
                                                    {% for hub in hubs %}
                                                        <tr data-id="{{ hub.hub.getID }}"{{ obj.getHub and obj.getHub.getID == hub.hub.getID ? ' class="m-table__row--primary"' }}>
                                                        <td>{{ hub.hub.getName }}</td>
                                                        <td>{{ hub.hub.getBranch }}</td>
                                                        <td>{{ hub.hub.getContactNumbers }}</td>
                                                        <td></td>
                                                    {% endfor %}
                                                {% endif %} -->
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            {% if mode in ['advanceorder-edit'] %}
                                <div class="m-form__seperator m-form__seperator--dashed"></div>
                                <div class="m-form__section">
                                    <div class="m-form__heading">
                                        <h3 class="m-form__heading-title">
                                            Other Information
                                        </h3>
                                    </div>
                                    <div class="form-group m-form__group row">
                                        <div class="col-lg-3">
                                            <label data-field="odometer">Odometer Reading</label>
                                            <input type="text" name="odometer" id="odometer" class="form-control m-input other_info_field" value="{{ odometer }}"  disabled>
                                        </div>
                                        <div class="col-lg-3">
                                            <label data-field="email">Email Address</label>
                                            <input type="text" name="email" id="email" class="form-control m-input other_info_field" value="{{ email }}"  disabled>
                                        </div>
                                        <div class="col-lg-3">
                                            <label> Customer Signature </label>
                                            <div class="portrait-box" style="background-image: url('{{ signature ? '/uploads/jo_extra/' ~ signature : '/assets/images/user.gif' }}');" ></div>
                                        </div>
                                    </div>
                                    <div class="form-group m-form__group row">
                                        <div class="col-lg-12">
                                            <label> Pictures</label>
                                        </div>
                                        {% for key, picture in jo_pictures %}
                                            {% if key == 'image_1' %}
                                                <div class="col-lg-2">
                                                    <a href="#" class="image-pop">
                                                        <img id="image-1-source" src="{{ asset('/uploads/jo_extra/' ~ picture) }}" style="width: 150px; height: 150px;" />
                                                    </a> 
                                                    <br>
                                                    <label>Windscreen Sticker</label>
                                                </div>
                                            {% endif %}
                                            {% if key == 'image_2' %}
                                                <div class="col-lg-2">
                                                    <a href="#" class="image-pop">
                                                        <img id="image-2-source" src="{{ asset('/uploads/jo_extra/' ~ picture) }}" style="width: 150px; height: 150px;" />
                                                    </a>
                                                    <br>
                                                    <label>Battery</label>
                                                </div>
                                            {% endif %}
                                            {% if key == 'image_3' %}
                                                <div class="col-lg-2">
                                                    <a href="#" class="image-pop">
                                                        <img id="image-3-source" src="{{ asset('/uploads/jo_extra/' ~ picture) }}" style="width: 150px; height: 150px;" />
                                                    </a>
                                                    <br>
                                                    <label>Odometer Reading</label>
                                                </div>
                                            {% endif %}
                                            {% if key == 'image_4' %}
                                                <div class="col-lg-2">
                                                    <a href="#" class="image-pop">
                                                        <img id="image-4-source" src="{{ asset('/uploads/jo_extra/' ~ picture) }}" style="width: 150px; height: 150px;" />
                                                    </a>
                                                    <br>
                                                    <label>Proof of Payment</label>
                                                </div>
                                            {% endif %}

                                        {% endfor %}
                                    </div>
                                    <!-- <div class="form-group m-form__group row">
                                        <div class="col-lg-12">
                                            <label> Other Images</label>
                                        </div>
                                        {% for key, picture in jo_pictures %}
                                            {% if key == 'other_images' %}
                                                {% for pic in jo_pictures['other_images'] %}
                                                    <div class="col-lg-2">
                                                        <div class="portrait-box" style="background-image: url('{{ '/uploads/jo_extra/' ~ pic }}');" ></div>
                                                    </div>
                                                {% endfor %}
                                            {% endif %}
                                        {% endfor %}
                                    </div> -->
                                </div>
                                <!-- modal for images -->
                                <div class="modal fade" id="image-modal" tabindex="-1" role="dialog" aria-labelledby="imageModal" aria-hidden="true">
                                    <div class="modal-dialog" data-dismiss="modal">
                                        <div class="modal-content">              
                                            <div class="modal-body">
      	                                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                                <img src="" class="image-preview" style="width: 100%;" >
                                            </div> 
                                        </div>
                                    </div>
                                </div>
                            {% endif %}

                            <div class="m-form__seperator m-form__seperator--dashed"></div>
                            <div class="m-form__section" id="sc-section">
                                <div class="m-form__heading">
                                    <h3 class="m-form__heading-title">
                                        Service Charges
                                    </h3>
                                </div>
                                <div class="row m-form__group">
                                    {% if mode != 'view-all' %}
                                        <div class="col-lg-12">
                                            <button class="btn btn-primary" id="btn-sc-add">Add Service Charge</button>
                                        </div>
                                    {% endif %}
                                </div>
                                <!-- loop through existing service charges for job order -->
                                {% for jo_sc in jo_service_charges %}
                                    <div class="form-group m-form__group row">
                                        <div class="col-lg-6">
                                            <div class="col-lg-12 form-group-inner">
                                                <select class="form-control m-input sc-select" name="service_charges">
                                                    {% for key, sc in service_charges %}
                                                        <option value="{{ sc.getID }}" data-amount="{{ sc.getAmount }}"{{ jo_sc.getID == sc.getID ? ' selected' }}>{{ sc.getName }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                        </div>
                                        <div class="col-lg-5">
                                            <input class="form-control sc-amount" type="text" value="{{ jo_sc.getAmount }}" disabled>
                                        </div>
                                        <div class="col-lg-1">
                                            <button class="btn btn-danger btn-sc-remove">X</button>
                                        </div>
		                    </div>
                                {% endfor %}
                            </div>

                            <div class="m-form__seperator m-form__seperator--dashed"></div>
                            <div class="m-form__section m-form__section--last">
                                <div class="m-form__heading">
                                    <h3 class="m-form__heading-title">
                                        Invoice
                                    </h3>
                                </div>
                                <div class="form-group m-form__group row">
                                    <div class="col-lg-6">
                                        <label data-field="or_name">OR Name</label>
                                        <input type="text" name="or_name" id="or_name" class="form-control m-input" value="{{ obj.getORName|default('') }}">
                                        <div class="form-control-feedback hide" data-field="or_name"></div>
                                    </div>
                                    <div style="display:none" class="col-lg-6">
                                        <label data-field="promo_detail">Employee ID / Card Number / Referred By</label>
                                        <input type="text" name="promo_detail" id="promo_detail" class="form-control m-input" value="{{ obj.getPromoDetail|default('') }}">
                                        <div class="form-control-feedback hide" data-field="promo_detail"></div>
                                    </div>
                                </div>
                                <div class="form-group m-form__group row">
                                    <div class="col-lg-6">
                                        <label>Discount</label>
                                        {% if ftags.invoice_edit %}
                                            <select class="form-control m-input" id="invoice-discount" name="invoice_discount">
                                                <option value=""></option>
                                                {% for discount in discounts %}
                                                    {% if obj.getInvoice %}
                                                        <option value="{{ discount }}"{{ obj.getInvoice.getDiscount|number_format(2) == discount ? ' selected' }}>{{ discount }}</option>
                                                    {% else %}
                                                        <option value="{{ discount }}">{{ discount }}</option>
                                                    {% endif %}
                                                {% endfor %}
                                            </select>
                                            <div class="form-control-feedback hide" data-field="invoice_discount"></div>
                                        {% else %}
                                            <select class="form-control m-input" id="invoice-discount" name="invoice_discount">
                                                <option value=""></option>
                                                {% for discount in discounts %}
                                                    {% if obj.getInvoice %}
                                                        <option value="{{ discount }}"{{ obj.getInvoice.getDiscount|number_format(2) == discount ? ' selected' }} disabled>{{ discount }}</option>
                                                    {% else %}
                                                        <option value="{{ discount }}" disabled>{{ discount }}</option>
                                                    {% endif %}
                                                {% endfor %}
                                            </select>
                                            <div class="form-control-feedback hide" data-field="invoice_discount"></div>
                                        {% endif %}
                                    </div>
                                    <div class="col-lg-6">
                                        <label>Trade In</label>
                                        <input type="text" id="invoice-trade-in" class="form-control m-input text-right" value="{{ obj.getInvoice ? obj.getInvoice.getTradeIn|number_format(2) : '0.00' }}" disabled>
                                    </div>
                                </div>
                                <div class="form-group m-form__group row">
                                    <div class="col-lg-3">
                                        <label>Price</label>
                                        <input type="text" id="invoice-price" class="form-control m-input text-right" value="{{ obj.getInvoice ? obj.getInvoice.getVATExclusivePrice|number_format(2) : '0.00' }}" disabled>
                                    </div>
                                    <div class="col-lg-3">
                                        <label>VAT</label>
                                        <input type="text" id="invoice-vat" class="form-control m-input text-right" value="{{ obj.getInvoice ? obj.getInvoice.getVAT|number_format : '0.00' }}" disabled>
                                    </div>
                                    <div class="col-lg-6">
                                        <label>Total Amount</label>
                                        <input type="text" id="invoice-total-amount" class="form-control m-input text-right" value="{{ obj.getInvoice ? obj.getInvoice.getTotalPrice|number_format(2) : '0.00' }}" disabled>
                                    </div>
                                </div>
                                <div class="form-group m-form__group row">
                                <div class="col-lg-12">
                                    <table id="invoice-table" class="table table-compact m-table">
                                        <thead>
                                            <tr>
                                                <th>Item</th>
                                                <th class="text-right">Quantity</th>
                                                <th class="text-right">Unit Price</th>
                                                <th class="text-right">Amount</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% if not obj.getInvoice or (obj.getInvoice and obj.getInvoice.getItems|length == 0) %}
                                                <tr class="placeholder-row">
                                                    <td colspan="4">
                                                        No items to display.
                                                    </td>
                                                </tr>
                                            {% else %}
                                                {% for item in obj.getInvoice.getItems %}
                                                    <tr data-key="{{ loop.index0 }}">
                                                        <td>{{ item.getTitle }}</td>
                                                        <td class="text-right">{{ item.getQuantity|number_format }}</td>
                                                        <td class="text-right">{{ item.getPrice|number_format(2) }}</td>
                                                        <td class="text-right">{{ (item.getPrice * item.getQuantity)|number_format(2) }}</td>
                                                    </tr>
                                                {% endfor %}
                                            {% endif %}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                                <div class="form-group m-form__group row">
                                    <div class="col-lg-2 hide">
                                        <label for="invoice-bmfg">Manufacturer</label>
                                        <select class="form-control m-input" id="invoice-bmfg">
                                            {% for manufacturer in bmfgs %}
                                                <option value="{{ manufacturer.getID() }}">{{ manufacturer.getName() }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div class="col-lg-3">
                                        <label for="invoice-battery">Battery</label>
                                        <select class="form-control m-input" id="invoice-battery" data-value="" disabled>
                                            <option value="">Select a vehicle and manufacturer first</option>
                                        </select>
                                    </div>
                                    <div class="col-lg-2">
                                        <label for="invoice-trade-in-type">Trade In</label>
                                        <select class="form-control m-input" id="invoice-trade-in-type">
                                            <option value="">None</option>
                                            {% for key, type in trade_in_types %}
                                                <option value="{{ key }}">{{ type }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <div class="col-lg-2">
                                        <label for="invoice-quantity">Quantity</label>
                                        <input type="text" id="invoice-quantity" class="form-control m-input text-right" value="1">
                                    </div>
                                    <div class="col-lg-5">
                                        <div><label>&nbsp;</label></div>
                                        <button type="button" class="btn btn-primary" id="btn-add-to-invoice">Add</button>
                                        <!--
                                        <button type="button" class="btn btn-success" id="btn-recompute-invoice">Recompute</button>
                                        -->
                                        <button type="button" class="btn btn-danger" id="btn-reset-invoice">Reset</button>
                                    </div>
                                </div>
                                <div class="form-group m-form__group row"></div>
                        </div>
                        <div class="m-portlet__foot m-portlet__foot--fit">
                            <div class="m-form__actions m-form__actions--solid m-form__actions--right">
                                <div class="row">
                                    <div class="col-lg-12">
                                        {% if mode != 'view-all' %}
                                            <button type="submit" class="btn btn-success"> Submit </button>
                                            {% if ftags.set_map_coordinate and is_granted('joborder.cancel') and not obj.isCancelled %}
                                                <a href="{{ url('jo_cancel', {'id': obj.getID}) }}" class="btn btn-danger btn-cancel-job-order">Cancel Job Order</a>
                                            {% endif %}
                                        {% endif %}
                                        <a href="{{ return_url }}" class="btn btn-secondary">Back</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block scripts %}
{{ include('map/' ~ map_js_file) }}
<script src="//maps.googleapis.com/maps/api/js?key={{ gmaps_api_key }}&libraries=places" type="text/javascript"></script>
<script src="/assets/vendors/custom/gmaps/gmaps.js" type="text/javascript"></script>

<script>

function get_vehicle_makes(mfg_id, vid = 0) {
    var field = $("#cv-make");
    $.ajax({
        method: "POST",
        url: "{{ url('vmfg_vehicles') }}",
        data: {id: mfg_id}
    }).done(function(response) {
        if (response.data.length > 0) {
            var html = '';

            $.each(response.data, function(index, vehicle) {
                html += '<option value="' + vehicle.id + '" data-index="' + index + '">' + vehicle.make + ' (' + vehicle.model_year_from + '-' + vehicle.model_year_to + ')</option>';
            });

            field.html(html).prop('disabled', false);
            field.val(field.data('id'));
        } else {
            field.html('<option value="">No vehicles found</option>').prop('disabled', true);
        }

        if (vid != 0) {
            field.val(vid);
            field.prop('disabled', true);
        }
    })
}


$(function() {
    var form_in_process = false;
    var selected_hub = '';
    var selected_rider = '';

    // openstreet maps stuff
    // TODO: move this to a service
    var default_lat = {% trans %}default_lat{% endtrans %};
    var default_lng = {% trans %}default_long{% endtrans %};

    var osm_map = mapCreate('m_gmap', default_lat, default_lng, 'road', 13);

    var markerLayerGroup = L.layerGroup().addTo(osm_map);
    var hubLayerGroup = L.layerGroup().addTo(osm_map);
    var riderLayerGroup = L.layerGroup().addTo(osm_map);

    var icon_customer = L.divIcon({
        className: 'map-div-icon',
        html: "<div style='background-color:#FF0000;' class='marker-pin'></div><i class='fa fa-user awesome'>",
        iconSize: [39, 42],
        iconAnchor: [15, 42]
    });
    var icon_hub = L.divIcon({
        className: 'map-div-icon',
        html: "<div style='background-color:#FFFF00;' class='marker-pin'></div><i class='fa fa-home awesome'>",
        iconSize: [39, 42],
        iconAnchor: [15, 42]
    });
    var icon_rider_available = L.divIcon({
        className: 'map-div-icon',
        html: "<div style='background-color:#00FF00;' class='marker-pin'></div><i class='fa fa-bolt awesome'>",
        iconSize: [39, 42],
        iconAnchor: [15, 42]
    });

    function selectPoint(lat, lng)
    {
        // clear markers
        markerLayerGroup.clearLayers();
        hubLayerGroup.clearLayers();

        var marker = L.marker([lat, lng], { icon: icon_customer });

        {% if mode in ['advanceorder'] %}
            // get nearest hubs ajax
            var hub_table = '';
            var rider_table = '';
            $.getJSON("{{ url('hub_nearest') }}?lat=" + lat + "&long=" + lng, function(data) {
                var hubs = data['hubs'];
                for (i in hubs) {
                    var hub = hubs[i];
                    var hub_marker = L.marker([hub['lat'], hub['long']], { icon: icon_hub });
                    hubLayerGroup.addLayer(hub_marker);

                    hub_table += '<tr data-id=' + hub['id'] + '>';
                    hub_table += '<td>' + hub['name'] + '</td>';
                    hub_table += '<td>' + hub['branch'] + '</td>';
                    hub_table += '<td>' + hub['cnum'] + '</td>';
                    hub_table += '<td>' + hub['distance'] + '</td>';
                    hub_table += '</tr>';
                }

                $('#nearest_hubs').html(hub_table);
            
            });

            // clear rider table
            rider_table += '<tr>';
            rider_table += '<td>' + '</td>';
            rider_table += '<td>' + '</td>';
            rider_table += '<td>' + '</td>';
            rider_table += '<td>' + '</td>';
            rider_table += '</tr>';

            $('#riders').html(rider_table);

        {% endif %}

        {% if mode in ['advanceorder-edit'] %}
            // get nearest hubs ajax
            var hub_table = '';
            var rider_table = '';
            $.getJSON("{{ url('hub_nearest') }}?lat=" + lat + "&long=" + lng, function(data) {
                var hubs = data['hubs'];
                for (i in hubs) {
                    var hub = hubs[i];
                    var hub_marker = L.marker([hub['lat'], hub['long']], { icon: icon_hub });
                    hubLayerGroup.addLayer(hub_marker);

                    if (selected_hub == hub['id']) {
                        hub_table += '<tr data-id=' + hub['id'] + ' class="m-table__row--primary"' + '>';
                    }
                    else {
                        hub_table += '<tr data-id=' + hub['id'] + '>';
                    }
                    hub_table += '<td>' + hub['name'] + '</td>';
                    hub_table += '<td>' + hub['branch'] + '</td>';
                    hub_table += '<td>' + hub['cnum'] + '</td>';
                    hub_table += '<td>' + hub['distance'] + '</td>';
                    hub_table += '</tr>';

                }

            $('#nearest_hubs').html(hub_table);

            });

            if (selected_rider == '') {
                // clear rider table
                rider_table += '<tr>';
                rider_table += '<td>' + '</td>';
                rider_table += '<td>' + '</td>';
                rider_table += '<td>' + '</td>';
                rider_table += '<td>' + '</td>';
                rider_table += '</tr>';

                $('#riders').html(rider_table);
            }

        {% endif %}

        {% if mode in ['view-all'] %}
            var hub_table = '';
            $.getJSON("{{ url('hub_nearest') }}?lat=" + lat + "&long=" + lng, function(data) {
                var hubs = data['hubs'];
                var hub_marker;
                for (i in hubs) {
                    var hub = hubs[i];

                    if(selected_hub == hub['id']) {
                        hub_table += '<tr data-id=' + hub['id'] + ' ' + '>';
                        hub_marker = L.marker([hub['lat'], hub['long']], { icon: icon_hub });
                        hubLayerGroup.addLayer(hub_marker);

                        hub_table += '<td>' + hub['name'] + '</td>';
                        hub_table += '<td>' + hub['branch'] + '</td>';
                        hub_table += '<td>' + hub['cnum'] + '</td>';
                        hub_table += '<td>' + hub['distance'] + '</td>';
                        hub_table += '</tr>';
                    }
                }

                $('#nearest_hubs').html(hub_table);
            });
        {% endif %}

        // add marker to layer group
        markerLayerGroup.addLayer(marker);

        osm_map.setView(new L.LatLng(lat, lng));

        // set value in hidden input
        $('#map_lat').val(lat);
        $('#map_lng').val(lng);
    }

    // location search autocomplete
    var input = document.getElementById('m_gmap_address');

    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.setComponentRestrictions({'country': ['{% trans %}default_region{% endtrans %}']});
    autocomplete.addListener('place_changed', function() {
        var place = autocomplete.getPlace();

        if (!place.geometry) {
            return;
        }

        selectPoint(place.geometry.location.lat(), place.geometry.location.lng());
    });

    osm_map.on('click', function(e) {
        // clear selected hub and riders
        selected_hub = '';
        selected_rider = '';
        selectPoint(e.latlng.lat, e.latlng.lng);
    });

    var handleAction = function() {
    var text = $.trim($('#m_gmap_address').val());
        GMaps.geocode({
            address: text,
            callback: function(results, status) {
                // markerLayerGroup.clearLayers();
                console.log('status - ' + status);
	            if (status == 'OK') {
                    console.log(results);
                    var lat = results[0].geometry.location.lat();
                    var lng = results[0].geometry.location.lng();
                    selectPoint(lat, lng);
	            }
	        },
            // TODO: change this to get what's in the translation file
            // but for some strange reason, this worked.
	        region: 'ph'
	    });
	}

	$('#m_gmap_btn').click(function(e) {
	    e.preventDefault();
	    handleAction();
	});

	$("#m_gmap_address").keypress(function(e) {
	    var keycode = (e.keyCode ? e.keyCode : e.which);
	    if (keycode == '13') {
	        e.preventDefault();
	        handleAction();
	    }
	});

    $(function() {
        {% if mode != 'view-all' %}
            $('#hubs-table').on('click', 'tr', function() {
                var id = $(this).data('id');

                if (id != selected_hub) {

                    // highlight this row
                    $('#hubs-table').find('.m-table__row--primary').removeClass('m-table__row--primary');

                    $(this).addClass('m-table__row--primary');

                    // set hub
                    selected_hub = id;
                    $('#hub-field').val(selected_hub); 

                } else {
                    // unhighlight this row
                    $(this).removeClass('m-table__row--primary');
 
                    // remove id value
                    selected_hub = '';
                }
            });
        {% endif %}
    });

    {% if mode in ['advanceorder-edit', 'view-all'] %}
        var lat = {{ obj.getCoordinates.getLatitude }};
        var lng = {{ obj.getCoordinates.getLongitude }};

        selected_hub = '{{ obj.getHub ? obj.getHub.getID: "" }}';
        $('#hub-field').val(selected_hub);

        selectPoint(lat, lng);

    {% endif %}

    $("#row-form").submit(function(e) {
        e.preventDefault();
        if (form_in_process) {
            alert("Cannot submit form twice. First submission still in progress.");
            return false;
        }

        form_in_process = true;

        var form = $(this);

        // get all fields, including disabled ones
        var disabled = form.find(":input:disabled").prop('disabled', false);
        var fields = form.serializeArray().map(function(x){this[x.name] = x.value; return this;}.bind({}))[0];
        disabled.prop('disabled', true);

        // add invoice items to data
        fields['invoice_items'] = invoiceItems;

        // add service charges to data
        fields['service_charges'] = sc_array;

        e.preventDefault();

        $.ajax({
            method: "POST",
            url: form.prop('action'),
            data: fields
        }).done(function(response) {
            // remove all error classes
            removeErrors();
            swal({
                title: 'Done!',
                text: 'Your changes have been saved!',
                type: 'success',
                onClose: function() {
                    window.location.href = "{{ return_url }}";
                }
            });
        }).fail(function(response) {
            if (response.status == 422) {
                form_in_process = false;
                var errors = response.responseJSON.errors;
                var firstfield = false;

                // remove all error classes first
                removeErrors();

                // display errors contextually
                $.each(errors, function(field, msg) {
                    var formfield = $("[name='" + field + "'], [data-name='" + field + "']");
                    var label = $("label[data-field='" + field + "']");
                    var msgbox = $(".form-control-feedback[data-field='" + field + "']");

                    // add error classes to bad fields
                    formfield.addClass('form-control-danger');
                    label.addClass('has-danger');
                    msgbox.html(msg).addClass('has-danger').removeClass('hide');

                    // check if this field comes first in DOM
                    var domfield = formfield.get(0);

                    if (!firstfield || (firstfield && firstfield.compareDocumentPosition(domfield) === 2)) {
                        firstfield = domfield;
                    }
                });

                // focus on first bad field
                firstfield.focus();

                // scroll to above that field to make it visible
                $('html, body').animate({
                    scrollTop: $(firstfield).offset().top - 200
                }, 100);
            }
        });
    });

    // remove all error classes
    function removeErrors(formSelector = '') {
        $(formSelector + " .form-control-danger").removeClass('form-control-danger');
        $(formSelector + " [data-field]").removeClass('has-danger');
        $(formSelector + " .form-control-feedback[data-field]").addClass('hide');
    }

    // store selected vehicle data
    var vdata = false;

    // vehicle selector
    {% if ftags.vehicle_dropdown %}
        // vehicle selector
        $('#customer-vehicle').select2({
    	ajax: {
            url: "{{ url('customer_vehicle_search') }}",
            dataType: 'json',
            delay: 200,
            data: function (params) {
                var query = {
                    search: params.term,
                    page: params.page || 1
                }

                return query;
            }
        },
        placeholder: "Select a vehicle"
    }).on('select2:select', function(e) {
    	var data = e.params.data;

    	// get info for this customer vehicle
    	$.ajax({
            method: "GET",
            url: "{{ url('customer_vehicle_info') }}",
                data: { id: data.id }
        }).done(function(response) {
            vdata = response.data;
            $('#vid').val(vdata.vehicle.id);

            $('#flag-new-customer').prop('checked', false).change();

            // reset vehicle fields
            resetVehicleFields();

            // reset invoice fields
            $("#btn-reset-invoice").click();

            // get compatible batteries
            $("#invoice-bmfg").change();
			
            // set form fields
            $("[data-vehicle-field='1']").prop('placeholder', '');
            $("#customer-first-name").val(vdata.customer.first_name);
            $("#customer-last-name").val(vdata.customer.last_name);
            $("#customer-phone-mobile").val(vdata.customer.phone_mobile);
            $("#customer-phone-landline").val(vdata.customer.phone_landline);
            $("#customer-phone-office").val(vdata.customer.phone_office);
            $("#customer-customer-notes").val(vdata.customer.customer_notes);
            $("#cv-mfg").val(vdata.vehicle.mfg_id);
            // get vehicles for this manufacturer
            get_vehicle_makes(vdata.vehicle.mfg_id, vdata.vehicle.id);

            $("#vehicle-make").val(vdata.vehicle.make);
            $("#cv-year").val(vdata.vehicle.model_year);
            $("#cv-color").val(vdata.vehicle.color);
            $("#cv-plate").val(vdata.vehicle.plate_number);

            if (typeof vdata.battery !== 'undefined') {
                $("#current-battery").val(vdata.battery.mfg_name + " " + vdata.battery.model_name + " " + vdata.battery.size_name + " (" + vdata.battery.prod_code + ")");
                $("#warranty-code").val(vdata.battery.warranty_code);
                $("#warranty-expiration").val(vdata.battery.warranty_expiration);
            } else {
                $("#current-battery, #warranty-expiration").val("No current battery").css('color', '#f4516c');
            }
            $("#or_name").val(vdata.customer.first_name + ' ' + vdata.customer.last_name);
        })
    }).focus();
    {% endif %}

    {% if ftags.vehicle_dropdown %}
    // reference job order selector
    $('#ref-jo').select2({
        ajax: {
            url: "{{ url('jo_search') }}",
            dataType: 'json',
            delay: 200,
            data: function (params) {
                var query = {
                    search: params.term,
                    page: params.page || 1
                }

                return query;
            }
        },
        placeholder: "Select a job order",
        allowClear: true
    });
    {% endif %}

    // reset all vehicle info form fields
    function resetVehicleFields() {
        $("[data-vehicle-field='1']").val("").css('color', '').prop('placeholder', 'Select a vehicle first');
    }

    // datepicker
    $(".dp").datepicker({
        format: "dd M yyyy",
        todayHighlight: true,
        autoclose: true,
        pickerPosition: 'bottom-left',
        bootcssVer: 3,
        clearBtn: true
    });

    // timepicker
    $('.tp').timepicker({
    	format: "HH:ii P",
        minuteStep: 1,
        showMeridian: true,
        snapToStep: true,
        bootcssVer: 3,
        clearBtn: true,
        todayHighlight: true,
        autoclose: true,
        pickerPosition: 'bottom-left'
    });

    // toggle advance order fields
    $("#flag-advance").change(function() {
        var dp = $("[name='date_schedule_date']");
        var tp = $("[name='date_schedule_time']");
        var checked = $(this).prop('checked');

        if (checked) {
            dp.prop('disabled', false);
            tp.prop('disabled', false);
        } else {
            // reset to default values if disabled
            var dateObj = moment(dp.data('default-value'), "YYYY-MM-DD");
            dp.prop('disabled', true).parent().datepicker('setDate', dateObj.toDate());
            tp.prop('disabled', true).timepicker('setTime', tp.data('default-value'));
        }
    }).change();

    // toggle new customer
    $("#flag-new-customer").change(function() {
        
        checked = $(this).prop('checked');
        if (checked) {
            $('.cust_field').prop('disabled', false);
            $('.cv_field').prop('disabled', false);

            $('.cust_field').val('');
            $('.cv_field').val('');
            $('#cv-make').val('');
            $('.battery_field').val('');
        } else {
            $('.cust_field').prop('disabled', true);
            $('.cv_field').prop('disabled', true);
        }
    }).change();

    // vehicle manufacturer change
    $("#cv-mfg").change(function() {
        var id = $(this).val();
        field = $('#cv-make');

        // no id specified
        if (!id) {
            field.html('<option value="">Select a manufacturer first</option>').prop('disabled', true);
            return true;
        }

        // get vehicles for this manufacturer
        get_vehicle_makes(id);
    });

    // vehicle make change (store in vid)
    $("#cv-make").change(function() {
        $('#vid').val($('#cv-make').val());
        $('#invoice-bmfg').change();
    });

    // update battery list when changing manufacturer
    $("#invoice-bmfg").change(function() {
        {% if ftags.preset_vehicle %}
            $('#vid').val({{ vid }});
        {% endif %}
        // must have a selected vehicle
        vid = $('#vid').val();
        if (vid == 0)
            return;

        var id = $(this).val();
        var field = $("#invoice-battery");

        // no id specified
        if (!id) {
            field.html('<option value="">Select a vehicle and manufacturer first</option>').prop('disabled', true);
            return true;
        }

        // get vehicles for this manufacturer
        $.ajax({
            method: "POST",
            url: "{{ url('vehicle_batteries') }}",
            data: {
                id: id,
                vehicle_id: vid
            }
        }).done(function(response) {
            if (response.data.length > 0) {
                var html = '';

                // TODO: Battery unit price is static for now
                var unitPrice = 1000;

                $.each(response.data, function(index, battery) {
                    html += '<option value="' + battery.id + '" data-index="' + index + '" data-warr-private="' + battery.warr_private + '" data-warr-commercial="' + battery.warr_commercial + '">' + battery.model_name + ' ' + battery.size_name + '</option>';
                });

                field.html(html).prop('disabled', false);
            } else {
                field.html('<option value="">No batteries found</option>').prop('disabled', true);
            }
        });
    });

    // populate battery dropdown for create from vehicle mode
    {% if ftags.preset_vehicle %}
    $("#invoice-bmfg").change();
    {% endif %}

	// mask quantity field
	$("#invoice-quantity").inputmask("mask", {
        mask: "9999999",
        placeholder: ""
    });

    var invoiceItems = [];
    var sc_array = [];

    // populate invoiceItems if editing so that we don't lose the battery
    {% if mode in ['view-all', 'open-edit', 'onestep-edit', 'walk-in-edit'] %}
        {% if (obj.getInvoice and obj.getInvoice.getItems|length > 0) %}
            {% for item in obj.getInvoice.getItems %}
                {% if item.getBattery() %}
                    invoiceItems.push({
                        battery: {{ item.getBattery().getID() }},
                        quantity: {{ item.getQuantity() }},
                        trade_in: {{ obj.getInvoice().getTradeIn }},
                    });
                {% endif %}
            {% endfor %}
        {% endif %}
    {% endif %}

    // add to invoice
    $("#btn-add-to-invoice").click(function() {
        var bmfg = $("#invoice-bmfg").val();
        var battery = $("#invoice-battery").val();
        var tradeIn = $("#invoice-trade-in-type").val();
        var qty = $("#invoice-quantity").val();

        if (!bmfg || !battery || !qty) {
            swal({
                title: 'Whoops!',
                text: 'Please fill in all the invoice fields.',
                type: 'warning'
            });

            return false;
        }

        if (isNaN(qty)) {
            swal({
                title: 'Whoops!',
                text: 'Invalid quantity specified.',
                type: 'warning'
            });

            return false;
        }

        // add to invoice array
        invoiceItems.push({
            battery: battery,
            quantity: qty,
            trade_in: tradeIn,
        });

        // regenerate the invoice
        generateInvoice();
    });

    // update invoice when promo is changed
    $("#invoice-discount").change(function() {
        console.log('discount ' + $("#invoice-discount").val());
        generateInvoice();
    });

    // trigger update when service type is changed
    $("#service_type").change(function() {
        generateInvoice();
    });

    // reset the invoice table
    $("#btn-reset-invoice").click(function() {
        $("#invoice-discount").val(0);
        $('.sc-select').closest('.row').remove();
        invoiceItems = [];
        generateInvoice();
    });

    // recompute
    $("#btn-recompute-invoice").click(function() {
        generateInvoice();
    });

    function generateInvoice() {
        var discount = $("#invoice-discount").val();
        var table = $("#invoice-table tbody");
        var stype = $("#service_type").val();
        var cvid = $("#customer-vehicle").val();

        sc_array = [];

        // get the service charges
        $('.sc-select').each(function() {
            var id = $(this).children('option:selected').val();
            sc_array.push({
                id: id,
            });
        });

        // generate invoice values
        $.ajax({
            method: "POST",
            url: "{{ url('jo_gen_invoice') }}",
            data: {
                'stype': stype,
                'items': invoiceItems,
                'promo': discount,
                'cvid': cvid,
                'service_charges': sc_array,
            }
        }).done(function(response) {
            // mark as invoice changed
            $("#invoice-change").val(1);
            var invoice = response.invoice;

            // populate totals
            $("#invoice-discount").val(invoice.discount);
            $("#invoice-price").val(invoice.price);
            $("#invoice-trade-in").val(invoice.trade_in);
            $("#invoice-vat").val(invoice.vat);
            $("#invoice-total-amount").val(invoice.total_price);

            // populate rows
            var html = '';

            if (invoice.items.length > 0) {
                $.each(invoice.items, function(key, item) {
                   html += '<tr data-key="' + key + '">' +
                        '<td>' + item.title + '</td>' +
                        '<td class="text-right">' + item.quantity + '</td>' +
                        '<td class="text-right">' + item.unit_price + '</td>' +
                        '<td class="text-right">' + item.amount + '</td>' +
                        '</tr>';
                });
            } else {
                html = '<tr class="placeholder-row">' +
                    '<td colspan="4">' +
                    'No items to display.' +
                    '</td>' +
                    '</tr>';
            }

            table.html(html);
        });
    }

    // remove from invoice table
    // TODO: figure out a way to delete rows, and should deleting trade ins be allowed since they count as items on the table?
    /*
    $(document).on("click", ".btn-invoice-delete", function() {
        var tbody = $("#invoice-table tbody");
        var row = $(this).closest('tr');
        var qty = row.find('.col-quantity').html();
        var unitPrice = row.find('.col-unit-price').html();

        // recreate the local invoice items object
        var newItems = [];

        // subtract from totals
        var subtotal = parseFloat(unitPrice) * parseInt(qty);
        invoiceTotal -= subtotal;
        updateInvoiceFigures();

        // remove from table
        row.remove();

        // get total item rows and show placeholder if needed
        var visibleRows = tbody.find('tr:not(.placeholder-row)').length;

        if (visibleRows === 0) {
            tbody.find('.placeholder-row').removeClass('hide');
        }
    });
    */

    // cancel job order
    $(".btn-cancel-job-order").click(function(e) {
        var url = $(this).prop('href');

        e.preventDefault();

        swal({
            title: 'Cancel Job Order',
            html: 'Please enter the reason for cancellation of this job order:',
            input: 'textarea',
            inputClass: 'form-control',
            type: 'warning',
            showCancelButton: true,
            width: '40rem',
            preConfirm: (reason) => {
                if (!reason) {
                    swal.showValidationError(
                        'Reason for cancellation is required.'
                    )
                }
             }
        }).then((reason) => {
            $.ajax({
                method: "DELETE",
                url: url,
                data: {
                    'cancel_reason': reason.value
                }
            }).done(function(response) {
                swal({
                    title: 'Done!',
                    text: response.success,
                    type: 'success',
                    onClose: function() {
                        window.location.href = "{{ return_url }}";
                    }
                });
            });
        });
    });

    // service charge add
    $('#btn-sc-add').click(function(e) {
        console.log('adding service charge');
        // add dropdown before the button
        var html = '<div class="form-group m-form__group row">';
        html += '<div class="col-lg-6">';
        html += '<div class="col-lg-12 form-group-inner">';
        html += '<select class="form-control m-input sc-select" name="service_charges">';
        {% for key, sc in service_charges %}
        html += '<option value="{{ sc.getID }}" data-amount="{{ sc.getAmount }}">{{ sc.getName }}</option>';
        {% endfor %}
        html += '</select>';
        html += '</div>';
        html += '</div>';
        html += '<div class="col-lg-5">';
        html += '<input class="form-control sc-amount" type="text" value="0" disabled>';
        html += '</div>';
        html += '<div class="col-lg-1">';
        html += '<button class="btn btn-danger btn-sc-remove">X</button>';
        html += '</div>';
        html += '</div>';

        $('#sc-section').append(html);

        // trigger change in select
        $('#sc-section').find('.sc-select').last().change();
        return false;
    });

    // service charge remove
    $('body').on('click', '.btn-sc-remove', function(e) {
        console.log('removing service charge');

        $(this).closest('.row').remove();

        generateInvoice();

        return false;
    });

    $('body').on('change', '.sc-select', function(e) {
        var amount = $(this).children('option:selected').data('amount');
        $(this).closest('.row').find('.sc-amount').val(amount);

        generateInvoice();
    });

    $("#customer-first-name, #customer-last-name").change(function() {
        // autopopulate OR name with customer name
        var cust_name = $("#customer-first-name").val() + ' ' + $("#customer-last-name").val();
        $("#or_name").val(cust_name);
    });

    $('.dp').on('changeDate', function() {
        // check date schedule if it's earlier
        // if so, show an alert to let user know
        var date_time = $('#date-schedule-date').val() + ' ' + $('#date-schedule-time').val()
        var date_schedule = new Date(date_time);
        var current_date = new Date('{{ current_date|date('Y-m-d g:i A') }}');

        // check if date is earlier than current
        if (date_schedule < current_date)
        {
            swal({
                title: 'Warning!',
                text: 'Schedule date and time is before today\'s date and time.',
                type: 'warning',
            });
        }
    });

    $('.tp').on('changeTime.timepicker', function(e) {
        // set the schedule time what the user selects
        $('#date-schedule-time').val(e.time.value);
    });

    $('.tp').on('hide.timepicker', function(e) {
        // check time schedule along with date if it's earlier than current date
        var date_time = $('#date-schedule-date').val() + ' ' + $('#date-schedule-time').val()
        var date_schedule = new Date(date_time);
        var current_date = new Date('{{ current_date|date('Y-m-d g:i A') }}');

        // check if date is earlier than current
        if (date_schedule < current_date)
        {
            swal({
                title: 'Warning!',
                text: 'Schedule date and time is before today\'s date and time.',
                type: 'warning',
            });
        }

    });

    // image modal
    $('.image-pop').on('click', function() {
        $('.image-preview').attr('src', $(this).find('img').attr('src'));
        $('#image-modal').modal('show');   
    });

});
</script>
{% endblock %}