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

    <meta charset="utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<title>

 BBQUDA

</title>

<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     -->

  <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700,200" rel="stylesheet" />
 
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- CSS Files -->

<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet" />
<link href="{% static "css/now-ui-dashboard.min.css" %}" rel="stylesheet" />
<link href="{% static "css/demo.css" %}" rel="stylesheet" />

        <div class="wrapper ">
          
            <div class="sidebar" data-color="orange">
    
    <div class="sidebar-wrapper" id="sidebar-wrapper">
        
        <ul class="nav">
          
              <li >
                  <a href="{% url 'dashboard'%}">
                      
                        <i class="now-ui-icons design_app"></i>
                      
                      <p>Dashboard</p>
                  </a>
              </li>
              
              <li >
                  <a href="{% url 'upload_log'%}">
                      
                        <i class="now-ui-icons ui-1_bell-53"></i>
                      
                      <p>Upload Log</p>
                  </a>
              </li>
              
              <li  >
                  <a href="{% url 'upload_csv'%}">
                      
                        <i class="now-ui-icons users_single-02"></i>
                      
                      <p>Upload CSV</p>
                  </a>
              </li>
              
              <li >
                  <a href="{% url 'my_missions'%}">
                      
                        <i class="now-ui-icons design_bullet-list-67"></i>
                      
                      <p>Uploaded Missions</p>
                  </a>
              </li>
              <li  class="active ">
                  <a href="{% url 'trail_generator'%}">
                      
                        <i class="now-ui-icons design_bullet-list-67"></i>
                      
                      <p>Trail Generator</p>
                  </a>
              </li>
              <li  >
                  <a href="{% url 'custom_trails'%}">
                      
                        <i class="now-ui-icons design_bullet-list-67"></i>
                      
                      <p>Custom Trails</p>
                  </a>
              </li>
              <li  >
                  <a href="{% url 'logout'%}">
                      
                        <i class="now-ui-icons design_bullet-list-67"></i>
                      
                      <p>Logout</p>
                  </a>
              </li>
             
        </ul>
    </div>
</div>

<body>
            <div class="main-panel" id="main-panel">
              <!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-transparent  bg-primary  navbar-absolute">
	<div class="container-fluid">
    <div class="navbar-wrapper">
      
			
      
			<a class="navbar-brand" href="#pablo"> BBQUDA</a>
		</div>

		

	    <div class="collapse navbar-collapse justify-content-end" id="navigation">
      
<ul class="navbar-nav">
 

  
</ul>

        
	    </div>
	</div>
</nav>
<!-- End Navbar -->

                  <div class="panel-header panel-header-sm">
  
  
</div>


                  <div class="content">
                      <div class="row">
  <div class="col-md-12">
    

<div class="card">
    <div class="card-header">
    
        <h4 class="card-title"> Trail Generator</h4>
       
        
    </div>
   
    <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 > 

            <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>

  </div>
  <div class="col-md-12">
    

  </div>
</div>

                  </div>

                 
             </div>
          
        </div>
        
         

    </body>

</html>





