home2day

{% extends "base.html" %}
{% load static %}

{% block content %}

<section class="my-4">
    <div class="container">
        <div class="row parent-row no-gutters">
        <div class="col-lg-6 col-md-6 col-xs-12 px-5 pt-3">
          <div class="row">
            <div class="col-md-6">
                <h4 class="logo-text mt-3">Post Office Item</h4>
                <hr>
            </div>
          </div>

        <form id="regForm" action="{% url 'PickandDrop' %}" method="post">
            {% csrf_token %}
            <!-- One "tab" for each step in the form: -->
            <div class="tab">
                <small class="title mb-4" style="color: #270e3f;">Location Information</small>
                <div class="form-row">
                    <div class="col-md-12">
                        <div class="form-group has-search">
                            <span class="fa fa-map-pin form-control-feedback"></span>
                            <input type="text" id="origin-input" name="origin_location_name" class="form-control my-2 p-2"
                            placeholder="Pickup Post Office/Location" required />
                        </div>
                    </div>
                </div>

                <div class="form-row">
                    <div class="col-md-12">
                        <div class="form-group has-search">
                            <span class="fa fa-truck form-control-feedback"></span>
                            <input type="text" id="destination-input" name="delivery_location" class="form-control my-2 p-2"
                            placeholder="Destination Location" required>
                        </div>
                    </div>
                </div>

            </div>

            <div class="tab">
                <small class="title" style="color: #270e3f;">Package Information</small>

                <div class="form">
                    <div class="col-md-12">
                        <div class="form-group has-search">
                            <span class="fa fa-info form-control-feedback"></span>
                            <input type="text" name="name" class="controls form-control my-2 p-2" placeholder="Enter Item Name" id="orderItemInput">
                                    <select id="orderPackageSelect">
                                    <option value="" disabled selected>Select Your Package Option</option>
                                    <option value="package1">Below 1kg</option>
                                    <option value="package2">Between 1.1kg to 10kg</option>
                                    <option value="package3">Above 10kg</option>
                                   </select>
                            <button onclick="getDistance(submitOrder)">Add</button>
                            <button onclick="removeOrder()">Remove</button>

                         <div id="result"></div>
                         <div id="price">

                         </div>
                         <div id="totalPrice"></div>
                        </div>
                    </div>
                </div>

                <div class="form-row">
                    <div class="col-md-12">
                        <div class="mb-3">
                            <label for="packagespecifics" class="form-label">Package Description</label>
                            <textarea class="form-control" id="deliveryspecifics" name="description" rows="3"></textarea>
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-md-12">
                        <div class="mb-3">
                            <label for="packagespecifics" class="form-label">Delivery Note</label>
                            <textarea class="form-control" id="deliverynote" name="delivery_note" rows="3"></textarea>
                        </div>
                    </div>
                </div>
                <div class="form-row">
                    <div class="col-md-12">
                        <div class="mb-3">
                            <label for="packagespecifics" class="form-label">Delivery Location Description</label>
                            <textarea class="form-control" name="delivery_location_description" id="deliveryspecifics" rows="3">
                            </textarea>
                        </div>
                    </div>
                </div>

            </div>

            <div class="tab">
                <small class="title mb-4" style="color: #270e3f;">Sender Information</small>
                <div class="form-row">
                    <div class="col-md-12">
                        <div class="form-group has-search">
                            <span class="fa fa-user form-control-feedback"></span>
                            <input type="text" id="sendername" name="sender_name"
                            class="form-control my-2 p-2" placeholder="Sender's Name" required>
                        </div>
                    </div>
                </div>

                <div class="form-row">
                    <div class="col-md-12">
                        <div class="form-group has-search">
                            <span class="fa fa-phone form-control-feedback"></span>
                            <input type="text" id="senderphone" name="sender_phone"
                            class="form-control my-2 p-2" placeholder="Sender's Phone Number" required>
                        </div>
                    </div>
                </div>

                <div class="form-row">
                    <div class="col-md-12">
                        <div class="form-group has-search">
                            <span class="fa fa-id-card form-control-feedback"></span>
                            <input type="text" id="senderid" name="sender_id_number" class="form-control my-2 p-2"
                            placeholder="Sender's National ID/Passport" required>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab">
                <small class="title mb-4" style="color: #270e3f;">Recipient Information</small>

                <div class="form-row">
                    <div class="col-md-12">
                        <div class="form-group has-search">
                            <span class="fa fa-user form-control-feedback"></span>
                            <input type="text" id="receivername" name="recipient_name"
                            class="form-control my-2 p-2" placeholder="Recipient Name" required>
                        </div>
                    </div>
                </div>

                <div class="form-row">
                    <div class="col-md-12">
                        <div class="form-group has-search">
                            <span class="fa fa-phone form-control-feedback"></span>
                            <input type="text" id="receiverphone" name="recipient_phone"
                            class="form-control my-2 p-2" placeholder="Recipient Number" required>
                        </div>
                    </div>
                </div>

                <div class="form-row">
                    <div class="col-md-12">
                        <div class="form-group has-search">
                            <span class="fa fa-id-card form-control-feedback"></span>
                            <input type="text" id="receiverid" name="recipient_id_number" class="form-control my-2 p-2"
                            placeholder="Recipient National ID/Passport" required>
                            <p>Total Distance : <span id="dist"></span></p>
                            <p>Total Amount : <span id="tlAmount"></span></p>
                        </div>
                    </div>
                </div>


            </div>


            <div style="overflow:auto;" class="col-md-12">
                <div style="float:right;">
                        <button type="button" id="nextBtn" onclick="nextPrev(1)"
                        class="browsebtn mt-2 mb-2">Next</button>
                </div>
            </div>

            <!-- Circles which indicates the steps of the form: -->
            <div style="text-align:center;margin-top:40px;">
                <span class="step"></span>
                <span class="step"></span>
                <span class="step"></span>
              <span class="step"></span>
            </div>


            <!-- Hiddens -->
            <input type="hidden" name="order_amount" id="orderAmountInput">
            <input type="hidden" id="delivery_latlng-field" name="delivery_latlng" value="">
            <input type="hidden" id="origin_latlng-field" name="origin_lat_lon" value="">
            <input type="hidden" id="distance-field" name="distance" value="">

        </form>

    </div>

    <div class="col-lg-6 col-md-6 col-xs-12 d-none d-sm-block">
        <div id="map">

        </div>

    </div>
    </div>

</div>
</section>

 <script src="{% static 'customers/js/maps.js' %}"></script>
{% endblock content %}

{% block page_script %}
<script src="{% static 'customers/js/form.js' %}"></script>
<script src="{% static 'customers/js/pndadd.js' %}"></script>
<script src="{% static 'customers/js/validate.js' %}"></script>
<script src="{% static 'customers/js/requests.js' %}"></script>
{% endblock page_script %}