<!DOCTYPE html>
<html>
<style>
.buttonYellow {background-color: #F7B925;} /* Blue */
</style>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="{{ asset('bower_components/bootstrap/dist/css/bootstrap.min.css') }}">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="{{ asset('bower_components/font-awesome/css/font-awesome.min.css') }}">
  <!-- Ionicons -->
  <link rel="stylesheet" href="{{ asset('bower_components/Ionicons/css/ionicons.min.css') }}">
  <!-- Theme style -->
  <link rel="stylesheet" href="{{ asset('dist/css/AdminLTE.min.css') }}">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="{{ asset('dist/css/skins/_all-skins.min.css') }}">
  <!-- Morris chart -->
  <link rel="stylesheet" href="{{ asset('bower_components/morris.js/morris.css') }}">
  <!-- jvectormap -->
  <link rel="stylesheet" href="{{ asset('bower_components/jvectormap/jquery-jvectormap.css') }}">
  <!-- Date Picker -->
  <link rel="stylesheet" href="{{ asset('bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css') }}">
  <!-- Daterange picker -->
  <link rel="stylesheet" href="{{ asset('bower_components/bootstrap-daterangepicker/daterangepicker.css') }}">
  <!-- bootstrap wysihtml5 - text editor -->
  <link rel="stylesheet" href="{{ asset('plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css') }}">
  <!-- Select2 -->
  <link rel="stylesheet" href="{{ asset('bower_components/select2/dist/css/select2.min.css') }}">

  <link rel="stylesheet" href="{{ asset('plugins/iCheck/all.css') }}">

  <!-- Custom CSS -->
  <link rel="stylesheet" href="{{ asset('bower_components/custom/custom.css') }}">
  <link rel="stylesheet" href="{{ asset('bower_components/custom/spinner.css') }}">
  <link rel="stylesheet" href="{{ asset('bower_components/custom/excel-bootstrap-table-filter-style.css') }}">

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Google Font -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<section class="content"> @include('alert.alert_panel') <div class="col-lg-12" id="load-overlay" name="load-overlay" style="display:none;">
    <div id="loader"></div>
    <div id="overlay"></div>
  </div>
  <nav id="top-menu">
    <div class="row ">
      <div class="col-sm-4"></div>
      <div class="col-sm-4">
        <a href="http://bbbgroup.com.my/home/bbb-network/" class="btn btn-block btn-warning btn-lg">
          <span>Branch/Network Location</span>
          <i class="fa fa-fw fa-map-marker"></i>
        </a>
        <a href="http://wasap.my/60126358162" class="btn btn-block btn-success btn-lg" target="_blank">
          <span>WhatsApp Support</span>
          <i class="fa fa-fw fa-whatsapp"></i>
        </a>
      </div>
    </div>
    <div class="col-sm-4"></div>
    </div>
  </nav>
  <div class="row">
    <div class="col-md-12">
      <div class="box box-warning">
        <div class="box-header with-border col-md-offset-5">
          <h3 class="box-title">
            <img class="img-responsive" style="width:20;height:30px;" src="{{ asset('example/logo_side_22_10_7.png') }}" />
          </h3>
        </div>
        <!-- /.box-header -->
        <!-- form start -->
        <form class="form-horizontal">
          <div class="box-body">
            <div class="form-group">
              <div class="col-sm-10">

                <div class="col-md-6 col-md-offset-4">
               
                <!-- sms content -->

                <div class="col-md-12">
                        <div class="box box-widget">
                            <div class="box-header with-border">
                            <div class="user-block">
                                <img class="img-circle" src="{{ asset('example/sms_icon.png')}}" alt="User Image">
                                <span class="username">
                                <a href="#" id="consigneeName"></a>
                                </span>
                                <span class="description">You have <small class="label bg-yellow" id="totalCN"></small> parcels </span>
                            </div>
                            <div class="box-tools">
                            </div>
                            </div>
                            <div class="box-body">
                            <!-- <p>Hi you have parcel arrived to deliver station</p> -->
                            </div>
                            <div class='box-footer box-comments' id='cnResultDiv'>
                              <!-- <div class='box-comment'>
                                  <img class='img-circle img-sm' src='{{ asset('example/parcel_icon.png')}}'  alt='User Image'>
                                  <div class='comment-text'>
                                  <span class='username'>E20191000099-1-1-2<span class='text-muted pull-right'>1 pcs</span>
                                  </span> 
                                  <span> MATRIX TECH </span> 
                                  <span> 12A, 3, Jalan Puteri 2/3, Bandar Puteri Puchong, 47100 Puchong, Selangor </span> 
                                  </div>
                              </div>
                              <div class="box-comment">
                                  <img class="img-circle img-sm" src="{{ asset('example/parcel_icon.png')}}" alt="User Image">
                                  <div class="comment-text">
                                  <span class="username">E20191000099-1-1-2<span class="text-muted pull-right">1 pcs</span>
                                  </span> A1-12-1 vista Komanwell A 57000 bukit jalil KL
                                  </div>
                              </div> -->
                            </div>
                            <div class="box-footer">
                        
                            </div>
                        </div>
                </div>


                <!-- sms content end -->

                  <!-- <div class="g-recaptcha" data-sitekey={{env('NOCAPTCHA_SITEKEY')}}></div> -->
                </div>
              </div>
            </div>
          </div>
          <!-- /.box-body -->

</section>

   <!-- ./wrapper -->

<!-- jQuery 3 -->
<script src="{{ asset('bower_components/jquery/dist/jquery.min.js') }}"></script>
<!-- Ajax -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="{{ asset('bower_components/jquery-ui/jquery-ui.min.js') }}"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
  $.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.7 -->
<script src="{{ asset('bower_components/bootstrap/dist/js/bootstrap.min.js') }}"></script>
<!-- DataTables -->
<script src="{{ asset('bower_components/datatables.net/js/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js') }}"></script>
<!-- Select2 -->
<script src="{{ asset('bower_components/select2/dist/js/select2.full.min.js') }}"></script>
<!-- Morris.js charts -->
<script src="{{ asset('bower_components/raphael/raphael.min.js') }}"></script>
<script src="{{ asset('bower_components/morris.js/morris.min.js') }}"></script>
<!-- Sparkline -->
<script src="{{ asset('bower_components/jquery-sparkline/dist/jquery.sparkline.min.js') }}"></script>
<!-- jvectormap -->
<script src="{{ asset('plugins/jvectormap/jquery-jvectormap-1.2.2.min.js') }}"></script>
<script src="{{ asset('plugins/jvectormap/jquery-jvectormap-world-mill-en.js') }}"></script>
<!-- jQuery Knob Chart -->
<script src="{{ asset('bower_components/jquery-knob/dist/jquery.knob.min.js') }}"></script>
<!-- daterangepicker -->
<script src="{{ asset('bower_components/moment/min/moment.min.js') }}"></script>
<script src="{{ asset('bower_components/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
<!-- datepicker -->
<script src="{{ asset('bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js') }}"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="{{ asset('plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js') }}"></script>
<!-- Slimscroll -->
<script src="{{ asset('bower_components/jquery-slimscroll/jquery.slimscroll.min.js') }}"></script>
<!-- FastClick -->
<script src="{{ asset('bower_components/fastclick/lib/fastclick.js') }}"></script>
<script src="{{ asset('plugins/iCheck/icheck.min.js') }}"></script>
<script src="{{ asset('plugins/excel_filter/excel-bootstrap-table-filter-bundle.js') }}"></script>
<!-- AdminLTE App -->
<script src="{{ asset('dist/js/adminlte.min.js') }}"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes)
<script src="dist/js/pages/dashboard.js"></script>
<!-- AdminLTE for demo purposes -->
<!-- <script src="dist/js/demo.js"></script> -->
<!-- Google I am not robot -->
<script src='https://www.google.com/recaptcha/api.js'></script>
</body>
</html>

@include('common.ajax_sync_call')

<script> 
var RpcApiPath = "<?php echo env('RPC_API_PATH') ?>";
var bundleId = ""

$( document ).ready(function() {
    // //https://www.sitepoint.com/get-url-parameters-with-javascript/
    const queryString = window.location.search;
    var myParam = new URLSearchParams(queryString);
    bundleId = myParam.get('bundleId');
    searchbundleWaybill()
    
});

async function searchbundleWaybill()
{
  $("#load-overlay").show();  

  var searchParam   = {
                          page: {
                              "includePageSize": true
                          },
                          value: bundleId
                      }

 
try {
  result                      = await syncAjaxCall(searchParam,RpcApiPath+"/api/rpc/bbb.v4.WaybillService/GetByEncodedRefs","POST","");

} catch (error) {
  console.log(error)
  show_danger("Invalid SMS bundleId , please check for full sms again")
}
  var waybills                = result.results
  var cnResultDivHtmlContent  = ""

   waybills.forEach(function (waybill, index) {
    var cnSearchURL             = "{{url('/reports/waybill_report_search_anonymous?cn=')}}"+waybill.cnNo

    var thisWaybillHTML         =  "<div class='box-comment'>"+
                                        "<img class='img-circle img-sm' src='{{ asset('example/parcel_icon.png')}}'  alt='User Image'>"+
                                        "<div class='comment-text'>"+
                                        "<span class='username'><a href='"+cnSearchURL+"' class='product-title' target='_blank'>"+waybill.cnNo+"</a><span class='text-muted pull-right'>"+waybill.pc+" pcs</span>"+
                                        "</span>"+
                                        "<span id=des-"+waybill.cnNo+"></span>" +
                                        "</div>"+
                                    "</div>"

    $("#cnResultDiv").append(thisWaybillHTML);
    var shipmentDetails = "From : "+waybill.shipperName;
    $("#des-"+waybill.cnNo).html(shipmentDetails);
    $("#consigneeName").html("Hi! "+waybill.consigneeName);
    $("#totalCN").html(waybills.length);
    
  })

  $("#load-overlay").hide();  

}

    function show_warning($msg)
    {
                    $("#invalid-warning-message").html($msg);
                    $("#invalid-warning").show();
                    $("#invalid-warning").delay(3000).hide(0, function() {});
    }

    function show_danger($msg)
    {
                    $("#invalid-danger-message").html($msg);
                    $("#invalid-danger").show();
                    //$("#invalid-danger").delay(3000).hide(0, function() {});
    }

    function show_success($msg)
    {
                    $("#invalid-success-message").html($msg);
                    $("#invalid-success").show();
                    $("#invalid-danger").delay(3000).hide(0, function() {});
                    
    }
    function IOSDateToLocalDateString(date)
    {

        let local_date = moment.utc(date).local();
        return local_date.format('YYYY-MM-DD HH:mm:ss');
        
    }










</script>