@extends("admin.layouts.layout")

@section("content")
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-body">
                    <div class="mb-3">
                        <form class="form-inline">
                            <select class="form-control mr-1" name="project_id"
                                    onchange="$(this).closest('form').submit()">
                                @foreach($projects as $pp)
                                    <option
                                        value="{{$pp->id}}" @if($pp->id == $project_id) {{ "selected" }}@endif>{{$pp->name}}</option>
                                @endforeach
                            </select>
                            <select class="form-control" name="month" onchange="$(this).closest('form').submit()">
                                @foreach($months as $mm)
                                    <option value="{{$mm}}" @if($mm == $month) {{ "selected" }}@endif>{{$mm}}</option>
                                @endforeach
                            </select>
                        </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>
                            <th>结束日期</th>
                            <th>状态</th>
                            <th>总计</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        @foreach ($data as $row)
                            <tr data-id="{{$row->id}}">
                                <td>
                                    {{ $row->serial }}
                                </td>
                                <td>{{ $row->project->name }}</td>
                                <td>{{ $row->customer->name ?: $row->patient->name }}</td>
                                <td>{{ $row->customer->balance }}</td>
                                <td>{{ $row->customer->mobile }}</td>
                                <td>{{ $row->patient->name }}</td>
                                <td>{{ $row->from_date }}</td>
                                <td>{!!  $row->status == \App\Models\Orders::STATUS_FINISHED ? $row->to_date : "<label class='badge badge-danger'>未结</label> {$row->to_date}"  !!}</td>
                                <td>{!! $row->getStatusLabelAttribute()  !!} </td>
                                <td>{!! $row->status == \App\Models\Orders::STATUS_FINISHED ? "" : "<label class='badge badge-danger'>预计</label>"  !!} {{ $row->total }} </td>
                                <td>
                                    <a class="btn btn-sm btn-primary"
                                       href="javascript:;" onclick="toggleItems(this)"><i
                                            class="mdi mdi-arrow-down"></i> 查看</a>
                                </td>
                            </tr>
                            <tr style="display: none">
                                <td colspan="11" class="p-0">
                                    <table class="table table-striped mb-0 border-0">
                                        <thead>
                                        <tr>
                                            <th>所在床位</th>
                                            <th>护理日期</th>
                                            <th>护工</th>
                                            <th>单价</th>
                                            <th>扣款时间</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        @foreach($row->orderItems as $item)
                                            <tr data-id="{{ $item->id }}" data-item-id="{{ $item->id }}">
                                                <td>{{ $item->building->name }}-{{ $item->room->name }}
                                                    -{{ $item->bed->name }}床
                                                </td>
                                                <td>{{ $item->service_date }}</td>
                                                <td>{{ $item->paramedic ? $item->paramedic->name : "" }}</td>
                                                <td data-field="total">{{ $item->total }}</td>
                                                <td>{{ $item->paid_at }}</td>
                                                <td>
                                                    <button type="button" class="btn btn-primary btn-sm"
                                                            onclick="changeItem(this)">修改
                                                    </button>
                                                </td>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                    @include("public._pages")
                </div>

            </div>
        </div>
    </div>

    <div id="modal-box" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <form class="pl-3 pr-3" action="#">
                        @csrf
                        <input type="hidden" name="item_id">
                        <div class="form-group">
                            <label for="serial">订单编号</label>
                            <input class="form-control" type="text" name="serial" disabled>
                        </div>
                        <div class="form-group">
                            <label for="service_date">服务日期</label>
                            <input class="form-control" type="text" name="service_date" disabled>
                        </div>
                        <div class="form-group">
                            <label for="total">价格</label>
                            <input class="form-control" type="number" name="total" required=""
                                   onblur="calculateSalary();">
                        </div>
                        <div id="factor-box">

                        </div>
                        <div class="form-group text-right">
                            <button class="btn btn-primary mr-1" type="button" onclick="saveItemChange();">修改</button>
                            <button class="btn btn-light" type="button" data-dismiss="modal">取消</button>
                        </div>
                    </form>

                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    @include("public._delete")
@endsection

@push("footer")
    <script>
        function toggleItems(element) {
            $(element).closest("tr").next("tr").toggle();
            $(element).closest("tr").toggleClass("bg-warning");
            $(element).find("i").toggleClass("mdi-arrow-up")
        }

        function changeItem(element) {
            var item_id = $(element).closest("tr").attr("data-id");
            var url = "{{ url("admin/orders/get-item") }}/" + item_id;
            $.get(url, function (res) {
                $("#modal-box").modal("show");
                $("#modal-box form input[name=item_id]").val(item_id);
                $("#modal-box form input[name=serial]").val(res.order.serial);
                $("#modal-box form input[name=service_date]").val(res.service_date);
                $("#modal-box form input[name=total]").val(res.total);
                $("#factor-box").html("");
                try {
                    var factors = JSON.parse(res.factors);
                    for (var i = 0; i < factors.length; i++) {
                        var factor = factors[i];
                        if (!factor.used_for_fee) continue;
                        var html = "";
                        html += '<div class="form-group">' +
                            '                            <label for="factor_item[' + factor.factor_item_id + '][factor_item_name]">' + factor.factor_name + '</label>' +
                            '                            <input class="form-control" type="text" name="factor_item[' + factor.factor_item_id + '][factor_item_name]" value="' + factor.factor_item_name + '" required="">' +
                            '                        </div>';
                        html += '<div class="form-group">' +
                            '                            <label for="factor_item[' + factor.factor_item_id + '][fee_percent]">管理费比例</label>' +
                            '                            <input class="form-control" onblur="calculateSalary();" type="number" name="factor_item[' + factor.factor_item_id + '][fee_percent]" value="' + factor.fee_percent + '" required="">' +
                            '                        </div>';
                        html += '<div class="form-group">' +
                            '                            <label for="factor_item[' + factor.factor_item_id + '][fee]">固定管理费</label>' +
                            '                            <input class="form-control"  onblur="calculateSalary();" type="number" name="factor_item[' + factor.factor_item_id + '][fee]" value="' + factor.fee + '" required="">' +
                            '                        </div>';
                        html += '<div class="form-group">' +
                            '                            <label for="salary">护工工资</label>' +
                            '                            <input class="form-control" type="number" name="salary" disabled>' +
                            '                        </div>';
                        $("#factor-box").html(html);

                        calculateSalary();
                    }
                } catch (e) {
                    console.log(e);
                }
            });
        }

        function calculateSalary() {
            if (!$("#modal-box form").find("input[name=salary]").length) return;
            var total = $("#modal-box form input[name=total]").val();
            var fee_percent = $("#modal-box form input[name$='[fee_percent]']").val();
            var fee = $("#modal-box form input[name$='[fee]']").val();
            var salary = total - (fee_percent * total / 100 + parseFloat(fee));
            $("#modal-box form").find("input[name=salary]").val(salary);
        }

        function saveItemChange() {
            var url = "{{ url("admin/orders/change-item") }}";
            var data = $("#modal-box form").serialize();
            $.post(url, data, function (res) {
                if (!res.status) {
                    alertError(res.msg);
                    return false;
                }
                updateItem();
                alertSuccess(res.msg);
            });
        }

        function updateItem() {
            var total = $("#modal-box form input[name=total]").val();
            var item_id = $("#modal-box form input[name=item_id]").val();
            $("#data-table tbody tr[data-item-id='" + item_id + "']").find("td[data-field=total]").html(total);
        }
    </script>
@endpush