@{
    ViewData["Title"] = "Parking_spaces_total_table";
    Layout = "~/Views/Shared/_Layout_Engineering.cshtml";
    var token_check_1 = ViewBag.token_check;
}
<input type="hidden" id="token_check_id" value=@token_check_1 />


<h1 id="position_id">校園總停車區域</h1>


<div class="size2">
    <button class="btn btn-primary" onclick="add_park_space_view.showModal();map_show()" id="add_park_space_id">新增停車區</button>
    <!--<button class="btn btn-primary" onclick="add_violation_view.showModal();map_show_1()" id="add_violation_id">新增違規區域</button>-->
    <button style="height:30px;float:right " class="btn btn-outline-secondary" onclick="serch_click()">搜尋</button>
    <input type="text" style="float:right" placeholder="請輸入您的車牌" id="serch_text_id" />
    <table class="table">
        <thead>
            <tr>
                <th>
                    停車區域
                </th>
                <th>
                    總車位
                </th>
                <th>
                    剩餘車位
                </th>
                <th>

                </th>
            </tr>
        </thead>

        <tbody id="demo">      
        </tbody>


    </table>
</div>


<!-- css -->
<link rel="stylesheet"
      href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
      integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
      crossorigin="" />
<!-- js -->
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
        integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
        crossorigin="">
</script>
<style>
    #myMap {
        height: 300px;
    }

    #myMap_1 {
        height: 300px;
    }
</style>


<!--新增停車場-彈跳視窗-->
<div>
    <dialog id="add_park_space_view" style="width:100%;">
        <div>
            
            <button class="btn btn-danger" style="float:right" onclick="add_park_space_view.close();"> 關閉</button>
            停車區名稱 : <input type="text" id="add_park_space_name_text_id" /></br></br>
            停車位數量 : <input type="text" id="add_park_space_num_text_id" /></br></br>
            <button class="btn btn-outline-success" onclick="GPS_text_clicked()">停車場位置</button>緯度<input type="text" size="10" id="add_park_space_GPS_lat_text_id" />經度<input type="text" size="10" id="add_park_space_GPS_lng_text_id" /></br></br>
            <div id="myMap"></div>
            <button class="btn btn-success" onclick="add_park_space()">上傳</button>

        </div>
    </dialog>


</div>

<!--新增違規區域-彈跳視窗-->
<div>
    <dialog id="add_violation_view" style="width:100%;">
        <div>

            <button class="btn btn-danger" style="float:right" onclick="add_violation_view.close();"> 關閉</button>
            違規區域名稱 : <input type="text" id="add_violation_name_text_id" /></br></br>
            
            <button class="btn btn-outline-success" onclick="GPS_text_clicked()">停車場位置</button>緯度<input type="text" size="10" id="add_violation_GPS_lat_text_id" />經度<input type="text" size="10" id="add_violation_GPS_lng_text_id" /></br></br>
            <div id="myMap_1"></div>
            <button class="btn btn-success" onclick="add_violation()">上傳</button>

        </div>
    </dialog>


</div>




<!--map_show_停車場位置-->
<script>
    var map
    let lat ,lng
    function map_show() {
        var map_center = [23.691951, 120.535318]
        map = L.map("myMap", {

            center: map_center,
            //center: seriesData,
            zoom: 17
        });

        // 載入圖資
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map);
        const popup = L.popup();
        function onMapClick(e) {
            lat = e.latlng.lat; // 緯度
            lng = e.latlng.lng; // 經度
            popup
                .setLatLng(e.latlng)
                .setContent(`緯度：${lat}<br/>經度：${lng}`)
                .openOn(map);
            console.log(lat, lng)

        }

        map.on('click', onMapClick);


    }
    var map_1
    function map_show_1() {
        var map_center = [23.691951, 120.535318]
        map_1 = L.map("myMap_1", {

            center: map_center,
            //center: seriesData,
            zoom: 17
        });

        // 載入圖資
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        }).addTo(map_1);
        const popup = L.popup();
        function onMapClick(e) {
            lat = e.latlng.lat; // 緯度
            lng = e.latlng.lng; // 經度
            popup
                .setLatLng(e.latlng)
                .setContent(`緯度：${lat}<br/>經度：${lng}`)
                .openOn(map_1);
            console.log(lat, lng)

        }

        map_1.on('click', onMapClick);


    }

</script>

<!--紀錄位置-->
<script>
    function GPS_text_clicked(){
        document.getElementById("add_park_space_GPS_lat_text_id").value=lat
        document.getElementById("add_park_space_GPS_lng_text_id").value=lng

    }
</script>

<!--顯示車輛位置-彈跳視窗-->
<div>
    <dialog id="serch_view" style="width:100%;">
        <div>
            <button class="btn btn-danger" style="float:right" onclick="serch_view.close();"> 關閉</button>
            停車區名稱 : <input type="text" id="park_space_name_text_id" /> </br></br>
            車牌號碼 : <input type="text" id="license_plate_number_text_id" /></br></br>
            圖  片   : <img id="car_img_text_id" style="width:30%" /></br></br>
            進入時間 : <input type="text" id="in_time_text_id" /></br></br>
        </div>
    </dialog>
</div>

<!--透過車牌號碼搜尋-->
<script>
    function serch_click() {
        var license_plate_number = document.getElementById("serch_text_id").value
        $.ajax({
            type: "GET",
            url: "http://140.125.20.183:7700/api/Parking_spaces_instant/license_plate_number-" + license_plate_number,
            data: {},
            contentType: "application/json",
            headers: {
                'Authorization': token
            },
            success: function (Model) {
                console.log(Model)
                document.getElementById("park_space_name_text_id").value = Model[0].parking_spaces_name
                document.getElementById("license_plate_number_text_id").value = Model[0].license_plate_number
                document.getElementById("car_img_text_id").src = Model[0].car_img
                document.getElementById("in_time_text_id").value = Model[0].in_time
                serch_view.showModal()
                //set_data(Model)

            }
        });
    }
</script>


<!--獲取資料-->
<script>
    var token_ckeck //= document.getElementById("token_ckeck_id").value
    var position //職位
    function get_data(){
        console.log("start")
        //token_check = document.getElementById("token_check_id").value
        console.log(token_check)
        $.ajax({
            type: "GET",
            url: "http://140.125.20.183:7700/api/Parking_spaces_total_table",
            data: {},
            contentType: "application/json",
            headers: {
                'Authorization': token
            },
            success: function (Model) {
                //console.log(Model)
                set_data(Model)

            }
        });
    }
</script>

<!--放置資料-->
<script>
    function set_data(Model){

        if(token_check == "true"){
            document.getElementById("add_park_space_id").style.display= "block"
        }
        else{
            document.getElementById("add_park_space_id").style.display = "none"
        }
        if (position == "engineer"){
            document.getElementById("position_id").innerHTML = "<p " + '  onclick="engineer_mode()"' + '>校園總停車區域-工程模式</p>'
        }
        else if (position == "manager") {
            //document.getElementById("position_id").innerHTML = "<p " + '  onclick="manager_mode()"' + '>校園總停車區域-管理者模式</p>'
            document.getElementById("position_id").innerHTML = '校園總停車區域-管理者模式'
        }
        else{
            document.getElementById("position_id").innerHTML ='校園總停車區域'
        }



        table ="<tr>";
        //console.log(Model.length)
        if (Model.length>0){
            for (var i=0 ;i<Model.length;i++){
                if (Model[i].parking_spaces_name!=null){
                    table += "<td>" + Model[i].parking_spaces_name +"</td>"
                    table += "<td id='" + Model[i].parking_spaces_name + "_total'>" + Model[i].parking_spaces_total_num + "</td>"
                    table += "<td id='" + Model[i].parking_spaces_name + "_total'>" + Model[i].parking_spaces_now_num + "</td>"
                    //table += "<td id='" + Model[i].parking_spaces_name + "_now'>" + "</td>"
                    //get_single_parking_space_car(Model[i].parking_spaces_name)
                    //table += "<td>" + '<button class="btn btn-danger " onclick="delet_data(' + "'" + Model[i].parking_spaces_name + "'" + ')">刪除</button>'
                    table += "<td>" 
                    if (token_check == "true") {
                        table += '<button class="btn btn-outline-success " onclick="detail_data(' + "'" + Model[i].parking_spaces_name + "'" + ')">詳細</button>' + ' ' + ' '
                    }
                    //table += "<td>" + '<button class="btn btn-outline-success " onclick="detail_data(' + "'" + Model[i].parking_spaces_name + "'" + ')">詳細</button>' +' '+' '
                    table += '<button class="btn btn-outline-warning " onclick="map_data(' + "'" + Model[i].parking_spaces_name + "'" + ')">地圖</button>' + "</td>"
                }
                table += "</tr>"
                table += "<tr>"
                
            }
        }
        document.getElementById("demo").innerHTML = table
    }
 </script>



 <!--獲取當下停車數量-->
 <script>
    function get_single_parking_space_car(name){
        $.ajax({
            type: "GET",
            url: "http://140.125.20.183:7700/api/Parking_spaces_instant/parking_space_area-" + name,
            data: {},
            contentType: "application/json",
            headers: {
                'Authorization': token
            },
            success: function (Model) {
                var total = document.getElementById(name+"_total").innerHTML
                console.log(total)
                var now = Model.length
                document.getElementById(name + "_now").innerHTML = total - now
                
            }
        });
        console.log()
    }
 </script>



<!--上傳資料-->
<script>
    function add_park_space(){
        var parking_spaces_name = document.getElementById("add_park_space_name_text_id").value;
        var parking_spaces_total_num = document.getElementById("add_park_space_num_text_id").value;
        var latitude = document.getElementById("add_park_space_GPS_lat_text_id").value;
        var longitude = document.getElementById("add_park_space_GPS_lng_text_id").value;
        var obj = { parking_spaces_name: parking_spaces_name, parking_spaces_total_num: parking_spaces_total_num, longitude: longitude, latitude: latitude }
        var stringify_obj = JSON.stringify(obj);
        $.ajax({
            type: "POST",
            url: "http://140.125.20.183:7700/api/Parking_spaces_total_table",
            //url: "http://140.125.20.183:7700/api/Postural_Analysis_1",
            //data: {test_id: test_id, test_date: test_date, test_time: test_time, test_analyst: test_analyst, img: img, data_creat_time: "2022-10-04T18:47:40.887014" },
            data: stringify_obj,
            contentType: "application/json",
            headers: {
                'Authorization': token
            },
            success: function (msg) {
                console.log(msg)
                add_park_space_view.close()
                alert("上傳完成");
                get_data()
                //test_upload_bt_2()
                //wait_view()
            }
        });
    }
</script>

<!--刪除資料-->
<script>
    function delet_data(name){
        $.ajax({
            type: "DELETE",
            url: "http://140.125.20.183:7700/api/Parking_spaces_total_table/"+name,
            data: {},
            contentType: "application/json",
            headers: {
                'Authorization': token
            },
            success: function (msg) {
                console.log(msg)
                get_data()
            }
        });
    }
</script>


<!--前往詳細頁面-->
<script>
    function detail_data(name){
        window.location = "/Park_spaces/Single_parking_spaces_detail/" + name;
    }
    function map_data(name) {
        window.location = "/Park_spaces/Single_parking_spaces_map/" + name;
    }
    function engineer_mode() {
        window.location = "/Engineering/Engineering_Index";
    }
</script>


<!--檢查token-->
<script>
    var token
    function token_check() {
        // 检查本地存储中是否存在JWT令牌
        token = localStorage.getItem('token_park_space');
        console.log(token)
        $.ajax({
            type: "GET",
            url: 'http://140.125.20.183:7700/Users/token_check',
            headers: {
                'Authorization': token
            },
            success: function (response) {
                console.log(response)
                token_check = "true"
                from_token_import_id()
            },
            error: function (xhr) {
                token_check = "false"
                get_data()
                // 处理错误响应，例如跳转到未授权页面
                //window.location.href = 'https://example.com/unauthorized_page';
            }
        });
    }

    function from_token_import_id(){
        var token = localStorage.getItem('token_park_space');
        $.ajax({
            type: "GET",
            url: 'http://140.125.20.183:7700/Users/token-' + token,
            headers: {
                'Authorization': token
            },
            success: function (response) {
                console.log(response)
                from_id_import_user_data(response)


            }
        });
    }
    function from_id_import_user_data(id){
        var token = localStorage.getItem('token_park_space');
        $.ajax({
            type: "GET",
            url: 'http://140.125.20.183:7700/Users/user_id-' + id,
            headers: {
                'Authorization': token
            },
            success: function (model) {
                model = model.result
                position = model.lastname
                console.log(position)
                if (position == "engineer") {
                    get_data()
                }
                else {
                    window.location.href = '/';
                }
            }
        });
    }
</script>

<!--開機自啟-->
<script>
    window.onload = token_check;
</script>