{% 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">
            <form id="row-form" class="m-form m-form--fit m-form--label-align-right">
                <div class="m-form__section{{ mode == 'details' }}">
                    <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="{{ data.getCustFirstName|default('') }}" data-vehicle-field="1" disabled>
                            <div class="form-control-feedback hide" data-field="customer_first_name"></div>
                        </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="{{ data.getCustLastName|default('') }}" data-vehicle-field="1" disabled>
                            <div class="form-control-feedback hide" data-field="customer_last_name"></div>
                        </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">+63</span>
                                <input type="text" name="customer_phone_mobile" id="customer-phone-mobile" class="form-control m-input" value="{{ data.getCustMobile|default('') }}" data-vehicle-field="1" disabled>
                                <div class="form-control-feedback hide" data-field="customer_phone_mobile"></div>
                            </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">+63</span>
                                <input type="text" name="customer_phone_landline" id="customer-phone-landline" class="form-control m-input" value="{{ data.getCustLandline|default('') }}" data-vehicle-field="1" disabled>
                                <div class="form-control-feedback hide" data-field="customer_phone_landline"></div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-lg-6">
                            <label data-field="customer_contact">Contact</label>
                            <div class="input-group m-input-group">
                                <span class="input-group-addon">+63</span>
                                <input type="text" name="customer_contact" id="customer-contact" class="form-control m-input" value="{{ data.getCustContact|default('') }}" data-vehicle-field="1" disabled>
                                <div class="form-control-feedback hide" data-field="customer_contact"></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="{{ data.getCarBrand|default('') }}" data-vehicle-field="1" disabled>
                            <div class="form-control-feedback hide" data-field="vmfg"></div>
                        </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="{{ data.getCarMake|default('') }}" data-vehicle-field="1" disabled>
                            <div class="form-control-feedback hide" data-field="vehicle_make"></div>
                        </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="{{ data.getCarModel|default('') }}" data-vehicle-field="1" disabled>
                            <div class="form-control-feedback hide" data-field="vehicle_year"></div>
                        </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="{{ data.getPlateNumber|default('') }}" data-vehicle-field="1" disabled>
                            <div class="form-control-feedback hide" data-field="vehicle_color"></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" value="{{ data.getCarColor|default('') }}" 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">
                            Transaction Details
                        </h3>
                        <span class="m-switch m-switch--icon block-switch">
                            <label>
                                <input type="checkbox" name="flag_advance" id="flag-advance" value="1"{{ data.getAdvanceOrder == "Yes" ? ' 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="transaction_type">Transaction Type</label>
                              <input type="text" name="transaction_type" id="trasaction-type" class="form-control m-input" value="{{ data.getTransType|default('') }}" disabled>
                              <div class="form-control-feedback hide" data-field="service_type"></div>
                          </div>
                          <div class="col-lg-3">
                              <label data-field="mode_of_payment">Mode of Payment</label>
                              <input type="text" name="mode_of_payment" id="mode-of-payment" class="form-control m-input" value="{{ data.getPaymentMethod|default('') }}" disabled>
                              <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="{{ data.getTransDate|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">Delivery Date</label>
                            <div class="input-group date dp">
                                <input type="text" name="date_delivery_date" class="form-control m-input" value="{{ data.getDeliveryDate|default('') }}" 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_delivery_date"></div>
                        </div>
                        <div class="col-lg-3">
                            <label data-field="date_schedule">Delivery Time</label>
                            <div class="input-group">
                                <input type="text" name="date_delivery_time" class="form-control m-input tp" value="{{ data.getDeliveryTime|default('') }}" 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_delivery_time"></div>
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-lg-6">
                            <label data-field="agent_notes">Agent Notes</label>
                            <textarea name="agent_notes" class="form-control m-input" rows="15" disabled>{{ data.getAgentNotes1 }}</textarea>
                            <div class="form-control-feedback hide" data-field="agent_notes"></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>
                                <input type="text" name="transaction_origin" id="trasaction-origin" class="form-control m-input" value="{{ data.getOrigin|default('') }}" disabled>
                                <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">Delivery Instructions</label>
                                <textarea name="delivery_instructions" class="form-control m-input" rows="4" disabled>{{ data.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="prepared_by" class="form-control m-input" value="{{ obj.getPreparedBy|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="dispatched_by" class="form-control m-input" value="{{ data.getDispatchedBy|default('') }}" disabled>
                                <div class="form-control-feedback hide" data-field="date_transaction"></div>
                            </div>
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-lg-6">
                            <label data-field="stage">Status</label>
                            <input type="text" name="stage" class="form-control m-input" value="{{ data.getStage|default('') }}" disabled>
                            <div class="form-control-feedback hide" data-field="stage"></div>
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-lg-6">
                            <label data-field="cancel_reason">Reason for Cancellation</label>
                            <textarea name="cancel_reason" class="form-control m-input" rows="4" disabled>{{ data.getCancelReason|default('') }}</textarea>
                            <div class="form-control-feedback hide" data-field="cancel_reason"></div>
                        </div>
                        <div class="col-lg-6">
                            <label data-field="cancel_reason_specify">Details for Cancellation</label>
                            <textarea name="cancel_reason_specify" class="form-control m-input" rows="4" disabled>{{ data.getCancelReasonSpecify|default('') }}</textarea>
                            <div class="form-control-feedback hide" data-field="cancel_reason_specify"></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</label>
                            <textarea name="delivery_address" class="form-control m-input" rows="4" disabled>{{ data.getDeliveryAddress|default('') }}</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" disabled>{{ data.getLandmark|default('') }}</textarea>
                            <div class="form-control-feedback hide" data-field="landmark"></div>
                        </div>
                   </div>
                </div>
            </form>
        </div>
    </div>
{% endblock %}