<!DOCTYPE html>
{% load static%}
{% load leaflet_tags %}
<html lang="en">
    <head>
        {% leaflet_js %}
        {% leaflet_css %}

        <meta charset="utf-8">
        <meta content="width=device-width, initial-scale=1.0" name="viewport">
        <meta content="" name="description">
        <meta content="" name="keywords">

        <!-- Favicons -->
        <link href="{% static 'assets/img/wave-favicon.png' %}" rel="icon">
        <link href="{% static 'assets/img/wave.png' %}" rel="apple-touch-icon">

        <!-- Google Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Roboto:300,300i,400,400i,500,500i,700,700i&display=swap" rel="stylesheet">

        <!-- Vendor CSS Files -->
        <link href="{% static 'assets/vendor/animate.css/animate.min.css' %}" rel="stylesheet">
        <link href="{% static 'assets/vendor/aos/aos.css' %}" rel="stylesheet">
        <link href="{% static 'assets/vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
        <link href="{% static 'assets/vendor/bootstrap-icons/bootstrap-icons.css' %}" rel="stylesheet">
        <link href="{% static 'assets/vendor/boxicons/css/boxicons.min.css' %}" rel="stylesheet">
        <link href="{% static 'assets/vendor/glightbox/css/glightbox.min.css' %}" rel="stylesheet">
        <link href="{% static 'assets/vendor/swiper/swiper-bundle.min.css' %}" rel="stylesheet">

        <!-- Template Main CSS File -->
        <link href="{% static 'assets/css/style.css' %}" rel="stylesheet">

        <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />

         <!-- Fonts and icons     -->


        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

        <!-- =======================================================
        * Template Name: Moderna - v4.0.1
        * Template URL: https://bootstrapmade.com/free-bootstrap-template-corporate-moderna/
        * Author: BootstrapMade.com
        * License: https://bootstrapmade.com/license/
        ======================================================== -->
    </head>
<title>Mission Generator - BBQUDA</title>

<body>


<!-- ======= Header ======= -->
<header id="header" class="fixed-top d-flex align-items-center header-transparent">
  <div class="container d-flex justify-content-between align-items-center">
    {% include 'base/logo.html' %}

  <nav id="navbar" class="navbar">
      <ul>
      <li><a href="{% url 'homepage' %}">Home</a></li>
      <li><a href="{% url 'about' %}">About</a></li>
      <li class="dropdown"><a class="active "href="#"><span>Missions</span> <i class="bi bi-chevron-down"></i></a>
        <ul>
        <li><a  href="{% url 'upload_log'%}">Upload a file</a></li>
        <li><a href="{% url 'my_missions' %}">Uploaded missions</a></li>
        <li><a class="active " href="{% url 'trail_generator' %}">Mission generator</a></li>
        <li><a href="{% url 'kriging_heatmap' %}">Visualizations</a></li>
        </ul>
    </li>
      <li><a href="{% url 'api_page'%}">API</a></li>
      <li><a href="{% url 'contact' %}">Contact Us</a></li>
      <li>{% if request.user.is_authenticated %}
        <a href="{% url 'logout' %}"><button class="login-button">Logout</button></a>
        {% else %}
        <a href="{% url 'login' %}"><button class="login-button">Login</button></a>
        {% endif %}
    </li>
      </ul>
      <i class="bi bi-list mobile-nav-toggle"></i>
  </nav><!-- .navbar -->

  </div>
  </header><!-- End Header -->

  <main id="main">

    <!-- ======= Contact Section ======= -->
    <section class="breadcrumbs">
        <div class="container">

          <div class="d-flex justify-content-between align-items-center">
            <h2>Mission Generator</h2>
            <ol class="nav-2-menu">
              <li><a id="nav-2" href="{% url 'homepage' %}">Home</a></li>
              <li><a id="nav-2" href="{% url 'upload_log' %}">Upload</a></li>
              <li><a id="nav-2"  href="{% url 'my_missions' %}">My missions</a></li>
              <li><a class="active" href="{% url 'trail_generator' %}">Mission generator</a></li>
              <li><a id="nav-2" href="{% url 'kriging_heatmap' %}">Visualizations</a></li>
            </ol>
          </div>

        </div>
      </section><!-- End Contact Section -->

      <br>

      <!-- Mission generator starts -->
      <div class="section-title">
        <h2>Mission Generator</h2>
        <p>Generate your missions through here by going to the area where you want and clicking on the path
            you want the AUV to go through.
        </p>
      </div>

      <div class="card">

      <body>
      <div id="map"></div>
      <div class="card-body" >
      <div class="table-responsive">
      <table class="table" style = "height:500pxs"  >

        <script>


            var lst_coords = new Array;
            markers = [];

                function map_init_basic (map, options) {

                    map.setView(new L.LatLng(39.5, -98.35), 4);
                    var theMarker = {};

                    map.on('click',function(e){
                        cur_coord = [];
                        lat = e.latlng.lat;
                        lon = e.latlng.lng;
                        lst_coords.push(lat);
                        lst_coords.push(lon);
                        cur_coord.push(lat);
                        cur_coord.push(lon);
                        markers.push(cur_coord);



                        console.log("You clicked the map at LAT: "+ lat+" and LONG: "+lon );

                        //Add a marker to show where you clicked.
                        theMarker = L.marker([lat,lon]).setOpacity(50).addTo(map);
                        L.polyline(markers, {color: 'red'}).addTo(map);
                    });


                }

                        $(document).ready(function() {
                            $("#trail").click(function() {

                                $.ajax({
                                    type: "POST",
                                    dataType: "json",
                                    data: {
                                        list: lst_coords

                                        },

                                });
                            });
                        });


        </script>



        {% leaflet_map "yourmap" callback="window.map_init_basic" %}
      <form >
      <br>
      <button name="trail" value=trail  class="btn btn-primary btn-large"  id = "trail">Save Coordinates</button>
      </form>
      </table>


      <div id="info"></div>

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

      <!-- Mission generator ends -->

</main><!-- End #main -->

{% include 'base/footer.html' %}
    <a href="#" class="back-to-top d-flex align-items-center justify-content-center"><i class="bi bi-arrow-up-short"></i></a>
    {% include 'base/scripts.html' %}
</body>

</html>





