@extends("admin.layouts.layout")

@php
    $pageTitle = "床位管理";
@endphp

@push("header")

@endpush

@section("content")
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <h4>{{ $project->name }}床位管理</h4>
                    <div class="mb-2">
                        <form class="form-inline" id="search-form">
                            <div class="input-group mr-1">
                                <select class="form-control" name="building_id" id="building_id" data-type="building"
                                        onchange="changeBuilding()">
                                    <option value="">请选择楼栋</option>
                                    @foreach($project->buildings as $building)
                                        <option data-index="{{ $building->myindex }}"
                                                value="{{ $building->id }}" @if($building->id == request()->building_id){{ "selected" }}@endif>{{ $building->name }}</option>
                                    @endforeach
                                </select>
                                <div class="input-group-append">
                                    <button class="btn btn-primary" type="button" onclick="createSub('project')"><i
                                            class="mdi mdi-plus"></i></button>
                                </div>
                                <div class="input-group-append">
                                    <button class="btn btn-light" type="button" onclick="edit(this)"><i
                                            class="mdi mdi-pencil"></i></button>
                                </div>
                            </div>

                            <div class="input-group mr-1">
                                <select class="form-control" name="area_id" id="area_id" onchange="changeArea()"
                                        data-type="area">
                                    <option value="">
                                        请选择病区
                                    </option>
                                    @if (isset($areas))
                                        @foreach($areas as $area)
                                            <option
                                                value="{{ $area->id }}" @if($area->id == request()->area_id){{ "selected" }}@endif>{{ $area->name }}</option>
                                        @endforeach
                                    @endif
                                </select>
                                <div class="input-group-append">
                                    <button class="btn btn-primary" type="button" onclick="createSub('building')"><i
                                            class="mdi mdi-plus"></i></button>
                                </div>
                                <div class="input-group-append">
                                    <button class="btn btn-light" type="button" onclick="edit(this)"><i
                                            class="mdi mdi-pencil"></i></button>
                                </div>
                            </div>

                            <div class="input-group mr-1">
                                <select class="form-control" name="room_id" id="room_id" data-type="room">
                                    <option value="">
                                        请选择病房
                                    </option>
                                    @if (isset($rooms))
                                        @foreach($rooms as $room)
                                            <option
                                                value="{{ $room->id }}" @if($room->id == request()->room_id){{ "selected" }}@endif>{{ $room->name }}</option>
                                        @endforeach
                                    @endif
                                </select>
                                <div class="input-group-append">
                                    <button class="btn btn-primary" type="button" onclick="createSub('area')"><i
                                            class="mdi mdi-plus"></i></button>
                                </div>
                                <div class="input-group-append">
                                    <button class="btn btn-light" type="button" onclick="edit(this)"><i
                                            class="mdi mdi-pencil"></i></button>
                                </div>
                            </div>

                            <button class="btn btn-primary mr-3" type="button" onclick="createSub('room')">新增病床 <i
                                    class="mdi mdi-plus"></i></button>
                            <button class="btn btn-primary" type="submit">搜索</button>
                            <a class="btn btn-secondary ml-1" href="{{ url("admin/project") }}">返回</a>
                        </form>
                    </div>

                    <table class="table table-bordered" id="data-table">
                        <thead>
                        <tr>
                            <th>床位</th>
                            <th>病房</th>
                            <th>医院/项目</th>
                            <th>楼栋</th>
                            <th>病区/楼层</th>
                            <th>排序</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach ($data as $row)
                            <tr data-id="{{$row->id}}" data-type="bed" data-name="{{ $row->name }}"
                                data-myindex="{{ $row->myindex }}">
                                <td>
                                    {{ $row->name }}
                                </td>
                                <td>{{ $row->room ? $row->room->name : "已删除" }}</td>
                                <td>{{ $row->project->name }}</td>
                                <td>{{ $row->building ? $row->building->name : "已删除" }}</td>
                                <td>{{ $row->area ? $row->area->name : "已删除" }}</td>
                                <td>{{ $row->myindex }}</td>
                                <td>
                                    <a class="btn btn-sm btn-primary"
                                       href="javascript:;" onclick="editBed(this)">@lang("icons.action_edit")</a>
                                    <a class="btn btn-sm btn-danger" data-id="{{$row['id']}}"
                                       href="javascript:;" onclick="del(this)">@lang("icons.action_delete")</a>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                    @include("public._pages")
                </div>
            </div>
        </div>
    </div>

    <!-- sample modal content -->
    <div id="model-form" class="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel"></h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body">
                    <form autocomplete="off">
                        @csrf
                        <input type="hidden" name="type">
                        <input type="hidden" name="id">
                        <div class="form-group">
                            <label for="name" class="control-label">名称</label>
                            <input class="form-control" required="required" name="name" type="text">
                        </div>
                        <div class="form-group">
                            <label for="myindex" class="control-label">排序</label>
                            <input value="0" class="form-control" required="required" name="myindex" type="number">
                        </div>

                        <div class="form-group" id="head" style="display: none">
                            <label for="head" class="control-label">护士长</label>
                            <select name="head[]" id="head_option" class="custom-select" multiple>

                            </select>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light waves-effect" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary waves-effect waves-light" onclick="save();">保存</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <!-- Warning Alert Modal -->
    <div id="delete-alert-modal" class="modal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content">
                <div class="modal-body p-4">
                    <div class="text-center">
                        <i class="dripicons-warning h1 text-warning"></i>
                        <h4 class="mt-2 title-delete">确认提示</h4>
                        <p class="mt-3 msg-delete">{{ isset($msg) ? $msg : "请再次确认是否要删除" }}</p>
                        <button type="button" class="btn btn-warning" onclick="confirmToDelete()">确定</button>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
@endsection

@push("footer")

    <script>
        $(function () {
            $("#pages a.page-link").each(function () {
                if (!$(this).attr("href")) {
                    return;
                }
                var filters = $("#search-form").serialize();
                $(this).attr("href", $(this).attr("href") + "&" + filters);
            });
        });

        function changeBuilding() {
            $("#area_id option:gt(0)").remove();
            $("#room_id option:gt(0)").remove();

            var building_id = $("#building_id").val();
            var url = "{{ url($urlPrefix."/get-subs") }}";
            $.get(url, {type: "building", id: building_id}, function (res) {
                for (var i = 0; i < res.length; i++) {
                    $("#area_id").append('<option data-index="' + res[i].myindex + '" value="' + res[i].id + '">' + res[i].name + '</option>');
                }
            });
        }

        function changeArea() {
            $("#room_id option:gt(0)").remove();

            var area_id = $("#area_id").val();
            var url = "{{ url($urlPrefix."/get-subs") }}";
            $.get(url, {type: "area", id: area_id}, function (res) {
                for (var i = 0; i < res.length; i++) {
                    $("#room_id").append('<option data-index="' + res[i].myindex + '" value="' + res[i].id + '">' + res[i].name + '</option>');
                }
            });
        }

        function createSub(type) {
            switch (type) {
                case "project":
                    var id = "{{ $project->id }}";
                    break;
                case "building":
                    var id = $("#building_id").val();
                    if (id == "") {
                        alertError("请先选择楼栋");
                        return false;
                    }
                    break;
                case "area":
                    var id = $("#area_id").val();
                    if (id == "") {
                        alertError("请先选择病区/楼层");
                        return false;
                    }
                    break;
                case "room":
                    var id = $("#room_id").val();
                    if (id == "") {
                        alertError("请先选择病房");
                        return false;
                    }
                    break;
            }

            var url = "{{ url($urlPrefix."/create-sub") }}";

            $("#model-form form input[name=type]").val(type);
            $("#model-form form input[name=id]").val(id);
            $("#model-form form input[name=name]").val("");
            $("#model-form form input[name=myindex]").val(0);
            $("#model-form form").attr("action", url);

            switch (type) {
                case "project":
                    $("#model-form .modal-title").html("新增楼栋");
                    $("#head").hide();
                    break;
                case "building":
                    var building_name = $("#building_id option:selected").html();
                    $("#model-form .modal-title").html("新增病区/楼层-" + building_name);
                    // ajax调用获取所有护士长信息，并渲染出来
                    getHead(0)
                    $("#head").show();
                    break;
                case "area":
                    var area_name = $("#area_id option:selected").html();
                    $("#model-form .modal-title").html("新增病房-" + area_name);
                    $("#head").hide();
                    break;
                case "room":
                    var room_name = $("#room_id option:selected").html();
                    $("#model-form .modal-title").html("新增病床-" + room_name);
                    $("#head").hide();
                    break;
            }

            $("#model-form").modal("show");
        }

        // 根据病区id获取护士长数据并渲染
        function getHead(area_id) {
            var url = "{{ url($urlPrefix."/get-head") }}";
            var project_id = '{{$project->id}}'
            $.get(url, {project_id:project_id,area_id: area_id}, function (res) {
                $("#head_option").html('')
                for (var i = 0; i < res.length; i++) {
                    $("#head_option").append('<option ' + res[i].selected + ' value=' + res[i].id + '>' + res[i].name + '</option>');
                }
            });
        }

        function editBed(element) {
            var type = $(element).closest("tr").attr("data-type");
            var id = $(element).closest("tr").attr("data-id");
            var name = $(element).closest("tr").attr("data-name");
            var myindex = $(element).closest("tr").attr("data-myindex");
            var url = "{{ url($urlPrefix."/edit-department") }}";

            $("#model-form form input[name=type]").val(type);
            $("#model-form form input[name=id]").val(id);
            $("#model-form form input[name=name]").val(name);
            $("#model-form form input[name=myindex]").val(myindex);
            $("#model-form form").attr("action", url);

            $("#model-form .modal-title").html("修改病床");
            $("#model-form").modal("show");
        }

        function edit(element) {
            var target = $(element).parent().siblings("select");
            var type = target.attr("data-type");
            var id = target.val();

            if (id == "") {
                return false;
            }

            var url = "{{ url($urlPrefix."/edit-department") }}";
            var name = target.find("option:selected").html();
            var myindex = target.find("option:selected").attr("data-index");

            $("#model-form form input[name=type]").val(type);
            $("#model-form form input[name=id]").val(id);
            $("#model-form form input[name=name]").val(name);
            $("#model-form form input[name=myindex]").val(myindex);
            $("#model-form form").attr("action", url);

            switch (type) {
                case "building":
                    $("#model-form .modal-title").html("修改楼栋");
                    $("#head").hide();
                    break;
                case "area":
                    $("#model-form .modal-title").html("修改病区/楼层");
                    // 获取护士长列表
                    getHead(id)
                    $("#head").show();
                    break;
                case "room":
                    $("#model-form .modal-title").html("修改病房");
                    $("#head").hide();
                    break;
                case "bed":
                    $("#model-form .modal-title").html("修改床位");
                    $("#head").hide();
                    break;
            }

            $("#model-form").modal("show");
        }

        function del(element) {
            window.delete_type = $(element).closest("tr").attr("data-type");
            window.delete_id = $(element).closest("tr").attr("data-id");
            $("#delete-alert-modal").modal("show");
            $('#delete-alert-modal').on('hidden.bs.modal', function (e) {
                $(this).data('bs.modal')._config.keyboard = true;
                $(this).data('bs.modal')._config.backdrop = true;
                $("#delete-alert-modal .btn-warning").prop("disabled", false).html("确定");
            });
        }

        function confirmToDelete() {
            $("#delete-alert-modal .btn-warning").prop("disabled", true).html('<span class="spinner-border spinner-border-sm mr-1" role="status" aria-hidden="true"></span>处理中...');
            $("#delete-alert-modal").data('bs.modal')._config.keyboard = false;
            $("#delete-alert-modal").data('bs.modal')._config.backdrop = "static";
            var url = "{{ url($urlPrefix."/delete-department") }}";
            var _token = $("meta[name=csrf-token]").attr("content");
            $.post(url, {_token: _token, type: window.delete_type, id: window.delete_id}, function (result) {
                $("#delete-alert-modal").modal("hide");
                if (result.status) {
                    alertSuccess(result.msg, function () {
                        if (typeof deletedCallback == "function") {
                            window.deletedCallback(result);
                        } else {
                            window.location.reload();
                        }
                    });
                } else {
                    alertError(result.msg);
                }
            });
        }

        function save() {
            if (!$("#model-form form").valid()) {
                return false;
            }
            var url = $("#model-form form").attr("action");
            var data = $("#model-form form").serialize();
            $("#model-form").modal("hide");
            $.post(url, data, function (res) {
                if (res.status) {
                    var page = "{{ request()->page}}";
                    $("#search-form").append("<input type='hidden' value='" + page + "' name='page'>");
                    $("#search-form").submit();
                } else {
                    alertError(res.msg);
                }
            });
        }
    </script>
@endpush