@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" id="search-form" autocomplete="off">
                            <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>
                            <input class="form-control" type="text" name="keyword" value="{{ request()->keyword }}"
                                   placeholder="订单编号/联系人/联系电话">
                        </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>
                        </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->mobile }}</td>
                                <td>{{ $row->patient->name }}</td>
                                <td>{{ $row->from_date }}</td>
                                <td>{{ $row->score }}</td>
                                <td>{{ $row->comment }}</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>
                                        </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>
                                            </tr>
                                        @endforeach
                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                    @include("public._pages")
                </div>

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

@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 toggleItems(element) {
            $(element).closest("tr").next("tr").toggle();
            $(element).closest("tr").toggleClass("bg-warning");
            $(element).find("i").toggleClass("mdi-arrow-up")
        }
    </script>
@endpush