{% extends 'main.html' %}
{% load static %}

{% block title %} Shiftingbd | Courier-Service {% endblock title %}

{% block content %}
 <!-- page-title -->
 <div class="cmt-page-title-row">
    <div class="cmt-page-title-row-inner">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-12">
            <div class="page-title-heading">
              <h2 class="title">Courier</h2>
            </div>
            <div class="breadcrumb-wrapper">
              <span>
                <a title="Homepage" href="{% url 'home' %}">Home</a>
              </span>
              <span>Courier</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- page-title end-->

  <!--site-main start-->
  <div class="site-main">

    <section class="service-text pt-50">
       <div class="container">
         <div class="row">
                <div class="col-md-6">
                    {% for couriObj in couriObj %}
                    <div class="courier ser-section">
                        <h2>{{ couriObj.title }} :</h2>
                    </div>
                    {% endfor %}
                    <div class="courier service-sec">
                      <ul class="courier service-ppt">
                        {% for serVice in serVice %}
                        <li>
                             <span class="icon">
                                <i class="fas fa-check"></i>
                            </span>
                            {{ serVice.service_title }}
                        </li>
                        {% endfor %}
                    </ul>
                    </div>
                </div>
                <div class="col-md-6">
                    {% for couriObj in couriObj %}
                   <div class="ser-img pt-50">
                     <img class="w-100" src="{{ couriObj.top_image.url }}" alt="">
                   </div>
                   {% endfor %}
                </div>
       </div>
    </section>

     <!-- Calculate Your Cost -->
<section class="calculate pt-80">
    <div class="theme-container container">

        <div class="row">
            {% for couriObj in couriObj %}
            <div class="col-md-6 text-center">
                <img src="{{ couriObj.site_image.url }}" alt="" class="wow slideInLeft w-100" data-wow-offset="50" data-wow-delay=".20s" />
            </div>
            {% endfor %}
            <div class="col-md-6">
                <div class="pad-10"></div>
                <h2 class="section-title pb-10 wow fadeInUp own-bgGradient" data-wow-offset="50" data-wow-delay=".20s"> COST CALCULATOR</h2>

                <div class="calculate-form">
                    <form class="row">
                        <div class="form-group wow fadeInUp d-flex" data-wow-offset="50" data-wow-delay=".20s">
                            <div class="col-sm-3"> <label class="title-2"> height (cm): </label></div>
                            <div class="col-sm-9"> <input data-bind="in:value, f: float" data-name="height" type="text" placeholder="" class="form-control"> </div>
                        </div>
                        <div class="form-group wow fadeInUp d-flex" data-wow-offset="50" data-wow-delay=".20s">
                            <div class="col-sm-3"> <label class="title-2"> width (cm): </label></div>
                            <div class="col-sm-9"> <input data-bind="in:value, f: float" data-name="width" type="text" placeholder="" class="form-control"> </div>
                        </div>
                        <div class="form-group wow fadeInUp d-flex" data-wow-offset="50" data-wow-delay=".20s">
                            <div class="col-sm-3"> <label class="title-2"> depth (cm): </label></div>
                            <div class="col-sm-9"> <input data-bind="in:value, f: float" data-name="depth" type="text" placeholder="" class="form-control"> </div>
                        </div>
                        <div class="form-group wow fadeInUp d-flex" data-wow-offset="50" data-wow-delay=".20s">
                            <div class="col-sm-3"> <label class="title-2"> weight (kg): </label></div>
                            <div class="col-sm-9"> <input data-bind="in:value, f: float" data-name="weight" type="text" placeholder="" class="form-control"> </div>
                        </div>
                        <div class="form-group wow fadeInUp d-flex" data-wow-offset="50" data-wow-delay=".20s">
                            <div class="col-sm-3"> <label class="title-2"> location: </label></div>
                            <div class="col-sm-9 d-flex">
                                <div class="col-sm-6">
                                    <input type="text" data-bind="in:value" data-name="locations[from]" placeholder="From" class="form-control from fw-600">
                                </div>
                                <div class="col-sm-6">
                                    <input type="text" data-bind="in:value" data-name="locations[to]" placeholder="To" class="form-control to fw-600">
                                </div>
                            </div>
                        </div>
                        <div class="form-group wow fadeInUp d-flex" data-wow-offset="50" data-wow-delay=".20s">
                            <div class="col-sm-3"> <label class="title-2"> Package: </label></div>
                            <div class="col-sm-9">
                                <div class="form-group">
                                    <select data-bind="in:value" data-name="package" class="selectpicker form-control" data-live-search="true" data-width="100%" data-toggle="tooltip" title="select your package">
                                        <option value="cost + 80">Regular Delivery</option>
                                        <option value="cost + 120">Express Delivery</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group wow fadeInUp" data-wow-offset="50" data-wow-delay=".20s">
                            <div class="col-sm-9 col-xs-12 pull-right">
                                <div class="btn-1 own-bgGradient"> <span> Total Cost: </span>
                                    <span data-bind="out:price, f:currency" data-name="cost" class="btn-1 dark">
                                        <span class="pr-sign">-&nbsp;</span> Tk <span class="pr-wrap" style="display: none;"><span class="pr">0</span></span>
                                    </span>
                                </div>
                            </div>
                        </div>
                        <div class="pricing-condition">
                            <ul>
                                {% for serVice in Cost %}
                                <li><i class="fa fa-check-circle"></i>  
                                    {{serVice.cost_title}}
                                </li>
                                {% endfor %}
                            </ul>
                        </div>

                    </form>
                </div>
                <div class="pt-80 hidden-lg"></div>
            </div>
        </div>
    </div>
</section>
<!-- /.Calculate Your Cost -->

</div>



{% endblock %}