{% extends 'base.html' %}
{% block content %}
{% load static %}

  <!-- Styling of Google Reviews -->

  <link rel="stylesheet" href="https://cdn.rawgit.com/stevenmonson/googleReviews/master/google-places.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/stevenmonson/googleReviews@6e8f0d794393ec657dab69eb1421f3a60add23ef/google-places.js"></script>
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyDpJeiOSkitSPqzA-dHqCZnRkf7-_ceJUY&signed_in=true&libraries=places"></script>

  
    <!-- slider section -->

    <section class="slider_section">
      <div class="slider_container">
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
          <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active">
              01
            </li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1">
              02
            </li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2">
              03
            </li>
          </ol>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <div class="container-fluid">
                <div class="row">
                  <div class="col-md-6 px-0">
                    <div class="img-box">
                      <img src="{% static 'images/slider-img1.jpg' %}" alt="" />
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="detail-box">
                      <h1>
                        Martial
                        <br />
                        Arts
                      </h1>
                      <p>
                        Learn from the ground up with real practice and fun
                      </p>
                      <a href="#contact-us">
                        Contact Us
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <div class="container-fluid">
                <div class="row">
                  <div class="col-md-6 px-0">
                    <div class="img-box">
                      <img src="{% static 'images/slider-img2.jpg' %}" alt="" />
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="detail-box">
                      <h1>
                        Community
                        <br />
                        Focused
                      </h1>
                      <p>
                        There are many variations of passages of Lorem Ipsum available, but the
                      </p>
                      <a href="#contact-us">
                        Contact Us
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="carousel-item">
              <div class="container-fluid">
                <div class="row">
                  <div class="col-md-6 px-0">
                    <div class="img-box">
                      <img src="{% static 'images/slider-img3.jpg' %}" alt="" />
                    </div>
                  </div>
                  <div class="col-md-6">
                    <div class="detail-box">
                      <h1>
                        Family
                        <br />
                        Friendly
                      </h1>
                      <p>
                        There are many variations of passages of Lorem Ipsum available, but the
                      </p>
                      <a href="#contact-us">
                        Contact Us
                      </a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="carousel_btn-box">
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
              <span class="sr-only">Previous</span>
            </a>
            <img src="{% static 'images/line.png' %}" alt="" />
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
              <span class="sr-only">Next</span>
            </a>
          </div>
        </div>
      </div>
    </section>

    <!-- end slider section -->
  </div>
  <!-- end hero area -->



  <!-- Instructors section -->

  <section class="service_section layout_padding">
    <div class="container">
      <div class="heading_container">
        <h2>
          Inst<span>ruc</span>tors
        </h2>
        <p>
          adipiscingelit,sed do eiusmod tempor incididunt ut labore et dolore magn
        </p>
      </div>
      <div class="row">
        <div class="col-lg-6 ">
          <div class="img-container tab-content">
            <div class="img-box tab-pane fade show active" id="img1" role="tabpanel">
              <img src="{% static 'images/instructor-img1.jpg' %}" alt="image of instructor" />
            </div>
            <div class="img-box tab-pane fade  " id="img2" role="tabpanel">
              <img src="{% static 'images/instructor-img2.jpg' %}" alt="image of instructor" />
            </div>
            <div class="img-box tab-pane fade  " id="img3" role="tabpanel">
              <img src="{% static 'images/instructor-img3.jpg' %}" alt="image of instructor" />
            </div>
            <div class="img-box tab-pane fade  " id="img4" role="tabpanel">
              <img src="{% static 'images/instructor-img4.png' %}" alt="image of instructor" />
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="detail-container nav nav-tabs" id="myTab" role="tablist">
            <div class="detail-box active" id="img1-tab" data-toggle="tab" href="#img1" role="tab" aria-selected="true">
              <h4>
                Victor <br />
                Candal
              </h4>
            </div>
            <div class="detail-box" id="img2-tab" data-toggle="tab" href="#img2" role="tab" aria-selected="false">
              <h4>
                Carl <br />
                Bohn
              </h4>
            </div>
            <div class="detail-box" id="img2-tab" data-toggle="tab" href="#img3" role="tab" aria-selected="false">
              <h4>
                Ivan <br />
                Aguayo
              </h4>
            </div>
            <div class="detail-box" id="img2-tab" data-toggle="tab" href="#img4" role="tab" aria-selected="false">
              <h4>
                Ruben<br />
                Candal
              </h4>
            </div>
          </div>
        </div>
      </div>
      <div class="btn-box">
        <a href="#contact-us">
          Learn More
        </a>
      </div>
    </div>
  </section>

  <!-- end instructors section -->


  <!-- about section -->

  <section class="agency_section layout_padding-bottom">
    <div class="agency_container ">
      <div class="box ">
        <div class="detail-box">
          <div class="heading_container">
            <h2>
              About <span>Candal's</span> Martial Arts
            </h2>
          </div>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
          </p>
          <a href="#contact-us">
            Learn More
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- end agency section -->


  <!-- contact section -->

  <section class="contact_section layout_padding" >
    <div class="container px-0">
      <div class="heading_container"">
        <h2 class="" id="contact-us">
          Con<span>ta</span>ct Us
          <br>
        </h2>
        <h3>
          
          <a href="tel:714-262-9588">
            <span onMouseOver="this.style.color='#fbac2e'" onMouseOut="this.style.color='black'" style='color:black;'>(714) 262-9588</span>
          </a>
        </h3>
      </div>

    </div>
    <div class="container container-bg">
      <div class="row">
        <div class="col-lg-8 col-md-7 px-0">
          <div class="map_container">
            <div class="map-responsive">
              <iframe src="https://www.google.com/maps/embed/v1/place?key=AIzaSyA0s1a7phLN0iaD6-UE7m4qP-z21pH0eSc&q=Candals+Martial+Arts" width="600" height="300" frameborder="0" style="border:0; width: 100%; height:100%" allowfullscreen></iframe>
            </div>
          </div>
        </div>
        <div class="col-md-5 col-lg-4 px-0">
          <form action="send_mail" method="get">
            {% csrf_token %}
            <div>
              Fill out your information and we will get into contact as soon as possible!
            </div>
            <br>
            <div>
              <input type="text" placeholder="Name" name="name" required />
            </div>
            <div>
              <input type="email" placeholder="Email" name="email" required />
            </div>
            <div>
              <input type="tel" placeholder="Phone" name="phone" required />
            </div>
            <div class="d-flex ">
              <button type="submit">
                SEND
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>

  <!-- end contact section -->

  <!-- client section -->

  <section class="client_section layout_padding-bottom">
    <div class="container">
      <div class="heading_container">
        <h2>
          What <span>says</span> our clients
        </h2>
      </div>
      <br>
      <div id="google-reviews">
      </div>
    </div>
    <div class="contact_section">
      <form>
        <button type="submit" formaction="https://www.google.com/maps/place/Candal's+Martial+Arts/@33.8018703,-118.0122857,17z/data=!3m1!5s0x80dd29292a7b8dc7:0x88d4a4861acc26bf!4m7!3m6!1s0x80dd2928d9e8ef7b:0x605f43089d8f4d13!8m2!3d33.8018703!4d-118.010097!9m1!1b1">See all reviews</button>
     </form>
    </div>
  </section>

  <!-- end client section -->



  <!-- Script for grabbing google reviews -->

  <script>
  jQuery(document).ready(function( $ ) {
    $("#google-reviews").googlePlaces({
          placeId: 'ChIJe-_o2Sgp3YARE02PnQhDX2A' //Find placeID @: https://developers.google.com/places/place-id
        , render: ['reviews']
        , min_rating: 4
        , max_rows:5
    });
  });
  </script>

{% endblock %}