{% load static %}
<!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>Document</title>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.78/Build/Cesium/Cesium.js"></script>
    <link href="{% static 'css/widgets.css' %}" rel="stylesheet">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<style>
    .cesium-viewer-bottom {
        display: none;
    }
    
    .cesium-viewer-timelineContainer,
    .cesium-viewer-animationContainer,
    .cesium-viewer-bottom {
        display: none;
    }
    
    .cesium-viewer-toolbar {
        display: none;
    }
    
    .cesium-infoBox {
        display: none;
    }
</style>

<body>
    <div style="height: 93vh;">

        {% block content %}
        <div>
            <a href="#" class="btn btn-default" id="button_hide_panel" data-toggle="tooltip" data-placement="right" title="Ciutkan panel"><span class="caret" style="margin-left: -5px;transform: rotate(90deg)"></span></a>
        </div>
        <div>
            <a href="#" class="btn btn-default" id="button_unhide_panel" data-toggle="tooltip" data-placement="right" title="Ciutkan panel"><span class="caret" style="margin-left: -5px;transform: rotate(270deg)"></span></a>
        </div>
        <div id="panel-samping" style="width: 380px;
        height: 100px;
        max-width: 100%;
        float: right;
        top: 68px;
        left: -5px;
        position: absolute;
        z-index: 999;
        display: none;
        background-color: white;">
            <div class="sidebar-wrapper">
                <div class="panel panel-default" id="features">


                    <div class="sidebar-table" id="isi_panel">
                        <!-- <input type="submit" value="submit"> -->
                        <a href="" id="btn_edit_kelurahan" style="position: absolute;
                        top: 240px;
                        right: 5px;">Edit</a>
                        <table class="table table-hover tasks-list">

                            <!-- panel samping js disini -->

                        </table>

                    </div>
                </div>
            </div>
        </div>
        {% endblock content %}

        <div id="map-cesium"></div>
    </div>
</body>

</html>

<script>
    var o_pol = "{{ polygon_o }}".replace(/&#x27;/g, '');
    var pol_o = o_pol.replace(/&quot;/g, ',');
    var polygon_o = JSON.parse("" + pol_o + "");

    var i_pol = "{{ info_poly }}".replace(/&#x27;/g, '"');
    var polygon_info = JSON.parse("" + i_pol + "");
    console.log(pol)

    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhOTc0NDkxMi02N2NkLTQwYjMtOTE1Yi1iMGNkZDU0Zjg3MGMiLCJpZCI6NDQ1ODgsImlhdCI6MTYxNDE0NjM5NH0.sRHzNNa7uV_huqGxERySWlL8J5UVx1VwU-pRwNd0GJk';

    var map_cesium = new Cesium.Viewer('map-cesium');


    for (var i = 0; i < polygon_o.length; i++) {

        var poly_osm = map_cesium.entities.add({
            polygon: {
                hierarchy: Cesium.Cartesian3.fromDegreesArray(
                    polygon_o[i]
                ),
                height: 0,
                material: Cesium.Color.FLORALWHITE.withAlpha(0.7),
                outline: true,
                outlineColor: Cesium.Color.GREEN,

            },
            name: polygon_info[i]
        });

        poly_osm.polygon.extrudedHeight = 10;
    };

    map_cesium.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(104.171696, -4.120217, 10000)
    });


    map_cesium.camera.moveEnd.addEventListener(function() {
        var cartographic = new Cesium.Cartographic();
        var windowPosition = new Cesium.Cartesian2(map_cesium.container.clientWidth / 2, map_cesium.container.clientHeight / 2);
        var pickRay = map_cesium.scene.camera.getPickRay(windowPosition);
        var pickPosition = map_cesium.scene.globe.pick(pickRay, map_cesium.scene);
        var pickPositionCartographic = map_cesium.scene.globe.ellipsoid.cartesianToCartographic(pickPosition);
        var longitudee = pickPositionCartographic.longitude * (180 / Math.PI);
        var lattitudee = pickPositionCartographic.latitude * (180 / Math.PI)
        var tinggi = (cartographic.height * 0.001).toFixed(1);
        console.log(lattitudee)
        console.log(longitudee)
        console.log(pickRay)
    });

    var handler = new Cesium.ScreenSpaceEventHandler(map_cesium.scene.canvas);

    map_cesium.selectedEntityChanged.addEventListener(function(selectedEntity) {
        if (Cesium.defined(selectedEntity)) {
            if (Cesium.defined(selectedEntity.name)) {
                var id_poly = selectedEntity.name

                $.ajax({
                    url: "{% url 'api:edit' %}",
                    data: {
                        'id_poly': id_poly
                    },
                    dataType: 'json',
                    success: function(data) {
                        console.log(data)
                        content = `<table class="table table-hover tasks-list">
    <thead style="text-align: center;">
        <tr>
            <th style="padding: 0 0 0 0px;">
            </th>
        </tr>
    </thead>
    <tbody>
        <div class= "container">
            <tr style="height: 100px;">
                <th>
                    <div>
                        <h1 style="font-family: Google Sans,Roboto,Arial,sans-serif;
                        letter-spacing: 0;
                        font-weight: 400;">
                            <span style="font-size: x-large;">
                                ` + data['properties']['f2'] + `
                            </span>
                        </h1>
                    </div>
                </th>
            </tr>
        </div>
        <div class= "container">
            <tr style="height: 30px;">
                <th>
                    <span>
                        ` + data['properties']['f3'] + `
                    </span>
                </th>
            </tr>
        </div>
        <div class= "container">
            <tr style="height: 40px;">
                <th>
                    <span>
                        ` + data['administrasi']['f1'] + `, ` + data['administrasi']['f2'] + `, ` + data['administrasi']['f3'] + `, ` + data['administrasi']['f4'] + `
                    </span>
                </th>
            </tr>
        </div>
        <div class= "container">
            <tr style="height: 40px;">
                <th>
                    <p>
                        <span>Luas Bangunan : ` + data['administrasi']['f6'] + `</span>
                    </p>
                    <p>
                        <span>Luas Tanah : ` + data['administrasi']['f7'] + `</span>
                    </p>
                    <p>
                        <span>Tinggi Bangunan : ` + data['administrasi']['f8'] + `</span>
                    </p>
                    <p>
                        <span>Pemilik : ` + data['administrasi']['f10'] + `</span>
                    </p>
                </th>
            </tr>
        </div>
    </tbody>
</table>`;
                        $("#isi_panel").html(content)
                        $("#panel-samping").css("display", "block");
                        $("#button_hide_panel").css("display", "block");


                    }
                })
                console.log('Selected ' + selectedEntity.name);
            } else {
                console.log('Unknown entity selected.');
            }
        } else {
            console.log('Deselected.');
        }
    });
</script>