@{
    ViewData["MainNum"] = "3";
    ViewData["SubNum"] = "3";
    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" id="import-file-btn" onclick="$('#import_file_input').click()"><span class="fal fa-plus mr-1"></span>匯入Excel</button>
                                    <input id="import_file_input" type="file" name="import_file_input" onchange="importRawDataFile()" style="display:none" multiple accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
                                    <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>
                                                    <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"
                },
                {
                    "data": null,
                    "defaultContent": '<button class="btn btn-primary edit-btn">修改</button> <button class="btn btn-danger del-btn">刪除</button>'
                }
            ],
            'createdRow': function (row, data, dataIndex) {
                $(row).attr('guid', data.rescue_device_guid);
            },
            "ajax": {
                "url": "/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 = "/BuildMenu/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 = "/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 importRawDataFile() {
        import_files = $('#import_file_input')[0].files[0];
        Swal.fire(
            {
                title: "設備檔案匯入",
                text: "匯入檔案會將舊有資料完全移除，你確定是否要匯入?",
                type: "warning",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: "是",
                cancelButtonText: "否"
            }).then(function (result) {
                if (result.value) {
                    var url = "/RescueDevice/ImportRescueDevice";
                    var formData = new FormData();
                    formData.append("import_file", import_files);
                    formData.append("kind", 0);
                    formData.append("building", SelectBuild);
                    $("#import-file-btn").html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>').attr("disabled", true);

                    $.ajax({
                        type: "POST",
                        url: url,
                        data: formData,
                        cache: false,
                        contentType: false,
                        processData: false,
                        success: function (rel) {
                            $("#import_file_input").val('');
                            if (rel.code != "0000") {
                                if (rel.code == "9999") {
                                    toast_error(rel.msg);
                                }
                                else {
                                    toast_warning(rel.msg);
                                    FireExtinguisherTable.ajax.reload(null, false);
                                }
                                $("#import-file-btn").html('<span class="fal fa-plus mr-1"></span>匯入Excel').attr("disabled", false);
                                return;
                            }
                            else {
                                toast_ok(rel.msg);
                                $("#import-file-btn").html('<span class="fal fa-plus mr-1"></span>匯入Excel').attr("disabled", false);
                                
                                FireExtinguisherTable.ajax.reload(null, false);
                                return;
                            }
                        },
                    });
                }
            });
    }

    $('#RescueDeviceTable').on("click", "button.del-btn", function () {
        var send_data = {
            guid: $(this).parents('tr').attr('guid'),
        };
        Swal.fire(
            {
                title: "刪除設備",
                text: "是否刪除該滅火器?",
                type: "warning",
                icon: 'warning',
                showCancelButton: true,
                confirmButtonText: "是",
                cancelButtonText: "否"
            }).then(function (result) {
                if (result.value) {
                    var url = "/RescueDevice/DeletedIt";
                    
                    $.post(url, send_data, function (rel) {
                        if (rel.code != "0000") {
                            toast_error(rel.msg);
                            return;
                        }
                        else {
                            toast_ok(rel.msg);
                            FireExtinguisherTable.ajax.reload(null, false);
                            return;
                        }
                    });
                }
            })
    })

    $('#RescueDeviceTable').on("click", "button.edit-btn", function () {
        SelectDevice = $(this).parents('tr').attr('guid');
        var send_data = {
            guid: SelectDevice,
        };
        var url = "/RescueDevice/GetLocation";

        $.post(url, send_data, function (rel) {
            if (rel.code != "0000") {
                toast_error(rel.msg);
                return;
            }
            else {
                $('#FireExtinguisher-modal').find('.modal-title').html(rel.data.rescue_device_id + "-" + rel.data.floor_name);
                $('#FireExtinguisher_location_modal').val(rel.data.location);
                //toast_ok(rel.msg);
                FireExtinguisherTable.ajax.reload(null, false);
                return;
            }
        });


        $('#FireExtinguisher-modal').modal();
    })

    function SaveFireExtinguisher() {
        var send_data = {
            guid: SelectDevice,
            location: $('#FireExtinguisher_location_modal').val()
        };
        var url = "/RescueDevice/SaveFireExtinguisher";
        $.post(url, send_data, function (rel) {
            if (rel.code != "0000") {
                toast_error(rel.msg);
                return;
            }
            else {
                $('#FireExtinguisher-modal').modal('hide');
                toast_ok(rel.msg);
                FireExtinguisherTable.ajax.reload();
                return;
            }
        });
    }

    function ExportExcel() {
        var send_data = {
            build: SelectBuild,
            buildname: $('#Buildinglist').find('.btn-success').html(),
            kind: 0
        };
        var url = "/RescueDevice/ExportExcel";
        window.location = "/RescueDevice/ExportExcel?post=" + JSON.stringify(send_data);
        return;
        //$.post(url, send_data, function (rel) {
        //    if (rel.code == "0000") {
                
        //        return;
        //    }
        //    else {
        //        var text = "原因如下:<br\>";
        //        $.each(rel.data, function (index, val) {
        //            text += index + 1 + "." + val + "<br\>";
        //        });
        //        Swal.fire(
        //            {
        //                title: "Excel匯出失敗",
        //                icon: 'warning',
        //                html: text,
        //            });
        //    }
        //}, 'json');
    }
</script>
}