@extends('manager.layout.master')

@push('head')
    <style>
        .bename-page-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #fff;
            border-left: 4px solid #009688;
            padding: 14px 18px;
            margin-bottom: 15px;
            border-radius: 4px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
        }
        .bename-page-header .title {
            font-size: 16px;
            font-weight: 600;
            color: #333;
        }
        .bename-stats-bar {
            display: flex;
            gap: 12px;
            background: #fff;
            padding: 15px;
            margin-bottom: 15px;
            border-radius: 4px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
        }
        .bename-stat-card {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 14px 8px;
            border-radius: 4px;
            background: #fafafa;
            border: 1px solid #f0f0f0;
            text-decoration: none;
            transition: all .2s;
            cursor: pointer;
            position: relative;
        }
        .bename-stat-card:hover {
            background: #f0f9f7;
            border-color: #009688;
            transform: translateY(-2px);
        }
        .bename-stat-card.active {
            background: #f0f9f7;
            border-color: #009688;
            box-shadow: 0 2px 8px rgba(0, 150, 136, .15);
        }
        .bename-stat-card.active::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: #009688;
            border-radius: 4px 4px 0 0;
        }
        .bename-stat-card .num {
            font-size: 22px;
            font-weight: 700;
            color: #333;
            line-height: 1.2;
            margin-bottom: 4px;
        }
        .bename-stat-card .label {
            font-size: 13px;
            color: #666;
        }
        .bename-stat-card.active .num,
        .bename-stat-card.active .label {
            color: #009688;
        }
        .bename-stat-card.total .num { color: #009688; }
        .bename-stat-card.pending .num { color: #ff5722; }
        .bename-stat-card.processing .num { color: #00bcd4; }
        .bename-stat-card.done .num { color: #5fb878; }
        .bename-stat-card.returned .num { color: #999; }
        .bename-search-bar {
            background: #fff;
            padding: 12px 15px;
            margin-bottom: 15px;
            border-radius: 4px;
            box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
        }
        .bename-search-bar .layui-form-label {
            width: auto !important;
            padding: 8px 10px;
        }
        .bename-search-bar .layui-input-inline {
            vertical-align: top;
        }
        .bename-search-bar .layui-btn {
            margin-left: 8px;
        }
        .bename-table th {
            background: #f8f8f8 !important;
            color: #333;
            font-weight: 600;
        }
        .bename-table tbody tr:hover {
            background: #f6fffd;
        }
        .bename-table td {
            vertical-align: middle !important;
        }
        .bename-user {
            display: flex;
            align-items: center;
        }
        .bename-user img {
            width: 40px;
            height: 40px;
            border-radius: 6px;
            object-fit: cover;
            margin-right: 10px;
            border: 1px solid #e6e6e6;
        }
        .bename-user .info p {
            margin: 0;
            line-height: 1.6;
            font-size: 13px;
            color: #555;
        }
        .bename-user .info .name {
            color: #333;
            font-weight: 500;
        }
        .bename-user .info .code {
            color: #888;
            font-size: 12px;
        }
        .bename-info-item {
            background: #fafafa;
            border: 1px solid #f0f0f0;
            border-radius: 4px;
            padding: 8px 12px;
            font-size: 13px;
            line-height: 1.8;
            color: #555;
        }
        .bename-info-item .line {
            display: flex;
            justify-content: space-between;
            gap: 10px;
        }
        .bename-info-item .line span {
            flex: 1;
        }
        .bename-info-item .label {
            color: #888;
            margin-right: 4px;
        }
        .bename-amount {
            color: #ff5722;
            font-weight: 700;
            font-size: 14px;
        }
    </style>
@endpush

@section('body')
    <div class="bename-page-header">
        <span class="title"><i class="layui-icon">&#xe66f;</i> 个人取名</span>
    </div>

    @php
        $barStyle = 'display:flex;gap:12px;background:#fff;padding:15px;margin-bottom:15px;border-radius:4px;box-shadow:0 1px 4px rgba(0,0,0,.05);';
        $cardStyle = 'flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px 8px;border-radius:4px;background:#fafafa;border:1px solid #f0f0f0;text-decoration:none;color:#333;';
        $statusClassMap = [
            0 => 'pending',
            5 => 'processing',
            10 => 'done',
            20 => 'returned',
        ];
    @endphp
    <div class="bename-stats-bar" style="{{$barStyle}}">
        <a class="bename-stat-card total {{request('status') === null || request('status') === '' ? 'active' : ''}}" style="{{$cardStyle}}" href="{{route('orderPeopleBeNameList')}}">
            <span class="num">{{$list->total()}}</span>
            <span class="label">全部订单</span>
        </a>
        @foreach(\App\Models\Order::$statusItemList as $key=>$vo)
            @if($key != 11)
                <a class="bename-stat-card {{$statusClassMap[$key] ?? ''}} {{request('status') == (string)$key ? 'active' : ''}}" style="{{$cardStyle}}" href="{{route('orderPeopleBeNameList', ['status' => $key])}}">
                    <span class="num">{{$list->where('status', $key)->count()}}</span>
                    <span class="label">{{$vo}}</span>
                </a>
            @endif
        @endforeach
    </div>

    <div class="bename-search-bar">
        <form class="layui-form layui-form-pane" action="" method="get">
            <div class="layui-inline">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline" style="width: 120px;">
                    <select name="status">
                        <option value="">全部</option>
                        @foreach(\App\Models\Order::$statusItemList as $key=>$vo)
                            @if ($key != 11)
                                <option value="{{$key}}" @if(request('status')==$key) selected @endif>{{$vo}}</option>
                            @endif
                        @endforeach
                    </select>
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline" style="width: 280px;">
                    <input type="text" name="keyword" value="{{request()->get('keyword')}}" autocomplete="off" placeholder="昵称/编号/电话/订单编号" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button type="submit" class="layui-btn layui-btn-normal"><i class="layui-icon">&#xe615;</i> 查询</button>
                <a href="{{route('orderPeopleBeNameList')}}" class="layui-btn layui-btn-primary"><i class="layui-icon">&#xe669;</i> 重置</a>
            </div>
        </form>
    </div>

    <table class="layui-table bename-table">
        <thead>
        <tr>
            <th>订单号</th>
            <th>用户信息</th>
            <th>取名信息</th>
            <th>金额</th>
            <th>时间</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="idFrom">
        @foreach($list as $key=>$vo)
            <tr>
                <td>
                    <span title="{{$vo->number}}">{{\Illuminate\Support\Str::limit($vo->number ?? '', 18, '')}}</span>
                </td>
                <td>
                    <div class="bename-user">
                        <img src="{{$vo->user->head_img_url ?? ''}}" alt="">
                        <div class="info">
                            <p class="name">{{$vo->user->nickname ?? '未设置昵称'}}</p>
                            <p class="code">编号：{{$vo->user->code ?? '-'}}</p>
                            <p class="code">电话：{{$vo->user->tel ?? '-'}}</p>
                        </div>
                    </div>
                </td>
                <td style="min-width: 220px;">
                    <div class="bename-info-item">
                        <div class="line">
                            <span><span class="label">姓氏：</span>{{$vo->TName->surname ?? '-'}}</span>
                            <span><span class="label">性别：</span>{{$vo->TName->sex_text ?? '-'}}</span>
                        </div>
                        <div class="line">
                            <span><span class="label">生日：</span>{{$vo->TName->birthday ?? '-'}}</span>
                        </div>
                        <div class="line">
                            <span><span class="label">太阳时：</span>{{$vo->TName->sun_time ?? '-'}}</span>
                        </div>
                        <div class="line">
                            <span><span class="label">农历：</span>{{$vo->TName->lunar_time ?? '-'}}</span>
                            <span><span class="label">季节：</span>{{$vo->TName->season ?? '-'}}</span>
                        </div>
                        <div class="line">
                            <span><span class="label">节气：</span>{{$vo->TName->solar_terms ?? '-'}}</span>
                        </div>
                        <div class="line">
                            <span><span class="label">地址：</span>{{$vo->TName->area_text ?? '-'}}</span>
                        </div>
                    </div>
                </td>
                <td>
                    <span class="bename-amount">￥ {{$vo->price}}</span>
                </td>
                <td>
                    <p>下单：{{$vo->create_time ?? '-'}}</p>
                    <p>支付：{{$vo->pay_time ?? '-'}}</p>
                </td>
                <td>
                    @if($vo->status == 0)
                        <span class="layui-badge layui-bg-orange">{{$vo->status_text}}</span>
                    @elseif(in_array($vo->status, [1,2,3]))
                        <span class="layui-badge layui-bg-green">{{$vo->status_text}}</span>
                    @else
                        <span class="layui-badge layui-bg-gray">{{$vo->status_text}}</span>
                    @endif
                </td>
                <td>
                    <a class="layui-btn layui-btn-sm layui-btn-normal" onclick="openView('{{route('orderPeopleBeNameInfo',['id' => $vo->id])}}','详情','1180px')" lay-event="edit"><i class="layui-icon">&#xe60a;</i> 详情</a>
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>

    @include('manager.include.pageBtn')

@stop