<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>KML Extractor</title>

    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
        integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>

    <div class="navbar is-block is-info">
        <p class="logo">KML Extractor</p>

    </div>
    <div class="section">

        <div class="columns">
            <div class="column">
                <div class="container">
                    <label class="label">Buscar coordenadas:</label>
                    <div class="field has-addons">
                        
                        <div class="control">
                            
                            <input class="input is-info/" placeholder="buscar..." type="text">
                            
                        </div>

                        <div class="control">
                            <a class="button is-info"><i class="fas fa-search"></i></a>
                        </div>
                    </div>

                    <form action="/file" method="POST" enctype="multipart/form-data">
                        <label class="label">Escolher arquivo KML:</label>
                        <div class="field">

                            <div class="control">
                                <div class="file is-normal is-info">
                                    <label class="file-label">

                                        <input class="file-input" type="file" name="file">
                                        <span class="file-cta">
                                            <span class="file-icon">
                                                <i class="fas fa-upload"></i>
                                            </span>
                                            <span class="file-label">
                                                Escolher arquivo
                                            </span>
                                        </span>
                                    </label>

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

                        <label class="label">Enviar arquivo:</label>
                        <div class="field">
                            <div class="control">
                                <input class="button is-info" type="submit" value="Upload">

                            </div>
                        </div>
                        <div class="field">
                            <div class="control">


                            </div>
                        </div>

                    </form>

                   
                </div>

            </div>

           
            <div class="column">
                <label class="label">Lista de coordenadas:</label>
                
                <table class="table is-bordered">
                    
                    <thead>
                        <tr>
                            <th><abbr title="ID">ID</abbr></th>
                            <th>Coordenada</th>
                            <td><i class="fas fa-globe"></i></td>
                            
                            <th class="button is-white update has-text-info"><i class="fas fa-sync-alt"></i></th>

                        </tr>
                    </thead>
                    <tbody class="coordinate">

                    </tbody>

                </table>

            </div>
         


        </div>

    </div>


    <script>

        $('.update').click(function fetchData() {

            $(".update").toggleClass('is-loading')

            filterXML();
        })



        function filterXML() {

            $.ajax({
                type: "GET",
                url: "./static/file.kml",
                dataType: "xml",
                error: function (e) {
                    alert("An error occurred while processing XML file");
                    console.log("XML reading Failed: ", e);

                },

                success: function (response) {

                    $("ul").children().remove();

                    $(response).find('Point').each(function (index) {
                        var lat_long = $(this).find('coordinates').text();

                        function formatToCoordenate(coordenateToSplit, separator) {
                            const coordinatesArray = coordenateToSplit.split(separator)
                            const coordinateReversed = coordinatesArray.reverse()

                            coordinateReversed.shift()

                            const lat = coordinateReversed[0]
                            const long = coordinateReversed[1]

                            const coordinate = `${lat}, ${long}`

                            //$(`<tr><td>1</td><td>${coordinate}</td><td>teste</td><tr>`).appendTo('.coordinate')
                            $(`<tr><td>${index}</td><td><p>${coordinate}</p></td><td><a href="https://www.google.com.br/maps/place/${coordinate}" target="__blank"><i class="fas fa-globe"></a></td><tr>`).appendTo('.coordinate')
                            console.log(coordinate)

                        }

                        let comma = ','
                        formatToCoordenate(lat_long, comma)

                    })

                    $(".update").toggleClass('is-loading')

                }

            })
        }

    </script>
    <style>
        .logo {
            font-family: Georgia, 'Times New Roman', Times, serif;
            font-size: xx-large;
            color: antiquewhite;
            padding-left: 15px;

        }

        .vertical-line {
            border-left: 2px solid grey;
            height: 500px
        }
    </style>

</body>

</html>