{% extends 'templateBooking.html.twig' %}
{% block title %} Create Shipment - {{ parent() }} {% endblock %}
{% macro niceForm(form) %}
<div class="row">
<div class="col-lg-6">
{{ form_row(form.reference) }}
</div>
<div class="col-lg-6">
</div>
</div>
{% endmacro niceForm %}
{% macro niceFormItems(form) %}
<div class="row">
<div class="col-lg-7">
{{ form_row(form.item) }}
</div>
<div class="col-lg-5">
{{ form_row(form.manufacturerId) }}
</div>
</div>
<div class="row">
<div class="col-lg-3">
{{ form_row(form.quantity) }}
</div>
<div class="col-lg-2">
{{ form_row(form.unit) }}
</div>
<div class="col-lg-2">
{{ form_row(form.value) }}
</div>
<div class="col-lg-2">
{{ form_row(form.currency) }}
</div>
<div class="col-lg-3">
{{ form_row(form.weight) }}
</div>
</div>
<div class="row">
<div class="col-lg-3">
{{ form_row(form.itemMade) }}
</div>
<div class="col-lg-2">
{{ form_row(form.commodityCode) }}
</div>
</div>
{% endmacro niceFormItems %}
{% macro niceFormPackaging(form) %}
<div class="row">
<div class="col-lg-2">
{{ form_row(form.packaging) }}
</div>
<div class="col-lg-2">
{{ form_row(form.quantity) }}
</div>
<div class="col-lg-2">
{{ form_row(form.weight) }}
</div>
<div class="col-lg-2">
{{ form_row(form.length) }}
</div>
<div class="col-lg-2">
{{ form_row(form.width) }}
</div>
<div class="col-lg-2">
{{ form_row(form.height) }}
</div>
</div>
{% endmacro niceFormPackaging %}
{% macro niceFormFromPhoneDetails(form) %}
<div class="row">
<div class="col-lg-3">
{{ form_row(form.phoneType) }}
</div>
<div class="col-lg-3">
{{ form_row(form.code) }}
</div>
<div class="col-lg-6">
{{ form_row(form.phoneNo) }}
</div>
</div>
{% endmacro niceFormFromPhoneDetails %}
{% macro niceFormToPhoneDetails(form) %}
<div class="row">
<div class="col-lg-3">
{{ form_row(form.phoneType) }}
</div>
<div class="col-lg-3">
{{ form_row(form.code) }}
</div>
<div class="col-lg-6">
{{ form_row(form.phoneNo) }}
</div>
</div>
{% endmacro niceFormToPhoneDetails %}
{% import _self as formMacros %}
{% import _self as formMacrosItems %}
{% import _self as formMacrosPackaging %}
{% import _self as formMacrosFromPhoneDetails %}
{% import _self as formMacrosToPhoneDetails %}
{% block body %}
{% apply inline_css %}
<style>
.custom-radio input[type="radio"] {
/* Hide the default radio button */
position: absolute;
top: 0;
left: 0;
visibility: hidden;
}
.custom-radio label {
/* Custom design for the radio button */
cursor: pointer;
padding: 1vh 18vh;
background-color: #d2d9db;
color: black;
display: inline-block;
margin-right: 2vh;
}
.custom-radio input[type="radio"]:checked + label {
/* Custom design for the checked radio button */
border: 1px solid white;
padding: 1vh 18vh;
background-color: rgb(54, 54, 54);
margin-right: 2vh;
color: #ffffff;
display: inline-block;
}
.switch-btn {
background-color: #642c8f;
border: none;
color: white;
padding: 5px 8px;
font-size: 14px;
cursor: pointer;
}
/* Darker background on mouse-over */
.switch-btn:hover {
background-color: #f05122;
color: white;
}
</style>
{% endapply %}
<!-- Title Start -->
<div class="app-page-title">
<div class="page-title-wrapper">
<div class="page-title-heading">
<div class="page-title-icon">
<i class="metismenu-icon pe-7s-diamond text-success">
</i>
</div>
<div><h3>Shipment Booking</h3>
</div>
</div>
<div class="page-title-actions">
<div class="d-inline-block dropdown">
</div>
</div>
</div>
</div>
{% for message in app.flashes('notice') %}
<div class="alert alert-info alert-dismissible">
<a href="#" class="close" data-dismiss="alert" aria-label="close">×</a>
<strong>{{ message }}</strong>
</div>
{% endfor %}
<!-- Title End -->
<!-- Tab Start -->
<div class="tab-content">
<!-- Table Tab Start -->
<div class="tab-pane tabs-animation fade show active" id="tab-content-0" role="tabpanel">
<div class="main-card1 mb-3 card1">
<div class="card-body"><h5 class="card-title">Create new Shipment</h5>
<div class="divider"></div>
{{ form_start(form) }}
<div class="card1">
<div class="card-header">
ADDRESS DETAILS
</div>
<div class="card-body">
<div class="form-row">
<div class="col-md-5 mb-4">
</div>
<div class="col-md-2 mb-2" style="text-align: center;">
<button type="button" class="switch-btn" id="switch_btn"><i class="fa fa-exchange"></i> Switch</button>
</div>
<div class="col-md-5 mb-4">
</div>
</div>
<div class="form-row">
<div class="col-md-5 mb-4">
<b>FROM</b>
<div class="divider"></div>
{{ form_row(form.fromName) }}
{{ form_row(form.fromCompany) }}
{{ form_row(form.fromCountry) }}
{{ form_row(form.fromAddress) }}
{{ form_row(form.fromAddressTwo) }}
{{ form_row(form.fromAddressThree) }}
<div class="form-row">
<div class="form-group col-md-4 mb-4">
{{ form_row(form.fromPostalCode) }}
</div>
<div class="form-group col-md-4 mb-4">
{{ form_row(form.fromCity) }}
</div>
<div class="form-group col-md-4 mb-4">
{{ form_row(form.fromState) }}
</div>
</div>
{{ form_row(form.fromEmail) }}
<div class="row" style="margin-top:20px;">
<strong>Add Contact Info</strong>
<div class="col-md-12" id = "fromPhoneDetails_list" data-prototype="{{ formMacros.niceFormFromPhoneDetails(form.fromPhoneDetails.vars.prototype)|e('html_attr') }}" style="margin-top:5px;">
{% for row in form.fromPhoneDetails %}
<div class="card">
<div class="card-header">
</div>
<div class="card-body">
{{ formMacros.niceFormFromPhoneDetails(row) }}
</div>
</div>
{% endfor %}
</div>
</div>
<br>
<div class="form-row">
<div class="form-group col-md-4 mb-4">
{{ form_row(form.fromEori) }}
</div>
<div class="form-group col-md-8 mb-8">
{{ form_row(form.fromEroino) }}
</div>
</div>
{{ form_row(form.fromVatTax) }}
</div>
<div class="col-md-2 mb-2">
<div class="d-flex align-items-center" style="height: 123vh;">
<div class="mx-auto border-right" style="height: 100%;">
</div>
</div>
</div>
<div class="col-md-5 mb-4">
<b>TO</b>
<div class="divider"></div>
{{ form_row(form.toName) }}
{{ form_row(form.toCompany) }}
{{ form_row(form.toCountry) }}
{{ form_row(form.toAddress) }}
{{ form_row(form.toAddressTwo) }}
{{ form_row(form.toAddressThree) }}
<div class="form-row">
<div class="form-group col-md-4 mb-4">
{{ form_row(form.toPostalCode) }}
</div>
<div class="form-group col-md-4 mb-4">
{{ form_row(form.toCity) }}
</div>
<div class="form-group col-md-4 mb-4">
{{ form_row(form.toState) }}
</div>
</div>
{{ form_row(form.toEmail) }}
<div class="row" style="margin-top:20px;">
<strong>Add Contact Info</strong>
<div class="col-md-12" id = "toPhoneDetails_list" data-prototype="{{ formMacros.niceFormToPhoneDetails(form.toPhoneDetails.vars.prototype)|e('html_attr') }}" style="margin-top:5px;">
{% for row in form.toPhoneDetails %}
<div class="card1">
<div class="card-header">
</div>
<div class="card-body">
{{ formMacros.niceFormToPhoneDetails(row) }}
</div>
</div>
{% endfor %}
</div>
</div>
<br>
<div class="form-row">
<div class="form-group col-md-4 mb-4">
{{ form_row(form.toEori) }}
</div>
<div class="form-group col-md-8 mb-8">
{{ form_row(form.toEorino) }}
</div>
</div>
{{ form_row(form.toVatTax) }}
</div>
</div>
</div>
</div>
<br>
<div class="card">
<div class="card-header">
Shipment Details
</div>
<div class="card-body">
<div class="form-row">
<div class="col-md-5 mb-4">
{{ form_row(form.shipmentDate) }}
</div>
<div class="col-md-1 mb-1">
</div>
<div class="col-md-5 mb-4">
{{ form_row(form.courier) }}
</div>
<div class="col-md-1 mb-1">
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-5 custom-radio">
<b>Shipment Type</b>
{{ form_row(form.shipmentType) }}
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-5 custom-radio">
<b>What are you shipping?</b>
{{ form_row(form.productType) }}
</div>
</div>
<div class="form-row">
<div class="col-md-5 mb-4">
{{ form_row(form.describeShipment) }}
</div>
<div class="col-md-1 mb-1">
</div>
<div class="col-md-5 mb-4">
</div>
<div class="col-md-1 mb-1">
</div>
</div>
</div>
</div>
{#
<div class="row" style="margin-top:20px;">
<strong>Add Shipment References</strong>
<div class="col-md-12" id = "shipmentReferences_list" data-prototype="{{ formMacros.niceForm(form.shipmentReferences.vars.prototype)|e('html_attr') }}" style="margin-top:5px;">
{% for row in form.shipmentReferences %}
<div class="card">
<div class="card-header">
Shipment References
</div>
<div class="card-body">
{{ formMacros.niceForm(row) }}
</div>
</div>
{% endfor %}
</div>
</div> #}
<div id="packagePortion" style="display:none;"> {# Document Hidden div start #}
<div class="row" style="margin-top:20px;">
<b>Items Details</b>
<div class="col-md-12" id = "itemsDetails_list" data-prototype="{{ formMacrosItems.niceFormItems(form.shipmentItems.vars.prototype)|e('html_attr') }}" style="margin-top:5px;">
Describe each unique item in your shipment separately
<br>
{% for row in form.shipmentItems %}
<div class="card">
<div class="card-header">
Item
</div>
<div class="card-body">
{{ formMacrosItems.niceFormItems(row) }}
</div>
</div>
{% endfor %}
</div>
</div>
<br>
<div class="form-row">
<div class="col-md-7 mb-7">
{{ form_row(form.itemSummary) }}
</div>
<div class="col-md-6 mb-6">
</div>
</div>
<br>
<div class="card">
<div class="card-header">
Customs Invoice Details
</div>
<div class="card-body">
<div class="form-row">
<div class="col-md-12 mb-5 custom-radio">
{{ form_row(form.customsInvoice) }}
</div>
</div>
<div class="form-row">
<div class="col-md-5 mb-4">
{{ form_row(form.invoiceNo) }}
</div>
<div class="col-md-1 mb-1">
</div>
<div class="col-md-5 mb-4">
{{ form_row(form.additionalInvoiceInfo) }}
</div>
<div class="col-md-1 mb-1">
</div>
</div>
</div>
</div>
</div> {# Document Hidden div end #}
<div class="row" style="margin-top:20px;">
<b>Select Packaging</b>
<div class="col-md-12" id = "shipmentPackaging_list" data-prototype="{{ formMacrosPackaging.niceFormPackaging(form.shipmentPackagings.vars.prototype)|e('html_attr') }}" style="margin-top:5px;">
{% for row in form.shipmentPackagings %}
<div class="card">
<div class="card-header">
</div>
<div class="card-body">
{{ formMacrosItems.niceFormPackaging(row) }}
</div>
</div>
{% endfor %}
</div>
</div>
<br>
<div class="card">
<div class="card-header">
Services
</div>
<div class="card-body">
<div class="form-row">
<div class="col-md-5 mb-4">
{{ form_row(form.servicese) }}
</div>
<div class="col-md-1 mb-1">
</div>
<div class="col-md-5 mb-4">
</div>
<div class="col-md-1 mb-1">
</div>
</div>
</div>
</div>
{# <br>
<div class="card">
<div class="card-header">
Who will pay?
</div>
<div class="card-body">
<div class="form-row">
<div class="col-md-5 mb-4">
{{ form_row(form.customer) }}
</div>
<div class="col-md-1 mb-1">
</div>
<div class="col-md-5 mb-4">
{{ form_row(form.dutyPayer) }}
</div>
<div class="col-md-1 mb-1">
</div>
</div>
<div class="form-row">
<div class="col-md-5 mb-4">
{{ form_row(form.paymentOptions) }}
</div>
<div class="col-md-1 mb-1">
</div>
<div class="col-md-5 mb-4" id="dutyThirdPartyDiv" style="display:none;">
{{ form_row(form.dutyAccountno) }}
</div>
<div class="col-md-1 mb-1">
</div>
</div>
</div>
</div> #}
<br>
<div class="card">
<div class="card-header">
Pickup Details
</div>
<div class="card-body">
<div class="form-row">
<div class="col-md-12 mb-5 custom-radio">
{{ form_row(form.schedulePickup) }}
</div>
</div>
<div id="pickupPortion" style="display:none;">
<div class="form-row">
<div class="col-md-5 mb-4">
{{ form_row(form.pickupDate) }}
</div>
<div class="col-md-1 mb-1">
</div>
<div class="col-md-5 mb-4">
{{ form_row(form.pickupShipment) }}
</div>
<div class="col-md-1 mb-1">
</div>
</div>
<div class="form-row">
<div class="col-md-5 mb-4">
{{ form_row(form.pickupWeight) }}
</div>
<div class="col-md-1 mb-1">
</div>
<div class="col-md-5 mb-4">
{{ form_row(form.instructions) }}
</div>
<div class="col-md-1 mb-1">
</div>
</div>
<b>PICKUP ADDRESS</b>
<div class="divider"></div>
<div class="form-row">
<div class="col-md-4 mb-4">
{{ form_row(form.pickupName) }}
</div>
<div class="col-md-4 mb-4">
{{ form_row(form.pickupCompany) }}
</div>
<div class="col-md-4 mb-4">
{{ form_row(form.pickupCountry) }}
</div>
</div>
<div class="form-row">
<div class="col-md-4 mb-4">
{{ form_row(form.pickupAddress) }}
</div>
<div class="col-md-4 mb-4">
{{ form_row(form.pickupAddressTwo) }}
</div>
<div class="col-md-4 mb-4">
{{ form_row(form.pickupAddressThree) }}
</div>
</div>
<div class="form-row">
<div class="col-md-4 mb-4">
<div class="form-row">
<div class="form-group col-md-4 mb-4">
{{ form_row(form.pickupPostalCode) }}
</div>
<div class="form-group col-md-4 mb-4">
{{ form_row(form.pickupCity) }}
</div>
<div class="form-group col-md-4 mb-4">
{{ form_row(form.pickupState) }}
</div>
</div>
</div>
<div class="col-md-4 mb-4">
{{ form_row(form.pickupEmail) }}
</div>
<div class="col-md-4 mb-4">
<div class="form-row">
<div class="form-group col-md-4 mb-4">
{{ form_row(form.pickupPhoneType) }}
</div>
<div class="form-group col-md-4 mb-4">
{{ form_row(form.pickupPhoneCode) }}
</div>
<div class="form-group col-md-4 mb-4">
{{ form_row(form.pickupPhone) }}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="margin-top:20px;">
<button class="btn btn-success"><i class="fa fa-save">{{ button_label|default(' Save') }}</i></button>
</div>
{{ form_end(form) }}
</div>
</div>
</div> <!-- Table Tab End -->
</div> <!-- Tab End -->
<div id="path_address_book_getaddressbookbyid" data-href="{{ path('app_address_book_getaddressbookbyid') }}"> </div>
<div id="path_describe_shipment_getDescribeShipmentByShippingId" data-href="{{ path('app_describe_shipment_getDescribeShipmentByShippingId') }}"> </div>
<div id="path_country_getcountrybyid" data-href="{{ path('app_country_getcountrybyid') }}"> </div>
<div id="path_packaging_shipment_getPackagingByCourierId" data-href="{{ path('app_packaging_shipment_getPackagingByCourierId') }}"> </div>
<div id="path_order_getDimensionInfoByPackagingId" data-href="{{ path('app_order_getDimensionInfoByPackagingId') }}"> </div>
{% endblock %}
{% block javascripts %}
{{ parent() }}
<script>
$(document).ready(function(){
document.body.onload = function() {
$('#shipmentRef').click();
$('#shipmentPack').click();
}
});
</script>
{% endblock %}