@extends('layouts.father')
@section('style')
    <style>
        body{
            position: relative;
            background-color: #ebebeb;
        }
        .layui-form-item{
            clear: none!important;
        }
        #layui-laydate7{
            top: 170px!important;
        }
        .info_tr a{
            text-decoration: underline!important;
        }
        .info_tr a:hover{
            color: red!important;
        }
        .circle {
            display: inline-block;
            width: 5px; /* 圆的直径 */
            height: 5px; /* 圆的直径 */
            background-color: rgb(144, 147, 153); /* 圆的颜色 */
            border-radius: 50%; /* 将元素设置为圆形 */
            margin-right: 10px; /* 圆与文本之间的距离 */
        }

        .label {
            min-width: 100px; /* 确保有固定的最小宽度 */
            white-space: nowrap; /* 防止文本换行 */
            overflow: hidden; /* 超出的部分隐藏并标记 */
            text-overflow: ellipsis; /* 超出部分用省略号显示 */
            margin-right: 10px; /* 两个标签之间的间距 */

        }

        .right-label {
            text-align: left; /*
            min-width: 100px; /* 确保有固定的最小宽度 */
            white-space: nowrap;
        }

        .timeline-item {
            position: relative;
        }

        .timeline-dot {
            position: relative;
        }

        .line {
            position: absolute;
            width: 1px;
            background-color: #ccc;
            bottom: -15px;
            z-index: 0;
            height: 29px;
            left: 2px;
            top: 12px;

        }
    </style>
@endsection
@section('title', '帘创优家防伪查询平台')
@section('body')

    {{--防伪错误--}}
    <div class="wrap">
{{--        <div class="x-nav">--}}
{{--            <!-- <span class="layui-breadcrumb">--}}
{{--              <a onclick="goindex()">首页</a>--}}
{{--              <a href="#">库存管理</a>--}}
{{--              <a>--}}
{{--                <cite>现存量</cite></a>--}}
{{--            </span> -->--}}
{{--        </div>--}}
        <div>
            <img src="/images/FWimg.png" alt="" style="width:100%">
            <div style="width: 90%; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; margin: 20px 5%;">
                <div style="margin-top: 20px;color:red;font-size: 1.8rem;margin-bottom: 10px;">
                    <div style="display: flex;font-weight: 700;justify-content: center;font-size: 1.2rem;">
                        您所购买的商品为帘创优家官方正品!
                    </div>
                </div>
                <div style="font-size: 0.8rem;margin-bottom: 10px;">———&nbsp;&nbsp;查 询 商 品 信 息 如 下&nbsp;&nbsp;———</div>
                <div style="width: 80%; max-width: 400px;">
                    <div style="margin-bottom: 15px; display: flex; align-items: center;">
                        <label for="order-number" style="min-width: 80px; text-align: right; margin-right: 5px;">订单号:</label>
                        <input id="order-number" value="{{$order->order_number}}" type="text" name="order-number" style=" border-radius: 5%;flex-grow: 1; border: 0.5px solid rgb(144, 147, 153); color: rgb(144, 147, 153);" placeholder="订单号" readonly>
                    </div>
                    <div style="margin-bottom: 15px; display: flex; align-items: center;">
                        <label for="product-name" style=" text-align: right; margin-right: 5px;min-width: 80px;">品名:</label>
                        <input id="product-name" value="{{$goodsorder->goods_name}}" type="text" name="product_name" style="border-radius: 5%;flex-grow: 1; border: 0.5px solid rgb(144, 147, 153); color: rgb(144, 147, 153);" placeholder="品名" readonly>
                    </div>
                    <div style="margin-bottom: 15px; display: flex; align-items: center;">
                        <label for="kh_name" style=" text-align: right; margin-right: 5px;min-width: 80px;">客户姓名:</label>
                        <input id="kh_name" value="{{$order->people}}" type="text" name="kh_name" style="border-radius: 5%;flex-grow: 1; border: 0.5px solid rgb(144, 147, 153); color: rgb(144, 147, 153);" placeholder="客户姓名" readonly>
                    </div>
                    <div style="margin-bottom: 15px; display: flex; align-items: center;">
                        <label for="shop_name" style=" text-align: right; margin-right: 5px;min-width: 80px;">销售门店:</label>
                        <input id="shop_name" value="{{$order->order_shop}}" type="text" name="shop_name" style="border-radius: 5%;flex-grow: 1; border: 0.5px solid rgb(144, 147, 153); color: rgb(144, 147, 153);" placeholder="销售门店" readonly>
                    </div>
                    <div style="margin-bottom: 15px; display: flex; align-items: center;">
                        <label for="IP" style=" text-align: right; margin-right: 5px; min-width: 80px;">当前IP:</label>
                        <input id="IP" type="text" name="IP" value="{{$ip}}" style="border-radius: 5%;flex-grow: 1; border: 0.5px solid rgb(144, 147, 153); color: rgb(144, 147, 153);" placeholder="当前IP" readonly>
                    </div>
                    <div style="margin-bottom: 15px; display: flex; align-items: center;">
                        <label for="area" style=" text-align: right; margin-right: 5px; min-width: 80px;">查询地区:</label>
                        <input id="area" type="text" value="浙江绍兴" name="area" style="border-radius: 5%;flex-grow: 1; border: 0.5px solid rgb(144, 147, 153); color: rgb(144, 147, 153);" placeholder="查询地区" readonly>
                    </div>
                </div>
            </div>
            <div style="width: 90%; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; margin: 20px 5%;">
                <div style="margin-top: 20px;margin-bottom: 30px;">
                    <div style="display: flex;font-weight: 700;justify-content: center;font-size: 0.8rem;">
                        生产记录
                    </div>
                </div>
                <div style="width: 80%; max-width: 400px;">
                    @foreach($jd as $index => $j)
                        <div class="timeline-item" style="margin-bottom: 15px; display: flex; justify-content: space-around; align-items: center;">
                            <div  class="timeline-dot" style="display: flex; align-items: center;">
                                <span class="circle"></span> <!-- 圆形点 -->
                                @if ($index < count($jd) - 1)
                                    <div class="line"></div> <!-- 只有不是最后一个元素时才加这行 -->
                                @endif
                                {{--<input type="hidden" name="" value=" {{preg_match('/[\x{4e00}-\x{9fa5}]+/u', $j, $matches)}}">--}}
                                {{--<label for="name" class="label">{{$chinesePart = $matches[0] ?? ''}}</label>--}}
                                <label for="name" class="label">{{$j['prefix']}}</label>
                            </div>
                            {{--<input type="hidden" name="" value="{{$remainingPart = trim(preg_replace('/[\x{4e00}-\x{9fa5}]+/u', '', $j))}}">--}}
                            {{--<label for="time"  class="right-label" style="text-align: right;color:rgb(144, 147, 153);">{{$remainingPart}}</label>--}}
                            <label for="time"  class="right-label" style="text-align: right;color:rgb(144, 147, 153);">{{$j['time']}}</label>
                        </div>
                    @endforeach
                </div>
            </div>
            <div style="display: flex; flex-direction: column; align-items: center;font-size: 12px;margin-bottom: 20px;">
                <div style="color:rgb(144, 147, 153);"> &middot;产地:浙江 等级:合格品 </div>
                <div style="color: rgb(144, 147, 153);"> &middot;安全类别:GB18401-2010A类 </div>
                <div style="color: rgb(144, 147, 153);"> &middot;全国服务电话:400-800-9669 </div>
            </div>
            <div style="height: 10px;">

            </div>
        </div>
    </div>
    {{--查看库存量结束--}}
    <script src="/js/qrcode.min.js"></script>
    <script>

    </script>
    <script type="text/javascript" src="/js/tableContentRoll.js"></script>
    <link rel="stylesheet" href="/css/tableContentRoll.css">
@endsection