@extends("admin.layouts.layout")

@php
    $pageTitle = $modelName;
@endphp

@section("content")
    <div class="row">
        <div class="col-sm-12 col-md-8">
            <div class="card">
                <div class="card-body">
                    <div class="mb-3"><a class="btn btn-primary" href="javascript:;" onclick="create(0)">
                            @lang("icons.action_create") 新增{{$modelName}}
                        </a></div>
                    <table class="table table-bordered treetable" id="data-table">
                        <thead>
                        <tr>
                            <th>
                                {{$modelName}}
                            </th>
                            <th>菜单路径</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach ($data as $row)
                            <tr role="row" data-id="{{$row['id']}}" data-tt-id="{{$row['id']}}"
                                @if($row['pid'] > 0) data-tt-parent-id="{{$row['pid']}}" @endif>
                                <td>
                                    <span
                                        class='@if(count($row['children']) > 0) folder @else file @endif'>@if($row["icon"]){!! "<i class='{$row["icon"]}'></i>"  !!} @endif {{ $row["name"] }}</span>
                                </td>
                                <td>
                                    {{$row["url"]}}
                                </td>
                                <td>
                                    <a class="btn btn-sm btn-success"
                                       href="javascript:;"
                                       onclick="create({{$row['id']}})"><i class="uil-corner-down-right"></i> 子菜单</a>
                                    <a class="btn btn-primary btn-sm"
                                       href="javascript:;"
                                       onclick="edit({{$row['id']}})">@lang("icons.action_edit") @lang("actions.edit")</a>
                                    <a class="btn btn-sm btn-danger btn-delete" data-id="{{$row['id']}}"
                                       href="javascript:;">@lang("icons.action_delete") @lang("actions.delete")</a>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>

                </div>

            </div>
        </div>

        <div class="col-sm-12 col-md-4" id="form-box">
            <div class="card">
                <div class="card-body">
                    @include("public._form")
                </div>
            </div>
        </div>
    </div>

    @include("public._delete")
    @include("plugins.treetable")
@endsection

@push("footer")
    <script>
        var permissions = {!! json_encode(array_by_key($data,"id")) !!};
        var form_original_top = $("#form-box").offset().top;

        $(function () {
            $(".btn-save").click(save);
            setFormPosition();
            $(document).scroll(function () {
                setFormPosition();
            });
        });

        function setFormPosition() {
            if ($(document).scrollTop() > 50) {
                $("#form-box").css({
                    marginTop: $(document).scrollTop() - 50
                });
            } else {
                $("#form-box").css({
                    marginTop: 0
                });
            }
        }

        function create(pid) {
            $("#fm")[0].reset();
            var data = {
                id: "",
                pid: pid
            };
            if (data["pid"]) {
                data.pname = permissions[data["pid"]].name;
            } else {
                data.pname = "根菜单";
            }
            $("#fm").autofill(data);
            $("#data-table tbody tr").removeClass("bg-light").removeClass("bg-warning");
            $("#data-table tbody tr[data-id=" + pid + "]").addClass("bg-light");
        }

        function edit(id) {
            var data = permissions[id];
            if (data["pid"]) {
                data.pname = permissions[data["pid"]].name;
            } else {
                data.pname = "根菜单";
            }

            $("#fm").autofill(data);
            $("#data-table tbody tr").removeClass("bg-light").removeClass("bg-warning");
            $("#data-table tbody tr[data-id=" + id + "]").addClass("bg-warning");
        }

        function save() {
            if (!$("#fm").valid()) {
                return false;
            }

            var id = $("#fm input[name=id]").val();
            if (id == "" || id == undefined) {
                var url = "{{url($urlPrefix.'/store')}}";
            } else {
                var url = "{{url($urlPrefix.'/update')}}";
            }
            var data = $("#fm").serializeArray();
            $.post(url, data, function (result) {
                if (result.status) {
                    alertSuccess(result.msg, function () {
                        window.location.reload();
                    });
                } else {
                    alertError(result.msg);
                }
            })
        }
    </script>
@endpush