<!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.0">
    <title>Datatable</title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css"/>
    <script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/public/styles/table.css">
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
</head>

<body>
    <header>
        <nav>
            <div class="naslov">
                BAZA PODATAKA
                <% if(user !== undefined){ %>
                    <a class="btn" href="/profile">PROFIL</a>
                <% } else { %>
                    <a class="btn" href="/login">PRIJAVA</a>
                <% } %>
            </div> 
        </nav>
    </header>
    <table class="stripe display" id="parking" style="width: 100%;">
        <thead>
        </thead>
        <tbody></tbody>
    </table> 
    <br>
    <br>
    <form>
        <fieldset>
            <div class="filter">
                <label for="search"> Stupac</label>
                <select name="search" id="search">
                    <option value="0">ID</option>
                    <option value="1">Ime Parkinga</option>
                    <option value="2">Broj mjesta</option>
                    <option value="3">Broj invalidskih mjesta</option>
                    <option value="4">Vrsta</option>
                    <option value="5">Županija</option>
                    <option value="6">Grad</option>
                    <option value="7">Kvart</option>
                    <option value="8">Ulica</option>
                    <option value="9">Kućni Broj</option>
                    <option value="10">Zona</option>
                    <option value="11">Dnevna Karta</option>
                    <option value="12">Pozivni broj</option>
                    <option value="13">Wildcard</option>
                </select>
            </div>
            <br>
            <div class="filter">
                <label for="filter">Filter</label>
                <input type="text" placeholder="Unesite vrijednost" id="filter" name="filter" required> </input>
            </div>
            <br>
            <div class="submit">
                <button id="traži">Pretraži</button> 
            </div>
        </fieldset>
    </form>
    <br>
    <br>
    <form method="post" action="/api/parkings/new">
        <fieldset>
            <legend style="font-size: larger;">Dodaj zapis</legend>
            <div class="dodaj">
                <input name="imeparkinga" type="text" placeholder="Ime parkinga" required>
            </div>
            <div class="dodaj">
                <input name="brojmjesta" type="text" placeholder="Broj mjesta required">
            </div> 
            <div class="dodaj">
                <input name="brojinvalidskihmjesta" type="text" placeholder="Broj invalidskih mjesta" required>
            </div> 
            <div class="dodaj">
                <label for="vrsta">Vrsta: </label>
                <select name="vrsta" id="vrsta">
                    <% for(var i = 0; i < types.length; i++) {%>
                        <option><%= types[i] %></option>
                    <% } %>
                </select>
            </div> 
            <div class="dodaj">
                <input name="županija" type="text" placeholder="Županija" required>
            </div>
            <div class="dodaj">
                <input name="grad" type="text" placeholder="Grad" required>
            </div> 
            <div class="dodaj">
                <input name="kvart" type="text" placeholder="Kvart" required>
            </div> 
            <div class="dodaj">
                <input name="ulica" type="text" placeholder="Ulica" required>
            </div>
            <div class="dodaj">
                <input name="kućnibroj" type="text" placeholder="Kućni broj" required>
            </div>
            <div class="dodaj">
                <label for="zona">Zona: </label>
                <select name="zona" id="zona">
                    <% for(var i = 0; i < zones.length; i++) {%>
                        <option><%= zones[i] %></option>
                    <% } %>
                </select>
            </div>
            <div class="submit">
                <button type="submit">Dodaj</button> 
            </div>
        </fieldset>
    </form>
    <br>
    <br>
</body>

<script>

    async function deleteParking(id) {
        console.log("Usao u delete za " + id);
        await fetch("http://localhost:3000/api/parkings/delete/" + id, { method:'DELETE'} );
        location.reload();
    }

    function edit(id) {
        location.href = "/datatable/" + id;
    }
    
    async function fetchParkings() {
        var lista;
        var podatci = new Array();
        const response = await fetch("http://localhost:3000/api/parkings");
        lista = await response.json();
        lista = lista.response;

        for (var pom of lista) {
            var temp = [];
            temp.push(pom[1]);
            temp.push(pom[2]);
            temp.push(pom[3]);
            temp.push(pom[4]);
            temp.push(pom[5]);
            temp.push(pom[6]);
            temp.push(pom[7]);
            temp.push(pom[8]);
            temp.push(pom[9]);
            if (pom[10] != null)
                temp.push(pom[10]);
            else
                temp.push("NULL");
            temp.push(pom[0]);
            temp.push(pom[11]);
            temp.push(pom[12]);
            temp.push(pom[1]);
            temp.push(pom[1]);
            podatci.push(temp);
        }
        return podatci;
    }
    
    $(document).ready(async function() {
        var ls = await fetchParkings();
        var table = $("#parking").DataTable({
            dom: 'Bfrltip',
            paging: true,
            data: ls,
            lengthMenu: [10, 15],
            processing: true,
            buttons: [
                'csv',
                {
                    text: 'JSON',
                    action: function ( e, dt, button, config ) {
                        var data = dt.buttons.exportData();
                        $.fn.dataTable.fileSave(
                            new Blob([JSON.stringify(data)]),
                            'Parking.json'
                        );
                    }
                }
            ],
            columns: [
            {title: 'ID'},
            {title: 'Ime Parkinga'},
            {title: 'Broj Mjesta'},
            {title: 'Broj Invalidskih Mjesta'},
            {title: 'Vrsta'},
            {title: 'Županija'},
            {title: 'Grad'},
            {title: 'Kvart'},
            {title: 'Ulica'},
            {title: 'Kućni Broj'},
            {title: 'Zona'},
            {title: 'Dnevna Karta'},
            {title: 'Pozivni Broj'},
            {title: '', wrap: true, render: function (id) 
                        {
                            return '<button type="submit" onClick="deleteParking(' + id + ');" value="0" class="red">Obriši</button>'
                        } 
            },
            {title: '', wrap: true, render: function (id) 
                        {
                            return '<button type="submit" onClick="edit(' + id + ');" value="0" class="red">Uredi</button>'
                        } 
            }
            ]     
        });

        var defaultSearch = 0;
        var defaultFilter;

        $("#search").on('change',function(){
            defaultSearch = this.value;
        });

        $("#filter").on('change', function() {
            defaultFilter = this.value;
        });

        $("#traži").on('click', function(e) {
            e.preventDefault();
            if (defaultSearch == "13"){
                table.search(defaultFilter).draw();
            }
            else{
                table.columns(defaultSearch).search(defaultFilter).draw();
            }
        });
    });
</script>

</html>