@extends('layouts.father')
@section('title', '')
@section('body')
    <style>
        *{
            font-size: 12px;
        }
        .debang-dy-div{
            border: 0.5px solid #c5c2c1;
            width: 76mm;
        }
        .debang-dy-data-div{
            width: 72mm;
            margin: 0 2mm;
        }
        .debang-dy-head-div{
            width: 100%;
            display: flex;
            height: 12mm;
            text-align: right;
        }
        .debang-dy-head-div-one{
            width: 12mm;
            border: 0.5px solid #c5c2c1;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }
        .border-div{
            border: 0.5px solid #c5c2c1;
        }
        .border-bottom-no{
            border-bottom: 0;
        }
        .city-div{
            width: 72mm;
            height: 10mm;
            justify-content: center;
            display: flex;
            align-items: center;
        }
        .here-you-are-div{
            width: 56mm;
            height: 16mm;
            display: flex;
        }
        .give-me-div{
            width: 56mm;
            height: 16mm;
            display: flex;
        }
        .txm-div{
            width: 72mm;
            height: 19mm;
            text-align: center;
        }
        .dy-most-botton{
            height: 52mm;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .here-you-are-div-right{
            height: 15mm;
            padding: 1mm;
        }
        .give-me-div-right{
            height: 12mm;
            padding: 1mm;
        }
        .here-you-are-div-left{
            margin-left: 5px;
            width: 10mm;
            font-size: 16px;
            display: flex;
            justify-content: center;
            font-weight:bold;
            align-items: center;
            height: 16mm;
        }
        .give-me-div-left{
            width: 12mm;
            height: 12mm;
            font-size: 20px;
            display: flex;
            justify-content: center;
            font-weight:bold;
            align-items: center;
        }
        .add-cu{
            font-weight:bold
        }
        .fourteen{
            font-size: 16px
        }

        .expressNum {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
    </style>
    <div class="x-body" id="x-body">
        <div class="debang-dy-div express" style="display: none;">
            <div style="margin-top: 2mm" class="debang-dy-data-div">
                <div class="debang-dy-head-div" style="display: flex;justify-content: space-between">
                    <div></div>
                    <div></div>
                    <div class="add-cu" style="width: 12mm;height:12mm;font-size: 16px;text-align: left">快递包裹</div>
                </div>
                <div class="city-div border-div border-bottom-no">
                    <h1 style="font-size: 25px;font-weight:bold">{{ $param['receiver']['province'] . $param['receiver']['city'] }}</h1>
                </div>
                <div class="txm-div border-div border-bottom-no kuaidi1">
                    <img src="" alt=""  style="margin-top: 5px"/>
                    <div></div>
                </div>
                <div style="display: flex">
                    <div style="width: 56mm">
                        <div class="here-you-are-div border-div border-bottom-no">
                            <div class="here-you-are-div-left">
                                <img src="/images/shou.png">
                            </div>
                            <div class="here-you-are-div-right">
                                <div style="display: flex;justify-content: space-between">
                                    <div style="font-size: 13px" class="add-cu">{{ $param['receiver']['name'] }}</div>
                                    <div class="add-cu" style="font-size: 13px">{{ $param['receiver']['mobile'] }}</div>
                                </div>
                                <div class="add-cu" style="font-size: 13px">{{ $param['receiver']['province'] . $param['receiver']['city']. $param['receiver']['county']. $param['receiver']['address'] }}</div>
                            </div>
                        </div>
                        <div class="give-me-div border-div border-bottom-no">
                            <div class="give-me-div-left">寄</div>
                            <div class="give-me-div-right">
                                <div style="display: flex">
                                    <div style="width: 20mm" class="add-cu">{{ $param['sender']['name'] }}</div>
                                    <div class="add-cu">{{ $param['sender']['mobile'] }}</div>
                                </div>
                                <div class="add-cu">{{ $param['sender']['province'] . $param['sender']['city']. $param['sender']['county']. $param['sender']['address'] }}</div>
                            </div>
                        </div>
                    </div>
                    <div style="width: 16mm;border: 0.5px solid #c5c2c1;border-bottom: 0">
                        <div class="add-cu payType" style="width: 100%;height: 8mm;border-bottom: 0.5px solid #c5c2c1;font-size: 14px;display: flex;align-items: center;justify-content: center;display: none;">到付</div>
                        {{--<div style="width: 100%;height: 12mm;border-bottom: 0.5px solid #c5c2c1;display: flex;align-items: center;flex-wrap: wrap;justify-content: center">
                            <div class="add-cu" style="font-size: 14px">代收贷款</div>
                            <div>￥1200</div>
                        </div>
                        <div style="width: 100%;height: 12mm;display: flex;align-items: center;flex-wrap: wrap;justify-content: center">
                            <div class="add-cu" style="font-size: 14px">签收返单</div>
                            <div>展件返回</div>
                        </div>--}}
                    </div>
                </div>
            </div>
            <div class="debang-dy-data-div dy-most-botton border-div" style="margin-bottom: 2mm;"></div>
        </div>
        <form class="layui-form">
            {{csrf_field()}}
            <div class="kdd-div-father">
                <div style="padding: 15px 0">填写本出库单的快递单：</div>
                <div style="display: flex;border-bottom: 0.5px solid black">
                    <div style="width: 50%">
                        <div style="font-size: 20px">手动</div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">快递公司：</label>
                            <input type="hidden" name="out_num[]" value="{{$out->out_num}}">
                            <div class="layui-input-inline li_input">
                                <select name="kuaidi[]" lay-verify="">
                                    @foreach($exp as $e)
                                        <option @if($e == $out->kuaidi) selected @endif value="{{$e}}">{{$e}}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item hand-db">
                            <label class="layui-form-label">手动填写快递单号：</label>
                            @if($out->expressDIY)
                                @foreach(explode(",",$out->expressDIY) as $e)
                            <div class="layui-input-inline expressNum">
                                <input type="text" name="expressDIY[]" value="{{$e}}"  class="layui-input" style="margin-right: 10px">
                                <i class="layui-icon" title="删除快递单" style="cursor: pointer;" onclick="delete_kdh(this.parentNode,'{{$out->id}}')">&#x1006;</i>
                            </div>
                                @endforeach
                            @endif
                            <div class="layui-input-inline expressNum">
                                <input type="text" name="expressDIY[]" value=""  class="layui-input" style="margin-right: 10px">
                                <i class="layui-icon" title="删除快递单" style="cursor: pointer;" onclick="delete_kdh(this.parentNode,'{{$out->id}}')">&#x1006;</i>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <a class="layui-btn" style="margin-left: 120px" onclick="add_input(this.parentNode.parentNode,'{{$out->id}}')">插入并保存</a>
                        </div>
                    </div>
                    <div style="width: 50%">
                        <div style="font-size: 20px">自动</div>
                        <div class="layui-form-item" style="display: flex">
                            <label class="layui-form-label">快递订单：</label>
                            <div class="layui-input-inline">
                                <input type="text" name="logisticID[]" value="{{$out->logisticID}}" @if($out->logisticID) readonly @endif  class="layui-input @if($out->logisticID) layui-bg-gray @endif ">
                            </div>
                            <div class="layui-form-mid layui-word-aux">德邦电子面单，订单号</div>
                            <div class="layui-input-inline">
                                <input type="checkbox" name="payType[]" title="到付" @if($out->payType) checked @elseif(!$out->logisticID && isset($out->express_type) && $out->express_type == '到付') checked @else @endif value="1" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">快递单号：</label>
                            @if($out->express)
                                @php $expressArr = explode(",",$out->express);$expressStatusArr = explode(",",$out->expressStatus); @endphp
                                @foreach ($expressArr as $key=>$e)
                                    <div class="layui-input-inline" style="margin-right: 70px">
                                        <div style="display: flex;align-items: center;margin-bottom: 10px;" data-value="{{$out->id}}">
                                            @if(isset($expressStatusArr[$key]) && $expressStatusArr[$key] == 1)
                                                <a class="layui-btn">到付</a>
                                            @elseif(isset($expressStatusArr[$key]) && $expressStatusArr[$key] != "" && $expressStatusArr[$key] != 1 )
                                                <a class="layui-btn">寄付</a>
                                            @endif
                                            <input type="text" name="express[]" value="{{ $e }}" onclick="two_dy(this.parentNode.parentNode,'{{ $out->id }}', '{{ $out->logisticID }}','{{ $e }}')" class="layui-input" style="margin-right: 10px;width: 150px">
                                            <i class="layui-icon" title="取消快递号" style="cursor: pointer;" onclick="delete_dbkd(this.parentNode)">&#x1006;</i>
                                        </div>
                                    </div>
                                @endforeach
                            @endif
                            <div class="layui-input-inline">
                                <div style="display: flex;align-items: center;margin-bottom: 10px" data-value="{{$out->id}}">
                                    <input type="text" name="express[]" value=""  class="layui-input" style="margin-right: 10px">
                                    <i class="layui-icon" title="取消快递号" style="cursor: pointer;" >&#x1006;</i>
                                </div>
                            </div>
                            <div class="layui-form-mid layui-word-aux">开单前作废可撤销快递单，开单后作废需要通知德邦作废单快递单号</div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-inline">
                                <a class="layui-btn" onclick="DBorder(this.parentNode.parentNode,'{{ $out->id }}', '{{ $out->logisticID }}');">  电子面单下单并打印</a>
                            </div>
                            {{--<div class="layui-input-inline">--}}
                                {{--<a class="layui-btn" onclick="two_dy(this.parentNode.parentNode,'{{ $out->id }}', '{{ $out->logisticID }}')">重新打印订单</a>--}}
                            {{--</div>--}}

                        </div>
                    </div>
                </div>
            </div>
            <div class="kdd-div-father">
                @foreach($other_out as $o)
                    @if($o['out_num'] != $out->out_num)
                <div style="padding: 15px 0">该出库单的上游销售订单，还有如下已出库的出库单，可以一并填写：</div>
                <div class="kdd-div">
                    <a href="/admin/outboundAdd?id={{$o['id']}}" style="padding: 15px 0;text-decoration:underline">{{$o['out_num']}}</a>
                    <input type="hidden" name="out_num[]" value="{{$o['out_num']}}">
                    <div class="layui-form-item">
                        <div style="display: flex;border-bottom: 0.5px solid black">
                            <div style="width: 45%">
                                <div class="layui-form-item">
                                    <div style="font-size: 20px">手动</div>
                                    <label class="layui-form-label">快递公司：</label>
                                    <div class="layui-input-inline li_input">
                                        <select name="kuaidi[]" lay-verify="">
                                            @foreach($exp as $e)
                                                <option @if($e == $o['kuaidi']) selected @endif value="{{$e}}">{{$e}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="layui-form-item hand-db">
                                    <label class="layui-form-label">手动填写快递单号：</label>
                                    @if($o['expressDIY'])
                                        @foreach(explode(",",$o['expressDIY']) as $e)
                                            <div class="layui-input-inline expressNum">
                                                <input type="text" name="expressDIY[]" value="{{$e}}"  class="layui-input"  style="margin-right: 10px">
                                                <i class="layui-icon" title="删除快递单" style="cursor: pointer;" onclick="delete_kdh(this.parentNode,'{{$o["id"]}}')">&#x1006;</i>
                                            </div>
                                        @endforeach
                                    @endif
                                    <div class="layui-input-inline expressNum">
                                        <input type="text" name="expressDIY[]" value=""  class="layui-input" style="margin-right: 10px">
                                        <i class="layui-icon" title="删除快递单" style="cursor: pointer;" onclick="delete_kdh(this.parentNode,'{{$o["id"]}}')">&#x1006;</i>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <a class="layui-btn" style="margin-left: 120px" onclick="add_input(this.parentNode.parentNode,'{{$o["id"]}}')">插入并保存</a>
                                </div>
                            </div>
                            <div style="width: 45%">
                                <div style="font-size: 20px">自动</div>
                                <div class="layui-form-item" style="display: flex">
                                    <label class="layui-form-label">快递订单：</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="logisticID[]" value="{{$o['logisticID']}}" @if($o['logisticID']) readonly @endif   class="layui-input @if($o['logisticID']) layui-bg-gray @endif ">
                                    </div>
                                    <div class="layui-form-mid layui-word-aux">德邦电子面单，订单号</div>
                                    <div class="layui-input-inline">
                                        <input type="checkbox" name="payType[]" title="到付" @if($o['payType']) checked @elseif(!$o['logisticID'] && isset($out->express_type) && $out->express_type == '到付') checked @else @endif class="layui-input">
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">快递单号：</label>
                                    @if($o["express"])
                                        @php $expressArr = explode(",",$o['express']);$expressStatusArr = explode(",",$o['expressStatus']); @endphp
                                        @foreach ($expressArr as $k=>$e)
                                            <div class="layui-input-inline" style="margin-right: 70px" >
                                                <div style="display: flex;align-items: center;margin-bottom: 10px" data-value="{{ $o["id"] }}">
                                                    @if(isset($expressStatusArr[$k]) && $expressStatusArr[$k] == 1)
                                                        <a class="layui-btn">到付</a>
                                                    @elseif(isset($expressStatusArr[$k]) && $expressStatusArr[$k] != "" && $expressStatusArr[$k] != 1 )
                                                        <a class="layui-btn">寄付</a>
                                                    @endif
                                                    <input type="text" name="express[]" onclick="two_dy(this.parentNode.parentNode,'{{ $o['id'] }}','{{ $o['logisticID'] }}','{{ $e }}')" value="{{ $e }}" class="layui-input" style="margin-right: 10px;width: 150px">
                                                    <i class="layui-icon" title="取消快递号" style="cursor: pointer;" onclick="delete_dbkd(this.parentNode)">&#x1006;</i>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                    <div class="layui-input-inline">
                                        <div style="display: flex;align-items: center;margin-bottom: 10px" data-value="{{ $o["id"] }}">
                                            <input type="text" name="express[]" value=""  class="layui-input" style="margin-right: 10px">
                                            <i class="layui-icon" title="取消快递号" style="cursor: pointer;" >&#x1006;</i>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <div class="layui-input-inline">
                                        <a class="layui-btn" onclick="DBorder(this.parentNode.parentNode,'{{ $o['id'] }}', '{{ $o['logisticID'] }}');">  电子面单下单并打印</a>
                                    </div>
                                    {{--<div class="layui-input-inline">--}}
                                        {{--<a class="layui-btn" onclick="two_dy(this.parentNode.parentNode,'{{ $o['id'] }}', '{{ $o['logisticID'] }}')">重新打印订单</a>--}}
                                    {{--</div>--}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                    @endif
                @endforeach
            </div>
            {{--<a class="layui-btn" lay-filter="addd" lay-submit="" ><i class="layui-icon">&#x1005;</i>  保存</a>--}}
        </form>
    </div>
    <script>
        var bordObj,bordid,bordlogistid;
        function two_dy(e,id ,logisticID,value) {
            bordObj = e;
            bordid = id;
            bordlogistid = logisticID;
            let url = ''
            url += '<div style="text-align: center" class="reprint">'
            url += '<div style="margin-top: 10px">是否要重新打印此快递单号</div>'
            url += `<div style="margin-top: 10px;display: flex;justify-content: center"><input type="text" class="layui-input two-dy-input" value="${value}" style="margin-right: 10px;width: 150px"></div>`
            url += '<div style="margin-top: 10px"><div class="layui-btn" onclick="two_dy_yes()">确定</div></div>'
            url += '</div>'
            layer.open({
                type: 1,
                shadeClose: true,
                title: '重新打印快递单'
                ,content: url,
                area: ['420px', '200px'], //宽高
            });
        }
        function two_dy_yes() {
            let mailNo =  $('.two-dy-input').val();
            layer.closeAll();
            DBorder(bordObj,bordid ,bordlogistid,mailNo);
        }
        function add_input(div_data,id) {
            let url = `<div class="layui-input-inline expressNum">
                            <input type="text" name="expressDIY[]" value=""  class="layui-input" style="margin-right: 10px">
                            <i class="layui-icon" title="删除快递单" style="cursor: pointer;" onclick="delete_kdh(this.parentNode,`+id+`)">&#x1006;</i>
                        </div>`
            var express = getExpress(div_data)
            var kuaidi = $(div_data).find("select[name='kuaidi[]']").val();
            var index = layer.load(0, {
                shade: [0.1,'#fff'] //0.1透明度的白色背景
            });
            $.post('/admin/expressDIY', {
                'id': id,
                '_token': $("input[name='_token']").val() ,
                'express': express ,
                'kuaidi': kuaidi ,
            }, function (res) {
                layer.close(index)
                //发异步，把数据提交给php
                if (res.status == 1) {
                    layer.alert(res.msg, {icon: 6},function () {
                        location.reload();
                    });
                    // $(div_data).find('.hand-db').append(url);
                } else {
                    layer.alert(res.msg, {icon: 5});
                }
            }, "json");
        }

        function delete_kdh (div_data,id){
            var mailNo = $(div_data).find("input[name='expressDIY[]']").val()
            layer.confirm('取消快递单号：'+mailNo, {
                btn: ['删除', '取消'] //可以无限个按钮
            }, function(index, layero){
                var obj = div_data.parentNode.parentNode;
                var kuaidi = $(obj).find("select[name='kuaidi[]']").val();
                $(div_data).remove()
                var express = getExpress(obj)
                $.post('/admin/expressDIY', {
                    'id': id,
                    '_token': $("input[name='_token']").val() ,
                    'express': express ,
                    'kuaidi': kuaidi ,
                }, function (res) {
                    layer.close(index)
                    //发异步，把数据提交给php
                    if (res.status == 1) {

                        layer.msg(res.msg, {icon: 6},function () {

                            location.reload();
                        });
                    } else {
                        layer.alert(res.msg, {icon: 5});
                    }
                }, "json");

            }, function(index){
                //按钮【按钮二】的回调
            });
        }

        function getExpress(div_data) {
            var expressDIYObj = $(div_data).find('.hand-db').find("input[name='expressDIY[]']");
            var express = "";
            expressDIYObj.each(function (i) {
                if(express == "") {
                    express = $(this).val() ? $.trim($(this).val()) : "";
                } else {
                    express += $(this).val() ? "," + $.trim($(this).val()) : "";
                }
            })
            return express;
        }
        function delete_dbkd (div_data){
            var mailNo = $(div_data).find("input[name='express[]']").val()
            layer.confirm('请确认需要取消并回收的快递单号：'+mailNo, {
                btn: ['删除', '取消'] //可以无限个按钮
            }, function(index, layero){
                var id = $(div_data).data("value");
                var index = layer.load(0, {
                    shade: [0.1,'#fff'] //0.1透明度的白色背景
                });
                $.post('/admin/DBorderDel', {
                    'id': id,
                    '_token': $("input[name='_token']").val() ,
                    'mailNo': mailNo ,
                }, function (res) {
                    //发异步，把数据提交给php
                    if (res.status == 1) {

                        layer.msg(res.msg, {icon: 6, time: 1000}, function () {
                            $(div_data).remove()
                            layer.close(index)
                        });
                    } else {
                        layer.alert(res.msg, {icon: 5});
                    }
                }, "json");
            }, function(index){
                //按钮【按钮二】的回调
            });
        }
        // $('.debang-dy-div').show()
        function debang_dy(){
            $('.debang-dy-div').show()
            document.getElementById("x-body").style.height="100mm";
            $('.day-anniu').remove()
            $('.layui-form').remove()
            setTimeout(()=>{
                window.print();
                location.reload()
            },0)
        }
        layui.use(['layer','form'], function() {
            $ = layui.jquery;//jquery
            form = layui.form;
            form.on('submit(addd)', function (data) {
                //发异步，把数据提交给php
                $.post('/admin/editExpress', data.field, function (res) {
                    //发异步，把数据提交给php
                    if (res.status == 1) {
                        layer.msg(res.msg, {icon: 6, time: 1000}, function () {
                            layer.closeAll();
                            location.reload();
                        });
                    } else {
                        layer.alert(res.msg, {icon: 5});
                    }
                }, "json");
            })
        })

        // 德邦电子面单
        function DBorder(e,id ,logisticID,mailNo = '') {
            if(!logisticID) {
                logisticID = $(e).parent().find("input[name='logisticID[]']").val();
            }
            var payType = $(e).parent().find("input[name='payType[]']").is(':checked'); // 是否到付
            $.post('/admin/DBorder', {
                'id': id,
                '_token': $("input[name='_token']").val() ,
                'logisticID': logisticID ,
                'payType': payType ,
                'mailNo': mailNo ,
            }, function (res) {
                // console.log(res);
                //发异步，把数据提交给php
                if (res.status == 1) {

                    $(".kuaidi1 img").attr("src",res.data.barcode1)
                    $(".kuaidi1 div").html(res.data.mailNo)
                    // $(".kuaidi2 img").attr("src",res.data.barcode2)
                    // $(".kuaidi2 div").html(res.data.mailNo)
                    if(res.data.payType === "1" && mailNo != '') {
                        $(".payType").show();
                    }
                    if(mailNo == '' && payType) {
                        $(".payType").show();
                    }
                    debang_dy()
                } else {
                    layer.alert(res.msg, {icon: 5});
                }
            }, "json");
        }
    </script>
    <style>
        .kdd-div{
            margin-bottom: 20px;
        }
        .kdd-div-father{
            margin-bottom: 30px;
        }
    </style>
@endsection