@{
    ViewData["MainNum"] = "4";
    ViewData["SubNum"] = "5";
    ViewData["Title"] = "滅火器設定";
}

<ol class="breadcrumb page-breadcrumb">
    <li class="breadcrumb-item"><a href="javascript:void(0);">首頁</a></li>
    <li class="breadcrumb-item active">滅火器設定</li>
    <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
</ol>

<div class="row">
    <div class="col-12">
        <div id="panel-5" class="panel">
            <div class="panel-container show">
                <div class="panel-content">
                    <div class="subheader">
                        <h1 class="subheader-title">
                            <span>滅火器設定</span>
                        </h1>
                    </div>
                    <div class="row mb-3 d-flex align-items-center px-3 justify-content-between">
                        <div class="pr-3 ">
                            <div class="btn-group btn-group-md" id="Buildinglist">
                                @*<button type="button" class="btn btn-outline-success waves-effect waves-themed mb-2 mr-2">123</button>*@
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3 d-flex align-items-center px-3 justify-content-between">
                        <div class="pr-3 ">
                            <button type="button" class="btn btn-secondary waves-effect waves-themed mb-2" onclick="AllFloor()">全選</button>
                        </div>
                        <div class="pr-3 row col">
                            <div class="frame-wrap" id="floorlist">
                            </div>
                        </div>
                    </div>
                    <div class="row mb-3 d-flex align-items-center px-3">
                        <div class="card border mb-g w-100 mb-5" id="menucard">
                            <div class="card-header bg-fusion-25 py-2 pr-3 d-flex align-items-center flex-wrap justify-content-between">
                                <div class="card-title font-weight-bold">滅火器列表</div>
                                <div class="text-right ">
                                    <button type="button" class="btn btn-sm btn-success ml-auto waves-effect waves-themed" onclick="ExportExcel()"><span class="fal fa-file-excel mr-1"></span> 匯出Excel</button>

                                </div>
                            </div>
                            <div class="card-body">
                                <div class="w-100">
                                    <div class="col-12">
                                        <table id="RescueDeviceTable" class="table table-bordered table-hover m-0 text-center">
                                            <thead class="thead-themed">
                                                <tr>
                                                    <th>樓層</th>
                                                    <th>設備編號</th>
                                                    <th>位置</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="FireExtinguisher-modal" tabindex="-1" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered " role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"><i class="fal fa-times"></i></span>
                </button>
            </div>
            <div class="modal-body">
                <form id="FireExtinguisher-form">
                    <div class="row">
                        <div class="form-group col-12">
                            <label class="form-label" for="FireExtinguisher_location_modal"><span class="text-danger">*</span>位置</label>
                            <input class="form-control" id="FireExtinguisher_location_modal" />
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="SaveFireExtinguisher()">儲存</button>
            </div>
        </div>
    </div>
</div>


@section Scripts {
    <script>
    var SelectBuild;
    var SelectFloorList = new Array(0);
    var AllFloorList = new Array(0);
    var FireExtinguisherTable;
    var selectAllFloor = false;
    var SelectDevice;
    $(function () {
        FireExtinguisherTable = $("#RescueDeviceTable").DataTable({
            "columns": [
                {
                    "data": "floor_name"
                },
                {
                    "data": "rescue_device_id"
                },
                {
                    "data": "location"
                },
            ],
            'createdRow': function (row, data, dataIndex) {
                $(row).attr('guid', data.rescue_device_guid);
            },
            "ajax": {
                "url": "/api/RescueDevice/RescueDeviceTable",
                "type": "POST",
                "data": function (d) {
                    d.build = SelectBuild,
                    d.floors = SelectFloorList,
                    d.kind = 0
                },
                "dataSrc": function (rel) {
                    if (rel.code == "9999") {
                        toast_error(rel.msg);
                        return;
                    }
                    data = rel.data.data;

                    if (data == null || data.length == 0) {
                        this.data = [];
                    }

                    return data;
                }
            }
        });
        GetBuild();
    });


    function GetBuild() {
        var url = "/api/RescueDevice/BuildInfoList";
        var send_data = {};
        $.post(url, send_data, function (rel) {
            if (rel.code != "0000") {
                if (rel.code == "9999") {
                    toast_error(rel.msg);
                }
                return;
            }
            else {
                $('#Buildinglist').empty();
                var buildstr = "";
                $.each(rel.data, function (index, val) {
                    if (index == 0) {
                        SelectBuild = val.value;
                        buildstr += '<button type="button" class="btn btn-success waves-effect waves-themed" onclick="SelectBulid(\'' + val.value + '\' ,this)">' + val.name + '</button>';
                    }
                    else {
                        buildstr += '<button type="button" class="btn btn-secondary waves-effect waves-themed" onclick="SelectBulid(\'' + val.value + '\',this)" >' + val.name + '</button>';
                    }
                });
                $('#Buildinglist').append(buildstr);
                $('#Buildinglist').find('.btn-success').trigger('click');
                return;
            }
        }, 'json');
    }

    function SelectBulid(build, e) {
        SelectBuild = build;
        if ($("#Buildinglist").find('.btn').hasClass("btn-success")) {
            $("#Buildinglist").find('.btn').removeClass("btn-success").addClass("btn-secondary");
        }
        $(e).removeClass("btn-secondary").addClass("btn-success");
        //$('#menucard').find('.card-title').html(e.innerText + "-選單");

        GetFloorByBuild(SelectBuild);
    }

    function GetFloorByBuild(build) {
        var url = "/api/RescueDevice/GetFloorByBuild";
        var send_data = { Building: build };
        $.post(url, send_data, function (rel) {
            if (rel.code != "0000") {
                if (rel.code == "9999") {
                    toast_error(rel.msg);
                }
                return;
            }
            else {
                $('#floorlist').empty();
                SelectFloorList = [];
                AllFloorList = [];
                var floorstr = "";
                $.each(rel.data, function (index, val) {
                    AllFloorList.push(val.value);
                    floorstr += '<button type="button" class="btn btn-outline-success waves-effect waves-themed mb-2 mr-2" onclick="SelectFloor(\'' + val.value + '\',this)" >' + val.name + '</button>';
                });
                $('#floorlist').append(floorstr);
                AllFloor();
                //$('#floorlist').find('.btn-success').trigger('click');
                return;
            }
        }, 'json');

    }

    function SelectFloor(floorguid, e) {
        if ($(e).hasClass("btn-outline-success")) {
            $(e).removeClass("btn-outline-success").addClass("btn-success");
            SelectFloorList.push(floorguid);
        } else if ($(e).hasClass("btn-success")) {
            $(e).removeClass("btn-success").addClass("btn-outline-success");
            var a = SelectFloorList.filter(function (n, i) {
                if (n === floorguid) {
                    SelectFloorList.splice(i, 1);
                }
            });
        }
        FireExtinguisherTable.ajax.reload();
    }

    function AllFloor() {
        if (selectAllFloor) {
            SelectFloorList = [];
            $('#floorlist').find('.btn').removeClass('btn-success').addClass("btn-outline-success");
            selectAllFloor = false;
        } else {
            SelectFloorList = AllFloorList;
            $('#floorlist').find('.btn').removeClass('btn-outline-success').addClass("btn-success");
            selectAllFloor = true;
        }
        FireExtinguisherTable.ajax.reload();
    }

    function ExportExcel() {
        var send_data = {
            build: SelectBuild,
            buildname: $('#Buildinglist').find('.btn-success').html(),
            kind: 0
        };
        var url = "/RescueDevice/ExportExcel";
        $.ajax({
            method:"POST",
            xhrFields:{responseType:"blob"},
            headers:{"Authorization":"Bearer " + localStorage.getItem('JWT-Authorization')},
            url: "/RescueDevice/ExportExcel",
            data:{"post":JSON.stringify(send_data)},
            success:(res,text,xhr) => {
                download(xhr,res);
            }
        })
        return;
    }

        

    </script>
}