@extends('Web/layout')
@section('title','Message')
@section('content')

<div class="list-group list-custom list-group-m rounded-xs" style="display:none;">
   <a href="#" class="list-group-item" data-bs-toggle="offcanvas" data-bs-target="#menu-transfer-ok" id="menutransferok">
      <i class="bi bi-check font-20 color-green-dark"></i>
      <div>Transfer Success</div>
      <i class="bi bi-chevron-right"></i>
   </a>
   <a href="#" class="list-group-item" data-bs-toggle="offcanvas" data-bs-target="#menu-transfer-pending">
      <i class="bi bi-question font-20 color-blue-dark"></i>
      <div>Transfer Pending</div>
      <i class="bi bi-chevron-right"></i>
   </a>
   <a href="#" class="list-group-item" data-bs-toggle="offcanvas" data-bs-target="#menu-transfer-failed">
      <i class="bi bi-x font-20 color-red-dark"></i>
      <div>Transfer Failed</div>
      <i class="bi bi-chevron-right"></i>
   </a>
</div>
<div id="menu-transfer-ok" style="width: 320px; display: block; visibility: hidden;" class="offcanvas offcanvas-modal offcanvas-detached rounded-m"  aria-hidden="true">
    <div class="content text-center">
        <i style="font-size:65px;" class="scale-box bi bi-check-circle-fill color-green-dark shadow-s rounded-circle p-0 mt-3 mb-3 d-inline-block"></i>
        <h1 class="pt-3 font-24" id="success_title">Success</h1>
        <p class="font-16" id="success_subtitle">
            {{$message}}
        </p>
        <a href="#" data-bs-toggle="offcanvas" class="btn btn-full gradient-green shadow-bg shadow-bg-xs" onclick="cancel()">Okay</a>
    </div>
</div>

<div id="menu-transfer-failed" style="width: 320px; display: block; visibility: hidden;" class="offcanvas offcanvas-modal offcanvas-detached rounded-m" aria-hidden="true">
   <div class="content text-center">
      <i style="font-size:65px;" class="scale-box bi bi-x-circle-fill color-red-dark shadow-s rounded-circle p-0 mt-3 mb-3 d-inline-block"></i>
      <h1 class="pt-3 font-28">Transfer Failed</h1>
      <p class="font-14 mb-0">
         There was an error processing your transfer. Please contact support for more details.
      </p>
      <a href="tel:+1 234 567 155" class="py-4 font-700 text-uppercase d-block">Tap to Call Support</a>
      <a href="#" data-bs-toggle="offcanvas" class="btn btn-full gradient-red shadow-bg shadow-bg-xs">Okay</a>
   </div>
</div>
<div id="menu-transfer-failed" style="width: 320px; display: block; visibility: hidden;" class="offcanvas offcanvas-modal offcanvas-detached rounded-m" aria-hidden="true">
   <div class="content text-center">
      <i style="font-size:65px;" class="scale-box bi bi-x-circle-fill color-red-dark shadow-s rounded-circle p-0 mt-3 mb-3 d-inline-block"></i>
      <h1 class="pt-3 font-28">Transfer Failed</h1>
      <p class="font-14 mb-0">
         There was an error processing your transfer. Please contact support for more details.
      </p>
      <a href="tel:+1 234 567 155" class="py-4 font-700 text-uppercase d-block">Tap to Call Support</a>
      <a href="#" data-bs-toggle="offcanvas" class="btn btn-full gradient-red shadow-bg shadow-bg-xs">Okay</a>
   </div>
</div>
<style>
   .offcanvas-backdrop.fade.show {
        pointer-events:none!important;
    }
    #footer-bar{
        display:none;
    }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
    history.pushState(null, null, location.href);
      window.onpopstate = function () {
         history.go(1);
      };
    if("{{$status}}" == 'success'){
        $("#menu-transfer-ok").css({"visibility": "visible", "opacity" : 1});
        $("#menu-transfer-ok").addClass("show");
    }
</script>
<script type="text/javascript"> 
        window.history.forward(); 
        function noBack() { 
            window.history.forward(); 
        } 
    </script> 
    <script type="text/javascript"> 
        function preventBack() { 
            window.history.forward();  
        } 
          
        setTimeout("preventBack()", 0); 
          
        window.onunload = function () { null }; 

        window.addEventListener('load', function() {
            window.history.pushState({}, '')
        })

        window.addEventListener('popstate', function() {
            window.history.pushState({}, '')
        })

    </script> 
@endsection