<style>
    .elevator {
        background-color: #fff;
        height: 520px;
    }

    table.elevator-build {
        /*border: 1px double #000;*/
    }

    table.elevator-build td {
        padding: 0.2rem 0.5rem;
        height: 50px;
        width: 45px;
        border: 1px solid #000;
    }

    elevator .elevator-body, elevator .elevator-header {
        padding: 0.7rem;
    }
</style>

<div class="d-flex">
    <!-- 左圖區 -->
    <div class="col-3 my-3">

        <div style="position:relative ">
            <div id="elevatorBlock" class="elevator">
                <div class="elevator-header">

                </div>
                <div class="elevator-body d-flex align-items-center justify-content-center h-100 yt-table-container">
                    <div id="floorTable_wrapper" class="elevator-build-container">
                        <table id="floorTable" class="elevator-build m-auto">
                        </table>
                    </div>

                </div>
            </div>
            <!--<div>
                <img src="img/elevator.jpg" class="img-fluid" style="min-height: 520px" />
            </div>-->
        </div>

        <!-- <img src="img/elevator.jpg" class="img-fluid" style="min-height: 520px" /> -->

        <div class="mt-2">
            <img src="img/總公司1F平面.jpg" class="img-fluid" style="min-height: 330px" />
        </div>
    </div>
    <!-- End-左圖區 -->
    <!-- 中間卡片區 -->
    <div class="col-7 my-3">
        <div id="eleCards" class="row">
            <div class="card text-white bg-info mx-1 mb-3 col-4" style="max-width: 18rem">
                <div type="button" class="card-body" data-toggle="modal" data-target="#card1">
                    <span class="d-flex">
                        <h5 class="card-title">號機別 : 1</h5>
                        <i class="fas fa-caret-up fa-3x ml-auto"></i>
                    </span>
                    <h4 class="d-flex justify-content-end">10F</h4>
                    <span class="d-flex">
                        <p class="card-text">狀態 : 運行中</p>
                        <i class="fas fa-caret-down fa-3x ml-auto animate__animated animate__flash animate__infinite animate__slower"></i>
                    </span>
                </div>
            </div>
            <div class="card text-white bg-danger mx-1 mb-3 col-4" style="max-width: 18rem">
                <div type="button" class="card-body">
                    <span class="d-flex">
                        <h5 class="card-title">號機別 : 2</h5>
                        <i class="fas fa-caret-up fa-3x ml-auto"></i>
                    </span>
                    <h4 class="d-flex justify-content-end">5F</h4>
                    <span class="d-flex">
                        <p class="card-text animate__animated animate__flash animate__infinite animate__slower">
                            狀態 : 維修
                        </p>
                        <i class="fas fa-caret-down fa-3x ml-auto"></i>
                    </span>
                </div>
            </div>
            <div class="card text-white bg-info mx-1 mb-3 col-4" style="max-width: 18rem">
                <div type="button" class="card-body">
                    <span class="d-flex">
                        <h5 class="card-title">號機別 : 3</h5>
                        <i class="fas fa-caret-up fa-3x ml-auto animate__animated animate__flash animate__infinite animate__slower"></i>
                    </span>
                    <h4 class="d-flex justify-content-end">3F</h4>
                    <span class="d-flex">
                        <p class="card-text">狀態 : 運行中</p>
                        <i class="fas fa-caret-down fa-3x ml-auto"></i>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <!-- End-中間卡片區 -->
    <!-- 右邊功能區 -->
    <div class="col-2 my-3">
        <div class="d-flex">
            <div class="btn-group col-xxl-3 mb-2">
                <button class="btn btn-info" data-toggle="modal" data-target="#staticBackdrop">
                    重播系統 <i class="fas fa-play"></i>
                </button>
            </div>
            <div>
                <i type="button" class="fas fa-cog fa-2x ml-3 my-2" data-toggle="modal"
                   data-target="#exampleModal1"></i>
            </div>
        </div>
        <div class="card col-xxl-3 mt-3">
            <div class="card-body text-center">
                <h4>緊急回轉</h4>
            </div>
        </div>
        <div class="d-flex justify-content-around mt-2">
            <div>
                <label class="form-check-label h4" for="flexRadioDefault1">
                    緊急回歸
                </label>
            </div>
            <div>
                <label id="emerReturnText" class="form-check-label h4" for="flexRadioDefault1">
                    未動作
                </label>
            </div>
            <div>
                <span id="emerReturn" class="circle-light bg-secondary"></span>
            </div>
        </div>
        <div class="d-flex justify-content-around mt-2">
            <div>
                <label class="form-check-label h4" for="flexRadioDefault1">
                    群控故障
                </label>
            </div>
            <div>
                <label id="groConFailText"  class="form-check-label h4" for="flexRadioDefault1">
                    未動作
                </label>
            </div>
            <div>
                <span id="groConFail" class="circle-light bg-secondary"></span>
            </div>
        </div>
        <div class="d-flex justify-content-around mt-2">
            <div>
                <label class="form-check-label h4" for="flexRadioDefault1">
                    緊急電源
                </label>
            </div>
            <div>
                <label id="emerPowerText"  class="form-check-label h4" for="flexRadioDefault1">
                    未動作
                </label>
            </div>
            <div>
                <span id="emerPower" class="circle-light bg-secondary"></span>
            </div>
        </div>
        <div class="d-flex justify-content-around mt-2">
            <div>
                <label class="form-check-label h4" for="flexRadioDefault1">
                    火災回歸
                </label>
            </div>
            <div>
                <label id="fireReturnText" class="form-check-label h4" for="flexRadioDefault1">
                    未動作
                </label>
            </div>
            <div>
                <span id="fireReturn" class="circle-light bg-secondary"></span>
            </div>
        </div>
        <div class="d-flex justify-content-around mt-2">
            <div>
                <label class="form-check-label h4" for="flexRadioDefault1">
                    地震管制
                </label>
            </div>
            <div>
                <label id="earQuaConText" class="form-check-label h4" for="flexRadioDefault1">
                    未動作
                </label>
            </div>
            <div>
                <span id="earQuaCon" class="circle-light bg-secondary"></span>
            </div>
        </div>
    </div>
    <!-- End-右邊功能區 -->
    <!-- Modal-Card1 -->
    <div class="modal fade" id="card1" data-keyboard="false" tabindex="-1"
         aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header d-flex justify-content-between">
                    <div>
                        <h5 class="modal-title" id="staticBackdropLabel">1</h5>
                    </div>
                    <div class="">
                        <a type="button" class="mr-2" data-toggle="tooltip" data-placement="top"
                           title="及時狀態">
                            <i class="fal fa-tv fa-2x" data-toggle="modal"
                               data-target="#exampleModal"></i>
                        </a>
                        <a type="button" class="mr-2" data-toggle="tooltip" data-placement="top"
                           title="基本資訊">
                            <i class="fal fa-cog fa-2x" data-toggle="modal"
                               data-target="#exampleModal"></i>
                        </a>
                        <a type="button" class="mr-2" data-toggle="tooltip" data-placement="top"
                           title="異常資料">
                            <i class="fal fa-exclamation-triangle fa-2x" data-toggle="modal"
                               data-target="#exampleModal"></i>
                        </a>
                        <a type="button" class="" data-toggle="tooltip" data-placement="top"
                           title="運維紀錄">
                            <i class="fal fa-server fa-2x" data-toggle="modal"
                               data-target="#exampleModal"></i>
                        </a>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="modal fade" id="exampleModal" tabindex="-1"
                         aria-labelledby="exampleModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-body">
                                    ...
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal-ReplaySystem -->
    <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false"
         tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">重播系統</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="modal-body">
                    <label>
                        播放日期 : <input type="date"> ~ <input type="date"> 時段 :
                        <input type="time">
                    </label>
                    <div>
                        播放速度 :
                        <div class="btn-group mt-2">
                            <button class="btn btn-info">正常</button>
                            <button class="btn btn-info">1.5x</button>
                            <button class="btn btn-info">2.0x</button>
                            <button class="btn btn-info">3.0x</button>
                        </div>
                    </div>

                    <div class="row mt-2">
                        <div>
                            <button class="btn btn-info">
                                <i class="fas fa-play fa-1x"></i>
                            </button>
                        </div>
                        <div class="progress" style="width: 85%">
                            <div class="progress-bar bg-info" role="progressbar" style="width: 15%"
                                 aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
                        </div>
                    </div>

                    <!-- 電梯圖表 -->
                    <div class="mt-3">
                        <table class="table table-bordered">
                            <tbody class="text-center">
                                <tr>
                                    <td></td>
                                    <td colspan="4">Bank1</td>
                                    <td colspan="2">Bank2</td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td colspan="2">#1</td>
                                    <td colspan="2">#2</td>
                                    <td colspan="2">#3</td>
                                </tr>
                                <tr>
                                    <td>位置/模式</td>
                                    <td>1F</td>
                                    <td>自動運轉</td>
                                    <td>1F</td>
                                    <td>自動運轉</td>
                                    <td>4F</td>
                                    <td>自動運轉</td>
                                </tr>
                                <tr>
                                    <td>負載/狀態</td>
                                    <td>40%</td>
                                    <td>*</td>
                                    <td>0%</td>
                                    <td>*</td>
                                    <td>80%</td>
                                    <td>*</td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>10F</td>
                                    <td id="elevator1-1"></td>
                                    <td></td>
                                    <td id="elevator2-1"></td>
                                    <td></td>
                                    <td id="elevator3-1"></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>9F</td>
                                    <td id="elevator1-1"></td>
                                    <td></td>
                                    <td id="elevator2-1"></td>
                                    <td></td>
                                    <td id="elevator3-1"></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>8F</td>
                                    <td id="elevator1-1"></td>
                                    <td></td>
                                    <td id="elevator2-1"></td>
                                    <td></td>
                                    <td id="elevator3-1"></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>7F</td>
                                    <td id="elevator1-1"></td>
                                    <td></td>
                                    <td id="elevator2-1"></td>
                                    <td></td>
                                    <td id="elevator3-1"></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>6F</td>
                                    <td id="elevator1-1"></td>
                                    <td></td>
                                    <td id="elevator2-1"></td>
                                    <td></td>
                                    <td id="elevator3-1"></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>5F</td>
                                    <td id="elevator1-1"></td>
                                    <td></td>
                                    <td id="elevator2-1"></td>
                                    <td></td>
                                    <td id="elevator3-1"></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>4F</td>
                                    <td id="elevator1-1"></td>
                                    <td></td>
                                    <td id="elevator2-1"></td>
                                    <td></td>
                                    <td id="elevator3-1"></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>3F</td>
                                    <td id="elevator1-1"></td>
                                    <td></td>
                                    <td id="elevator2-1"></td>
                                    <td></td>
                                    <td id="elevator3-1"></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>2F</td>
                                    <td id="elevator1-1"></td>
                                    <td></td>
                                    <td id="elevator2-1"></td>
                                    <td></td>
                                    <td id="elevator3-1"></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>1F</td>
                                    <td id="elevator1-1"></td>
                                    <td></td>
                                    <td id="elevator2-1"></td>
                                    <td></td>
                                    <td id="elevator3-1"></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>B1F</td>
                                    <td id="elevator1-1"></td>
                                    <td></td>
                                    <td id="elevator2-1"></td>
                                    <td></td>
                                    <td id="elevator3-1"></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <th>B2F</th>
                                    <td id="elevator1-1"></td>
                                    <td></td>
                                    <td id="elevator2-1"></td>
                                    <td></td>
                                    <td id="elevator3-1"></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <th>B3F</th>
                                    <td id="elevator1-1"></td>
                                    <td></td>
                                    <td id="elevator2-1"></td>
                                    <td></td>
                                    <td id="elevator3-1"></td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <!-- End-電梯圖表 -->

                </div>
            </div>
        </div>
    </div>
    <!-- End-Modal-ReplaySystem -->
    <!-- Modal-ElevatorManagement -->
    <div class="modal fade" id="exampleModal1" tabindex="-1" aria-labelledby="exampleModalLabel"
         aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title" id="exampleModalLabel">電梯管理</h1>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table table-hover">
                        <thead>
                            <tr class="text-center">
                                <th scope="col">號機</th>
                                <th scope="col">狀態</th>
                                <th scope="col">所在樓層</th>
                                <th scope="col">載重</th>
                                <th scope="col">休止</th>
                                <th scope="col">獨立運轉</th>
                                <th scope="col">VIP</th>
                                <th scope="col">回歸</th>
                                <th scope="col">不服務樓層</th>
                                <th scope="col"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="text-center">
                                <th>Bank1</th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th>B2F,3F,5F</th>
                                <th>
                                    <button class="btn btn-info" data-target="#exampleModal2"
                                            data-toggle="modal">
                                        <i class="fal fa-pen"> Edit</i>
                                    </button>
                                </th>
                            </tr>
                            <tr class="text-center">
                                <th>1</th>
                                <th>運作中</th>
                                <th>3F</th>
                                <th>80%</th>
                                <th>On</th>
                                <th>Off</th>
                                <th>On</th>
                                <th>Off</th>
                                <th></th>
                                <th>
                                    <button class="btn btn-info" data-target="#exampleModal1-1"
                                            data-toggle="modal">
                                        <i class="fal fa-pen"> Edit</i>
                                    </button>
                                </th>
                            </tr>
                            <tr class="text-center">
                                <th>2</th>
                                <th>保養</th>
                                <th>2F</th>
                                <th>0%</th>
                                <th>On</th>
                                <th>Off</th>
                                <th>On</th>
                                <th>Off</th>
                                <th></th>
                                <th>
                                    <button class="btn btn-info" data-target="#exampleModal1-2"
                                            data-toggle="modal">
                                        <i class="fal fa-pen"> Edit</i>
                                    </button>
                                </th>
                            </tr>
                            <tr class="text-center">
                                <th>Bank2</th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th></th>
                                <th>B1F,B2F</th>
                                <th>
                                    <button class="btn btn-info" data-target="#exampleModal2"
                                            data-toggle="modal">
                                        <i class="fal fa-pen"> Edit</i>
                                    </button>
                                </th>
                            </tr>
                            <tr class="text-center">
                                <th>3</th>
                                <th>運作中</th>
                                <th>B1F</th>
                                <th>100%</th>
                                <th>On</th>
                                <th>Off</th>
                                <th>On</th>
                                <th>Off</th>
                                <th></th>
                                <th>
                                    <button class="btn btn-info" data-target="#exampleModal2-1"
                                            data-toggle="modal">
                                        <i class="fal fa-pen"> Edit</i>
                                    </button>
                                </th>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- End-Modal-ElevatorManagement -->
    <!-- Modal-ElevatorManagement -->
    <div class="modal fade" id="exampleModal1-1" tabindex="-1" aria-labelledby="exampleModalLabel"
         aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title" id="exampleModalLabel">電梯管理</h1>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table table-hover">
                        <thead>
                            <tr class="text-center">
                                <th scope="col">號機</th>
                                <th scope="col">狀態</th>
                                <th scope="col">所在樓層</th>
                                <th scope="col">防疫對策</th>
                                <th scope="col">遠隔休止</th>
                                <th scope="col">獨立運轉</th>
                                <th scope="col">VIP</th>
                                <th scope="col">回歸運轉</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="text-center">
                                <th>1</th>
                                <th>運作中</th>
                                <th>3F</th>
                                <th>
                                    <div class="d-flex justify-content-center">
                                        <div class="switch mr-2">
                                            <input class="switch-checkbox" id="switchID1-1"
                                                   type="checkbox" name="switch-checkbox">
                                            <label class="switch-label" for="switchID1-1">
                                                <div class="switch-txt" turnOn="On" turnOff="Off"></div>
                                                <div class="switch-Round-btn"></div>
                                            </label>
                                        </div>
                                        <img type="button" src="img\u1673.svg">
                                    </div>
                                </th>
                                <th>
                                    <div class="d-flex justify-content-center">
                                        <div class="switch mr-2">
                                            <input class="switch-checkbox" id="switchID1-2"
                                                   type="checkbox" name="switch-checkbox">
                                            <label class="switch-label" for="switchID1-2">
                                                <div class="switch-txt" turnOn="On" turnOff="Off"></div>
                                                <div class="switch-Round-btn"></div>
                                            </label>
                                        </div>
                                        <img type="button" src="img\u1673.svg">
                                    </div>
                                </th>
                                <th>
                                    <div class="d-flex justify-content-center">
                                        <div class="switch mr-2">
                                            <input class="switch-checkbox" id="switchID1-3"
                                                   type="checkbox" name="switch-checkbox">
                                            <label class="switch-label" for="switchID1-3">
                                                <div class="switch-txt" turnOn="On" turnOff="Off"></div>
                                                <div class="switch-Round-btn"></div>
                                            </label>
                                        </div>
                                        <img type="button" src="img\u1673.svg">
                                    </div>
                                </th>
                                <th>
                                    <div class="d-flex justify-content-center">
                                        <div class="switch mr-2">
                                            <input class="switch-checkbox" id="switchID1-4"
                                                   type="checkbox" name="switch-checkbox">
                                            <label class="switch-label" for="switchID1-4">
                                                <div class="switch-txt" turnOn="On" turnOff="Off"></div>
                                                <div class="switch-Round-btn"></div>
                                            </label>
                                        </div>
                                        <img type="button" src="img\u1673.svg">
                                    </div>
                                </th>
                                <th>
                                    <div class="d-flex justify-content-center">
                                        <div class="switch mr-2">
                                            <input class="switch-checkbox" id="switchID1-5"
                                                   type="checkbox" name="switch-checkbox">
                                            <label class="switch-label" for="switchID1-5">
                                                <div class="switch-txt" turnOn="On" turnOff="Off"></div>
                                                <div class="switch-Round-btn"></div>
                                            </label>
                                        </div>
                                        <img type="button" src="img\u1673.svg">
                                    </div>
                                </th>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- End-Modal-ElevatorManagement -->
    <!-- Modal-ElevatorManagement -->
    <div class="modal fade" id="exampleModal1-2" tabindex="-1" aria-labelledby="exampleModalLabel"
         aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title" id="exampleModalLabel">電梯管理</h1>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table table-hover">
                        <thead>
                            <tr class="text-center">
                                <th scope="col">號機</th>
                                <th scope="col">狀態</th>
                                <th scope="col">所在樓層</th>
                                <th scope="col">防疫對策</th>
                                <th scope="col">遠隔休止</th>
                                <th scope="col">獨立運轉</th>
                                <th scope="col">VIP</th>
                                <th scope="col">回歸運轉</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="text-center">
                                <th>2</th>
                                <th>保養</th>
                                <th>2F</th>
                                <th>
                                    <div class="d-flex justify-content-center">
                                        <div class="switch mr-2">
                                            <input class="switch-checkbox" id="switchID2-1"
                                                   type="checkbox" name="switch-checkbox">
                                            <label class="switch-label" for="switchID2-1">
                                                <div class="switch-txt" turnOn="On" turnOff="Off"></div>
                                                <div class="switch-Round-btn"></div>
                                            </label>
                                        </div>
                                        <img type="button" src="img\u1673.svg">
                                    </div>
                                </th>
                                <th>
                                    <div class="d-flex justify-content-center">
                                        <div class="switch mr-2">
                                            <input class="switch-checkbox" id="switchID2-2"
                                                   type="checkbox" name="switch-checkbox">
                                            <label class="switch-label" for="switchID2-2">
                                                <div class="switch-txt" turnOn="On" turnOff="Off"></div>
                                                <div class="switch-Round-btn"></div>
                                            </label>
                                        </div>
                                        <img type="button" src="img\u1673.svg">
                                    </div>
                                </th>
                                <th>
                                    <div class="d-flex justify-content-center">
                                        <div class="switch mr-2">
                                            <input class="switch-checkbox" id="switchID2-3"
                                                   type="checkbox" name="switch-checkbox">
                                            <label class="switch-label" for="switchID2-3">
                                                <div class="switch-txt" turnOn="On" turnOff="Off"></div>
                                                <div class="switch-Round-btn"></div>
                                            </label>
                                        </div>
                                        <img type="button" src="img\u1673.svg">
                                    </div>
                                </th>
                                <th>
                                    <div class="d-flex justify-content-center">
                                        <div class="switch mr-2">
                                            <input class="switch-checkbox" id="switchID2-4"
                                                   type="checkbox" name="switch-checkbox">
                                            <label class="switch-label" for="switchID2-4">
                                                <div class="switch-txt" turnOn="On" turnOff="Off"></div>
                                                <div class="switch-Round-btn"></div>
                                            </label>
                                        </div>
                                        <img type="button" src="img\u1673.svg">
                                    </div>
                                </th>
                                <th>
                                    <div class="d-flex justify-content-center">
                                        <div class="switch mr-2">
                                            <input class="switch-checkbox" id="switchID2-5"
                                                   type="checkbox" name="switch-checkbox">
                                            <label class="switch-label" for="switchID2-5">
                                                <div class="switch-txt" turnOn="On" turnOff="Off"></div>
                                                <div class="switch-Round-btn"></div>
                                            </label>
                                        </div>
                                        <img type="button" src="img\u1673.svg">
                                    </div>
                                </th>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- End-Modal-ElevatorManagement -->
    <!-- Modal-ElevatorManagement -->
    <div class="modal fade" id="exampleModal2-1" tabindex="-1" aria-labelledby="exampleModalLabel"
         aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title" id="exampleModalLabel">電梯管理</h1>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <table class="table table-hover">
                        <thead>
                            <tr class="text-center">
                                <th scope="col">號機</th>
                                <th scope="col">狀態</th>
                                <th scope="col">所在樓層</th>
                                <th scope="col">防疫對策</th>
                                <th scope="col">遠隔休止</th>
                                <th scope="col">獨立運轉</th>
                                <th scope="col">VIP</th>
                                <th scope="col">回歸運轉</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="text-center">
                                <th>2</th>
                                <th>運作中</th>
                                <th>B1F</th>
                                <th>
                                    <div class="d-flex justify-content-center">
                                        <div class="switch mr-2">
                                            <input class="switch-checkbox" id="switchID3-1"
                                                   type="checkbox" name="switch-checkbox">
                                            <label class="switch-label" for="switchID3-1">
                                                <div class="switch-txt" turnOn="On" turnOff="Off"></div>
                                                <div class="switch-Round-btn"></div>
                                            </label>
                                        </div>
                                        <img type="button" src="img\u1673.svg">
                                    </div>
                                </th>
                                <th>
                                    <div class="d-flex justify-content-center">
                                        <div class="switch mr-2">
                                            <input class="switch-checkbox" id="switchID3-2"
                                                   type="checkbox" name="switch-checkbox">
                                            <label class="switch-label" for="switchID3-2">
                                                <div class="switch-txt" turnOn="On" turnOff="Off"></div>
                                                <div class="switch-Round-btn"></div>
                                            </label>
                                        </div>
                                        <img type="button" src="img\u1673.svg">
                                    </div>
                                </th>
                                <th>
                                    <div class="d-flex justify-content-center">
                                        <div class="switch mr-2">
                                            <input class="switch-checkbox" id="switchID3-3"
                                                   type="checkbox" name="switch-checkbox">
                                            <label class="switch-label" for="switchID3-3">
                                                <div class="switch-txt" turnOn="On" turnOff="Off"></div>
                                                <div class="switch-Round-btn"></div>
                                            </label>
                                        </div>
                                        <img type="button" src="img\u1673.svg">
                                    </div>
                                </th>
                                <th>
                                    <div class="d-flex justify-content-center">
                                        <div class="switch mr-2">
                                            <input class="switch-checkbox" id="switchID3-4"
                                                   type="checkbox" name="switch-checkbox">
                                            <label class="switch-label" for="switchID3-4">
                                                <div class="switch-txt" turnOn="On" turnOff="Off"></div>
                                                <div class="switch-Round-btn"></div>
                                            </label>
                                        </div>
                                        <img type="button" src="img\u1673.svg">
                                    </div>
                                </th>
                                <th>
                                    <div class="d-flex justify-content-center">
                                        <div class="switch mr-2">
                                            <input class="switch-checkbox" id="switchID3-5"
                                                   type="checkbox" name="switch-checkbox">
                                            <label class="switch-label" for="switchID3-5">
                                                <div class="switch-txt" turnOn="On" turnOff="Off"></div>
                                                <div class="switch-Round-btn"></div>
                                            </label>
                                        </div>
                                        <img type="button" src="img\u1673.svg">
                                    </div>
                                </th>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- End-Modal-ElevatorManagement -->

    <div class="page-content-overlay" data-action="toggle" data-class="mobile-nav-on"></div>
</div>

<script>
    var floors = ["B2F", "B1F", "1F", "2F", "3F", "4F", "5F", "6F"]
    var allDevList = [];
    var subSeviceData = [];
    var subOrdPath = {
        "building_tag": pageAct.buiTag,
        "system_tag": pageAct.sysMainTag,
        "name_tag": pageAct.sysSubTag,
    };

    $(function () {
        setBuildFloor(floors.length, 3);
        setCards();
        subDeviceSetStatus();
    })
    function getFloDevList() {

    }

    //baja 訂閱設備
    function subDeviceSetStatus() {
        myBaja = new subscriptionDevices();
        myBaja.setSubscribeDevicesByBql(subOrdPath);
        myBaja.setSubscribeDevicesCallBack(function (data) {
            console.log(data)
            function getValueByName(pointName) {
                return data.point_name == pointName ? data.value : null;
            }

            function actLightByPoi(pointName, selector) {
                if (getValueByName(pointName) == "trueText") {
                    $(selector).removeClass("bg-secondary").addClass("bg-orange");
                    $(selector).parent("div").prev().find("label").text("運轉中");
                } else if (getValueByName(pointName) == "falseText") {
                    $(selector).removeClass("bg-orange").addClass("bg-secondary");
                    $(selector).parent("div").prev().find("label").text("未動作");
                }
            }

            if (allDevList.length == 0) {
                return false;
            }

            let matchDevice = allDevList.filter(x => x.device_number?.split("_")[x.device_number?.split("_").length - 1] == data.device_number)[0];
            let norDevPoiName = matchDevice.device_normal_point_name;
            let cloDevPoiName = matchDevice.device_close_point_name;
            let errDevPoiName = matchDevice.device_error_point_name;

            //狀態
            if (data.point_name == "ST") {
                $(`#${matchDevice.device_number}_card [name=devStatus]`).text(data.value);
            }
            //現在樓層
            if (data.point_name == "CP") {
                $(`#${matchDevice.device_number}_card [name=curFloor]`).text(data.value + "F");
            }
            //往上或往下
            if (getValueByName("RD") == "UP") {
                $(`#${matchDevice.device_number}_card [name=upFloArrow]`).addClass("light-flash-c");
            }
            if (getValueByName("RD") == "DOWN") {
                $(`#${matchDevice.device_number}_card [name=downFloArrow]`).addClass("light-flash-c");
            }
            //消防回歸
            actLightByPoi("FE", "#emerReturn");
            //群控故障
            actLightByPoi("GCM", "#groConFail");
            //緊急電源
            actLightByPoi("EPS", "#emerPower");
            //火災回歸
            actLightByPoi("FER", "#fireReturn");
            //地震管制
            actLightByPoi("EER", "#earQuaCon");

            if (data.point_name == norDevPoiName && data.value == matchDevice.device_normal_point_value) {
                //顯示正常燈號
                $(`#${matchDevice.device_number}_card`).attr("data-light-type", "normal").data("light-type", "normal");
            } else if (data.point_name == cloDevPoiName && data.value == matchDevice.device_close_point_value) {
                $(`#${matchDevice.device_number}_card`).attr("data-light-type", "close").data("light-type", "close");
            } else if (data.point_name == errDevPoiName && data.value == matchDevice.device_error_point_value) {
                $(`#${matchDevice.device_number}_card`).attr("data-light-type", "error").data("light-type", "error");
            }
            setLightColor();
            
            if (subSeviceData.findIndex(x => x.device_number == matchDevice.device_number) == -1) {
                let obj = {};
                obj.device_number = matchDevice.device_number;
                subSeviceData.push(obj)
            } 

            let subData = subSeviceData.filter(x => x.device_number == matchDevice.device_number)[0];

            if (subData) {
                subData[data.point_name] = data.value;
            }


            subDeviceSetTable(matchDevice.device_number)
            /*$(`#opeModTable${matchDevice.device_number} #notSerFloor`).text(getValueByName("COR"))*/
        });

    }

    //baja 訂閱設備
    function subDeviceSetTable(devNum) {

        let subData = subSeviceData.filter(x => x.device_number == devNum)[0]
        let matchDevice = allDevList.filter(x => x.device_number == devNum)[0];
        if (!subData) {
            return false;
        }

        function creLight(type = "trueText") {
            let lightType = type == "trueText" ? "bg-success" : "bg-danger";
            return creEle("span", null, null, null, [lightType, "circle-light"]).outerHtml();
        }

        let masterTag = devNum?.split("_")[5];

        let notSerFloors = Object.keys(subData).filter(x => x.startsWith("SP_FLS_") && subData[x] == "trueText").map(x => x?.split("SP_FLS_")[1]);
        
        //現在樓層
        if (subData["CP"]) {
            $(`#imdStaTable_${devNum} [name=curFloor]`).text(subData["CP"] + "F");
        }
        //往上或往下
        if (subData["RD"] == "UP") {
            $(`#imdStaTable_${devNum} [name=upFloArrow]`).addClass("light-flash-c");
        }
        if (subData["RD"] == "DOWN") {
            $(`#imdStaTable_${devNum} [name=downFloArrow]`).addClass("light-flash-c");
        }

        //即時狀態(左側Table)
        $(`#imdStaTable_${devNum} #devName`).text(matchDevice.full_name);
        $(`#imdStaTable_${devNum} #devNum`).text(devNum);
        $(`#imdStaTable_${devNum} #status`).text(subData["ST"])
        $(`#imdStaTable_${devNum} #group`).text(masterTag);
        $(`#imdStaTable_${devNum} #weight`).text(subData["LOAD"])

        //運轉模式(右側Table)
        $(`#opeModTable_${devNum} #auto`).html(creLight(subData["DNO"]))
        $(`#opeModTable_${devNum} #vip`).html(creLight(subData["MD"]))
        $(`#opeModTable_${devNum} #onlyRun`).html(creLight(subData["IND"]))
        $(`#opeModTable_${devNum} #manual`).html(creLight(subData["HAND"]))
        $(`#opeModTable_${devNum} #runOpe`).html(creLight(subData["MID"]))
        $(`#opeModTable_${devNum} #returnFin`).html(creLight(subData["COR"]))
        $(`#opeModTable_${devNum} #notSerFloor`).text(notSerFloors.join("、"))


    }

    function setLightColor() {
        $("[data-light-type]").each((index, ele) => {
            let type = $(ele).data("light-type");
            let isFlashing = false;
            let color = "#000";
            switch (type) {
                case "normal":
                    color = pageAct.sysSubObj.device_normal_color ?? "var(--theme-success)";
                    isFlashing = pageAct.sysSubObj.device_normal_flashing == "1"
                    break;
                case "close":
                    color = pageAct.sysSubObj.device_close_color ?? "var(--theme-secondary)";
                    isFlashing = pageAct.sysSubObj.device_close_flashing == "1"
                    break;
                case "error":
                    color = pageAct.sysSubObj.device_error_color ?? "var(--theme-danger)";
                    isFlashing = pageAct.sysSubObj.device_error_flashing == "1"
                    break;
            }
            $(ele).css("background-color", color);
            if (isFlashing) {
                $(ele).addClass("light-flash");
            }
        })
    }

    function setCards() {
        let url = baseApiUrl + "/api/Device/GetDeviceList";
        let sendData = {
            sub_system_tag: pageAct.sysSubTag,
            building_tag: pageAct.buiTag,
            floor_tag: pageAct.floTag,
        };
        objSendData.Data = sendData;
        ytAjax = new YourTeam.Ajax(url, objSendData, function (res) {
            if (!res || res.code != "0000" || !res.data) {

            } else {
                let strHtml = ``;
                $.each(res.data, (index, floObj) => {
                    $.each(floObj.device_list, (index2, devObj) => {
                        allDevList.push(devObj);

                        strHtml += `<div id="${devObj.device_number}_card" class="card text-white mx-1 mb-3 col-4 " name="devItem" data-id="${devObj.device_guid}" data-number="${devObj.device_number}" data-name="${devObj.full_name}" style="max-width: 18rem;">
                                        <div type="button" class="card-body">
                                            <span class="d-flex">
                                                <h5 class="card-title">號機別 : ${devObj.full_name}</h5>
                                                <i name="upFloArrow" class="fas fa-caret-up fa-3x ml-auto" style="--flash-color-1:#6fe560;--flash-color-2:#fff;"></i>
                                            </span>
                                            <h4 name="curFloor" class="d-flex justify-content-end mb-0"></h4>
                                            <span class="d-flex">
                                                <p class="card-text">狀態 : <span name="devStatus"></span></p>
                                                <i name="downFloArrow" class="fas fa-caret-down fa-3x ml-auto" style="--flash-color-1:#6fe560;--flash-color-2:#fff;"></i>
                                            </span>
                                        </div>
                                    </div>`;
                    })

                })
                $("#eleCards").html(strHtml);
                initPopover();
            }
        }, null, "POST").send();

    }


    function setBuildFloor(floorCnt = 10, eleCnt = 3) {
        let tbody = creEle("tbody");
        //樓層從小到大
        let rfloors = floors.reverse();
        let eleCircle = creDiv(["elevator-circle"]);
        //樓層表格建置
        for (let f = 1; f <= floorCnt; f++) {
            let tr = creEle("tr");
            for (let e = 1; e <= eleCnt + 2; e++) {
                let td = creEle("td");
                if (e == 1) {
                    td.addClass("t-black")
                    td.text(rfloors[f - 1]);
                } else if (e == eleCnt + 2) {
                }
                else {
                    let div = creDiv(["d-flex", "justify-content-center", "align-items-end", "h-100"]);
                    div.append(`<i class="fas fa-door-open fs-1-05"></i>`)
                    td.append(div)
                }
                tr.append(td);
            }
            tbody.append(tr);
            $("#floorTable_wrapper").append(eleCircle)
        }

        $("#floorTable").html(tbody);


        $("#floorTable tbody tr").each((index, tr) => {

            $(tr).find("td:eq(0)").css("border-left", "0");
            $(tr).find("td:eq(-1)").css("border-right", "0");

            if (index == 0) {
                $(tr).find("td").each((index, td) => {
                    $(td).css("border-top", "0");
                })
            } else if (index == $("#floorTable tbody tr").length - 1) {
                $(tr).find("td").each((index, td) => {
                    $(td).css("border-bottom", "0");
                })
            }
        })

    }

    function drawStateTabBlo(devNum) {
        let div = creDiv(["row"]);
        div.append(creDiv(["col-xl-6"]).append(drawImdStaBlock(devNum)))
        div.append(creDiv(["col-xl-6"]).append(drawOpeModBlock(devNum)))
        return div.outerHtml();
    }

    function drawImdStaBlock(devNum) {
        let tabEle = $(`<table id="imdStaTable_${devNum}" class="table table-bordered table-striped text-center m-0">`);
        let tbody = tabEle.append("<tbody>");
        let rows =
            [
                { id: "devName", text: "號機" },
                { id: "devNum", text: "Tag Name" },
                { id: "status", text: "狀態" },
                { id: "group", text: "組別" },
                { id: "weight", text: "載重" },
            ];
        let cols = [
            { width: "30%" },
            { width: "40%" },
            { width: "30%" },
        ]

        let data = [{
            row: 0, col: 2, style:"vertical-align:middle",
            data: `<div class="flex-column">
                        <i name="upFloArrow" class="fas fa-caret-up fa-3x ml-auto" style="--flash-color-1:#6fe560;--flash-color-2:#fff;"></i>
                        <h4 name="curFloor" class="d-flex justify-content-center mb-0"></h4>
                        <i name="downFloArrow" class="fas fa-caret-down fa-3x ml-auto" style="--flash-color-1:#6fe560;--flash-color-2:#fff;"></i>
                    </div>
                    `}]
        $.each(rows, (index, row) => {
            let tr = $("<tr></tr>");
            $.each(cols, (index2, col) => {
                if (index < 1 || index > 99 || index2 != 2) {
                    let td = $("<td></td>");
                    td.css("width", col.width)
                    if (index2 == 0) {
                        td.text(row.text);
                    }
                    if (index2 == 1) {
                        td.prop("id", row.id)
                    }
                    if (index == 0 && index2 == 2) {
                        td.attr("rowspan", 99)
                    }
                    if (data.filter(x => x.row == index && x.col == index2).length != 0) {
                        let target = data.filter(x => x.row == index && x.col == index2)[0];
                        td.css("cssText", target.style);
                        td.html(target.data);
                    }
                    tr.append(td);
                }
            })
            tbody.append(tr);
        })

        return tabEle.outerHtml();
    }

    function drawOpeModBlock(devNum) {
        let tabEle = $(`<table id="opeModTable_${devNum}" class="table table-bordered table-striped text-center m-0">`);
        let tbody = tabEle.append("<tbody>");
        let rows =
            [
                { id: "auto", text: "自動" },
                { id: "vip", text: "VIP" },
                { id: "onlyRun", text: "獨立運轉" },
                { id: "manual", text: "手動" },
                { id: "runOpe", text: "運轉保養" },
                { id: "returnFin", text: "回歸完了" },
                { id: "notSerFloor", text: "不服務樓層" },
            ];
        let cols = [
            { width: "50%" },
            { width: "50%" },
        ]
        $.each(rows, (index, row) => {
            let tr = $("<tr></tr>");
            $.each(cols, (index2, col) => {
                let td = $("<td></td>");

                td.css("width", col.width)
                if (index2 == 0) {
                    td.text(row.text);
                }
                if (index2 == 1) {
                    td.prop("id", row.id)
                }
                tr.append(td);
            })
            tbody.append(tr);
        })

        return tabEle.outerHtml();
    }


</script>