@{
    ViewData["Title"] = "Manager_Index";
    Layout = "~/Views/Shared/_Layout_Manager.cshtml";
}

<!--演算法狀態-CSS-->
<style>
    .switch {
        position: relative;
        display: inline-block;
        width: 50px; /* 寬度 */
        height: 20px; /* 高度調整 */
        padding: 2px; /* 內邊距，讓開關有一些間距 */
        margin: 0; /* 外邊距 */
    }

        .switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }

    .slider {
        position: absolute;
        cursor: pointer;
        top: 0; /* 確保滑塊與開關的上邊緣對齊 */
        left: 0;
        right: 0;
        bottom: 0; /* 底部對齊，保持和外部高度一致 */
        background-color: #ccc;
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 34px;
    }

        .slider:before {
            position: absolute;
            content: "";
            height: 16px; /* 調整圓點的高度 */
            width: 16px; /* 調整圓點的寬度 */
            left: 2px; /* 圓點的左邊距 */
            top: 2px; /* 圓點的上邊距 */
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
            border-radius: 50%;
        }

    input:checked + .slider {
        background-color: #6f42c1; /* 選中時的背景顏色 */
    }

        input:checked + .slider:before {
            -webkit-transform: translateX(26px); /* 選中時，圓點移動的距離 */
            -ms-transform: translateX(26px);
            transform: translateX(26px);
        }

    /* 自定義CSS：移除「每日違規數量」和「每日車流量」之間的空白 */
    .card.shadow {
        margin-bottom: 0px !important; /* 移除卡片下方的邊距 */
    }

    .row > .col-xl-8, .row > .col-lg-8 {
        padding-bottom: 0; /* 調整列之間的內距 */
    }


    /* 其他現有樣式 */
    html, body {
        padding: 0;
        margin: 0;
    }

    #myMap {
        height: 30vh;
    }

    #img_id {
        display: block; /* 使圖像為塊級元素，以便使用 margin:auto; */
        margin: auto; /* 將圖像置中 */
        width: 80%
    }

    .table th, .table td {
        text-align: center; /* 居中對齊 */
    }

        .table th:nth-child(1), .table td:nth-child(1) {
            width: 200px; /* 根據需要調整寬度 */
        }

        .table th:nth-child(2), .table td:nth-child(2) {
            width: 200px; /* 根據需要調整寬度 */
        }
</style>

<h1>管理員模式</h1>
<div class="row">
    <!--每日違規數量-->
    <div class="col-xl-8 col-lg-8">
        <div class="card shadow mb-0">
            <!-- 將 mb-2 改為 mb-0 -->
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    每日違規數量
                    <button class="btn btn-info btn-circle btn-sm" style="float:right; background-image: url('/image/icon/F5.png'); background-size: cover;" onclick="get_violation_data_1()"></button>
                </h6>
            </div>
            <div class="card-body">
                <div class="chart-bar">
                    <canvas id="violation_car_Bar"></canvas>
                </div>
            </div>
        </div>

    </div>

    <!--演算法狀態-->
    <div class="col-xl-4 col-lg-4">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">演算法狀態</h6>
            </div>
            <div>
                <table class="table">
                    <thead>
                        <tr>
                            <th>演算法名稱</th>
                            <th>狀態</th>
                        </tr>
                    </thead>
                    <tbody id="demo"></tbody>
                </table>
            </div>
        </div>

        <!--字幕機狀態-->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    字幕機狀態
                    <button class="btn btn-info btn-circle btn-sm" style="float:right; background-image: url('/image/icon/F5.png'); background-size: cover;" onclick="get_LED_data()"></button>
                </h6>
            </div>
            <div>
                <table class="table">
                    <thead>
                        <tr>
                            <th>停車場位置</th>
                            <th>字幕機IP</th>
                            <th>顯示參數</th>
                        </tr>
                    </thead>
                    <tbody id="LED_table"></tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <!--每日車流量-->
    <div class="col-xl-8 col-lg-8">
        <div class="card shadow mb-0">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    每日車流量<button class="btn btn-info btn-circle btn-sm" style="float:right; background-image: url('/image/icon/F5.png'); background-size: cover;" onclick="get_in_yuntech_data_1()"></button>
                </h6>
            </div>
            <div class="card-body">
                <div class="chart-area">
                    <canvas id="in_car_Bar"></canvas>
                </div>
            </div>
        </div>
    </div>
    <!-- 總車位與月租Excel 文件 及 校園車位信息 -->
    <style>
        .table th, .table td {
            text-align: center; /* 居中對齊 */
        }

            .table th:nth-child(1), .table td:nth-child(1) {
                width: 200px; /* 根據需要調整寬度 */
            }

            .table th:nth-child(2), .table td:nth-child(2) {
                width: 200px; /* 根據需要調整寬度 */
            }
    </style>
    <div class="col-xl-8 col-lg-8">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    下載 總車位與月租Excel 文件 及 校園車位信息
                    <button class="btn btn-info btn-circle btn-sm" style="float:right; background-image: url('/image/icon/F5.png'); background-size: cover;" onclick="get_yuntech_parking_data()"></button>
                </h6>
            </div>
            <div class="card-body">
                <!-- 下載 Excel 文件按鈕 -->
                <div class="mb-3">
                    <button class="btn btn-primary" onclick="downloadExcel()">即時車位下載 Excel</button>
                </div>

                <!-- 校園總車位數量表格 -->
                <div>
                    <h6 class="font-weight-bold text-primary">校園總車位數量</h6>
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>總車位</th>
                                <th>剩餘車位</th>
                            </tr>
                        </thead>
                        <tbody id="parking_all_table">
                            `
                            <!-- 動態更新校園總車位與剩餘車位 -->
                        </tbody>
                    </table>
                </div>

                <!-- 校園當前車流量表格 -->
                <div>
                    <h6 class="font-weight-bold text-primary">校園當前車流量</h6>
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>類別</th>
                                <th>數量</th>
                            </tr>
                        </thead>
                        <tbody id="monthly_table">
                            <!-- 動態更新月租與臨停車輛數據 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>




    <!--彈跳視窗-->
    <div>
        <dialog id="RTSP_view" style="width:80%;">
            <div>
                <p id="choose_cam_id"></p>
                <button class="btn btn-danger" style="float:right" onclick="RTSP_Close();"> 關閉</button>
                <img id="img_id" />
            </div>
        </dialog>
    </div>
    <!--Excel下載-->
    <script>
        function downloadExcel() {
            fetch('http://140.125.20.183:7700/api/ParkingLogs/DownloadCurrentStatusExcel', {
                method: 'GET',
                headers: {
                    'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
                }
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok.');
                    }
                    return response.blob();
                })
                .then(blob => {
                    const url = window.URL.createObjectURL(blob);
                    const a = document.createElement('a');
                    a.href = url;
                    // 獲取當前日期、星期幾和時間
                    const now = new Date();
                    const options = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: false };
                    const formattedDate = now.toLocaleDateString('zh-TW', options).replace(/\//g, '-'); // 格式化日期
                    const weekDay = now.toLocaleString('zh-TW', { weekday: 'long' }); // 獲取星期幾


                    // 設定下載檔案名稱
                    a.download = `即時車位_${weekDay}_${formattedDate}.xlsx`;



                    document.body.appendChild(a);
                    a.click();
                    a.remove();
                    window.URL.revokeObjectURL(url); // Optional: Clean up the URL object
                })
                .catch(error => console.error('There was a problem with the fetch operation:', error));
        }
    </script>


    <script src="/bootstrap_1/vendor/chart.js/Chart.min.js"></script>

    <!--設定數據圖數據-每日車流量-->
    <script>
        function set_in_yuntech_table(labels, dailyTrafficData) {
            date = JSON.parse(JSON.stringify(labels));
            values = JSON.parse(JSON.stringify(dailyTrafficData));
            // 假設你有一些資料，例如每日車流量
            var dailyTrafficData = dailyTrafficData

            // 取得 canvas 元素
            var ctx1 = document.getElementById('in_car_Bar')


            // 使用 Chart.js 繪製長條圖
            var myLineChart = new Chart(ctx1, {
                type: 'line',
                data: {
                    labels: date,
                    datasets: [{
                        label: '車流量',
                        data: values,
                        backgroundColor: 'rgba(75, 192, 192, 0.2)', // 設定背景色
                        borderColor: 'rgba(75, 192, 192, 1)', // 設定邊框色
                        pointHitRadius: 10,
                        pointBorderWidth: 2,
                        ineTension: 0.3,
                        pointRadius: 3,
                        pointHoverRadius: 3,
                    }]
                },
                options: {
                    responsive: true, // 啟用 responsive 設置
                    maintainAspectRatio: false, // 保持長寬比例
                    scales: {
                        y: {
                            beginAtZero: true
                        },
                        xAxes: {
                            gridLines: {
                                display: false // 移除 x 軸的網格線
                            }
                        }
                    }
                }
            });



        }

        function set_in_yuntech_table_1(labels, dailyTrafficData) {
            date = JSON.parse(JSON.stringify(labels));
            values = JSON.parse(JSON.stringify(dailyTrafficData));
            // 假設你有一些資料，例如每日車流量
            var dailyTrafficData = dailyTrafficData

            // 取得 canvas 元素
            var ctx = document.getElementById('in_car_Bar')


            // 使用 Chart.js 繪製長條圖
            var myBarChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: date.reverse(),
                    datasets: [{
                        label: '車流量',
                        data: values.reverse(),
                        backgroundColor: 'rgba(75, 192, 192, 0.2)', // 設定背景色
                        borderColor: 'rgba(75, 192, 192, 1)', // 設定邊框色
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true, // 啟用 responsive 設置
                    maintainAspectRatio: false, // 保持長寬比例
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });



        }


    </script>

    <!--設定數據圖數據-每日違規數量-->
    <script>
        function set_violation_table(labels, dailyTrafficData) {

            date = JSON.parse(JSON.stringify(labels));
            values = JSON.parse(JSON.stringify(dailyTrafficData));
            // 假設你有一些資料，例如每日違規數量
            var dailyTrafficData = dailyTrafficData;

            // 取得 canvas 元素
            var ctx = document.getElementById('violation_car_Bar')



            // 使用 Chart.js 繪製長條圖
            var myBarChart = new Chart(ctx, {
                type: 'bar',
                data: {
                    labels: date,
                    datasets: [{
                        label: '違規數量',
                        data: values,
                        backgroundColor: 'rgba(255, 0, 0, 0.5)', // 設定半透明的紅色背景
                        borderColor: 'rgba(255, 0, 0, 1)', // 設定不透明的紅色邊框
                        borderWidth: 1
                    }]
                },
                options: {
                    responsive: true, // 啟用 responsive 設置
                    maintainAspectRatio: false, // 保持長寬比例
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            });
        }


    </script>




    <!--獲取違規資料-->
    <script>
        var token_ckeck //= document.getElementById("token_ckeck_id").value
        var position //職位
        function get_violation_data_1() {
            day = 30
            violation_car_list = []
            //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/Violation_car_table/get_day_violation-" + day,
                data: {},
                contentType: "application/json",
                headers: {
                    'Authorization': token
                },
                success: function (Model) {
                    //get_violation_data_2(Model)
                    console.log(Model)
                    set_violation_data_1(Model)

                }
            });
        }





    </script>

    <!--設置違規資料-->
    <script>

        function set_violation_data_1(Model) {
            var date_list = []
            var violation_car_list = []
            if (Model.length > 0) {
                for (var i = 0; i < Model.length; i++) {
                    var D_1 = new Date(Model[i]['date']);
                    var MD = D_1.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' });
                    date_list.push(MD)
                    violation_car_list.push(Model[i]['occurrences'])
                }
            }
            set_violation_table(date_list, violation_car_list)
        }

    </script>



    <!--獲取進入雲科資料-->
    <script>
        function get_in_yuntech_data_1() {
            day = 30
            in_car_list = []
            $.ajax({
                type: "GET",
                url: "http://140.125.20.183:7700/api/Yuntech_in_car_table/get_day_in_car-" + day,
                data: {},
                contentType: "application/json",
                headers: {
                    'Authorization': token
                },
                success: function (Model) {
                    set_in_yuntech_data_1(Model)


                }
            });
        }
    </script>

    <!--設置進入雲科資料-->
    <script>
        var in_car_list = []
        function set_in_yuntech_data_1(Model) {
            var date_list = []
            var in_car_list = []
            if (Model.length > 0) {
                for (var i = 0; i < Model.length; i++) {
                    var D_1 = new Date(Model[i]['date']);
                    var MD = D_1.toLocaleDateString('en-US', { month: '2-digit', day: '2-digit' });
                    date_list.push(MD)
                    in_car_list.push(Model[i]['occurrences'])
                }
            }
            set_in_yuntech_table(date_list, in_car_list)

        }
    </script>

    <!--獲取演算法資料-->
    <script>
        var token = localStorage.getItem('token_park_space');
        function get_algorithm_data() {
            $.ajax({
                type: "GET",
                url: "http://140.125.20.183:7700/api/Parking_space_algorithm",
                data: {},
                headers: {
                    'Authorization': token
                },
                contentType: "application/json",
                success: function (Model) {
                    //console.log(Model)
                    put_algorithm_data(Model)
                }
            });
        }
        function get_algorithm_data_1() {
            $.ajax({
                type: "GET",
                url: "http://140.125.20.183:7700/api/Parking_space_algorithm",
                data: {},
                headers: {
                    'Authorization': token
                },
                contentType: "application/json",
                success: function (Model) {
                    //console.log(Model)
                    set_algorithm_data(Model)
                }
            });
        }
    </script>

    <!--編輯演算法資料-->
    <script>
        function put_algorithm_data(Model) {
            if (Model.length > 0) {
                for (var i = 0; i < Model.length; i++) {
                    if (Model[i].algorithm_name != null) {
                        data_1 = {
                            "algorithm_name": Model[i].algorithm_name,
                            "state": "False",
                            "run_time": Model[i].run_time,
                            "algorithm_serial_num": Model[i].algorithm_serial_num
                        }
                        var stringify_obj = JSON.stringify(data_1);
                        $.ajax({
                            type: "PUT",
                            url: "http://140.125.20.183:7700/api/Parking_space_algorithm/" + Model[i].algorithm_serial_num,
                            data: stringify_obj,
                            headers: {
                                'Authorization': token
                            },
                            contentType: "application/json",
                            success: function (Model) {
                                setTimeout('get_algorithm_data_1()', 1000);
                                ////console.log(Model)
                                //window.location.reload();
                            }
                        });

                    }
                }
            }
        }
    </script>

    <!--放置演算法資料-->
    <script>
        var c = 0
        function set_algorithm_data(Model) {

            table = "<tr>";
            if (Model.length > 0) {
                for (var i = 0; i < Model.length; i++) {
                    if (Model[i].algorithm_name != null) {
                        table += "<td>" + Model[i].algorithm_name + "</td>"
                        var state = '<label class="switch"><input type="checkbox" ><span class="slider"></span></label>'
                        if (Model[i].state == "True") {
                            var state = '<label class="switch"><input type="checkbox" checked=""><span class="slider"></span></label>'
                        }
                        table += "<td>" + state + "</td>"
                    }
                    table += "</tr>"
                    table += "<tr>"
                }
            }
            document.getElementById("demo").innerHTML = table
            if (c < 10) {
                setTimeout('get_algorithm_data_1()', 1000);
                c = c + 1
            }
        }
    </script>



    <!--獲取字幕機資料-->
    <script>
        function get_LED_data() {
            $.ajax({
                type: "GET",
                url: "http://140.125.20.183:7700/api/Parking_spaces_lcd_instand",
                data: {},
                headers: {
                    'Authorization': token
                },
                contentType: "application/json",
                success: function (Model) {
                    //console.log(Model)
                    set_LED_data(Model)
                }
            });
        }
    </script>

    <!--放置字幕機資料-->
    <script>
        function set_LED_data(Model) {
            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>"

                        var NewArray = Model[i].lcd_ip.split(":");
                        table += "<td>" + Model[i].lcd_ip + "</td>"
                        table += "<td>" + Model[i].parking_space_amount + "</td>"



                    }
                    table += "</tr>"
                    table += "<tr>"
                }
            }
            document.getElementById("LED_table").innerHTML = table
        }
    </script>


    <!--獲取月租臨停資料-->
    <script>
        function get_monthly_rent_data() {
            $.ajax({
                type: "GET",
                url: "http://140.125.20.183:7700/api/Yuntech_monthly_rent_number",
                headers: {
                    'Authorization': token
                },
                contentType: "application/json",
                success: function (Model) {
                    console.log(Model)
                    set_monthly_data(Model);
                },
                error: function (xhr, status, error) {
                    console.error("獲取數據失敗:", error);
                }
            });
        }

    </script>

    <!--放置月租臨停資料-->
    <script>
        function set_monthly_data(Model) {
            var table = "<tr>";
            if (Model.length > 0) {
                for (var i = 0; i < Model.length; i++) {
                    if (Model[i].category != null) {
                        table += "<td>" + Model[i].category + "</td>"

                        table += "<td>" + '<input type="text" id = "parking_space_amount_id" value =' + Model[i].number + ' />' + "</td > "
                        table += "<td>" + '<button class="btn btn-outline-warning " onclick="Update_monthly_rent_number(' + "'" + i + "'" + ')">更新並上傳</button>'
                    }
                    table += "</tr>"
                    table += "<tr>"
                }
            }
            document.getElementById("monthly_table").innerHTML = table;
        }
    </script>

    <!--更新剩餘車位資料-->
    <script>
        function Update_monthly_rent_number(num) {
            var Row = $('#monthly_table tr:eq(' + num + ')');
            var category = Row.find('td:eq(0)').text();
            var number = Row.find('td:eq(1) input').val();
            console.log(category, number);
            var data = {
                "category": category,
                "number": number
            }
            var stringify_obj = JSON.stringify(data);
            $.ajax({
                type: "PUT",
                url: "http://140.125.20.183:7700/api/Yuntech_monthly_rent_number/" + category,
                data: stringify_obj,
                headers: {
                    'Authorization': token
                },
                contentType: "application/json",
                success: function (Model) {
                    window.alert("更新成功")
                }
            });
        }

    </script>


    <!--獲取總車位資料-->
    <script>
        function get_yuntech_parking_data() {
            $.ajax({
                type: "GET",
                url: "http://140.125.20.183:7700/api/Yuntech_parking",
                data: {},
                headers: {
                    'Authorization': token
                },
                contentType: "application/json",
                success: function (Model) {
                    set_yuntech_parking_data(Model)
                }
            });
        }
    </script>

    <!--放置總車位資料-->
    <script>
        function set_yuntech_parking_data(Model) {
            table = "<tr>";
            if (Model.length > 0) {
                for (var i = 0; i < Model.length; i++) {
                    if (Model[i].all_num != null) {
                        table += "<td>" + Model[i].all_num + "</td>"

                        table += "<td>" + '<input type="text" id = "parking_space_amount_id" value =' + Model[i].now_num + ' />' + "</td > "
                        table += "<td>" + '<button class="btn btn-outline-warning " onclick="Update_now_num(' + "'" + Model[i].all_num + "'" + ')">更新並上傳</button>'
                    }
                    table += "</tr>"
                    table += "<tr>"
                }
            }
            document.getElementById("parking_all_table").innerHTML = table
        }
    </script>

    <!--更新剩餘車位資料-->
    <script>
        function Update_now_num(all_num) {
            $.ajax({
                type: "GET",
                url: "http://140.125.20.183:7700/api/Yuntech_parking/" + all_num,
                data: {},
                headers: {
                    'Authorization': token
                },
                contentType: "application/json",
                success: function (Model) {
                    console.log(Model)
                    Update_detail_1(Model)
                }
            });
        }
        function Update_detail_1(Model) {
            var parking_spaces_now_num = document.getElementById("parking_space_amount_id").value
            Model.now_num = parking_spaces_now_num
            var stringify_obj = JSON.stringify(Model);

            $.ajax({
                type: "PUT",
                url: "http://140.125.20.183:7700/api/Yuntech_parking/" + Model.all_num,
                data: stringify_obj,
                headers: {
                    'Authorization': token
                },
                contentType: "application/json",
                success: function (Model) {
                    console.log(Model)
                }
            });
        }
    </script>


    <!--跳轉頁面-->
    <script>

        function Yuntech_RTSP() {
            window.open("http://140.125.50.178:7006/", "_blank");
        }
    </script>

    <!--串流影像-->
    <script>
        var IP_1
        var stop = false

        function CAM_RTSP(IP) {
            //console.log(IP)
            IP_1 = IP
            $.ajax({
                type: "GET",
                url: 'http://140.125.20.183:7705/IP/' + IP,
                headers: {
                    'Authorization': token
                },
                success: function (response) {
                    stop = false
                    RTSP_START(response)
                    token_check = "true"
                    //from_token_import_id()
                },
                error: function (xhr) {
                    //console.log("111")
                    window.alert("相機未連線");
                }

            });
        }

        function CAM_RTSP_1() {
            //console.log(IP_1)
            $.ajax({
                type: "GET",
                url: 'http://140.125.20.183:7705/IP/' + IP_1,
                headers: {
                    'Authorization': token
                },
                success: function (response) {
                    //webcam_view.showModal()
                    RTSP_START(response)

                    token_check = "true"
                    //from_token_import_id()
                },

            });
        }
        function CAM_RTSP_2(IP) {
            console.log(IP)
            IP_1 = IP
            $.ajax({
                type: "GET",
                url: 'http://140.125.50.178:5000/IP/' + IP,
                headers: {
                    'Authorization': token
                },
                success: function (response) {
                    stop = false
                    RTSP_START_2(response)
                    token_check = "true"
                    //from_token_import_id()
                },
                error: function (xhr) {
                    console.log("111")
                    window.alert("相機未連線");
                }

            });
        }

        function CAM_RTSP_3() {
            console.log(IP_1)
            $.ajax({
                type: "GET",
                url: 'http://140.125.50.178:5000/IP/' + IP_1,
                headers: {
                    'Authorization': token
                },
                success: function (response) {
                    //webcam_view.showModal()
                    RTSP_START_2(response)

                    token_check = "true"
                    //from_token_import_id()
                },

            });
        }
    </script>


    <!--開啟視窗並串流-->
    <script>
        function RTSP_START(img_base_64) {
            ////console.log(img)
            img = document.getElementById("img_id")
            img.src = img_base_64
            if (stop == false) {
                setTimeout('CAM_RTSP_1()', 20);
            }

        }
        function RTSP_START_2(img_base_64) {
            //console.log(img)
            img = document.getElementById("img_id")
            img.src = img_base_64
            if (stop == false) {
                setTimeout('CAM_RTSP_3()', 20);
            }

        }
    </script>

    <!--關閉串流-->
    <script>
        function RTSP_Close() {
            RTSP_view.close()
            img = document.getElementById("img_id")
            img.src = ''
            stop = true
        }
    </script>

  


    <!--獲取資料-->
    <script>
        var token = localStorage.getItem('token_park_space');
        var token_ckeck //= document.getElementById("token_ckeck_id").value
        var position //職位
        var location_name_list = []
        var location_lat_list = []
        var location_lng_list = []

        var Y_location_name_list = []
        var Y_location_lat_list = []
        var Y_location_lng_list = []

        function get_RTSP_data() {
            //token_check = document.getElementById("token_check_id").value

            $.ajax({
                type: "GET",
                url: "http://140.125.20.183:7700/api/Parking_spaces_total_table",
                data: {},
                headers: {
                    'Authorization': token
                },
                contentType: "application/json",
                success: function (Model) {
                    set_RTSP_data_1(Model)
                    get_RTSP_data_2()
                }
            });
        }

        function get_RTSP_data_2() {
            //token_check = document.getElementById("token_check_id").value

            $.ajax({
                type: "GET",
                url: "http://140.125.20.183:7700/api/Parking_spaces_violation_total_table",
                data: {},
                headers: {
                    'Authorization': token
                },
                contentType: "application/json",
                success: function (Model) {
                    set_RTSP_data_2(Model)
                    get_RTSP_data_4()
                }
            });
        }

        function get_RTSP_data_4() {
            //token_check = document.getElementById("token_check_id").value

            $.ajax({
                type: "GET",
                url: "http://140.125.20.183:7700/api/Yuntech_cam_total_table",
                data: {},
                headers: {
                    'Authorization': token
                },
                contentType: "application/json",
                success: function (Model) {
                    console.log(Model)
                    set_RTSP_data_4(Model)
                    map_show()
                }
            });
        }

        var location_name
        function get_RTSP_data_3(location_name) {
            location_name = location_name
            $.ajax({
                type: "GET",
                url: "http://140.125.20.183:7700/api/Parking_spaces_cam",
                data: {},
                headers: {
                    'Authorization': token
                },
                contentType: "application/json",
                success: function (Model) {
                    //console.log(location_name)
                    set_RTSP_data_3(Model, location_name)


                }
            });
        }

        function get_RTSP_data_5(location_name) {
            location_name = location_name
            $.ajax({
                type: "GET",
                url: "http://140.125.20.183:7700/api/Yuntech_cam",
                data: {},
                headers: {
                    'Authorization': token
                },
                contentType: "application/json",
                success: function (Model) {
                    console.log(location_name)
                    set_RTSP_data_5(Model, location_name)


                }
            });
        }


    </script>

    <!--放置資料-->
    <script>
        function set_RTSP_data_1(Model) {
            for (var i = 0; i < Model.length; i++) {

                var hasValue = location_name_list.includes(Model[i].parking_spaces_name);
                if (hasValue == false) {
                    location_name_list.push(Model[i].parking_spaces_name)
                    location_lat_list.push(Model[i].latitude)
                    location_lng_list.push(Model[i].longitude)
                }

            }

            ////console.log(location_name_list); // 輸出: true
        }

        function set_RTSP_data_2(Model) {
            for (var i = 0; i < Model.length; i++) {

                var hasValue = location_name_list.includes(Model[i].parking_spaces_violation_name);
                if (hasValue == false) {
                    location_name_list.push(Model[i].parking_spaces_violation_name)
                    location_lat_list.push(Model[i].latitude)
                    location_lng_list.push(Model[i].longitude)
                }

            }


        }

        function set_RTSP_data_4(Model) {
            for (var i = 0; i < Model.length; i++) {

                var hasValue = Y_location_name_list.includes(Model[i].location_name);
                if (hasValue == false) {
                    Y_location_name_list.push(Model[i].location_name)
                    Y_location_lat_list.push(Model[i].latitude)
                    Y_location_lng_list.push(Model[i].longitude)
                }

            }

        }

        function set_RTSP_data_3(Model, location_name) {
            Button = '<button class="btn btn-outline-success " onclick="CAM_RTSP(';
            var i1 = 0
            if (Model.length > 0) {
                for (var i = 0; i < Model.length; i++) {
                    if (Model[i].parking_spaces_name == location_name) {
                        i1 = i1 + 1
                        if (parseInt(Model[i].port) > 400) {
                            Button += "'" + Model[i].ip + ":" + Model[i].port + "'" + ')">' + Model[i].ip + ":" + Model[i].port + '</button>'
                        }
                        Button += '<button class="btn btn-outline-success " onclick="CAM_RTSP(';
                        if (i1 == 1) {
                            CAM_RTSP(Model[i].ip + ":" + Model[i].port)
                        }

                    }
                }
            }
            document.getElementById("choose_cam_id").innerHTML = Button
            RTSP_view.showModal()

        }

        function set_RTSP_data_5(Model, location_name) {
            Button = '<button class="btn btn-outline-success " onclick="CAM_RTSP_2(';
            var i1 = 0
            if (Model.length > 0) {
                for (var i = 0; i < Model.length; i++) {
                    if (Model[i].location_name == location_name) {
                        i1 = i1 + 1
                        console.log(Model[i].ip)
                        Button += "'" + Model[i].ip + "'" + ')">' + Model[i].ip + '</button>'
                        Button += '<button class="btn btn-outline-success " onclick="CAM_RTSP_2(';
                        if (i1 == 1) {
                            CAM_RTSP_2(Model[i].ip)
                        }
                    }
                }
            }
            document.getElementById("choose_cam_id").innerHTML = Button
            RTSP_view.showModal()

        }
    </script>



    <!--Get_data-->
    <script>
        function get_data() {
            get_violation_data_1()
            get_algorithm_data()
            get_LED_data()
            get_monthly_rent_data()
            get_RTSP_data()
            get_in_yuntech_data_1()
            get_yuntech_parking_data()
        }
    </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"
                    window.location.href = '/';
                    // 处理错误响应，例如跳转到未授权页面
                    //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 == "manager") {
                        get_data()
                    }
                    else {
                        window.location.href = '/';
                    }

                }
            });
        }
    </script>

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