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

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

  <!--site-main start-->
  <div class="site-main">
    <section class="cmt-row bg-layer-equal-height clearfix">
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <div> 
              {% if messages %}
                   {% for message in messages %}
                      <div class="alert alert-warning alert-dismissible fade show" role="alert">
                           {{ message }}
                      </div>
                  {% endfor %}
              {% endif %}
          </div>
          </div>
        </div>
        <div class="row mt-20">
           <div class="col-lg-4">
           <div class="havy-app elt">
            <div class="havy-app-tt elt">
              <h6>{{ TecObj.title }}</h6>
              <h4>Get the appointment with your Expert</h4>
              <p>Schedule your appointment with our expert technician service. </p>
            </div>
            <div class="havy-sif-bt elt mt-80">
                <a href="#havyworkerModal" data-toggle="modal" data-target="#havyworkerModal">Booking Now<i class="fas fa-arrow-right"></i></a>
               </div>

           </div>
          </div>
          <div class="col-lg-8">
             <!-- section title -->
           <div class="section-title elt">
                <h5>{{ TecObj.title }}</h5>
                <h2 class="title">{{ TecObj.title }}</h2>
            </div><!-- section title end -->
            <div class="shifting-price-list tech">
              <table class="table">
                <thead  class="bg-top-pricett">
                   <tr class="text-white">
                      <th scope="col">Items Name</th>
                      <th scope="col">Inside Dhaka</th>
                      <th scope="col">Outside Dhaka</th>
                    </tr>
                </thead>
                <tbody>
                  {% for technicianChart in technicianChart %}
                  <tr class="color-ro1">
                    <th scope="row" class="th">{{ technicianChart.item_name }}</th>
                    <td>{{ technicianChart.inside_dhaka }} Tk</td>
                    <td>{{ technicianChart.outside_dhaka }} Tk</td>
                  </tr>
                  {% endfor %}          
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>


<section class="pt-10">
<main id="tt-pageContent">
<div class="section-indent">
    <div class="container container-lg-fluid">
        <div class="row flex-sm-row-reverse">
            <div class="col-12 col-md-8 col-lg-8">
                <div class="services-item">
                    <div class="services-item__img"><img class="w-100" src="{{TecObj.top_image.url}}" alt=""></div>
                    <div class="services-item__layout">
                        <div class="tt-selected-block">
                            <div class="section-title text-left">
                                <div class="section-title__01">{{ TecObj.title }}</div>
                                <div class="section-title__02">{{ TecObj.sub_title }}</div>
                            </div>
                            <blockquote class="blockquote01 blockquote01__max-width01 text-justify">
                               {{ TecObj.descriptions }}
                            </blockquote>
                        </div>
                        <h4 class="tt-layout-title"> {{ TecObj.repair_title }}</h4>
                        <p class="text-justify">
                           {{ TecObj.repair_details }}
                        </p>
          
                        <div class="row tt-indent-top">
                            <div class="col-sm-6 col-xl-5">
                                <ul class="tt-list01">
                                    <li><i class="fas fa-check"></i>{{ TecObj.repair_manue1 }}</li>
                                    <li><i class="fas fa-check"></i>{{ TecObj.repair_manue2 }}</li>
                                    <li><i class="fas fa-check"></i>{{ TecObj.repair_manue5 }}</li>
                                </ul>
                            </div>
                            <div class="col-sm-6 col-xl-6">
                                <ul class="tt-list01">
                                    <li><i class="fas fa-check"></i>{{ TecObj.repair_manue3 }}</li>
                                    <li><i class="fas fa-check"></i>{{ TecObj.repair_manue4 }}</li>
                                    <li><i class="fas fa-check"></i>{{ TecObj.repair_manue6 }}</li>
                                </ul>
                            </div>
                        </div>
                        <div class="tt-col-img__top">
                            <div class="row tt-col-img">
                                <div class="col-sm-6"><img class="w-100" src="{{ TecObj.bottom_image.url }}" alt=""></div>
                                <div class="col-sm-6"><img class="w-100" src="{{ TecObj.bottom_image2.url }}" alt=""></div>
                            </div>
                        </div>
                        


           <div class="elc-details mt-30">
              <h4>{{ TecObj.bootom_title }}</h4>
              <p>{{ TecObj.bootom_details }}</p>
              <div class="spe-elc">
                <hr>
            <h6>{{ TecObj.contact_details }}</h6>
            <hr>
              </div>
            </div>
            <div class="elc-tech-sif-bt mt-50 pb-80">
                <a href="#havyworkerModal" data-toggle="modal" data-target="#havyworkerModal">Booking Now<i class="fas fa-arrow-right"></i></a>
               </div>

                </div>
                </div>
            </div>
            <div class="divider d-block d-block d-md-none"></div>
            <div class="col-12 col-md-4 col-lg-4 asideColumn asideColumn-left">
                <div class="tt-block-aside tt-block-aside__shadow">
                    <h3 class="tt-aside-title">Our Contacts</h3>
                    <div class="tt-aside-content">
                        <ul class="box-aside-info pl-0">
                            <li>
                                <i class="fas fa-map-marker-alt"></i>
                               {{ contactAddress.address }}
                            </li>
                            <li>
                                <i class="far fa-clock"></i>
                                {{ contactAddress.office_time }}
                            </li>
                            <li>
                                <a href="tel:+880 1686-570172">
                                    <i class="fas fa-phone-alt"></i>
                                    {{ contactAddress.primary_phone_no }}
                                </a>
                            </li>
                        </ul>
                        <div class="elc-tech-sif-bt pt-20">
                <a href="#havyworkerModal" data-toggle="modal" data-target="#havyworkerModal">Booking Now<i class="fas fa-arrow-right"></i></a>
               </div>
                    </div>
                </div>
                <div class="tt-block-aside">
                    <h3 class="tt-aside-title">Ask Your Question</h3>
                    <div class="tt-aside-content">
                        <form id="questionform" class="form-default" method="post" novalidate="novalidate" action="#">
                            <div class="form-group">
                                <input type="text" name="name" class="form-control" placeholder="Your Name *">
                            </div>
                            <div class="form-group">
                                <input type="text" name="email" class="form-control" placeholder="Your e-mail address *">
                            </div>
                            <div class="form-group">
                                <input type="text" name="phonenumber" class="form-control" placeholder="Your phone number">
                            </div>
                            <div class="form-group">
                                <textarea name="textarea" class="form-control" rows="4" placeholder="Your Qustion *"></textarea>
                            </div>
                            <div class="form-group">
                                <button class="tt-btn btn__color01" type="submit"><span class="icon-lightning"></span>Ask your question</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</main>
</section>

  <section class="others-elc py-5">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <!-- section title -->
           <div class="section-title">
                <h5>OTHERS SERVICES</h5>
                <h2 class="title">Others Technician service</h2>
            </div><!-- section title end -->
        </div>
        {% for tecType in all_tec_objects %}
        <div class="col-md-3">
          <div class="others-services">
            <div class="service1">
              <h5>Explore service</h5> 
              <h4>{{ tecType.category_title }}</h4>
              <a href="{% url 'electric-tech' tecType.id %}">read <i class="fas fa-long-arrow-alt-right"></i></a>
            </div>  
          </div>
        </div>
        {% endfor %}
      </div>
      
    </div>
  </section>
  <!--site-main end-->

   <!------------- Havy Worker Booking popup Start ------------------>
   <div class="container">
    <div class="modal fade" id="havyworkerModal" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content technician">
          <div class="modal-header">
            <h5 class="modal-title">Submit the form to contact us Technician</h5>
            <button type="button" class="close" data-dismiss="modal">
              &times;
            </button>
          </div>
          <div class="modal-body">
            <form class="booking-from" role="form" method="post" action="#">
              {% csrf_token %}
              <label for="lName">Your Name<span class="star" style="color: red">*</span></label>
              <input type="text" name="your_name" class="form-control" id="lName" required />
              <label for="number">Mobile Number <span class="star" style="color: red">*</span></label>
              <input type="text" name="mobile_number" class="form-control" id="number" required />


              <div class="from-group">
                <label for="comment">Technician Type<span class="star" style="color: red">*</span></label >
              <select class="form-control select" name="technician_type" aria-invalid="false" placeholder="Choose Technician" required >
                <option value="Choose Service">Choose Technician</option>
                <option value="Electric Technician (Ac, Etc.)">Electric Technician (Ac, Etc.)</option>
                <option value="Furniture Technician">Furniture Technician</option>
                <option value="Raping Packing Technician">Raping Packing Technician</option>
                <option value="Auto Mobile Technician (Bike, Car)">Auto Mobile Technician (Bike, Car)</option>
                <option value="Plumbing Technician">Plumbing Technician</option>
                <option value="Printing Technician">Printing Technician</option>
                <option value="Thai Glass Technician">Thai Glass Technician</option>
                <option value="Tiles Fittings Technician">Tiles Fittings Technician</option>
                <option value="Tiles Fittings Technician">Other Services</option>
              </select>
              </div>
              <div class="form-group pt-1">
                <label for="comment">Address<span class="star" style="color: red">*</span></label >
                <textarea class="text-input" name="address" rows="2" id="comment" required></textarea>
              </div>
              <div class="time-date d-flex">
               <div class="boo">
                 <label for="datetimepicker11">Booking Date & Time</label>
              <input
                type="datetime-local"
                id="meeting-time"
                name="booking_date_time"
                value="2020-01-30T19:30"
                min="2018-06-07T00:00"
                max="2031-06-14T00:00"/>
               </div>
               <div class="boo">
                 <label for="datetimepicker11">Working Date & Time</label>
              <input
                type="datetime-local"
                id="meeting-time"
                name="working_date_time"
                value="2020-01-30T19:30"
                min="2018-06-07T00:00"
                max="2031-06-14T00:00" required />
               </div>
              </div>

              <div class="form-group pt-1">
                <label for="comment">Booking Details</label>
                <textarea class="text-input" name="booking_details" rows="3" id="comment"></textarea>
              </div>
              <button
                type="submit"
                id="submit" name="submit"
                class="btnsubmit cmt-btn cmt-btn-size-md cmt-btn-shape-square cmt-btn-style-fill cmt-btn-color-skincolor w-100">Submit</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-------------Havy Worker Booking popup End ------------------>
{% endblock %}