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

{% block body %}
<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>
<div class="m-content">
    <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>
                            <h3 class="m-portlet__head-text">
                                Viewing
                                <small>{{ obj.getID() }}</small>
                            </h3>
                        </div>
                    </div>
                </div>
                <form id="row-form" class="m-form m-form--fit m-form--label-align-right">
                    <div class="m-portlet__body">
                        <div class="m-form__section m-form__section--first">
                            <div class="m-form__heading">
                                <h3 class="m-form__heading-title">
                                    Customer Details
                                </h3>
                            </div>
                            <div class="form-group m-form__group row">
                                <div class="col-lg-6">
                                    <label data-field="customer_first_name">First Name</label>
                                    <input type="text" name="customer_first_name" id="customer-first-name" class="form-control m-input" value="{{ obj.getCustomer.getFirstName|default('') }}" data-vehicle-field="1" disabled>
                                </div>
                                <div class="col-lg-6">
                                    <label data-field="customer_last_name">Last Name</label>
                                    <input type="text" name="customer_last_name" id="customer-last-name" class="form-control m-input" value="{{ obj.getCustomer.getLastName|default('') }}" data-vehicle-field="1" disabled>
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <div class="col-lg-6">
                                    <label data-field="customer_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="customer_phone_mobile" id="customer-phone-mobile" class="form-control m-input" value="{{ obj.getCustomer.getPhoneMobile|default('') }}" data-vehicle-field="1" disabled>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <label data-field="customer_phone_landline">Landline</label>
                                    <div class="input-group m-input-group">
                                        <span class="input-group-addon">{% trans %}country_code_prefix{% endtrans %}</span>
                                        <input type="text" name="customer_phone_landline" id="customer-phone-landline" class="form-control m-input" value="{{ obj.getCustomer.getPhoneLandline|default('') }}" data-vehicle-field="1" disabled>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <div class="col-lg-6">
                                    <label data-field="customer_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="customer_phone_office" id="customer-phone-office" class="form-control m-input" value="{{ obj.getCustomer.getPhoneOffice|default('') }}" data-vehicle-field="1" disabled>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <label data-field="customer_phone_fax">Fax</label>
                                    <div class="input-group m-input-group">
                                        <span class="input-group-addon">{% trans %}country_code_prefix{% endtrans %}</span>
                                        <input type="text" name="customer_phone_fax" id="customer-phone-fax" class="form-control m-input" value="{{ obj.getCustomer.getPhoneFax|default('') }}" data-vehicle-field="1" disabled>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <div class="col-lg-6">
                                    <label data-field="customer_customer_notes">Customer Notes</label>
                                    <textarea name="customer_customer_notes" id="customer-customer-notes" class="form-control m-input" data-vehicle-field="1" rows="4" disabled>{{ obj.getCustomer ? obj.getCustomer.getCustomerNotes }}</textarea>
                                </div>
                                <div class="col-lg-6">
                                    <div class="col-lg-12 form-group-inner">
                                        <label>Email Address</label>
                                        <input type="text" name="customer_email" id="customer-email" class="form-control m-input" value="{{ obj.getCustomer ? obj.getCustomer.getEmail|default('') }}" data-vehicle-field="1" disabled>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <div class="col-lg-3">
                                    <div class="col-lg-12 form-group-inner">
                                        <label data-field="source">Marketing Promo</label>
                                        <div class="m-checkbox-list">
                                            <label class="m-checkbox">
                                                <input type="checkbox" name="flag_promo_sms" id="flag-promo-sms" value="1"{{ obj.getCustomer ? obj.getCustomer.isPromoSms ? ' checked' }} disabled>
                                                    SMS
                                                <span></span>
                                            </label>
                                            <label class="m-checkbox">
                                                <input type="checkbox" name="flag_promo_email" id="flag-promo-email" value="1"{{ obj.getCustomer ? obj.getCustomer.isPromoEmail ? ' checked' }} disabled>
                                                    Email
                                                <span></span>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    <div class="col-lg-12 form-group-inner">
                                        <label data-field="source">Marketing Research</label>
                                        <div class="m-checkbox-list">
                                            <label class="m-checkbox">
                                                <input type="checkbox" name="flag_research_sms" id="flag-research-sms" value="1"{{ obj.getCustomer ? obj.getCustomer.isResearchSms ? ' checked' }} disabled>
                                                    SMS
                                                <span></span>
                                            </label>
                                            <label class="m-checkbox">
                                                <input type="checkbox" name="flag_research_email" id="flag-research-email" "value="1"{{ obj.getCustomer ? obj.getCustomer.isResearchEmail ? ' checked' }} disabled>
                                                    Email
                                                <span></span>
                                                <div class="form-control-feedback hide" data-field="flag_research_email"></div>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-3">
                                    {% if is_granted('customer.dpa') %}
                                        <input type="checkbox" name="flag_dpa_consent" id="flag-dpa-consent" value="1"{{ obj.getCustomer ? obj.getCustomer.isDpaConsent ? ' checked' }} disabled>
                                        <label class="switch-label">With DPA Consent</label>
                                        <div class="form-control-feedback hide" data-field="flag_dpa_consent"></div>
                                    {% endif %}
                                </div>
                                <!-- commenting out because customer request
                                <div class="col-lg-3">
                                    <div class="col-lg-12 form-group-inner">
                                        <div class="m-checkbox-list">
                                            {% for customer_tag in customer_tags %}
                                                <label class="m-checkbox">
                                                    {% if obj.getCustomer %}
                                                        <input type="checkbox" name="customer_tags[]" value="{{ customer_tag.getID() }}"{{ customer_tag.getID() in obj.getCustomer.getCustomerTags() ? ' checked' : '' }} disabled>
                                                        {{ customer_tag.getName() }}
                                                    {% else %}
                                                        <input type="checkbox" name="customer_tags[]" value="{{ customer_tag.getID() }}" disabled>
                                                        {{ customer_tag.getName() }}
                                                    {% endif %}
                                                    <span></span>
                                                </label>
                                            {% endfor %}
                                        </div>
                                    </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="vmfg">Manufacturer</label>
                                    <input type="text" name="vmfg" id="vmfg" class="form-control m-input" value="{{ obj.getCustomerVehicle ? obj.getCustomerVehicle.getVehicle.getManufacturer.getName }}" data-vehicle-field="1" disabled>
                                </div>
                                <div class="col-lg-3">
                                    <label data-field="vehicle_make">Make</label>
                                    <input type="text" name="vehicle_make" id="vehicle-make" class="form-control m-input" value="{{ obj.getCustomerVehicle ? obj.getCustomerVehicle.getVehicle.getMake }}" data-vehicle-field="1" disabled>
                                </div>
                                <div class="col-lg-3">
                                    <label data-field="vehicle_year">Model Year</label>
                                    <input type="text" name="vehicle_year" id="vehicle-year" class="form-control m-input" value="{{ obj.getCustomerVehicle ? obj.getCustomerVehicle.getModelYear }}" data-vehicle-field="1" disabled>
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <div class="col-lg-3">
                                    <label data-field="vehicle_plate">Plate #</label>
                                    <input type="text" name="vehicle_plate" id="vehicle-plate" class="form-control m-input" value="{{ obj.getCustomerVehicle.getPlateNumber|default('') }}" data-vehicle-field="1" disabled>
                                </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" value="{{ obj.getCustomerVehicle ? obj.getCustomerVehicle.getColor }}" data-vehicle-field="1" disabled>
                                </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" 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>
                                <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" value="{{ obj.getCustomerVehicle ? obj.getCustomerVehicle.getWarrantyCode }}" data-vehicle-field="1" disabled>
                                </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" value="{{ obj.getCustomerVehicle.getCurrentBattery|default(false) ? obj.getCustomerVehicle.getWarrantyExpiration|date("d M Y") : '' }}" data-vehicle-field="1" disabled>
                                </div>
                                <div class="col-g-3">
                                    <span class="m-switch m-switch--icon block-switch">
                                        <label>
                                            <input type="checkbox" name="flag_motolite_battery" id="flag-motolite-battery" value="1" {{ obj.getCustomerVehicle.getCurrentBattery|default(false) ? obj.getCustomerVehicle.hasMotoliteBattery ? ' checked' }} disabled>
                                            <label class="switch-label">{% trans %}label.jo.vehicle_battery{% endtrans %}</label>
                                            <span></span>
                                        </label>
                                    </span>
                                </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' }} 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" disabled>
                                        {% for key, service in service_types %}
                                            <option value="{{ key }}"{{ obj.getServiceType == key ? ' selected' }}>{{ service }}</option>
                                        {% endfor %}
                                    </select>
                                </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" disabled>
                                        {% for key, class in warranty_classes %}
                                            <option value="{{ key }}"{{ obj.getWarrantyClass == key ? ' selected' }}>{{ class }}</option>
                                        {% endfor %}
                                    </select>
                                </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" disabled>
                                        {% for key, class in modes_of_payment %}
                                            <option value="{{ key }}"{{ obj.getModeOfPayment == key ? ' selected' }}>{{ class }}</option>
                                        {% endfor %}
                                    </select>
                                </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>
                                <div class="col-lg-3">
                                    <label data-field="date_schedule">Scheduled Date</label>
                                    <div class="input-group date dp">
                                        <input type="text" 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>
                                <div class="col-lg-3">
                                    <label data-field="date_schedule">Scheduled Time</label>
                                    <div class="input-group">
                                        <input type="text" 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>
                            </div>
                            <div class="form-group m-form__group row">
                                <div class="col-lg-6">
                                    <label data-field="flag_will_wait">Willing to Wait</label>
                                    <select class="form-control m-input" id="flag-willing-to-wait" name="flag_willing_to_wait" disabled>
                                        {% for key, class in willing_to_wait_content %}
                                            <option value="{{ key }}"{{ obj.getWillWait == key ? ' selected' }}>{{ class }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-lg-6">
                                    <label data-field="no_wait_reason">Reason Why Not Willing to Wait</label>
                                    <select class="form-control m-input" id="no-wait-reason" name="no_wait_reason" disabled>
                                        <option value="">None</option>
                                        {% for key, class in no_wait_reasons %}
                                            <option value="{{ key }}"{{ obj.getReasonNotWait == key ? ' selected' }}>{{ class }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <div class="col-lg-6">
                                    <label data-field="emergency_type">Emergency Scenario</label>
                                    <select class="form-control m-input" id="emergency-type" name="emergency_type" disabled>
                                        <option value=""></option>
                                        {% for id, label in emergency_types %}
                                            {% if obj.getEmergencyType %}
                                                <option value="{{ id }}"{{ obj.getEmergencyType.getID == id ? ' selected' }}>{{ label }}</option>
                                            {% else %}
                                                <option value="{{ id }}">{{ label }}</option>
                                            {% endif %}
                                        {% endfor %}
                                    </select>
                                 </div>
                                 <div class="col-lg-6">
                                     <label data-field="not_wait_notes">Notes on Not Willing to Wait</label>
                                     <textarea name="not_wait_notes" id="not-wait-notes" class="form-control m-input" rows="2" disabled>{{ obj.getNotWaitingNotes }}</textarea>
                                 </div>
                            </div> 
                            <div class="form-group m-form__group row">
                                <div class="col-lg-6">
                                    <label data-field="initial_concern">Initial Concern of Customer</label>
                                    <select class="form-control m-input" id="initial-concern" name="initial_concern" disabled>
                                        <option value=""></option>
                                        {% for key, class in initial_concern %}
                                            <option value="{{ key }}"{{ obj.getInitialConcern == key ? ' selected' }}>{{ class }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-lg-6">
                                     <label data-field="initial_concern_notes">Notes on Initial Concern of Customer</label>
                                     <textarea name="initial_concern_notes" id="initial-concern-notes" class="form-control m-input" rows="2" disabled>{{ obj.getInitialConcernNotes }}</textarea>
                                 </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <div class="col-lg-6">
                                    <label data-field="tier1_notes">Tier 1 Notes</label>
                                    <textarea name="tier1_notes" class="form-control m-input" rows="15" disabled>{{ obj.getTier1Notes }}</textarea>
                                </div>
                                <div class="col-lg-6">
                                    <label data-field="tier2_notes">Tier 2 Notes</label>
                                    <textarea name="tier2_notes" class="form-control m-input" rows="15" disabled>{{ obj.getTier2Notes }}</textarea>
                                </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" disabled>
                                            {% for key, class in sources %}
                                                <option value="{{ key }}"{{ obj.getSource == key ? ' selected' }}>{{ class }}</option>
                                            {% endfor %}
                                        </select>
                                    </div>
                                    <br>
                                    <div class="col-lg-12 form-group-inner">
                                        <label data-field="delivery_instructions">Delivery Instructions</label>
                                        <textarea name="delivery_instructions" class="form-control m-input" rows="7" disabled>{{ obj.getDeliveryInstructions }}</textarea>
                                    </div>
                                </div>
                                <div class="col-lg-6">
                                    <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>
                                    <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>
                                    <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>
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <div class="col-lg-6">
                                    <label data-field="status">Gender of Caller</label>
                                    <select class="form-control m-input" id="gender" name="gender" disabled>
                                        <option value=""></option>
                                        {% for key, gender in genders %}
                                            <option value="{{ key }}"{{ key == obj.getGender ? ' selected' }}>{{ gender }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-lg-6">
                                    <label data-field="status">Caller Classification</label>
                                    <select class="form-control m-input" id="caller-class" name="caller_class" disabled>
                                        <option value=""></option>
                                        {% for key, caller_class in caller_classifications %}
                                            <option value="{{ key }}"{{ key == obj.getCallerClassification ? ' selected' }}>{{ caller_class }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <div class="col-lg-6">
                                    <label data-field="status">Source of Awareness</label>
                                    <select class="form-control m-input" id="source-of-awareness" name="source_of_awareness" disabled>
                                        <option value=""></option>
                                        {% for key, soa in soa_types %}
                                            <option value="{{ key }}"{{ key == obj.getSourceOfAwareness ? ' selected' }}>{{ soa }}</option>
                                        {% endfor %}
                                    </select>
                                </div>
                                <div class="col-lg-6">
                                    <label for="ownership_type" data-field="ownership_type"> Ownership Type </label>
                                    <select class="form-control m-input" id="ownership-type" name="ownership_type" disabled>
                                        <option value=""></option>
                                        {% for id, label in ownership_types %}
                                            {% if obj.getOwnershipType %}
                                                <option value="{{ id }}"{{ obj.getOwnershipType.getID == id ? ' selected' }}>{{ label }}</option>
                                            {% else %}
                                                <option value="{{ id }}">{{ label }}</option>
                                            {% endif %}
                                        {% endfor %}
                                    </select>
                                </div>
                            </div>
                            <div class="form-group m-form__group row">
                                <div class="col-lg-6">
                                    <label for="remarks" data-field="remarks"> Remarks </label>
                                    <textarea class="form-control m-input" id="remarks" rows="6" name="remarks" disabled>{{ obj.getRemarks }}</textarea>
                                </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 for="cust_location" data-field="cust_location"> Customer Location </label>
                                <select class="form-control m-input" id="cust-location" name="cust_location" disabled>
                                    <option value=""></option>
                                    {% for id, label in cust_locations %}
                                        {% if obj.getCustomerLocation %}
                                            <option value="{{ id }}"{{ obj.getCustomerLocation.getID == id ? ' selected' }}>{{ label }}</option>
                                        {% else %}
                                            <option value="{{ id }}">{{ label }}</option>
                                        {% endif %}
                                    {% endfor %}
                                </select>
                            </div>
                            <div class="col-lg-6">
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <div class="col-lg-6">
                                <label data-field="delivery_address">Delivery Address</label>
                                <textarea name="delivery_address" class="form-control m-input" rows="4" disabled>{{ obj.getDeliveryAddress }}</textarea>
                            </div>
                            <div class="col-lg-6">
                                <label data-field="landmark">Landmark</label>
                                <textarea name="landmark" class="form-control m-input" rows="4" disabled>{{ obj.getLandmark|default('') }}</textarea>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <div class="col-lg-12">
                                <label name="coordinates" data-field="coordinates">Coordinates</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" disabled>
                                    <span class="input-group-btn">
                                        <button class="btn btn-primary" id="m_gmap_btn" disabled>
                                            <i class="fa fa-search"></i>
                                        </button>
                                    </span>
                                </div>
                                <div id="m_gmap" style="height:600px;"></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">
                                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('') }}" disabled>
                            </div>
                            <div 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('') }}" disabled>
                            </div>
                        </div>
                        <div class="form-group m-form__group row">
                            <div class="col-lg-6">
                                <label>Discount Type</label>
                                <input type="text" id="invoice-promo" class="form-control m-input" value="{{  obj.getInvoice.getPromo.getName|default('None') }}" disabled>
                            </div>
                            <div class="col-lg-3">
                                <label>Promo Discount</label>
                                <input type="text" id="invoice-promo-discount" class="form-control m-input text-right" value="{{ obj.getInvoice ? obj.getInvoice.getDiscount|number_format(2) : '0.00' }}" disabled>
                            </div>
                            <div class="col-lg-3">
                                <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(2) : '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>
                    <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">
                                Timeline
                            </h3>
                        </div>
                        <div class="form-group m-form__group row">
                            <div class="col-lg-12">
                                <div class="m-timeline-2">
                                    <div class="m-timeline-2__items  m--padding-top-25 m--padding-bottom-25">
                                        {% for event in obj.getEvents %}
                                            <div class="m-timeline-2__item{{ loop.index > 1 ? ' m--margin-top-40' }}">
                                                <span class="m-timeline-2__item-time">
                                                    <small>{{ event.getDateHappen|date("M j, Y") }}</small>
                                                    <div>{{ event.getDateHappen|date("h:i:s a") }}</div>
                                                </span>
                                                <div class="m-timeline-2__item-cricle">
                                                    <i class="fa fa-genderless" style="color: #f4516c;"></i>
                                                </div>
                                                <div class="m-timeline-2__item-text  m--padding-top-5">
                                                    {{ event.getTypeName }} by {{ event.getUser.getFullName|default('Application') }} {% if event.getRider %} - Rider - {{ event.getRider.getFullName }}{% endif %}
                                                </div>
                                            </div>
                                        {% endfor %}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </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">
                                Tickets
                            </h3>
                        </div>
                        <div class="form-group m-form__group row">
                            <div class="col-lg-12">
                                <div class="m_datatable" id="data-tickets"></div>
                            </div>
                        </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">
                                    <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() {
    var form_in_process = false;

    // 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);

    function selectPoint(lat, lng)
    {
        // check if point is in coverage area
        $.ajax({
            method: "GET",
            url: "{{ url('jo_geofence') }}",
            data: {
                'lat': lat,
                'lng': lng
            }
        }).done(function(response) {
            if (response.is_covered === false)
            {   
                console.log('Not in coverage area');
                swal({
                    title: 'Warning!', 
                    text: 'Our service is limited to some areas in Metro Manila, Laguna, and Baguio only. We will update you as soon as we are able to cover your area',      
                    type: 'warning',
                });
            }
        });

        // clear markers
        markerLayerGroup.clearLayers();

        var marker = L.marker([lat, lng]);

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

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

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

    }

    var lat = {{ obj.getCoordinates.getLatitude }};
    var lng = {{ obj.getCoordinates.getLongitude }};
    selectPoint(lat, lng);

    var ticketRows = [];

    {% for ticket in obj.getTickets %}
        trow = {
            id: "{{ ticket.getID }}",
            date_create: "{{ ticket.getDateCreate|date('d M Y - h:i A') }}",
            ticket_type: "{{ ticket.getTicketTypeText }}",
            status: "{{ ticket.getStatusText }}",
            edit_url: "{{ url('ticket_update', {'id': ticket.getID}) }}"
        };

        ticketRows.push(trow);
    {% endfor %}

    // tickets data table
    var ticketOptions = {
        data: {
            type: 'local',
            source: ticketRows,
            saveState: {
                cookie: false,
                webstorage: false
            }
        },
        layout: {
            scroll: true
        },
        columns: [
        {
            field: 'id',
            title: 'ID',
            width: 30
        },
        {
            field: 'date_create',
            title: 'Date Created',
            width: 200
        },
        {
            field: 'ticket_type',
            title: 'Ticket Type'
        },
        {
            field: 'status',
            title: 'Status'
        }
        ],
        pagination: false
    };

    var ticketTable = $("#data-tickets").mDatatable(ticketOptions);
});
</script>
{% endblock %}