@extends("admin.layouts.layout")

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

@push("header")

@endpush

@section("content")
    <div class="row">
        <div class="col-4 pr-0">
            <div class="card">
                <div class="card-body p-0 ">
                    <table class="table border-bottom border-light mb-0 treetable" id="tree-table">
                        <tbody>
                        <tr role="row" data-id="{{$project->id}}" data-type="project" data-name="{{$project->name}}"
                            data-myindex="{{$project->myindex}}" data-tt-id="project{{$project->id}}">
                            <td>
                                <a href="javascript:;" class="btn btn-sm btn-link"> <i
                                        class="mdi mdi-hospital"></i> {{ $project->name }}</a>

                                <button class="btn btn-sm btn-info d-none"
                                        href="javascript:;" onclick="createSub(this)"><i
                                        class="mdi mdi-plus-box"></i> 楼栋
                                </button>

                                <a class="btn btn-sm btn-link float-right" href="javascript:;"
                                   onclick="backAndReload()">返回</a>
                            </td>
                        </tr>
                        @foreach($project->buildings as $building)
                            <tr role="row" data-type="building" data-id="{{$building->id}}"
                                data-name="{{$building->name}}"
                                data-myindex="{{$building->myindex}}"
                                data-tt-id="building{{$building->id}}" data-tt-parent-id="project{{$project->id}}">
                                <td>
                                    <a href="javascript:;" class="btn btn-sm btn-link"> <i
                                            class="mdi mdi-hospital-building"></i> {{$building->name}} </a>
                                    <button class="btn btn-sm btn-info d-none"
                                            href="javascript:;" onclick="createSub(this)"><i
                                            class="mdi mdi-plus-box"></i> 病区/楼层
                                    </button>
                                    <button class="btn btn-sm btn-primary d-none"
                                            href="javascript:;" onclick="edit(this)"><i
                                            class="mdi mdi-pencil"></i></button>
                                    <button class="btn btn-sm btn-danger d-none"
                                            href="javascript:;" onclick="del(this)"><i
                                            class="mdi mdi-delete-forever"></i></button>

                                </td>
                            </tr>
                            @foreach($building->areas as $area)
                                <tr role="row" data-type="area" data-id="{{$area->id}}" data-name="{{$area->name}}"
                                    data-myindex="{{$area->myindex}}"
                                    data-tt-id="area{{$area->id}}" data-tt-parent-id="building{{$building->id}}">
                                    <td>
                                        <a href="javascript:;" class="btn btn-sm btn-link"> <i
                                                class="mdi mdi-floor-plan"></i> {{$area->name}} </a>
                                        <button class="btn btn-sm btn-info d-none"
                                                href="javascript:;" onclick="createSub(this)"><i
                                                class="mdi mdi-plus-box"></i> 病房
                                        </button>
                                        <button class="btn btn-sm btn-primary d-none"
                                                href="javascript:;" onclick="edit(this)"><i
                                                class="mdi mdi-pencil"></i></button>
                                        <button class="btn btn-sm btn-danger d-none"
                                                href="javascript:;" onclick="del(this)"><i
                                                class="mdi mdi-delete-forever"></i></button>

                                    </td>
                                </tr>
                                @foreach($area->rooms as $room)
                                    <tr role="row" data-type="room" data-id="{{$room->id}}" data-name="{{$room->name}}"
                                        data-myindex="{{$room->myindex}}"
                                        data-tt-id="room{{$room->id}}" data-tt-parent-id="area{{$area->id}}">
                                        <td>
                                            <a href="javascript:;" class="btn btn-sm btn-link"> <i
                                                    class="mdi mdi-home-heart"></i> {{$room->name}} </a>
                                            <button class="btn btn-sm btn-info d-none"
                                                    href="javascript:;" onclick="createSub(this)"><i
                                                    class="mdi mdi-plus-box"></i> 病床
                                            </button>
                                            <button class="btn btn-sm btn-primary d-none"
                                                    href="javascript:;" onclick="edit(this)"><i
                                                    class="mdi mdi-pencil"></i></button>
                                            <button class="btn btn-sm btn-danger d-none"
                                                    href="javascript:;" onclick="del(this)"><i
                                                    class="mdi mdi-delete-forever"></i></button>

                                        </td>
                                    </tr>
                                @endforeach
                            @endforeach
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="col-8">
            <div class="card">
                <div class="card-body">
                    <table class="table table-bordered" id="data-table">
                        <thead>
                        <tr>
                            <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>
                                    <a class="btn btn-sm btn-primary"
                                       href="javascript:;" onclick="edit(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>
                    </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 -->

    @include("plugins.treetable")
@endsection

@push("footer")

    <script>
        $(function () {
            $("#tree-table tr").hover(function () {
                $(this).find("button").removeClass("d-none");
            }, function () {
                $(this).find("button").addClass("d-none");
            });
        });

        function createSub(element) {
            var type = $(element).closest("tr").attr("data-type");
            var id = $(element).closest("tr").attr("data-id");
            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("新增楼栋");
                    break;
                case "building":
                    $("#model-form .modal-title").html("新增病区/楼层");
                    break;
                case "area":
                    $("#model-form .modal-title").html("新增病房");
                    break;
                case "room":
                    $("#model-form .modal-title").html("新增病床");
                    break;
            }

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

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

            $("#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("修改楼栋");
                    break;
                case "area":
                    $("#model-form .modal-title").html("修改病区/楼层");
                    break;
                case "room":
                    $("#model-form .modal-title").html("修改病房");
                    break;
                case "bed":
                    $("#model-form .modal-title").html("修改床位");
                    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) {

                    if (res.data.room_id) {
                        $("#data-table tbody").prepend('<tr data-type="bed">\n' +
                            '                                <td>'+res.data.name+'</td>\n' +
                            '                                <td>'+res.data.room_id+'</td>\n' +
                            '                                <td>'+res.data.project_id+'</td>\n' +
                            '                                <td>'+res.data.building_id+'</td>\n' +
                            '                                <td>'+res.data.area_id+'</td>\n' +
                            '                                <td>&nbsp;</td>\n' +
                            '                            </tr>');
                        return;
                    }
                    window.location.reload();
                } else {
                    alertError(res.msg);
                }
            });
        }
    </script>
@endpush