@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> --}}
            <div>
              @if (count($products))
                <h4 class="text-dark justify-content-center" style="font-weight:bold;text-align: center !important;">
                  {{ __('message.products') }}
                </h4>
              @endif
              @foreach ($products as $k => $val)
                                @if (isset($product))
                  {{-- <div class="product">
                                          <div class="container">
                                              <div class="row">
                                                  <div class="img-descrip">
                                                      <img src="{{ asset('/storage/'.$product->image_resize) }}" alt="">
                                                      <p>{{ isset($product->product_title) ? $product->product_title : '-' }}</p>
                                                  </div>

                                                  <div class="price-p">
                                                      <h2>ยอดสั่งซื้อ</h2>
                                                      <p>{{ isset($product->price) ? number_format($val->percentage_price,2) : '0.00' }} THB</p>
                                                      <br/>
                                                      <h2>กำไร</h2>
                                                      <p>{{ isset($product->commission->price) ? number_format($product->commission->price,2) : '0.00' }} THB</p>
                                                  </div>
                                              </div>
                                          </div>
                                      </div> --}}
                  <div class="row align-items-center"
                    style="background-color: White;margin-bottom: 5px;padding:10px;border-bottom: 1px solid #ccc;cursor: pointer;box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);"
                    onclick="submit_click('{{ $product->id }}')">
                    <div class="col-3">
                      <img src="{{ asset('/storage/' . $product->image_resize) }}" class="img-fluid"
                        alt="Product Image">
                    </div>

                    <div class="col-5">
                      <h6 class="my-0">{{ isset($product->product_title) ? $product->product_title : '-' }}</h6>
                      <div class="d-flex my-1">
                        @for ($i = 1; $i <= 5; $i++)
                          @if ($i <= $product->rating_star)
                            <span class="text-warning">&#9733;</span>
                          @else
                            <span class="text-muted">&#9733;</span>
                          @endif
                        @endfor

                      </div>
                    </div>

                    <div class="col-4">
                      <h6 class="my-0" style="font-weight:bold;">
                        <span style="font-size: 10px;color:#2575fc;">{{ __('message.price') }}:</span>
                        <br />{{ isset($product->price) ? number_format($product->price, 2) : '0.00' }} <span
                          style="font-size: 10px;">THB</span>
                      </h6>
                      {{-- <h6 class="my-0" style="font-weight:bold;">
                                            <span style="font-size: 10px;color:#2575fc;">{{__('message.commission')}}: </span> <br/>{{ isset($product->commission->price) ? number_format($product->commission->price,2) : '0.00' }} <span style="font-size: 10px;">THB</span>
                                          </h6> --}}
                    </div>
                  </div>
                @endif
              @endforeach
            </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'
                      }).then((result) => {
                        if (result.isConfirmed) {
                          // location.reload();
                          window.location.href = "{{ route('order') }}";
                        }
                      });
                    }

                  },
                  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(product_id) {
                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,
                      product_id: product_id,
                      create_order: 1
                    },
                    url: "{!! url('api/request-order') !!}",
                    success: function(response) {
                      orderId = response.message
                      var details = response.details;
                      $('#model-msg').show();
                      {{-- getOrderDetails();  --}}
                      // 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);
                    }
                  });
                }
              }

              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(product_id) {
                var packageId = '{{ $package->id ?? 0 }}';
                $('.product_id').prop("disabled", false);

                if (packageId != 0) {
                  var order_time = parseInt("{{ $order_time ?? 0 }}");
                  var order = parseInt('{{ $package->customerVip->order ?? 0 }}');
                  if (order_time < order) {
                    sendOrder(product_id);
                  } 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 style="width: 90%;margin-left: 5%;">
            {{-- if(count($products) && (($all_orders ?? 0) - ($order_time ?? 0))>0)
                               <select class="form-select edit-select2 product_id" aria-label="Default select example" id="" name="product_id" data-order-id="{{$pending_order->id??null}}" style="width:100%;">
                                    <option>
                                    </option>
                                    @foreach ($products as $vipPackage)
                                                                            @if (isset($pro->id))
                                        <option  value="{!! $pro->id!!}">
                                            {!! 'Code: '.$pro->product_code.'-'.'Price: '.number_format($pro->price,2).'฿'.'- Product: '.$pro->product_title.'- Commission: '.number_format($pro->commission->price??0,2).'฿' !!}
                                        </option>
                                        @endif
                                      @endforeach
                                </select>
                            else --}}
            <img src="{{ asset('assets/process.gif') }}" style="width:100%">
            {{-- @endif --}}

            <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(0deg, #000000 35%, #000000 100%);
        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(0deg, #000000 35%, #000000 100%);
        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 -->

    <link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>

    <script>
      $("select.edit-select2").select2();

      $('.product_id').on('change', function() {
        // var orderId = $(this).data('order-id');
        var product_id = $(this).val();
        // alert(orderId)
        if (product_id != '' && orderId != '') {
          $('.product_id').prop("disabled", true);
          $.ajax({
            type: "post",
            dataType: "json",
            data: {
              id: orderId,
              product_id: product_id
            },
            url: "{!! url('api/set-order-product') !!}",
            success: function(response) {
              // orderId = response.message
              $.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();
                }
              });

            },
            error: function(request, textStatus, errorThrown) {
              console.log(errorThrown);
            }
          });
        }
      });
    </script>
  </div>
@endsection
@section('meta')
  <title>{{ __('message.order') }}</title>
  <style>
    .vertical_tab {
      max-width: 1280px;
      height: auto;
      margin: 0 auto;
      padding-top: 10px;
      position: relative;
      z-index: 2;
    }

    .tablink {
      background-color: #f4f6fb;
      background-size: 100%;
      color: #000;
      float: left;
      cursor: pointer;
      padding: 5px 5px;
      width: 33.33%;
      font-size: 22px;
      font-family: DB-Heavent-Cond;
      font-weight: 500;
      text-align: center;
      border: 1px solid #fff;
    }

    .tablink i {
      display: block;
      margin-left: auto;
      margin-right: auto;
      font-size: 30px;
      color: #000;
    }

    .tablink img:hover {
      transition: 0.5s;
      transform: scale(1.1);
    }

    .tabcontent {
      color: white;
      height: 100%;
    }

    .tabcontent .container {
      width: 100%;
      display: grid;
      grid-template-columns: repeat(1, 1fr);
      box-sizing: border-box;
      gap: 0.5em;
    }

    .tabcontent .container .row {
      margin: 0;
    }

    .tabcontent .container .row img {
      width: 100%;
    }

    .product-title {
      text-align: center;
      color: #000;
      font-size: 20px;
      font-family: DB-Heavent-Cond;
    }

    /* -----------------------VerticalTab------------------ */
    .product {
      width: 100%;
      height: auto;
    }

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

    .product .container .row {
      background-color: #f4f6fb;
      border-radius: 10px;
      padding: 10px 10px;
    }

    .product .container .row .time {
      position: relative;
      font-family: DB-Heavent-Cond;
      font-size: 16px;
      height: 2px;
      color: #000;
      padding: 10px;
    }

    .product .container .row .img-descrip {
      display: flex;
      border-bottom: 1px solid #e3e7ef;
      padding: 10px 0;
      height: auto;
    }

    .product .container .row .img-descrip img {
      width: 60px;
      height: 60px;
      float: left;
      border-radius: 5px;
    }

    .product .container .row .img-descrip p {
      float: left;
      left: 100px;
      color: #000;
      font-family: DB-Heavent-Cond;
      font-weight: 500;
      font-size: 16px;
      padding: 0 10px;
      text-align: left;
      margin-top: 5px;
    }

    .product .container .row .price-p {
      display: flex;
      height: 30px;
    }

    .product .container .row .price-p h2 {
      color: #000;
      float: left;
      font-family: DB-Heavent-Cond;
      font-weight: 500;
      font-size: 18px;
      line-height: 30px;
    }

    .product .container .row .price-p p {
      color: #000;
      position: absolute;
      float: right;
      right: 20px;
      font-family: DB-Heavent-Cond;
      font-weight: 500;
      font-size: 20px;
      line-height: 20px;
    }

    .product .container .row .comission {
      display: flex;
      height: 45px;
    }

    .product .container .row .comission h2 {
      color: #000;
      float: left;
      font-family: DB-Heavent-Cond;
      font-weight: 500;
      font-size: 18px;
      line-height: 30px;
    }

    .product .container .row .comission p {
      position: absolute;
      float: right;
      right: 20px;
      font-family: DB-Heavent-Cond;
      font-weight: 500;
      font-size: 20px;
      line-height: 20px;
      color: #00b3a2;
    }

    .product .container .row button {
      width: 60%;
      color: #fff;
      background: linear-gradient(135deg, #3fe, #209bff);
      padding: 8px;
      border: none;
      font-size: 18px;
      font-family: DB-Heavent-Cond;
      border-radius: 50px;
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

    /* ------------------List---------------- */
    .deposit_widraw {
      width: 100%;
      height: auto;
    }

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

    .deposit_widraw .container .row {
      border-radius: 15px;
      margin-top: 10px;
      background-color: #f4f6fb;
      padding: 10px;
    }

    .deposit_widraw .container .row table {
      width: 100%;
      border-radius: 10px;
    }

    .deposit_widraw .container .row td {
      max-width: 1280px;
      text-align: left;
      color: #000;
      font-size: 18px;
      font-family: DB-Heavent-Cond;
      padding: 0px 5px;
      text-decoration: none;
    }

    .deposit_widraw .container .row ion-icon {
      color: #000;
      font-size: 20px;
      position: relative;
      top: 5px;
    }

    .balace_com {
      width: 100%;
      height: auto;
      margin-top: 10px;
    }

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

    .balace_com .container .row {
      position: relative;
      cursor: pointer;
      border-radius: 10px;
      background: linear-gradient(135deg, #3fe, #209bff);
      padding: 20px 10px;
      display: inline-flex;
    }

    .balace_com .container .row h2 {
      color: #fff;
      font-size: 18px;
      font-family: DB-Heavent-Cond;
      font-weight: 500;
      text-align: left;
    }

    .balace_com .container .row p {
      position: absolute;
      color: #fff;
      font-size: 18px;
      font-family: DB-Heavent-Cond;
      text-align: right;
      right: 10px;
    }

    .balace_com .container .row ion-icon {
      color: #fff;
      font-size: 25px;
      font-family: DB-Heavent-Cond;
      position: relative;
      top: 7px;
    }

    .title-t {
      width: 100%;
      height: auto;
      background: #0d4da3;
    }

    .title-t p {
      color: #fff;
      font-size: 20px;
      font-family: DB-Heavent-Cond;
      text-align: center;
      padding: 10px;
    }

    @media screen and (max-width:991px) {
      .tablink {
        font-size: 18px;
        font-family: DB-Heavent-Cond;
        padding: 10px 0;
      }
    }
  </style>
@endsection