<?php include_once "template/common.php" ?>


<style type="text/css">

div#qr-reader {
      border: none !important;
}

div#qr-reader__scan_region img {
  width: 150px;
}

#qr-reader__dashboard_section_csr button {
    padding: 10px 20px;
    color: #000;
    background-color: #c0de5d;
    margin: 20px 0 0;
    border-radius: 8px;
    transition: 0.5s;
    border: none;
    margin-bottom: 10px;
}

@media (max-width: 1000px) {  
   .qrcode-config {
      width: 100%;
      margin-top: 20px !important;
   }
   .mobile-wraper {
      border-radius: 10px !important;
      text-align: center;
      padding: 10px;
      margin-top: 10px !important;
   }
   .mobile-wraper h6 {
      margin-top: 6px !important;
   }
}
</style>

<div class="body-content position-rel">
    <div class="section-thumb d-none d-sm-block">
        <!-- <img class="img-qr object-point-none" src="<?php echo base_url();?>files/assets/images/shape/qr-bg.png" alt="thumb" style="object-fit: contain; height: auto;"> -->
    </div>
    <div class="section-thumb d-sm-none">
        <!-- <img class="img-qr" src="<?php echo base_url();?>files/assets/images/shape/qr-bg-mobile.png" alt="thumb" style="object-fit: contain; height: auto;"> -->
    </div>
    <div class="qr-area header-title-mt">
        <div class="row justify-content-center align-items-center gy-4">
            <div class="col-sm-8 col-md-5 col-xl-4 mt-0">
                <div class="qr-wrapper text-center">
                    <div class="d-none destop-thumb d-lg-block mb-4 mb-lg-0">
                        <img src="<?php echo admin_url() . "uploads/prepaidQR/" . $guest_detail["filePath"]; ?>" alt="thumb" style="border: solid 8px #fff; border-radius: 10px;">
                    </div>
                    <div class="d-lg-none mb-62 mb-lg-0">
                        <img class="img-qr" src="<?php echo admin_url() . "uploads/prepaidQR/" . $guest_detail["filePath"]; ?>" alt="thumb" style="border: solid 8px #fff; border-radius: 10px;">
                    </div>
                </div>
            </div>
            <div class="col-sm-8 col-md-7 col-xl-5 mt-0">
                <div class="qr-wrapper d-none d-md-block">
                    <div class="qr-wrapper">
                        <div class="mb-40 p-4 rounded bg-white">
                            <h5 class="font-semibold mb-3">ID Guest : <?php echo $guest_row['id']; ?></h5>
                            <table class="table border-0 w-100 table--responsive--md">
                                <thead>
                                    <tr>
                                       <th>Package</th>
                                       <th>From</th>
                                       <th>To</th>
                                       <th>Status</th>
                                    </tr>
                                </thead>
                                <tbody>

                                  <?php
                                          if(count($prepackage_list) > 0){
                                             foreach($prepackage_list as $key => $val){
                                       ?>
                                       <tr>
                                          <td><?php echo $val['package']?></td>
                                          <td><?php echo(date("Y-m-d", strtotime($val["from_date"]))); ?></td>
                                          <td><?php echo(date("Y-m-d", strtotime($val["to_date"]))); ?></td>
                                          <td style="width:248px">
                                            <?php 
                                             if(date('Y-m-d', strtotime($val["from_date"])) <= date("Y-m-d") && date('Y-m-d', strtotime($val["to_date"])) >= date("Y-m-d"))
                                             {     
                                                ?>

                                                <div class="badge badge--three text-white" >
                                                       Active
                                                </div>
                                                     
                                             <?php
                                                }else{
                                             ?>

                                               <div class=" badge badge--three text-white" style="background: #c0de5d; border: #c0de5d;">
                                                  Inactive
                                               </div>
                                                
                                             <?php
                                                }
                                             ?>
                                          </td>
                                          </tr>
                                       <?php
                                          }
                                       }
                                       ?>


                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="qr-wrapper">
                    <div class="d-md-none">
                        <div class="mobile-wraper">
                            <h6 class="table-title">Guest ID : <?php echo $guest_row['id']; ?></h6>

                           <?php
                              if(count($prepackage_list) > 0){
                                 foreach($prepackage_list as $key => $val){
                           ?>
                            <div class="content d-flex justify-content-between align-items-center">
                                <h6 class="title"><?php echo $val['package']?></h6>

                                  <?php 
                                             if(date('Y-m-d', strtotime($val["from_date"])) <= date("Y-m-d") && date('Y-m-d', strtotime($val["to_date"])) >= date("Y-m-d"))
                                             {     
                                                ?>
                                                <div  style="color: #55ac47;border: 1px solid #55ac47;" class="badge">Active</div>
                                                 <?php
                                                }else{
                                             ?>
                                             <div class="badge">Inactive</div>
                                              <?php
                                                }
                                             ?>

                                
                            </div>

                              <?php
                                          }
                                       }
                                       ?>


                        </div>
                    </div>
                    <a href="javascript:;" class="btn--lg cmn--btn w-100 btn-effect" onclick="openQRModal()">Scan</a>
                    <!-- <a href="<?=base_url('myqrscan')?>" class="btn--lg cmn--btn w-100">Scan</a> -->
                </div>
            </div>
        </div>
    </div>
</div>


<div class="modal fade viewModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Details</h5>
         </div>
         <div class="modal-body">
            <p class="mb-2">Order ID: <span class="text-primary" id="order_id"></span></p>
            <p class="mb-4">Shipping Method: <span class="text-primary" id="shipping_method"></span></p>
            <div class="table-responsive">
               <table class="table table-centered table-nowrap">
                  <thead>
                     <tr>
                        <th scope="col">Merchandise</th>
                        <th scope="col">Title</th>
                        <th scope="col">Size</th>
                        <th scope="col">Price</th>
                     </tr>
                  </thead>
                  <tbody id="detail_tbody"></tbody>
               </table>
            </div>
         </div>
         <div class="modal-footer">

            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>

<div class="modal fade qrviewModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Details</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
            </button>
         </div>
         <div class="modal-body">
            <img src="" id="qrImg" style="width: 100%;">
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>


<div class="modal fade openQRModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
         <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Scan QR</h5>
         </div>
         <div class="modal-body">
            <div id="msg"></div>
            <div class="row">
               <div id="qr-reader" class="col-md-12"></div>
               <div id="qr-reader-results"></div>
            </div>
         </div>
         <div class="modal-footer">
            <button type="button" class="btn btn-secondary" style="width: 60px; height: 40px; background: #c0de5d; border-color: #c0de5d;" data-bs-dismiss="modal">Close</button>
         </div>
      </div>
   </div>
</div>


<script src="<?php echo base_url();?>files/assets/js/lib/jquery-3.6.0.min.js"></script>

<script src="<?php echo base_url(); ?>assets/js/html5-qrcode.min.js"></script>

<script type="text/javascript">

         function go_purchase() {
            document.location.href = '<?php echo base_url(); ?>purchase';
         }

         function view_detail_func(order_id, isDelivery) {
            $("#order_id").html(order_id);
            if (isDelivery == 0)
               $("#shipping_method").html("Pick Up");
            else
               $("#shipping_method").html("Delivery");

            $.ajax({
                  method: "POST",
                  url: "<?php echo base_url(); ?>AccountController/get_order_info",
                  data: {
                     order_id: order_id
                  }
               })
               .done(function(data) {
                  var json_obj = JSON.parse(data);

                  var shtml = '';
                  var sum = 0;

                  if (json_obj.length > 0) {
                     for (var i = 0; i < json_obj.length; i++) {
                        shtml += '<tr>';
                        shtml += '    <th scope="row">';
                        shtml += '        <div>';
                        shtml += '            <img src="http://d38x82mkkml5o1.cloudfront.net/' + json_obj[i].comp_photo_url + '" alt="" class="avatar-sm">';
                        shtml += '        </div>';
                        shtml += '    </th>';
                        shtml += '    <td>';
                        shtml += '        <div>';
                        shtml += '            <h5 class="text-truncate font-size-14">' + json_obj[i].title + '</h5>';
                        shtml += '            <p class="text-muted mb-0">' + json_obj[i].symbol + ' ';
                        if (json_obj[i].discount != 0) {
                           var discount_price = json_obj[i].price * json_obj[i].discount / 100;
                           shtml += json_obj[i].price - discount_price;
                        } else {
                           shtml += json_obj[i].price;
                        }
                        shtml += ' x ' + json_obj[i].quantity + '</p>';
                        shtml += '        </div>';
                        shtml += '    </td>';
                        shtml += '    <td></td>';
                        shtml += '    <td>' + json_obj[i].symbol + ' ';
                        if (json_obj[i].discount != 0) {
                           shtml += parseFloat((json_obj[i].price - discount_price) * json_obj[i].quantity).toFixed(2);
                        } else {
                           shtml += parseFloat((json_obj[i].price) * json_obj[i].quantity).toFixed(2);
                        }
                        shtml += '   </td>';
                        shtml += '</tr>';
                        if (json_obj[i].discount != 0) {
                           sum += (json_obj[i].price - discount_price) * json_obj[i].quantity;
                        } else {
                           sum += (json_obj[i].price) * json_obj[i].quantity;
                        }
                     }

                     if (isDelivery == 1) {
                        shtml += '<tr>';
                        shtml += '    <td colspan="3">';
                        shtml += '        <h6 class="m-0 text-right">Sub Total:</h6>';
                        shtml += '    </td>';
                        shtml += '    <td>';
                        shtml += json_obj[0].symbol + ' ' + parseFloat(sum).toFixed(2);
                        shtml += '    </td>';
                        shtml += '</tr>';
                        shtml += '<tr>';
                        shtml += '    <td colspan="3">';
                        shtml += '        <h6 class="m-0 text-right">Shipping:</h6>';
                        shtml += '    </td>';
                        shtml += '    <td>';
                        shtml += json_obj[0].symbol + ' 10.00';
                        shtml += '    </td>';
                        shtml += '</tr>';
                        shtml += '<tr>';
                        shtml += '    <td colspan="3">';
                        shtml += '        <h6 class="m-0 text-right">Total:</h6>';
                        shtml += '    </td>';
                        shtml += '    <td>';
                        shtml += json_obj[0].symbol + ' ' + parseFloat(sum + 10.00).toFixed(2);
                        shtml += '    </td>';
                        shtml += '</tr>';
                     } else {
                        shtml += '    <td colspan="3">';
                        shtml += '        <h6 class="m-0 text-right">Total:</h6>';
                        shtml += '    </td>';
                        shtml += '    <td>';
                        shtml += json_obj[0].symbol + ' ' + parseFloat(sum).toFixed(2);
                        shtml += '    </td>';
                        shtml += '</tr>';
                     }
                  } else {
                     shtml += '<tr>';
                     shtml += '<td class="text-center" colspan="4">No Data</th>';
                     shtml += '</tr>';
                  }

                  $("#detail_tbody").html(shtml);
               });
            $(".viewModal").modal('show');
         }

         function package_refund_func(txnID) {
            Swal.fire({
               title: "Are you sure?",
               type: "warning",
               showCancelButton: !0,
               confirmButtonColor: "#34c38f",
               cancelButtonColor: "#f46a6a",
               confirmButtonText: "Confirm"
            }).then(function(t) {
               if (t.value == true) {
                  $.ajax({
                        method: "POST",
                        url: "<?php echo base_url(); ?>AccountController/package_refund",
                        data: {
                           txn_id: txnID
                        }
                     })
                     .done(function(data) {

                        var shtml = '';

                        if (data == 'success') {
                           shtml += '<div class="alert alert-success fade in alert-dismissible show">';
                           shtml += '  <button type="button" class="close" data-dismiss="alert" aria-label="Close">';
                           shtml += '      <span aria-hidden="true" style="font-size:20px">×</span>';
                           shtml += '  </button>';
                           shtml += '  Your refund request was received successfully!';
                           shtml += '</div>';

                           $("#package_refund_msg").html(shtml);

                           setTimeout("location.reload();", 1500);
                        }
                     });
               }
            })
         }

         function order_refund_func(ID) {
            Swal.fire({
               title: "Are you sure?",
               type: "warning",
               showCancelButton: !0,
               confirmButtonColor: "#34c38f",
               cancelButtonColor: "#f46a6a",
               confirmButtonText: "Confirm"
            }).then(function(t) {
               if (t.value == true) {
                  $.ajax({
                        method: "POST",
                        url: "<?php echo base_url(); ?>AccountController/order_refund",
                        data: {
                           id: ID
                        }
                     })
                     .done(function(data) {

                        var shtml = '';

                        if (data == 'success') {
                           shtml += '<div class="alert alert-success fade in alert-dismissible show">';
                           shtml += '  <button type="button" class="close" data-dismiss="alert" aria-label="Close">';
                           shtml += '      <span aria-hidden="true" style="font-size:20px">×</span>';
                           shtml += '  </button>';
                           shtml += '  Your refund request was received successfully!';
                           shtml += '</div>';

                           $("#order_refund_msg").html(shtml);

                           setTimeout("location.reload();", 1500);
                        }
                     });
               }
            })
         }

         function show_qr_func(url) {
            $("#qrImg").attr('src', url);
            $(".qrviewModal").modal('show');
         }

         function openQRModal() {

            SiteDataStore('QR', 'Scan');

            $(".openQRModal").modal('show');
         }

         function docReady(fn) {
         
            if (document.readyState === "complete" ||
               document.readyState === "interactive") {
           
               setTimeout(fn, 1);
            } else {
               document.addEventListener("DOMContentLoaded", fn);
            }
         }

         docReady(function() {
            var resultContainer = document.getElementById('qr-reader-results');
            var lastResult, countResults = 0;

            function isUrl(s) {
               var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/
               return regexp.test(s);
            }

            function onScanSuccess(decodedText, decodedResult) {
               if (isUrl(decodedText)) {
                  var arr = decodedText.split('/');
                  if (arr[8] == 'kiosk_image') {
                     $.ajax({
                           method: "POST",
                           url: "https://makeabl.net/api/collect_kiosk_image_v2",
                           // url: "http://127.0.0.1:8000/api/collect_kiosk_image_v2",
                           data: {
                              image_url: decodedText,
                              qr_token: '<?php echo $guest_detail['qr_token']; ?>'
                           }
                        })
                        .done(function(res) {
                           if (res.result == "success") {
                              $('#msg').html("Success");
                              setTimeout(function() {
                                 $(".openQRModal").modal('hide');
                                
                              }, 3000);
                           } else {
                              $('#msg').html("Failed please try again.");
                              setTimeout(function() {
                                 window.location.reload();
                              }, 5000);
                           }
                        });
                  } else {
                    
                     $.ajax({
                           method: "POST",
                           url: "<?php echo base_url(); ?>AccountController/add_image_qr",
                           data: {
                              token: decodedText
                           }
                        })
                        .done(function(res) {
                            window.location = 'sgallery';
                            
                        
                        });
                  }
               } else {
                  ++countResults;
                  lastResult = decodedText;
                  $.ajax({
                        method: "POST",
                        url: "<?php echo base_url(); ?>AccountController/buy_prepackage_qr",
                        data: {
                           token: lastResult
                        }
                     })
                     .done(function(res) {
                        var json_objs1 = JSON.parse(res);
                        if (json_objs1.code == "200") {
                           window.location = 'sgallery';
                        } else {
                           $('.msg').html(json_objs1.msg);
                        }
                        $('#msg').html(json_objs1.msg);
                     });
               }
            }

            var html5QrcodeScanner = new Html5QrcodeScanner(
               "qr-reader", {
                  fps: 10,
                  qrbox: 250
               });
            html5QrcodeScanner.render(onScanSuccess);
         });

         function qrdetail(url) {
            $(".qrviewModals").css("display", "block");
            $("#qrImgs").attr('src', url);
            $(".qrviewModals").modal('show');
         }

         function closeqr() {
            $(".qrviewModals").css("display", "none");

         }


         function SiteDataStore(type, desc) 
        {
            $.ajax({
                    url : '<?=base_url()?>SiteDataStoreController/SiteDataStore',
                    type : 'POST',
                    data : {
                        id: '',
                        type : type,
                        desc : desc,
                    },
                    success : function(msg){
                      
                    }
                });

        }
</script>