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

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


    <!--site-main start-->
    <div class="site-main">
        <!--introduction-section-->
         <!-- Track Location -->
    <section>
        <div class="theme-container container py-5">
            <div class="row">
                <div class="col-md-10 truck-line">
                    <div> 
                        {% if messages %}
                             {% for message in messages %}
                                <div class="alert alert-warning alert-dismissible fade show" role="alert">
                                     {{ message }}
                                </div>
                            {% endfor %}
                        {% endif %}
                    </div>
                    <h3 class="title-1">Hire Your Truck </h3>
                    <div class="row">
                        <form class="action d-flex">
                                <div class="form-group">
                                    <label for="text">Truck 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 truck-field">
                                       <!-- <a href="#"> <img class="view-map" src="images/current-location.svg" alt=""></a> -->
                                    </span>
                                    
                                </div>
                                <div class="form-group pl-30">
                                    <label for="text">Truck 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 truck-field">
                                   </span>
                                </div>
                        </form>
                    </div>
                    <a href="{% url 'truck_details' %}"><button class="btn-1 hire">Hire Truck</button></a>
                </div>
            </div>
        </div>
    </section>
    <!-- /.Track Location -->

    <section class="py-5">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="why-t text-center">
                        <h3>Why Truck Lagbe?</h3>
                    <p>The easiest way to hire your trucks</p>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <div class="truck-hero-img pt-50">
                        <img src="{% static 'images/bg-image/truck.jpg' %}" alt="">
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="truck-hero-li d-flex pt-50">
                        <div class="truck-service-hero">
                            <i class="fas fa-rocket"></i>
                            <h5>Fast Booking</h5>
                            <p>Book your trip in just a few seconds</p>
                        </div>
                        <div class="truck-service-hero pl-30">
                            <i class="fas fa-thumbs-up"></i>
                            <h5>Best Service</h5>
                            <p>Get the best fare on the market</p>
                        </div>
                    </div>
                    <div class="truck-hero-li d-flex pt-50">
                        <div class="truck-service-hero">
                           <i class="fas fa-shield-alt"></i>
                            <h5>Secured Delivery</h5>
                            <p>Ensure the safest delivery of your products</p>
                        </div>
                        <div class="truck-service-hero">
                            <i class="fas fa-user-cog"></i>
                            <h5>Verified Drivers</h5>
                            <p>Thousands of verified drivers are available</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>



    <section class="py-5">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <div class="cmt-bgcolor-grey pt-40 pl-40 pr-40 pb-40">
                            <div class="row">
                                <div class="col-lg-6 col-md-12 mx-auto">
                                    <!-- ttm_single_image-wrapper -->
                                    <div class="ttm_single_image-wrapper">
                                        <img class="img-fluid" src="{% static 'images/bg-image/MobileScreen.png' %}" alt="">
                                    </div>
                                </div>
                                <div class="col-lg-6 col-md-12 col-xs-12">
                                    <div class="cmt-bgcolor-grey text-left pt-15 pl-40 ml_60 res-991-ml-0 res-991-pl-0 res-991-pt-30">
                                        <!-- section title -->
                                        <div class="section-title">
                                            <h5>DOWNLOAD OUR APP</h5>
                                            <h3 class="title">Any Service, Any Time, Anywhere.</h3>
                                        </div><!-- section title end -->
                                        <p>Give us your mobile number. You’ll get an SMS with the app download link.</p>
                                        <div class="ttm_subscribe_form">
                                            <input type="email" name="email" placeholder="Type Your Mobile Number...." required="">
                                            <button class="btn cmt-btn cmt-btn-size-md cmt-btn-shape-square cmt-btn-style-fill cmt-btn-color-skincolor" type="submit">go</button>
                                        </div>
                                    </div>
                                    <div class="app-img d-flex pt-50">
                                       <div class="app-1">
                                         <img src="{% static 'images/bg-image/app-store.png' %}" alt="">
                                       </div>
                                       <div class="app-2">
                                         <img src="{% static 'images/bg-image/play-store.png' %}" alt="">
                                    </div>
                                       </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!-- row end -->
            </div>
        </section>


    <section class="py-5">
        <div class="container">
            <div class="section-title">
                <div class="title-header text-center">
                    <h5>OUR CUSTOMER</h5>
                    <h2 class="title">Check the Menmber of Brand!</h2>
                </div>
                <div class="heading-seperator"><span></span></div>
            </div>
            <section class="customer-logos slider pb-100 pt-20">
                {% for aboutBrand in aboutBrand %}
                <div class="slide"><a href="#"><img src="{{aboutBrand.slider_image.url}}"></a></div>
                {% endfor %}
            </section>
        </div>
    </section>
        <!--introduction-section-->

        <!--cta_form-section-->
        <section class="cmt-row cta_form-section bg-layer-equal-height bg-img4 bg-layer clearfix">
            <div class="container">
                <!-- row -->
                <div class="row no-gutters">
                    <div class="col-lg-6 col-md-12 ml-auto">
                        <div class="cmt-col-bgcolor-yes cmt-bgcolor-darkgrey cmt-col-bgimage-yes col-bg-img-six cmt-bg cmt-right-span spacing-1">
                            <div class="cmt-col-wrapper-bg-layer cmt-bg-layer">
                                <div class="cmt-col-wrapper-bg-layer-inner"></div>
                            </div>
                            <div class="layer-content">
                                <!-- section-title -->
                                <div class="section-title">
                                    <div class="title-header">
                                        <h5>READY TO HELP</h5>
                                        <h2 class="title">Get a Free Quote Today.</h2>
                                    </div>
                                </div><!-- section-title end -->
                                <form id="cmt-contactform-1" class="contact__form cmt-contactform-1 wrap-form clearfix" method="post" action="#">
                                    {% csrf_token %}
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <label>
                                                <span class="text-input"><input name="name" type="text" value="" placeholder="Your Name" required="required"></span>
                                            </label>
                                        </div>
                                        <div class="col-lg-6">
                                            <label>
                                                <span class="text-input"><input name="email" type="text" value="" placeholder="Your Email" required="required"></span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <label>
                                                <span class="text-input"><input name="phone" type="text" value="" placeholder="Phone Number" required="required"></span>
                                            </label>
                                        </div>
                                        <div class="col-lg-6">
                                            <label>
                                                <span class="text-input"><input name="subject" type="text" value="" placeholder="Subject" required="required"></span>
                                            </label>
                                        </div>
                                    </div>
                                    <label>
                                        <span class="text-input"><textarea name="messages" rows="3" placeholder="Message" required="required"></textarea></span>
                                    </label>
                                    <button name="submit" class="submit cmt-btn cmt-btn-size-md cmt-btn-shape-rounded cmt-btn-style-fill cmt-btn-color-skincolor" type="submit">Get An Appointment!</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div><!-- row end -->
            </div>
        </section>
        <!--cta_form-section end-->


        <!--blog-title-section-->
        <section class="cmt-row blog-title-section cmt-bgcolor-grey clearfix">
            <div class="container">
                <!-- row -->
                <div class="row">
                </div><!-- row end -->
            </div>
        </section>
        <!--blog-title-section-->


    </div><!--site-main end-->



{% endblock %}