<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="stylesheet" href="CSS/reset.css">
    <link rel="stylesheet" href="CSS/style.css">
    

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Figtree&display=swap" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css2?family=Genos&amp;display=swap" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet"> 
    
    <script src='https://unpkg.com/maplibre-gl@3.1.0/dist/maplibre-gl.js'></script>
    <link href='https://unpkg.com/maplibre-gl@3.0.1/dist/maplibre-gl.css' rel='stylesheet' />   
   
   
</head>

<body>

    <%- include('./partials/header') %>

<main>
   
   <section class="map-header">
    <h1>Map</h1>
    <p class="map-aside-test" style="display: none;"></p>

    <h1 id="screen-warning"></h1>
   </section>  
    
    <script>

    let message = 'Please Rotate Device for mobiles';
    
    function resizeMessage(){    
    
        let w = window.innerWidth;
        if(w < 500){
        document.getElementById('screen-warning').innerHTML = message;
        
        } else {
        document.getElementById('screen-warning').innerHTML = '';
        }
           
        }
    window.onresize = resizeMessage    
    console.log(window.innerWidth);

    
    </script>



    <section class="map-overlay">

        <div id='map' alt="awaiting map, please wait"></div>
            <script>
                let map = new maplibregl.Map({
                container: 'map',
                style: 'https://api.maptiler.com/maps/streets/style.json?key=CMRIccwlZz6zI6QR2E5I ', // stylesheet location
                center: [-1.17, 48.028], // starting position [lng, lat]
                zoom: 4 // starting zoom
                    
                }); 
        
                function newMark(){
                
                let imageThumb = document.getElementById('imageThumb');
                let speciesName = document.getElementById('speciesName').value; 
                let firstRef = document.getElementById("firstRef").value;
                let secondRef = document.getElementById("secondRef").value;
                var marker = new maplibregl.Marker({
                    color: '#5B9240',
                    scale: 1,
                })
                    .setLngLat([firstRef, secondRef])
                    .setPopup(new maplibregl.Popup().setHTML(speciesName))
                    .addTo(map);
                
                
                
                
              }
        
        
              map.on('click', function (d) {
             
                let pos = d.lngLat;
                
                let firstRef = pos.lng
                let secondRef = pos.lat
                
                document.getElementById("firstRef").value = firstRef;
                document.getElementById("secondRef").value = secondRef
                
              });
    

               
            </script>
        
        
        <aside class="mapSideBar">

            <div class="map-aside-header">
                <aside>
                    <h2 class="map-h2">Guide</h2>
                    <div id='map_aside_info_logo'>
                        <img class="map_aside_info_logo"  src="Images/circle_customer_help_info_information_service_support_icon_123208.png">
                    </div>
                        <article class="map_aside_info_box">
                       <h3>Map instructions </h3>
                       <p> -Use the mouse wheel to zoom in and out of the map</p>
                       <p> -Clicking anywhere on the map will add that position as grid references onto the form below</p>
                       <p> -Clicking on a marker will reveal further information and an image (if available)</p> 
                        </article>
                
                    
                </aside>    
                <form class="logout-box" method="post" action="/logout">
                    <button type="submit">Logout</button>
    
                </form>
            </div>

           

            <form id='map-form' class="map-form" action="/markerlist" method="post" enctype="multipart/form-data">
                 
                
                <p class="map-aside"><span class='map-decor'>1 -</span> Please enter the name of the species that you have found <br><br>
                    <span class='map-decor'>2 -</span> Zoom in on the map to the location where you found it (try to be as accurate as possible). Click the location and the grid references will fill in for you. <br><br> 
                    <span class='map-decor'>3 -</span> Click the browse button and upload your photo (this is currently an optional step).<br><br>
                    <span class='map-decor'>4 -</span> Click 'Add record' and your find will be added to our logs.<br><br>
                    <span class="map-decor">5 -</span> Clicking the 'Populate' button will display all our records on the map'
                </p>
                <hr>
                <label class="map-label" for="speciesName">Enter the name of your find</label>
                <input  class="map-input" name="speciesName" id="speciesName" type="text" required>

                <label class="map-label" for="firstRef">Enter Longditude</label>
                <input class="map-input"  name="firstRef" id="firstRef" type="text" required>
                
                <label class="map-label" for="secondRef">Enter Latitude</label>
                <input class="map-input" name="secondRef" id="secondRef" type="text" required>
                
                <label class="map-label" for="upload">Please upload you image here</label>
                <input type="file" id="upload" name="upload" accept= "image/jpg, image/png, image/jpeg, image/heic" >
                
                <div class="map_aside_button_div">
                <button id="map-button" class="map-button" type="button" onclick="newMark()">Add record</button>
                <button id="populateMarkers_button" class="map-button" type="button" >Populate</button>
                </div>
                <aside id="info">


                </aside>   
            
            </form> 
            
        </aside>
            
            
        
        

          
        
    </section>



    <!-- The Modal -->
    <section id="postMarkerModal" class="postMarkerModal">

  <!-- Modal content -->
        <div id='postMarkerModal-content' class="postMarkerModal-content">
            <aside class="postMarkerModal-img">
                <img src="Images/logomini.png" >
            </aside>
            <p  id="postMarkerModal-p">
                
            </p>
            <span class="closePostMarker">&times;</span>
        </div>

    </section> 
    
   

 
    <section class="aboutmap">
    
        <p>With thanks to <a href="https://maplibre.org/" target="_blank">MapLibre</a> and <a href="https://www.openstreetmap.org/#map=7/47.532/-2.648" target="_blank">OpenStreetMap</a> for their open source map libraries & tools</p>

    </section>

</main>

<%- include('./partials/footer') %>


<script src='apireq.js'>
                
    
</script>
</body>
</html>