@extends("admin.layouts.layout")

@php
    $pageTitle = __("actions.".last(explode("/",request()->url()))).$modelName."·".$project->name;
@endphp

@section("content")
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    @include("public._form")
                </div>
            </div>
        </div>
    </div>

    <div id="factor-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="info-header-modalLabel"
         aria-hidden="true">
        <div class="modal-dialog modal-full-width">
            <div class="modal-content">
                <div class="modal-header modal-colored-header bg-info">
                    <h4 class="modal-title" id="info-header-modalLabel">产品型号管理</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                </div>
                <div class="modal-body">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-info btn-action-save" onclick="saveFactor();">保存</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="confirmToDeleteFactor()">确定</button>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
@endsection

@push("footer")
    <script>
        var factors = {!! $vo->factors ? json_encode($vo->factors) : json_encode([]) !!};

        $(function () {
            $("label[for=productParamedicLevels]").closest(".form-group").find("button").attr("disabled", true);
            setTimePicker();

            $("label[for=factors]").append('<button onclick="addFactor()" type="button" class="btn btn-sm btn-info ml-2"><i class="mdi mdi-plus-box"></i> 添加</button>');

            if (factors.length) {
                for (var i = 0; i < factors.length; i++) {
                    addFactorRow(factors[i]);
                }
            } else {
                $("#factors").html("");
            }
        });

        function uploaderCallback(file, data, index) {
            $('input[data-uploader-index=' + index + ']').val("/storage/" + (data.folder ? data.folder + "/" : "") + data.name);
            return true;
        }

        function afterAddCollectionRow(ele) {
            setTimePicker($(ele).closest("table").find("tbody").children("tr:last"));
        }

        function addFactor() {
            var url = "{{ url("admin/factor/create") }}";
            $.get(url, function (res) {
                $("#factor-modal .modal-body").html(res);
                $("#factor-modal").modal("show");
                $("#factor-modal .modal-footer button").prop("disabled", false);
                $("#factor-modal").data('bs.modal')._config.keyboard = false;
                $("#factor-modal").data('bs.modal')._config.backdrop = "static";
                setValidateForm($("#factor-modal .modal-body form"));
            });
        }

        function saveFactor() {
            if (!$("#factor-modal .modal-body form").valid()) {
                return;
            }
            $("#factor-modal .modal-footer button").prop("disabled", true);
            var url = $("#factor-modal .modal-body form").attr("action");
            var data = $("#factor-modal .modal-body form").serialize();

            $.post(url, data, function (res) {
                if (res.status) {
                    $("#factor-modal").modal("hide");
                    addFactorRow(res.data);
                } else {
                    $("#factor-modal .modal-footer button").prop("disabled", false);
                }
            });
        }

        function addFactorRow(row) {
            if (!$("#factors").children("table").length) {
                $("#factors").html('<table class="table table-bordered" id="data-table">' +
                    '                        <thead>' +
                    '                        <tr>' +
                    '                            <th>' +
                    '                                名称' +
                    '                            </th>' +
                    '                            <th>管理费挂钩</th>' +
                    '                            <th>排序</th>' +
                    '                            <th>操作</th>' +
                    '                        </tr>' +
                    '                        </thead>' +
                    '                        <tbody></tbody>' +
                    '</table>');
            }

            if ($("#factors table tbody tr[data-id=" + row.id + "]").length) {
                var exist = $("#factors table tbody tr[data-id=" + row.id + "]");
                exist.find("td[data-role=name]").text(row.name);
                exist.find("td[data-role=myindex]").text(row.myindex);
                exist.find("td[data-role=used-for-fee]").text(row.used_for_fee == 1 ? "挂钩" : "不挂钩");
                return;
            }

            if (row.used_for_fee) {
                var used_for_fee = "挂钩";
            } else {
                var used_for_fee = "不挂钩";
            }
            var tr = '<tr data-id=' + row.id + '>' +
                '<td data-role="name">' + row.name + '</td>' +
                '<td data-role="used-for-fee">' + used_for_fee + '</td>' +
                '<td data-role="myindex">' + row.myindex + '</td>' +
                '<td><input type="hidden" name="factor_id[]" value="' + row.id + '">' +
                '<a class="btn btn-sm btn-primary" href="javascript:;" onclick="editFactor(this)"><i class="mdi mdi-square-edit-outline"></i> 修改</a>' +
                '<a class="btn btn-sm btn-danger ml-1" href="javascript:;" onclick="delFactor(this)"><i class="mdi mdi-delete-outline"></i> 删除</a></td>' +
                '</tr>';
            $("#factors table tbody").append(tr);
        }

        function editFactor(element) {
            var id = $(element).closest("tr").attr("data-id");
            var url = "{{ url("admin/factor/edit") }}";
            $.get(url, {id: id}, function (res) {
                $("#factor-modal .modal-body").html(res);
                $("#factor-modal").modal("show");
                $("#factor-modal .modal-footer button").prop("disabled", false);
                $("#factor-modal").data('bs.modal')._config.keyboard = false;
                $("#factor-modal").data('bs.modal')._config.backdrop = "static";
                setValidateForm($("#factor-modal .modal-body form"));
            });
        }

        function delFactor(element) {
            var id = $(element).closest("tr").attr("data-id");
            window.del_id = id;
            $("#delete-alert-modal").modal("show");
            $("#delete-alert-modal .btn-warning").prop("disabled", false).html('确定');
        }

        function confirmToDeleteFactor() {
            $("#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("admin/factor/delete") }}";
            var id = window.del_id;
            var _token = $("meta[name=csrf-token]").attr("content");
            $.post(url, {id: id, _token: _token}, function (result) {
                $("#delete-alert-modal").modal("hide");
                if (result.status) {
                    $("#factors table tbody tr[data-id=" + id + "]").remove();
                } else {
                    alertError(result.msg);
                }
            });
        }
    </script>
@endpush