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

{% block title %} Shiftingbd | Truck-details {% endblock title %}

{% block content %}
<div class="site-main">
 <!-- 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">Truck Details</h2>
                    </div>
                    <div class="breadcrumb-wrapper">
                        <span>
                            <a title="Homepage" href="{% url 'home' %}">Home</a>
                        </span>
                        <span>Truck Details</span>
                    </div>
                </div>
            </div>
        </div>
    </div>                    
</div><!-- page-title end-->

<section class="py-5">
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="truck-left-details">
                <h5>Location Details</h5>
              <form class="action">
                        <div class="form-group">
                            <label for="text">Load</label>
                            <span class="map-i d-flex">
                                <i class="fas fa-arrow-circle-down"></i>
                                <input type="text" placeholder="Enter Load Location" required="" class="form-control trc-d">
                            </span>
                            
                        </div>
                        <div class="form-group">
                            <label for="text">Unload</label>
                           <span class="map-icon d-flex">
                             <i class="fas fa-arrow-circle-down"></i>
                             <input type="text" placeholder="Enter Unload Location" required="" class="form-control trc-d">
                           </span>
                        </div>
                         <button class="btn-1 truck-left">Update</button>
                </form>
               
            </div>
        </div>
        <div class="col-md-8">
            <div class="truck-de-right">
                <h4>Select Your Truck</h4>
            </div>
            
            <div class="cmt-tabs">
                <ul class="tabs d-md-flex portfolio-filter pt-2">
                    <li class="tab"><a href="#" data-filter=".pickup">PickUp Truck</a></li>
                    <li class="tab"><a href="#" data-filter=".medium">Medium Truck</a></li>
                    <li class="tab"><a href="#" data-filter=".large">Large Truck</a></li>
                    <li class="tab"><a href="#" data-filter=".pickupcovervan">PickUp Cover Van</a></li>
                    <li class="tab"><a href="#" data-filter=".mediumcovervan">Medium Cover Van</a></li>
                    <li class="tab"><a href="#" data-filter=".largecovervan">Large Cover Van</a></li>
                </ul>
                
                <div class="content-tab">
                    <div class="row multi-columns-row cmt-boxes-spacing-10px isotope-project">

                        <div class="cmt-box-col-wrapper pickup">
                            <div class="featured-imagebox featured-imagebox-portfolio pt-40">
                                    <h5>PickUp Truck</h5>
                                    {% for PickUp in PickUp %}
                                    <div class="text pickup-details d-flex">
                                        <img src="{{ PickUp.image.url }}" alt="">
                                        <div class="pickup-txt-details">
                                        <h5>{{ PickUp.truck_name }}</h5>
                                        <h6>{{ PickUp.truck_title }}</h6>
                                        <p>{{ PickUp.descriptions }}</p>
                                        </div>
                                        <div class="pickup-amount">
                                            <p><strong class="inside">Inside Dhaka</strong></p>
                                            <p>Fixed Amount: {{ PickUp.fixed_amount }}TK</p>
                                            <p class="per-km">Per KM: {{ PickUp.per_km_amount }}TK</p>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                        </div> 
                        <!-- Pickup End -->
                        <div class="cmt-box-col-wrapper medium">
                            <div class="featured-imagebox featured-imagebox-portfolio pt-40">
                                    <h5>Medium Truck</h5>
                                    {% for Mediun in Mediun %}
                                    <div class="text pickup-details d-flex">
                                        <img src="{{ Mediun.image.url }}" alt="">
                                        <div class="pickup-txt-details">
                                        <h5>{{ Mediun.truck_name }}</h5>
                                        <h6>{{ Mediun.truck_title }}</h6>
                                        <p>{{ Mediun.descriptions }}</p>
                                        </div>
                                        <div class="pickup-amount">
                                            <p><strong class="inside">Inside Dhaka</strong></p>
                                            <p>Fixed Amount: {{ Mediun.fixed_amount }}TK</p>
                                            <p class="per-km">Per KM: {{ Mediun.per_km_amount }}TK</p>
                                        </div>
                                    </div>
                                    {% endfor %}

                                </div>
                        </div> 
                        <!-- Medium End -->
                        <div class="cmt-box-col-wrapper large">
                            <div class="featured-imagebox featured-imagebox-portfolio pt-40">
                                    <h5>Large Truck</h5>
                                    {% for Large in Large %}
                                    <div class="text pickup-details d-flex">
                                        <img src="{{ Large.image.url }}" alt="">
                                        <div class="pickup-txt-details">
                                        <h5>{{ Large.truck_name }}</h5>
                                        <h6>{{ Large.truck_name }}</h6>
                                        <p>{{ Large.descriptions }}</p>
                                        </div>
                                        <div class="pickup-amount">
                                            <p><strong class="inside">Inside Dhaka</strong></p>
                                            <p>Fixed Amount: {{ Large.fixed_amount }}TK</p>
                                            <p class="per-km">Per KM: {{ Large.per_km_amount }}TK</p>
                                        </div>
                                    </div>
                                    {% endfor %}

                                </div>
                        </div>
                        <!-- Large End -->
                        <div class="cmt-box-col-wrapper pickupcovervan">
                            <div class="featured-imagebox featured-imagebox-portfolio pt-40">
                                    <h5>PickUp Cover Van</h5>
                                    {% for Cover in Cover %}
                                    <div class="text pickup-details d-flex">
                                        <img src="{{ Cover.image.url }}" alt="">
                                        <div class="pickup-txt-details">
                                        <h5>{{ Cover.truck_name }}</h5>
                                        <h6>{{ Cover.truck_title }}</h6>
                                        <p>{{ Cover.descriptions }}</p>
                                        </div>
                                        <div class="pickup-amount">
                                            <p><strong class="inside">Inside Dhaka</strong></p>
                                            <p>Fixed Amount: {{ Cover.fixed_amount }}TK</p>
                                            <p class="per-km">Per KM: {{ Cover.per_km_amount }}TK</p>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                        </div> 
                        <!-- PickUp Cover Van End -->
                        <div class="cmt-box-col-wrapper mediumcovervan">
                            <div class="featured-imagebox featured-imagebox-portfolio pt-40">
                                    <h5>Medium Cover Van</h5>
                                    {% for MediumCover in MediumCover %}
                                    <div class="text pickup-details d-flex">
                                        <img src="{{ MediumCover.image.url }}" alt="">
                                        <div class="pickup-txt-details">
                                        <h5>{{ MediumCover.truck_name }}</h5>
                                        <h6>{{ MediumCover.truck_title }}</h6>
                                        <p>{{ MediumCover.descriptions }}</p>
                                        </div>
                                        <div class="pickup-amount">
                                            <p><strong class="inside">Inside Dhaka</strong></p>
                                            <p>Fixed Amount: {{ MediumCover.fixed_amount }}TK</p>
                                            <p class="per-km">Per KM: {{ MediumCover.per_km_amount }}TK</p>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                        </div> 
                        <!-- Medium Cover Van End -->
                        <div class="cmt-box-col-wrapper largecovervan">
                            <div class="featured-imagebox featured-imagebox-portfolio pt-40">
                                    <h5>Large Cover Van</h5>
                                    {% for LargeCover in LargeCover %}
                                    <div class="text pickup-details d-flex">
                                        <img src="{{LargeCover.image.url}}" alt="">
                                        <div class="pickup-txt-details">
                                        <h5>{{ LargeCover.truck_name }}</h5>
                                        <h6>{{ LargeCover.truck_title }}</h6>
                                        <p>{{ LargeCover.descriptions }}</p>
                                        </div>
                                        <div class="pickup-amount">
                                            <p><strong class="inside">Inside Dhaka</strong></p>
                                            <p>Fixed Amount: {{ LargeCover.fixed_amount }}TK</p>
                                            <p class="per-km">Per KM: {{ LargeCover.per_km_amount }}TK</p>
                                        </div>
                                    </div>
                                    {% endfor %}
                                </div>
                        </div> 
                        <!-- Large Cover Van End -->

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</section>

</div>

{% endblock %}