@extends('manager.layout.master')

@section('body')
    @php
        $totalCount = 0;
        $pendingCount = 0;
        $paidCount = 0;
        foreach ($list as $o) {
            $totalCount++;
            if ($o->status == 20) {
                $paidCount++;
            } else {
                $pendingCount++;
            }
        }
    @endphp

    <style>
        .viporder-page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 12px 16px;
            margin-bottom: 15px;
            background: #fff;
            border-left: 4px solid #009688;
            border-radius: 2px;
            box-shadow: 0 1px 2px 0 rgba(0,0,0,.05);
        }
        .viporder-page-header .title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }
        .viporder-page-header .stats {
            margin-left: 15px;
            font-size: 13px;
            color: #666;
        }
        .viporder-page-header .stats .layui-badge {
            margin: 0 3px;
        }
        .viporder-search-bar {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 10px 0;
        }
        .viporder-search-bar .layui-form-label {
            width: auto;
            padding: 8px 10px;
        }
        .viporder-search-bar .layui-input-inline {
            vertical-align: middle;
        }
        .viporder-search-bar .layui-btn {
            margin-left: 8px;
        }
        .viporder-table th {
            background: #f2f2f2;
            color: #333;
            font-weight: 600;
            text-align: center;
            vertical-align: middle;
            white-space: nowrap;
        }
        .viporder-table td {
            vertical-align: middle;
            font-size: 13px;
        }
        .viporder-table tbody tr:hover {
            background: #f8f8f8;
        }
        .viporder-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid #e6e6e6;
            object-fit: cover;
            margin-right: 8px;
            flex-shrink: 0;
        }
        .viporder-user {
            display: flex;
            align-items: center;
            text-align: left;
        }
        .viporder-user-info {
            line-height: 1.6;
        }
        .viporder-user-info .name {
            font-weight: 600;
            color: #333;
        }
        .viporder-user-info .meta {
            color: #888;
            font-size: 12px;
        }
        .viporder-user-info .meta i {
            font-style: normal;
            margin-right: 5px;
        }
        .viporder-amount .origin {
            color: #999;
            text-decoration: line-through;
            font-size: 12px;
        }
        .viporder-amount .paid {
            color: #e4393c;
            font-weight: 600;
            font-size: 14px;
        }
        .viporder-time {
            color: #666;
            font-size: 12px;
            line-height: 1.6;
        }
        .viporder-time span {
            display: block;
        }
        .viporder-badge {
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 12px;
        }
        .viporder-order-no {
            font-family: Consolas, monospace;
            color: #333;
            font-size: 12px;
        }
    </style>

    <div class="viporder-page-header">
        <div>
            <span class="title">VIP购买记录</span>
            <span class="stats">
                共 <span class="layui-badge layui-bg-blue">{{$totalCount}}</span>
                待支付 <span class="layui-badge layui-bg-orange">{{$pendingCount}}</span>
                已支付 <span class="layui-badge layui-bg-green">{{$paidCount}}</span>
            </span>
        </div>
        <a class="layui-btn layui-btn-sm layui-btn-primary" id="reload"><i class="layui-icon">&#xe669;</i> 刷新</a>
    </div>

    <!-- 搜索区 -->
    <div class="viporder-search-bar">
        <form class="layui-form layui-form-pane" action="" method="get">
            <span class="layui-form-label">状态：</span>
            <div class="layui-input-inline" style="width: 110px;">
                <select name="status">
                    <option value="">全部</option>
                    @foreach(\App\Models\Order::$statusVipList as $key=>$vo)
                        @if ($key!=30)
                            <option value="{{$key}}" @if(request('status')==$key) selected @endif>{{$vo}}</option>
                        @endif
                    @endforeach
                </select>
            </div>

            <div class="layui-input-inline" style="width: 260px;">
                <input type="text" name="keyword" value="{{request()->get('keyword')}}" autocomplete="off" placeholder="昵称 / 编号 / 电话 / 订单编号" class="layui-input">
            </div>

            <button type="submit" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe615;</i> 查询</button>
            <a href="{{route('orderVipList')}}" class="layui-btn layui-btn-sm layui-btn-primary">重置</a>
        </form>
    </div>

    <table class="layui-table viporder-table">
        <thead>
        <tr>
            <th style="width:150px;">订单号</th>
            <th>用户信息</th>
            <th style="width:140px;">VIP信息</th>
            <th style="width:100px;">金额</th>
            <th style="width:150px;">时间</th>
            <th style="width:80px;">状态</th>
        </tr>
        </thead>
        <tbody id="idFrom">
        @foreach($list as $key=>$vo)
            <tr>
                <td>
                    <span class="viporder-order-no" title="{{$vo->number}}">{{\Illuminate\Support\Str::limit($vo->number, 18, '')}}</span>
                </td>
                <td>
                    <div class="viporder-user">
                        <img class="viporder-avatar" src="{{$vo->user->head_img_url ?? asset('admin/img/ico.png')}}" alt="">
                        <div class="viporder-user-info">
                            <div class="name">{{$vo->user->nickname ?? '未设置昵称'}}</div>
                            <div class="meta">
                                <i>编号：{{$vo->user->code ?? '-'}}</i>
                                <i>手机：{{$vo->user->tel ?? '-'}}</i>
                            </div>
                            <div class="meta">
                                <i>性别：{{$vo->user->sex_text ?? '-'}}</i>
                            </div>
                        </div>
                    </div>
                </td>
                <td>
                    <div class="viporder-time">
                        <span>购买 <strong>{{$vo->buyVip->day ?? '0'}}</strong> 天</span>
                        <span>截止：{{$vo->buyVip->end_time ?? '-'}}</span>
                    </div>
                </td>
                <td>
                    <div class="viporder-amount">
                        <div class="origin">￥{{$vo->price ?? '0.00'}}</div>
                        <div class="paid">￥{{$vo->pay_price ?? '0.00'}}</div>
                    </div>
                </td>
                <td>
                    <div class="viporder-time">
                        <span>创建：{{$vo->create_time ?: '-'}}</span>
                        <span>支付：{{$vo->pay_time ?: '-'}}</span>
                    </div>
                </td>
                <td>
                    @if($vo->status == 20)
                        <span class="layui-badge layui-bg-green">已支付</span>
                    @else
                        <span class="layui-badge layui-bg-orange">待支付</span>
                    @endif
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>

    @include('manager.include.pageBtn')

@stop