Fix the look of the details form. #207

This commit is contained in:
Korina Cordero 2019-04-30 12:27:41 +00:00
parent 55bd686b34
commit 2a31a2823d

View file

@ -11,217 +11,239 @@
</div> </div>
<!-- END: Subheader --> <!-- END: Subheader -->
<div class="m-content"> <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>
</div>
</div>
</div>
<!--Begin::Section--> <!--Begin::Section-->
<div class="row"> <div class="row">
<form id="row-form" class="m-form m-form--fit m-form--label-align-right"> <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-portlet__body">
<div class="m-form__heading"> <div class="m-form__section{{ mode == 'details' }}">
<h3 class="m-form__heading-title"> <div class="m-form__heading">
Customer Details <h3 class="m-form__heading-title">
</h3> Customer Details
</div> </h3>
<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>
<div class="col-lg-6"> <div class="form-group m-form__group row">
<label data-field="customer_last_name">Last Name</label> <div class="col-lg-6">
<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> <label data-field="customer_first_name">First Name</label>
<div class="form-control-feedback hide" data-field="customer_last_name"></div> <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> <div class="form-control-feedback hide" data-field="customer_first_name"></div>
</div> </div>
<div class="form-group m-form__group row"> <div class="col-lg-6">
<div class="col-lg-6"> <label data-field="customer_last_name">Last Name</label>
<label data-field="customer_phone_mobile">Mobile Phone</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="input-group m-input-group"> <div class="form-control-feedback hide" data-field="customer_last_name"></div>
<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> </div>
<div class="col-lg-6"> <div class="form-group m-form__group row">
<label data-field="customer_phone_landline">Landline</label> <div class="col-lg-6">
<div class="input-group m-input-group"> <label data-field="customer_phone_mobile">Mobile Phone</label>
<span class="input-group-addon">+63</span> <div class="input-group m-input-group">
<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> <span class="input-group-addon">+63</span>
<div class="form-control-feedback hide" data-field="customer_phone_landline"></div> <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>
</div> </div>
<div class="form-group m-form__group row"> <div class="m-form__section">
<div class="col-lg-6"> <div class="m-form__heading">
<label data-field="customer_contact">Contact</label> <h3 class="m-form__heading-title">
<div class="input-group m-input-group"> Vehicle Details
<span class="input-group-addon">+63</span> </h3>
<input type="text" name="customer_contact" id="customer-contact" class="form-control m-input" value="{{ data.getCustContact|default('') }}" data-vehicle-field="1" disabled> </div>
<div class="form-control-feedback hide" data-field="customer_contact"></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>
</div> </div>
</div> <div class="m-form__section">
<div class="m-form__section"> <div class="m-form__heading">
<div class="m-form__heading"> <h3 class="m-form__heading-title">
<h3 class="m-form__heading-title"> Transaction Details
Vehicle Details </h3>
</h3> <span class="m-switch m-switch--icon block-switch">
</div> <label>
<div class="form-group m-form__group row"> <input type="checkbox" name="flag_advance" id="flag-advance" value="1"{{ data.getAdvanceOrder == "Yes" ? ' checked' }} disabled>
<div class="col-lg-3"> <label class="switch-label">This is an advance order</label>
<label data-field="vmfg">Manufacturer</label> <span></span>
<input type="text" name="vmfg" id="vmfg" class="form-control m-input" value="{{ data.getCarBrand|default('') }}" data-vehicle-field="1" disabled> </label>
<div class="form-control-feedback hide" data-field="vmfg"></div> </span>
</div> </div>
<div class="col-lg-3"> <div class="form-group m-form__group row">
<label data-field="vehicle_make">Make</label> <div class="col-lg-6">
<input type="text" name="vehicle_make" id="vehicle-make" class="form-control m-input" value="{{ data.getCarMake|default('') }}" data-vehicle-field="1" disabled> <label data-field="transaction_type">Transaction Type</label>
<div class="form-control-feedback hide" data-field="vehicle_make"></div> <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>
<div class="col-lg-3"> <div class="form-group m-form__group row">
<label data-field="vehicle_year">Model Year</label> <div class="col-lg-6">
<input type="text" name="vehicle_year" id="vehicle-year" class="form-control m-input" value="{{ data.getCarModel|default('') }}" data-vehicle-field="1" disabled> <label>Transaction Date</label>
<div class="form-control-feedback hide" data-field="vehicle_year"></div> <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> <div class="form-control-feedback hide" data-field="date_transaction"></div>
</div> </div>
<div class="form-group m-form__group row"> <div class="col-lg-3">
<div class="col-lg-3"> <label data-field="date_schedule">Delivery Date</label>
<label data-field="vehicle_plate">Plate #</label> <div class="input-group date dp">
<input type="text" name="vehicle_plate" id="vehicle-plate" class="form-control m-input" value="{{ data.getPlateNumber|default('') }}" data-vehicle-field="1" disabled> <input type="text" name="date_delivery_date" class="form-control m-input" value="{{ data.getDeliveryDate|default('') }}" readonly placeholder="Select a date" disabled>
<div class="form-control-feedback hide" data-field="vehicle_color"></div> <span class="input-group-addon">
</div> <i class="la la-calendar glyphicon-th"></i>
<div class="col-lg-3"> </span>
<label data-field="vehicle_color">Color</label> </div>
<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="date_delivery_date"></div>
<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>
<div class="form-control-feedback hide" data-field="date_delivery_date"></div> <div class="col-lg-3">
</div> <label data-field="date_schedule">Delivery Time</label>
<div class="col-lg-3"> <div class="input-group">
<label data-field="date_schedule">Delivery Time</label> <input type="text" name="date_delivery_time" class="form-control m-input tp" value="{{ data.getDeliveryTime|default('') }}" readonly placeholder="Select a time" disabled>
<div class="input-group"> <span class="input-group-addon">
<input type="text" name="date_delivery_time" class="form-control m-input tp" value="{{ data.getDeliveryTime|default('') }}" readonly placeholder="Select a time" disabled> <i class="la la-clock-o glyphicon-th"></i>
<span class="input-group-addon"> </span>
<i class="la la-clock-o glyphicon-th"></i> </div>
</span> <div class="form-control-feedback hide" data-field="date_delivery_time"></div>
</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>
<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>
<div class="form-group m-form__group row"> <div class="m-form__seperator m-form__seperator--dashed"></div>
<div class="col-lg-6"> <div class="m-form__section">
<label data-field="stage">Status</label> <div class="m-form__heading">
<input type="text" name="stage" class="form-control m-input" value="{{ data.getStage|default('') }}" disabled> <h3 class="m-form__heading-title">
<div class="form-control-feedback hide" data-field="stage"></div> Location
</h3>
</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>{{ 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> </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> </div>
</form> </form>
</div> </div>