@{
    ViewData["MainNum"] = "5";
    ViewData["SubNum"] = "1";
    ViewData["Title"] = "運維管理";
}
@using SolarPower.Models.Role
@model RoleLayerEnum

<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="subheader">
    <h1 class="subheader-title">
        <i class='subheader-icon fal fa-globe'></i> 定期計畫建立
    </h1>
</div>
<!-- Your main content goes below here: -->
<div class="row">
    <div class="col-xl-12">
        <div id="panel-5" class="panel">
            <div class="panel-container show">
                <div class="panel-content">

                    <div class="row mb-3 px-3">
                        <div class="pr-3">
                            <div class="btn-group btn-group-md">
                                <button type="button" class="btn btn-success waves-effect waves-themed">全部</button>
                                <button type="button" class="btn btn-secondary waves-effect waves-themed">巡檢</button>
                                <button type="button" class="btn btn-secondary waves-effect waves-themed">清洗</button>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-3 d-flex align-items-center px-3">
                        <div class="pr-3">
                            <button type="button" class="btn btn-secondary waves-effect waves-themed">全部縣市</button>
                        </div>
                        <div class="pr-3">
                            <div class="frame-wrap">
                                <button type="button" class="btn btn-outline-success waves-effect waves-themed">
                                    新北市
                                    <span class="badge bg-success-700 ml-2">4</span>
                                </button>
                                <button type="button" class="btn btn-outline-success waves-effect waves-themed">
                                    台北市
                                    <span class="badge bg-success-700 ml-2">4</span>
                                </button>
                                <button type="button" class="btn btn-success waves-effect waves-themed">
                                    新竹市
                                    <span class="badge bg-success-700 ml-2">4</span>
                                </button>
                                <button type="button" class="btn btn-outline-success waves-effect waves-themed">
                                    苗栗縣
                                    <span class="badge bg-success-700 ml-2">4</span>
                                </button>
                                <button type="button" class="btn btn-outline-success waves-effect waves-themed">
                                    台中市
                                    <span class="badge bg-success-700 ml-2">4</span>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="row mb-5 d-flex align-items-center px-3">
                        <div class="pr-3">
                            <button type="button" class="btn btn-secondary waves-effect waves-themed">全選</button>
                        </div>
                        <div class="pr-3">
                            <div class="frame-wrap">
                                <div class="custom-control custom-checkbox custom-control-inline">
                                    <input type="checkbox" class="custom-control-input" id="defaultInline6">
                                    <label class="custom-control-label" for="defaultInline6">新竹交大站</label>
                                </div>
                                <div class="custom-control custom-checkbox custom-control-inline">
                                    <input type="checkbox" class="custom-control-input" id="defaultInline7" checked="">
                                    <label class="custom-control-label" for="defaultInline7">新竹巨城站</label>
                                </div>
                                <div class="custom-control custom-checkbox custom-control-inline">
                                    <input type="checkbox" class="custom-control-input" id="defaultInline8" checked="">
                                    <label class="custom-control-label" for="defaultInline8">新竹動物園站</label>
                                </div>
                                <div class="custom-control custom-checkbox custom-control-inline">
                                    <input type="checkbox" class="custom-control-input" id="defaultInline9" checked="">
                                    <label class="custom-control-label" for="defaultInline9">新竹城隍廟站</label>
                                </div>
                                <div class="custom-control custom-checkbox custom-control-inline">
                                    <input type="checkbox" class="custom-control-input" id="defaultInline10" checked="">
                                    <label class="custom-control-label" for="defaultInline10">新竹清大站</label>
                                </div>
                                <div class="custom-control custom-checkbox custom-control-inline">
                                    <input type="checkbox" class="custom-control-input" id="defaultInline11" checked="">
                                    <label class="custom-control-label" for="defaultInline11">新竹高鐵站</label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row d-flex justify-content-end px-3">
                        <button type="button" class="btn btn-info waves-effect waves-themed mb-3 mr-2">
                            <span class="fal fa-file-excel mr-1"></span>
                            匯出
                        </button>
                        <a href="javascript:;" class="btn btn-success waves-effect waves-themed mb-3 mr-2" data-toggle="modal" data-target="#companyrule">
                            <span class="fal fa-plus mr-1"></span>
                            計劃
                        </a>
                    </div>
                    <div class="frame-wrap">
                        <table class="table table-bordered table-hover m-0 text-center">
                            <thead class="thead-themed">
                                <tr>
                                    <th>計劃單號</th>
                                    <th>項目</th>
                                    <th>電站</th>
                                    <th>排程</th>
                                    <th>開始時間</th>
                                    <th>填寫表單</th>
                                    <th>描述</th>
                                    <th>email 通知</th>
                                    <th>建立人</th>
                                    <th>建立時間</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <th scope="row">20210630003</th>
                                    <td>巡檢</td>
                                    <td>新竹交大站</td>
                                    <td>每次5天內 / 1周</td>
                                    <td>王小明</td>
                                    <td>巡檢單01</td>
                                    <td></td>
                                    <td>
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="defaultChecked" checked="">
                                            <label class="custom-control-label" for="defaultChecked">當天</label>
                                        </div>
                                    </td>
                                    <td>鋼鐵人</td>
                                    <td>2021-03-5</td>
                                </tr>
                                <tr>
                                    <th scope="row">20210630003</th>
                                    <td>清洗</td>
                                    <td>新竹交大站</td>
                                    <td>每次5天內 / 5周</td>
                                    <td>鋼鐵人</td>
                                    <td>清洗單02</td>
                                    <td></td>
                                    <td>
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="defaultChecked" checked="">
                                            <label class="custom-control-label" for="defaultChecked">前一天</label>
                                        </div>
                                    </td>
                                    <td>浩克</td>
                                    <td>2021-03-5</td>
                                </tr>
                                <tr>
                                    <th scope="row">20210630003</th>
                                    <td>清洗</td>
                                    <td>新竹交大站</td>
                                    <td>每次5天內 / 5周</td>
                                    <td>鋼鐵人</td>
                                    <td>清洗單02</td>
                                    <td></td>
                                    <td>
                                        <div class="custom-control custom-checkbox">
                                            <input type="checkbox" class="custom-control-input" id="defaultChecked" checked="">
                                            <label class="custom-control-label" for="defaultChecked">前一天</label>
                                        </div>
                                    </td>
                                    <td>浩克</td>
                                    <td>2021-03-5</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="Operation-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg" 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">
                <div class="row mb-3">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label class="form-label" for="operation_powerStationselect_modal">電站名</label>
                            <select class="form-control" id="operation_powerStationselect_modal">
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label class="form-label" for="operation_type_modal">項目</label>
                            <select class="form-control" id="operation_type_modal">
                                <option value="0">清洗</option>
                                <option value="1">巡檢</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <div class="row d-flex justify-content-start align-items-center">
                                <div class="col-4">自動排程　每</div>
                                <div class="col">
                                    <input type="text" id="operation_scheduleNum_modal" class="form-control">
                                </div>
                                <div class="col">
                                    <select class="form-control" id="operation_scheduleType_modal" width="70" style="width: 70px">
                                        <option value="0">天</option>
                                        <option value="1">週</option>
                                        <option value="2">月</option>
                                        <option value="3">季</option>
                                        <option value="4">年</option>
                                    </select>
                                </div>
                                <div class="col">安排一次</div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row d-flex justify-content-start align-items-center">
                                <div class="col-3">每次預期</div>
                                <div class="col">
                                    <input type="text" id="operation_workDay_modal" class="form-control">
                                </div>
                                <div class="col">天內完成</div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="row d-flex justify-content-start align-items-center">
                                <div class="col-3">開始時間</div>
                                <div class="col">
                                    <input type="text" id="operation_startTime_modal" class="form-control" placeholder="2000-01-01">
                                </div>
                                <div class="col">~<font id="operation_endTime_modal">2021-06-30</font></div>
                                
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label class="form-label" for="operation_description_modal">描述</label>
                            <textarea class="form-control" id="operation_description_modal" rows="5"></textarea>
                        </div>
                    </div>
                </div>

                <div class="row mb-3">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <label class="form-label" for="operation_emailType_modal">email提醒</label>
                            <select class="form-control" id="operation_emailType_modal">
                                <option value="0">當天</option>
                                <option value="1">前1天</option>
                                <option value="2">前2天</option>
                                <option value="3">前3天</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary">確定</button>
            </div>
        </div>
    </div>
</div>


@section Scripts{
    <script>
        $(function () {
            //#region 電站下拉式選單select_option
            var url_operation_select_option = "/Operation/GetPowerStationSelectOption";
            $.get(url_operation_select_option, function (rel) {
                if (rel.code != "0000") {
                    toast_error(rel.msg);
                    return;
                }

                $("#company_select").empty();
                $("#company_select").append($("<option />").val(0).text("全部"));

                $.each(rel.data, function (index, val) {
                    $("#company_select").append($("<option />").val(val.value).text(val.text));
                });

                //預設查詢第一個
                $("#company_select").val($("#company_select option:first").val()).trigger('change');
            });
            //#endregion
        })
    </script>
}