@extends('layouts.front-end.body')

@section('content')
    <div class="wrapper" style="margin-bottom:90px;">

        <!-- Content Wrapper. Contains page content -->
        <div class="content-wrapper" style="min-height: 923px;">
            <div class="curve"></div>
            <div class="toast" id="alert_toast" role="alert" aria-live="assertive" aria-atomic="true">
                <div class="toast-body text-white">
                </div>
            </div>
            <div id="toastsContainerTopRight" class="toasts-top-right fixed"></div>
            <!-- Content Header (Page header)-->
            <div class="content-header">
                <div class="container-fluid">
                    <div class="row mb-2">
                        <div class="col-sm-6">
                            <!--<h1 class="m-0">Order</h1>-->
                        </div>

                    </div>
                    <!--<hr class="border-primary">-->
                </div>
            </div>
            <!-- /.content-header -->

            <section class="content">
                <div class="container-fluid">
                    <style>
                        * {
                            margin: 0;
                            padding: 0;
                        }

                        #txt-detail-information {
                            font-size: 20px;
                            font-family: 'Noto Sans Thai', segoeui, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
                            ;
                        }

                        #submit-order:hover {
                            cursor: pointer;
                        }

                        .order-btn {
                            width: 100%;
                            height: auto;
                            margin-top: 30px;
                        }

                        .order-btn .container {
                            max-width: 1280px;
                            height: auto;
                            margin: 0 auto;
                        }

                        .order-btn .container a {
                            text-decoration: none;
                            color: #fff;
                        }

                        .order-btn .container button {
                            display: block;
                            margin-left: auto;
                            margin-right: auto;
                            width: 80%;
                            font-size: 20px;
                            font-family: 'Noto Sans Thai', segoeui, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
                            ;
                            color: #fff;
                            border: none;
                            border-radius: 50px;
                            padding: 8px;

                        }

                        .statistics {
                            width: 100%;
                            height: auto;
                            margin-top: 20px;
                            /*background-color: #fff;
                          box-shadow:  0px -5px 8px #ecebeb;*/
                        }

                        .statistics .container {
                            max-width: 1280px;
                            height: auto;
                            margin: 0 auto;
                            display: grid;
                            grid-template-columns: repeat(2, 1fr);
                            box-sizing: border-box;
                            gap: 0.5em;
                            padding: 10px;
                        }

                        .statistics .container .row {
                            cursor: pointer;
                            padding: 15px 0;
                            border-radius: 10px;
                            background-color: #fff;
                            box-shadow: 3px 5px 8px #dbdbdb;
                            margin: 0;
                            flex-direction: column;
                        }

                        .statistics .container .row b {
                            color: #000;
                            font-size: 18px;
                            font-weight: 500;
                            font-family: 'Noto Sans Thai', segoeui, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
                            ;
                            text-align: center;
                        }

                        .statistics .container .row p {
                            color: #126bff;
                            font-size: 18px;
                            font-weight: 500;
                            font-family: 'Noto Sans Thai', segoeui, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
                            ;
                            text-align: center;
                        }

                        .agent {
                            width: 100%;
                            height: auto;
                        }

                        .agent .container {
                            max-width: 1280px;
                            height: auto;
                            margin: 0 auto;
                            display: grid;
                            grid-template-columns: repeat(6, 1fr);
                            box-sizing: border-box;
                            padding: 10px;
                            gap: 0.8em;
                        }

                        .agent .container .row {
                            cursor: pointer;
                        }

                        .agent .container .row img {
                            width: 100%;
                            box-shadow: 2px 5px 8px #dbdbdb;
                            border-radius: 5px;
                        }

                        .msg_01 {
                            width: 100%;
                            height: auto;
                            margin-top: 20px;
                        }

                        .msg_01 .container {
                            max-width: 1280px;
                            height: auto;
                            margin: 0 auto;
                            padding: 0 10px;
                        }

                        .msg_01 .container p {
                            text-align: left;
                            color: #fff;
                            font-size: 14px;
                            font-family: 'Noto Sans Thai', segoeui, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
                            ;
                            background: linear-gradient(240deg, rgba(72, 0, 154, 0.99), rgb(97, 0, 160));
                            padding: 10px;
                            border-radius: 10px;
                            box-shadow: 3px 5px 8px #dbdbdb;
                            margin-bottom: 1px;
                        }

                        .msg_02 {
                            width: 100%;
                            height: auto;
                        }

                        .msg_02 .container {
                            max-width: 1280px;
                            height: auto;
                            margin: 0 auto;
                            padding: 10px;
                        }

                        .msg_02 .container p {
                            text-align: left;
                            color: #fff;
                            font-size: 14px;
                            font-family: 'Noto Sans Thai', segoeui, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
                            ;
                            background: linear-gradient(240deg, rgb(12, 36, 66), rgb(79, 116, 146));
                            padding: 10px;
                            border-radius: 10px;
                            margin-bottom: 1px;
                        }

                        .msg_03 {
                            width: 100%;
                            height: auto;
                        }

                        .msg_03 .container {
                            max-width: 1280px;
                            height: auto;
                            margin: 0 auto;
                            padding: 0 10px;
                        }

                        .msg_03 .container p {
                            text-align: left;
                            color: #fff;
                            font-size: 14px;
                            font-family: 'Noto Sans Thai', segoeui, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
                            ;
                            background: linear-gradient(240deg, rgba(17, 18, 20, 0.99), rgb(95, 97, 101));
                            padding: 10px;
                            border-radius: 10px;
                            margin-bottom: 1px;
                        }

                        @media screen and (max-width:991px) {
                            .agent .container {
                                max-width: 1280px;
                                height: auto;
                                margin: 0 auto;
                                display: grid;
                                grid-template-columns: repeat(3, 1fr);
                                box-sizing: border-box;
                                padding: 10px;
                                gap: 0.8em;
                            }
                        }
                    </style>
                    <div class="col-md-12">
                        <!-- <div id="carouselExampleIndicators" class="carousel slide " data-ride="carousel" style="border-radius: 15px;overflow: hidden;">
                                     
                                     <div class="carousel-inner"  style="border-radius: 15px;overflow: hidden;height:auto;max-height:63vh">
                                        
                                                                          
                                                      <div class="carousel-item active branch_item" data-target="59" style="height:100%;border-radius: 15px;">
                                                        <img class="d-block w-100" src="../assets/uploads/product_1695116880_14916349714555.jpg" alt=""  style="height:100%;border-radius: 15px;">
                                                      </div>
                                                  
                                                                                            <div class="carousel-item branch_item" data-target="61"  style="height:100%;border-radius: 15px;">
                                                        <img class="d-block w-100" src="../assets/uploads/product_1695117120_picture-lazada4.jpg"  alt="" style="height:100%;border-radius: 15px;">
                                                      </div>
                              
                                                                                        <div class="carousel-item branch_item" data-target="65"  style="height:100%;border-radius: 15px;">
                                                        <img class="d-block w-100" src="../assets/uploads/product_1695117180_ShopBack-Cover-header.jpg"  alt="" style="height:100%;border-radius: 15px;">
                                                      </div>
                              
                                                                                        <div class="carousel-item branch_item" data-target="67"  style="height:100%;border-radius: 15px;">
                                                        <img class="d-block w-100" src="../assets/uploads/product_1695119220_196580633_382662993179126_4885308206818914722_n.jpg"  alt="" style="height:100%;border-radius: 15px;">
                                                      </div>
                              
                                                                                        <div class="carousel-item branch_item" data-target="68"  style="height:100%;border-radius: 15px;">
                                                        <img class="d-block w-100" src="../assets/uploads/product_1695119400_6tPlg8WvX7aqCat9sEU7yGVlbFdTngY8E4a.png"  alt="" style="height:100%;border-radius: 15px;">
                                                      </div>
                              
                                                                
                                      </div>
                                      
                                      
                      </div>-->

                        <div class="card bg-custom-grad round-15 p-3 text-white">
                            <h4 class="text-white">
                                {{$package->customer_vip->title??''}}
                            </h4>
                            <b>
                                @if($package->customer_vip->order??0)
                                    {{$package->customer_vip->order??0}} {{__('message.order')}}
                                @endif
                            </b>
                            <div class="d-flex mt-3">
                                <div class="col-4">
                                    <div class="d-flex flex-column justify-content-center align-items-center">
                                        <h4 class="text-center">
                                            {{ $order_time ?? null }}
                                        </h4>
                                        <span>
                                            {{ __('message.finish') }}
                                        </span>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="d-flex flex-column justify-content-center align-items-center">
                                        <h4 class="text-center">
                                            {{ $all_orders ?? 0 }}
                                        </h4>
                                        <span>
                                            {{ __('message.all') }}
                                        </span>
                                    </div>
                                </div>
                                <div class="col-4">
                                    <div class="d-flex flex-column justify-content-center align-items-center">
                                        <h4 class="text-center">
                                            {{ ($all_orders ?? 0) - ($order_time ?? 0) }}
                                        </h4>
                                        <span>
                                            {{ __('message.not finished yet') }}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-12 mt-2">
                        <div class="row">

                            <div class="col-md-12 w-100 d-flex" style="gap:15px">
                                <a class="shadow bg-grad2 p-2" id="withdraw" href="{{ route('new.withdraw') }}"
                                    style="width:33.33%;border-radius:15px">
                                    <div class="row flex-column justify-content-center align-content-center">
                                        <img src="{{ asset('front-end/assets/withdraw.png') }}"
                                            style="width:45px;height:45px">
                                        <span class="menu-text pt-1 text-center" style="color:#fff">
                                            {{ __('message.withdraw money') }}
                                        </span>
                                    </div>
                                </a>
                                <a class="shadow bg-grad2 p-2" id="transaction" href="{{ route('transaction') }}"
                                    style="width:33.33%;border-radius:15px">
                                    <div class="row flex-column justify-content-center align-content-center">
                                        <img src="{{ asset('front-end/assets/transaction.png') }}"
                                            style="width:45px;height:45px">
                                        <span class="menu-text pt-1 text-center" style="color:#fff">
                                            {{ __('message.transaction') }}
                                        </span>
                                    </div>

                                </a>
                                <a class="shadow bg-grad2 p-2" id="my" href="{{ route('dashboard') }}"
                                    style="width:33.33%;border-radius:15px">
                                    <div class="row flex-column justify-content-center align-content-center">
                                        <i class="fas fa-user-cog text-white" style="font-size:35px"></i>
                                        <span class="menu-text pt-1 text-center" style="color:#fff">
                                            {{ __('message.edit') }}
                                        </span>
                                    </div>
                                </a>
                            </div>


                        </div>
                    </div>
                    <div class="col-md-12 p-0">
                        <div class="statistics">
                            <div class="p-2">
                                <div class="d-flex">
                                    <div class="col-md-6  border-top pt-2">
                                        <b>
                                            {{ __('message.order time') }}
                                        </b>
                                        <p>
                                            {{ $order_time ?? 0 }}
                                            <!-- ชิ้น -->
                                        </p>
                                    </div>


                                    <div class="col-md-6  border-top pt-2">
                                        <b>
                                            {{ __('message.current store') }}
                                        </b>
                                        <p>
                                            {{ $package_vip ?? null }}
                                        </p>
                                    </div>
                                </div>
                                <div class="d-flex">
                                    <div class="col-md-6 border-top border-bottom  pt-2">
                                        <b>
                                            {{ __('message.earn commission') }}
                                        </b>
                                        <p>
                                            {{ isset($commission) ? $commission : '' }}
                                        </p>
                                    </div>
                                    <div class="col-md-6 border-top border-bottom  pt-2">
                                        <b>
                                            {{ __('message.amount of money that can be used') }}
                                        </b>
                                        <p>
                                           <b> {{ isset($credit_balance) ? $credit_balance : '0' }}</b>
                                        </p>
                                    </div>
                                </div>

                            </div>
                        </div>

                        <div class="order-btn">
                            <div class="container">
                                <button onclick="submit_click()" id="submit-order" class="bg-grad2">
                                    {{ __('message.random') }}
                                </button>
                            </div>
                        </div>
                        <script type="text/javascript">
                            

                            // function start(counter) {
                            //     if (counter < products.length && counter < 35) {
                            //         setTimeout(function() {
                            //             $('.order-img').attr('src', '/storage/' + products[counter].image_resize);
                            //             counter++;
                            //             start(counter);
                            //         }, 100);
                            //     } else {
                            //         $('.order-img').attr('src', "{!! asset('/storage') . '/' . ($vip->product->image_resize ?? '#') !!}");
                            //         $('#confirm-btn').html("<span>{{ __('message.add to cart') }}</span>");
                            //         // $('#confirm-btn').removeAttr('disabled')
                            //         $('.product-price').css('display', 'block');
                            //     }
                            // }

                            var click_order_count = 0;
                            // $(document).ready(function() {
                            //     let specail = "{!! $specail??0 !!}";
                            //     if (specail == '1') {
                            //         sendOrder();
                            //     }
                            //     let order = "{!! $order??0 !!}";
                            //     if (order == 0) {
                            //         // $('#submit-order').attr("disabled", 'disabled');
                            //         $('#submit-order').text('รออนุมัติคำสั่ง');
                            //         $('#model-detail').removeAttr('style');
                            //     }
                            //     let disable = "{!! $disable??0 !!}";
                            //     if (disable == '1') {
                            //         $('#submit-order').attr("disabled", 'disabled');
                            //         $('#txt-detail-information').text(
                            //             'คุณมาถึงการจำกัดการสั่งซื้อสินค้า! ขอบคุณสำหรับการสั่งซื้อสินค้าของเรา เราจะต่ออายุแพ็คเกจปัจจุบันของคุณหรือให้แพ็คเกจอื่นแก่คุณ ขอขอบคุณ'
                            //         );
                            //         $('#model-detail').removeAttr('style');
                            //     }
                            // });

                            function convertFormate(nStr) {
                                nStr += '';
                                x = nStr.split('.');
                                x1 = x[0];
                                x2 = x.length > 1 ? '.' + x[1] : '';
                                var rgx = /(\d+)(\d{3})/;
                                while (rgx.test(x1)) {
                                    x1 = x1.replace(rgx, '$1' + ',' + '$2');
                                }
                                return x1 + x2;
                            }

                            function checkNumber(x) {
                                // check if the passed value is a number
                                if (typeof x == 'number' && !isNaN(x)) {
                                    // check if it is integer
                                    if (Number.isInteger(x)) {
                                        return false;
                                    } else {
                                        return true;
                                    }
                                } else {
                                    return false;
                                }
                            }
                            var orderId;
                            var details='';
                            function confirmOrder(){
                                $.ajax({
                                    type: "post",
                                    dataType: "json",
                                    data: {
                                        orderId: orderId,
                                    },
                                    url: "{!! url('api/confirm-order') !!}",
                                    success: function(response) {
                                        if( response.code==0){
                                            Swal.fire({
                                              title: '{{__("message.error")}}!',
                                              text: response.message,
                                              icon: 'error',
                                              confirmButtonText: 'Ok'
                                            })
                                        }
                                        else{
                                            orderId= null;
                                            $('#model-msg').hide(); 
                                            $('.show-product-content').css('display','none');
                                            $('.waiting-content').css('display','block');
                                            Swal.fire({
                                              title: '{{__("message.success")}}!',
                                              text: "{{ Session::get('success') }}",
                                              icon: 'success',
                                              confirmButtonText: 'Ok'
                                            })
                                        }                                       
                                    },
                                    error: function(request, textStatus, errorThrown) {
                                        console.log(errorThrown);
                                        
                                    }
                                }); 
                            }
                            function getOrderDetails(){
                                if(orderId!=''){
                                    setTimeout(function() {
                                        $.ajax({
                                            type: "get",
                                            dataType: "json",
                                            data: {
                                                order: orderId,
                                            },
                                            url: "{!! url('api/get-order-details') !!}/"+orderId,
                                            success: function(response) {
                                                details = response.message
                                                if(response.message==''){
                                                    getOrderDetails();
                                                }
                                                else{
                                                    // show order product
                                                    $('.product-price').html(details.price+' ฿');
                                                    $('.product-commission').html(details.commission_price+' ฿');
                                                    $('.order-img').attr('src','/storage/'+details.image_resize);
                                                    $('.product-name').html(details.product_title);
                                                    // $('#model-msg').show(); 
                                                    $('.show-product-content').css('display','block');
                                                    $('.waiting-content').css('display','none');
                                                } 
                                            },
                                            error: function(request, textStatus, errorThrown) {
                                                // console.log(errorThrown);
                                                getOrderDetails();
                                            }
                                        });                                        
                                        
                                    }, 8000);
                                }
                            }

                            var sendOrder = function() {
                                var customerVipId = "{{$package->customerVip->id??0}}";
                                // alert(customerVipId)
                                if(customerVipId>0){
                                    $.ajax({
                                        type: "post",
                                        dataType: "json",
                                        data: {
                                            customer_id: "{{$customer_id}}",
                                            user_id: "{{$user_id}}",
                                            customer_vip_id: customerVipId,
                                        },
                                        url: "{!! url('api/request-order') !!}",
                                        success: function(response) {
                                            orderId = response.message
                                            $('#model-msg').show(); 
                                            getOrderDetails();
                                                                           
                                        },
                                        error: function(request, textStatus, errorThrown) {
                                            console.log(errorThrown);
                                        }
                                    });
                                }
                            }
                            
                            function cancelOrder(){
                                var packageId = '{{$package->id??0}}';
                                if(packageId!=0){ 
                                    $.ajax({
                                        type: "post",
                                        dataType: "json",
                                        data: {
                                            orderId: orderId,
                                        },
                                        url: "{!! url('api/cancel-order') !!}",
                                        success: function(response) {
                                            $('#model-msg').hide();
                                            // let user_credit = response.message;
                                            // $('#user_credit').val(user_credit);
                                     
                                        },
                                        error: function(request, textStatus, errorThrown) {
                                            console.log(errorThrown);
                                        }
                                    });
                                }
                                else{
                                    $('#model-msg').hide();
                                    // $('#msg').text('{{__("message.Your do not have vip yet, please contact support to get VIP")}}');
                                    // $('#model-msg').removeAttr('style');
                                    // $('#model-msg').show();
                                }
                                return true;
                            }

                            function submit_click() {
                                var packageId = '{{$package->id??0}}';
                                // alert(packageId)
                                if(packageId!=0){
                                    var order_time= parseInt("{{$order_time??0}}");
                                    var order = parseInt('{{$package->customerVip->order??0}}');
                                    // alert(order_time+":"+order)
                                    if(order_time<order){
                                        sendOrder();
                                    }
                                    else{
                                        $('#msg1').text('{{__("message.order reach the limited for this VIP")}}');
                                        $('#model-msg').removeAttr('style');
                                        $('#model-msg').show();
                                    }
                                }
                                else{
                                    $('#msg1').text('');
                                    $('#model-msg').removeAttr('style');
                                    $('#model-msg').show();
                                }
                                return false;
                            }
                        </script>
                    </div>
                    <!--/. container-fluid -->
                </div>
            </section>
            <!-- /.content -->
            <!-- My Modal -->
            <div id="model-msg" class="modal"   style="@if(!isset($pending_order->id)) display:none; @endif" data-keyboard="false" data-backdrop="static">
                    
                    <form class="modal-content animate show-product-content" style="@if(!isset($pending_order->product_id)) display:none; @endif">
                        <!-- <input type="hidden" name="product_id" id="product_id" value="{!! isset($vip->product_id) ? $vip->product_id : 0 !!}" />
                        <input type="hidden" name="customer_vip_id" id="customer_vip_id"
                            value="{!! isset($vip->customer_vip_id) ? $vip->customer_vip_id : 0 !!}" />
                        <input type="hidden" id="user_credit" value="" /> -->

                        <div class="imgcontainer-msg" style="margin-top:20px;float: left;width:100%;padding-right:50px" >
                            <h3 style="font-size:1.2em;" id="msg" class="product-name" style="width: 100%;">
                                {{ __('message.wait for automatic product randomization') }}
                            </h3>
                            <span onclick="this.disabled=true;document.getElementById('model-msg').style.display='none'"
                                class="close" title="Close Message" style="color:red;">×</span>
                        </div>
                        <div class="container-msg middle-msg">
                            <div class="row">
                                <!-- if(isset($vip->product)) -->
                                <!-- <img src="#" alt="" style="max-width: 50%;" class="order-img"> -->
                                <!-- else -->
                                <img src="/storage/image_resize/Lrvwv3QNIk.png" alt="" style="max-width: 50%;margin:0 auto;margin-top:10px;"
                                    class="order-img">
                                <!-- endif -->
                            </div>
                            <div style="margin-top:10px;">
                                <p style="float: left;">{{ __('message.date') }}</p>
                                <p style="float: right;font-weight: bold;" id="order_date">
                                    {{date("d/m/Y")}}
                                </p>
                            </div>
                            <div style="clear: both;"></div>
                            <div>
                                <p style="float: left;">{{ __('message.price') }}</p>
                                <p style="float: right;font-weight: bold;" id="product_price" class="product-price">
                                        0 ฿</p>
                            </div>
                            <div style="clear: both;"></div>
                            <div class="">
                                <p style="float: left;" class="">{{__('message.commission')}}</p>
                                <p style="float: right;font-weight: bold;" class="product-commission">
                                    0
                                    ฿
                                </p>
                            </div>
                        </div>

                        <div class="container-msg btn" style="width:100%;">
                            <!-- <button type="button"
                                onclick="this.disabled=true;document.getElementById('model-msg').style.display='none'"
                                id="confirm-btn"><span>{{ __('message.add to cart') }}</span></button> -->
                                <button type="button"
                                id="confirm-btn" onclick="confirmOrder();"><span>{{ __('message.buy order') }}</span></button>
                        </div>


                       <!--  <input type="hidden" value="{!! isset($percent) ? $percent : 0 !!}" id="percent" />
                        <input type="hidden" value="{!! isset($commission_price) ? $commission_price : 0 !!}" id="commission_price" />
                        <input type="hidden" value="{!! isset($vip_package_id) ? $vip_package_id : 0 !!}" id="vip_package_id" /> -->
                    </form>

                    <div class="modal-content animate waiting-content">
                        <div class="imgcontainer-msg" style="margin-top:20px;float: left;">
                            <h3 id="msg1">{{ __('message.wait for automatic product randomization') }}</h3>
                            <span onclick="this.disabled=true;document.getElementById('model-msg').style.display='none'"
                                class="close" title="Close Message" style="color:red">×</span>

                        </div>
                        <img src="{{ asset('assets/process.gif') }}" style="width:100%">
                        <div class="container-msg btn" style="width: 100%;">
                            <button type="button"
                                onclick="cancelOrder();"><span>{{ __('message.cancel') }}</span></button>
                        </div>
                    </div>

            </div>
            <!-- End My Modal -->
            <!-- Start My Modal 2 -->
            <div id="model-detail" class="modal" style="display:none;" data-keyboard="false" data-backdrop="static">

                <form class="modal-content animate">
                    <input type="hidden" value="0" id="is_error" />
                    <input type="hidden" value="0" id="amount" />
                    <input type="hidden" value="0" id="customer_vip_ids" />
                    <input type="hidden" value="0" id="product_ids" />
                    <!--  <div class="imgcontainer-detail">
                          <span onclick="document.getElementById('model-detail').style.display='none'" class="close" title="Close Message">&times;</span>
                          
                        </div>
                     -->
                    <div class="container-detail middle-detail">
                        <!-- <h3>ข้อความระบบ</h3> -->
                        <p id="txt-detail-information">ระบบกำลังทำรายการตรวจสอบ กรุณารอสักครู่ !</p>
                        <div class="row stars" style="display:none">
                            <span class="fa fa-star checked"></span>
                            <span class="fa fa-star not-checked"></span>
                            <span class="fa fa-star not-checked"></span>
                            <span class="fa fa-star not-checked"></span>
                            <span class="fa fa-star not-checked"></span>
                        </div>
                    </div>
                    <div class="container-detail btn">
                        <button type="button" id="button-detail" class="button-detail"
                            onclick="document.getElementById('model-detail').style.display='none'"><span
                                id="txt-content">{{ __('message.press confirm') }}</span></button>
                    </div>
                </form>
            </div>
            <!-- End My Modal 2 -->
            <!-- <div class="modal fade" id="confirm_modal" role="dialog">
                    <div class="modal-dialog modal-md" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">confirm</font>
                                    </font>
                                </h5>
                            </div>
                            <div class="modal-body">
                                <div id="delete_content"></div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default bg-grad2 text-white" id="confirm" onclick="">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">continue</font>
                                    </font>
                                </button>
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">turn off</font>
                                    </font>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade show" id="uni_modal" style="display: none;" aria-hidden="true">
                    <div class="modal-dialog modal-md small" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title"></h5>
                            </div>
                            <div class="modal-body">
                                <style>
                                    .modal-content {
                                        background-color: transparent;
                                        box-shadow: none;
                                        border: 0;
                                    }

                                    .custom-shadow {
                                        -webkit-box-shadow: 0px 0px 53px 3px rgba(99, 0, 99, 0.82);
                                        -moz-box-shadow: 0px 0px 53px 3px rgba(99, 0, 99, 0.82);
                                        box-shadow: 0px 0px 53px 3px rgba(99, 0, 99, 0.82);
                                    }
                                </style>
                                <div class="container p-5">
                                    <div class="p-2 custom-shadow"
                                        style="margin:auto; background-color:#251343d9;border-radius:15px">
                                        <form class="animate">
                                            <input type="hidden" name="product_id" id="product_id" value="0">
                          <input type="hidden" name="customer_vip_id" id="customer_vip_id" value="0">
                          <input type="hidden" id="user_credit" value="5000">
                          <div class="imgcontainer-msg">
                            <span onclick="$('.modal').modal('hide')" class="close" title="Close Message">×</span>
                            
                          </div>
                      
                          <div class="container-msg middle-msg">
                              <h3>ส่งค่าสั่งซื้อ</h3>
                                        <p>คุณยังไม่ได้กำหนด vip โปรดติดต่อผู้ดูแลระบบ</p>
                          </div>
                      
                          <div class="container-msg">
                              <button class="btn btn-ok btn-lg p-2" type="button" data-dismiss="modal" id="confirm-btn"><span>ตกลง</span></button>
                          </div>
                          <input type="hidden" value="0" id="percent">
                          <input type="hidden" value="0" id="commission_price">
                                            <img src="/assets/process.gif" style="margin:auto">
                                            <h6 class="text-white text-center">
                                                <font style="vertical-align: inherit;">
                                                    <font style="vertical-align: inherit;">
                                                        Orders are being matched. </font>
                                                </font>
                                            </h6>
                                        </form>
                                        <div class="col-md-12 text-center">
                                            <button class="btn btn-default bg-grad2 text-white btn-cancel">
                                                <font style="vertical-align: inherit;">
                                                    <font style="vertical-align: inherit;">cancel</font>
                                                </font>
                                            </button>
                                        </div>
                                    </div>

                                </div>
                                <style>
                                    .modal-footer {
                                        display: none;
                                    }

                                    .btn-ok {
                                        background: linear-gradient(135deg, #a700ff 0%, #00189a 100%);
                                        color: white;

                                        border: none;
                                        cursor: pointer;
                                        width: 80%;
                                        border-radius: 10px;
                                        display: block;
                                        margin-left: auto;
                                        margin-right: auto;
                                    }

                                    .modal-header {
                                        display: none;
                                    }
                                </style>
                                <script>
                                    $(".btn-cancel").click(function() {

                                        $.ajax({
                                            url: 'ajax.php?action=reject_pair',
                                            method: 'post',
                                            data: {
                                                id: localStorage.getItem("order_id")
                                            },
                                            success: function(res) {
                                                if (res == 1) {
                                                    localStorage.removeItem("order_id");
                                                    $(".modal").modal("hide")
                                                }
                                            }
                                        })

                                    })
                                </script>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary" id="submit"
                                    onclick="$('#uni_modal form').submit()">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">record</font>
                                    </font>
                                </button>
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                                    <font style="vertical-align: inherit;">
                                        <font style="vertical-align: inherit;">cancel</font>
                                    </font>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="uni_modal_right" role="dialog">
                    <div class="modal-dialog modal-full-height  modal-md" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title"></h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span class="fa fa-arrow-right"></span>
                                </button>
                            </div>
                            <div class="modal-body">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal fade" id="viewer_modal" role="dialog">
                    <div class="modal-dialog modal-md" role="document">
                        <div class="modal-content">
                            <button type="button" class="btn-close" data-dismiss="modal"><span
                                    class="fa fa-times"></span></button>
                            <img src="" alt="" style="height:100%">
                        </div>
                    </div>
                </div> -->
        </div>
        <!-- /.content-wrapper -->
    </div>

   <!--  <script>
        // Get the modal
        var modal = document.getElementById('model-msg');

        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script> -->
    @if($pending_order)
        <script type="text/javascript">
            orderId = "{{$pending_order->id}}";
        </script>     
        @if($pending_order->product_id)
            <script type="text/javascript">
                details = {!!$pending_order->product!!}
                details.commission_price = {{$pending_order->product->commission->price??0}};
                $('.product-price').html(details.price+' ฿');
                $('.product-commission').html(details.commission_price+' ฿');
                $('.order-img').attr('src','/storage/'+details.image_resize);
                $('.product-name').html(details.product_title);
                // $('#model-msg').show(); 
                $('.show-product-content').css('display','block');
                $('.waiting-content').css('display','none');
                // $('#model-msg').show(); 
            </script>   
        @else
            <script type="text/javascript">
                $('#model-msg').show(); 
                getOrderDetails();
            </script>
        @endif
    @endif


    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }


        /* Set a style for all buttons */
        button {
            background: linear-gradient(135deg, #3fe, #209bff);
            color: white;
            padding: 12px 75px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 80%;
            border-radius: 10px;
            display: block;
            margin-left: auto;
            margin-right: auto;
            font-size: 20px;
            font-family: DB-Heavent-Cond;
        }


        button:hover {
            opacity: 0.8;
        }

        /* Extra styles for the cancel button */
        .cancelbtn {
            width: auto;
            padding: 10px 18px;
            background-color: #0000b3;
        }

        /* Center the image and position the close button */
        .imgcontainer-msg {
            border-radius: 10px;
            text-align: center;
            margin: 0px 0 18px 0;
            position: relative;
            margin-bottom: 0px !important;
            /*  background: linear-gradient(135deg, #146cac 0%, #012037 100%);*/
        }

        .container-msg {
            padding: 10px;
        }

        .container-msg p {
            text-align: center;
            font-size: 14px;
            color: rgb(100, 100, 100);
        }

        .container-msg h2 {
            text-align: center;
            font-size: 25px;
            color: rgb(56, 56, 56);
        }

        span.psw {
            float: right;
            padding-top: 16px;
        }

        /* The Modal (background) */
        .modal {
            display: block;
            /* Hidden by default */
            position: fixed;
            /* Stay in place */
            z-index: 1;
            /* Sit on top */
            left: 0;
            top: 0;
            width: 100%;
            /* Full width */
            height: 100%;
            /* Full height */
            overflow: auto;
            /* Enable scroll if needed */
            background-color: rgb(0, 0, 0);
            /* Fallback color */
            background-color: rgba(0, 0, 0, 0.4);
            /* Black w/ opacity */
            padding-top: 60px;
        }

        /* Modal Content/Box */
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto 15% auto;
            /* 5% from the top, 15% from the bottom and centered */
            border: 1px solid #888;
            width: 25%;
            /* Could be more or less, depending on screen size */
            border-radius: 10px;
        }

        /* The Close Button (x) */
        .close {
            position: absolute;
            right: 25px;
            top: 0;
            color: #000;
            font-size: 35px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: red;
            cursor: pointer;
        }

        .middle-msg {
            padding: 10px 15px !important;
            padding-top: 0px !important;
            text-align: center;
        }

        .middle-msg h3 {
            text-align: center;
            font-size: 22px;
            font-family: DB-Heavent-Cond;
            font-weight: 500;
        }

        .middle-msg p {
            font-size: 17px !important;
            font-family: DB-Heavent-Cond;
        }

        /* Add Zoom Animation */
        .animate {
            -webkit-animation: animatezoom 0.6s;
            animation: animatezoom 0.6s
        }

        @-webkit-keyframes animatezoom {
            from {
                -webkit-transform: scale(0)
            }

            to {
                -webkit-transform: scale(1)
            }
        }

        @keyframes animatezoom {
            from {
                transform: scale(0)
            }

            to {
                transform: scale(1)
            }
        }

        /* Change styles for span and cancel button on extra small screens */
        @media screen and (max-width: 991px) {
            span.psw {
                display: block;
                float: none;
            }

            .cancelbtn {
                width: 100%;
            }

            .modal-content {
                background-color: #fefefe;
                margin: 5% auto 15% auto;
                /* 5% from the top, 15% from the bottom and centered */
                border: 1px solid #888;
                width: 75%;
                /* Could be more or less, depending on screen size */
                border-radius: 10px;
            }

            button {
                padding: 10px 0% !important;
            }
        }
    </style>



    <!-- Modal 2 -->
    <style>
        body {
            font-family: Arial, Helvetica, sans-serif;
        }


        /* Set a style for all buttons */
        .button-detail {
            background: linear-gradient(135deg, #3fe, #209bff);
            color: white;
            padding: 12px 10px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 80%;
            border-radius: 50px;
            display: block;
            margin-left: auto;
            margin-right: auto;
        }

        .button-detail:hover {
            opacity: 0.8;
        }

        /* Extra styles for the cancel button */
        .cancelbtn {
            width: auto;
            padding: 10px 18px;
            background-color: #0000b3;
        }

        /* Center the image and position the close button */
        .imgcontainer-detail {
            border-radius: 10px;
            text-align: center;
            margin: 0px 0 18px 0;
            position: relative;
            margin-bottom: 0px !important;
            background: linear-gradient(135deg, #146cac 0%, #012037 100%);
        }

        img.avatar {
            background-color: #fff;
            width: 45%;
            border-radius: 50%;
            vertical-align: middle;
        }

        .container-detail {
            padding: 10px;
        }

        .container-detail p {
            text-align: center;
            font-size: 20px;
            color: rgb(100, 100, 100);
            font-family: DB-Heavent-Cond;
        }

        .container-detail h2 {
            text-align: center;
            font-size: 25px;
            color: rgb(56, 56, 56);
        }

        span.psw {
            float: right;
            padding-top: 16px;
        }

        /* The Modal (background) */
        .modal {
            display: block;
            /* Hidden by default */
            position: fixed;
            /* Stay in place */
            z-index: 1;
            /* Sit on top */
            left: 0;
            top: 0;
            width: 100%;
            /* Full width */
            height: 100%;
            /* Full height */
            overflow: auto;
            /* Enable scroll if needed */
            background-color: rgb(0, 0, 0);
            /* Fallback color */
            background-color: rgba(0, 0, 0, 0.4);
            /* Black w/ opacity */
            padding-top: 60px;
        }

        /* Modal Content/Box */
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto 15% auto;
            /* 5% from the top, 15% from the bottom and centered */
            border: 1px solid #888;
            width: 25%;
            /* Could be more or less, depending on screen size */
            border-radius: 10px;
        }

        /* The Close Button (x) */
        .close {
            position: absolute;
            right: 25px;
            top: 0;
            color: #000;
            font-size: 35px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: red;
            cursor: pointer;
        }

        .middle-detail {
            padding: 10px 15px !important;
            padding-top: 35px !important;
            text-align: center;
            font-family: DB-Heavent-Cond;
        }

        /* Add Zoom Animation */
        .animate {
            -webkit-animation: animatezoom 0.6s;
            animation: animatezoom 0.6s
        }

        @-webkit-keyframes animatezoom {
            from {
                -webkit-transform: scale(0)
            }

            to {
                -webkit-transform: scale(1)
            }
        }

        @keyframes animatezoom {
            from {
                transform: scale(0)
            }

            to {
                transform: scale(1)
            }
        }

        /* Change styles for span and cancel button on extra small screens */
        @media screen and (max-width: 991px) {
            span.psw {
                display: block;
                float: none;
            }

            .cancelbtn {
                width: 100%;
            }

            img.avatar {
                width: 20%;
                border-radius: 50%;
            }

            .modal-content {
                background-color: #fefefe;
                margin: 5% auto 15% auto;
                /* 5% from the top, 15% from the bottom and centered */
                border: 1px solid #888;
                width: 75%;
                /* Could be more or less, depending on screen size */
                border-radius: 10px;
            }

            button {
                padding: 10px 0% !important;
            }
        }

        .checked {
            color: orange;
        }
    </style>
    <!-- End Modal 2 -->
@endsection
@section('meta')
    <title>{{ __('message.order') }}</title>
@endsection