{% 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>
                                <h3 class="m-portlet__head-text">
                                    Legacy Job Order 
                                </h3>
                            </div>
                        </div>
                    </div>
                    <!--Begin::Section-->
                    <form id="row-form" class="m-form m-form--fit m-form--label-align-right m-form--group-seperator-dashed">
                        <div class="m-portlet__body">
                            <br>
                            <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" no-border>
                                <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">{% trans %}country_code_prefix{% endtrans %}</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">{% trans %}country_code_prefix{% endtrans %}</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">{% trans %}country_code_prefix{% endtrans %}</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 class="col-lg-3">
                                    <label data-field="purchase_date">Purchase Date</label>
                                    <input type="text" name="date_purchase" class="form-control m-input" value="{{ data.getDatePurchase|default('') }}" disabled>
                                    <div class="form-control-feedback hide" data-field="date_purchase"></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="{{ data.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 class="form-group m-form__group row">
                               <div class="col-lg-12">
                                   {% if data.getRows is empty %}
                                       <div class="m-alert m-alert--icon m-alert--icon-solid m-alert--outline alert alert-brand" role="alert">
                                           <div class="m-alert__icon">
                                               <i class="flaticon-exclamation-2"></i>
                                               <span></span>
                                           </div>
                                           <div class="m-alert__text">
                                               No transactions for this legacy job order.
                                           </div>
                                       </div>
                                   {% else %}
                                       <table class="table table-striped m-table">
                                           <thead>
                                               <tr class="m-table__row--brand">
                                                   <th>ID</th>
                                                   <th>Item</th>
                                                   <th>Quantity</th>
                                                   <th>Price</th>
                                                   <th>Price Level</th>
                                                   <th>Status</th>
                                                   <th>Account</th>
                                                   <th>Enrollee</th>
                                               </tr>
                                           </thead>
                                           <tbody>
                                               {% for row in data.getRows %}
                                                   <tr>
                                                       <td>{{ row.getID|default("") }}</td>
                                                       <td>{{ row.getItem|default('') }}</td>
                                                       <td>{{ row.getQuantity|default('') }}</td>
                                                       <td>{{ row.getPrice|default('') }}</td>
                                                       <td>{{ row.getPriceLevel|default('') }}</td>
                                                       <td>{{ row.getStatus|default('') }}</td>
                                                       <td>{{ row.getAccount|default('') }}</td>
                                                       <td>{{ row.getEnrollee|default('') }}</td>
                                                   </tr>
                                               {% endfor %}
                                           </tbody>
                                       </table>
                                   {% endif %}
                               </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.getAddress|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>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endblock %}