<html lang="en">
<script>
  var InitializationFinished = false;
  var PerformanceLog = {};
  PerformanceLog.Start = performance.now();
  PerformanceLog.Logs = [['Start'], PerformanceLog.Start];
  PerformanceLog.Log = function (message) {
    PerformanceLog.Logs.push([message, performance.now()]);
  };
  PerformanceLog.DisplayLogs = function () {
    const arr = PerformanceLog.Logs;
    for (let i = 0; i < arr.length; i++) {
      console.log(arr[i][0], arr[i][1]);
    }
  };
</script>

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Mobile Specific Metas -->
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, viewport-fit=cover">
  <title>Bukid Bounty Market</title>
  <!-- Favicon and Touch Icons  -->
  <link rel="shortcut icon" href="/images/logo.png">
  <link rel="apple-touch-icon-precomposed" href="/images/logo.png">

  <!--   <link rel="stylesheet" href="/dist/alt-theme/fonts.css">
  <link rel="stylesheet" href="/dist/alt-theme/icons-alipay.css"> -->
  <link rel="stylesheet" href="/dist/alt-theme/bootstrap.css">
  <!--   <link rel="stylesheet" type="text/css" href="/dist/alt-theme/styles.css"> -->
  <link rel="stylesheet" media="print" onload="this.media='all'" href="/dist/css/select2.min.css">
  <link rel="stylesheet"
    href="/plugins/googlefonts/fonts.googleapis.com_css_familySourceSansPro300400400i700&displayfallback.css">
  <link rel="stylesheet" href="/plugins/fontawesome-free/css/all.min.css">

  <link rel="stylesheet" href="/dist/css/adminlte.min.css">
  <link rel="stylesheet" media="print" onload="this.media='all'" href="/dist/css/dropzone.min.css">
  <link rel="stylesheet" media="print" onload="this.media='all'" href="/dist/css/jquery.dataTables.min.css">

  <link rel="stylesheet" type="text/css" href="/dist/alt-theme/styles.css">
  <link rel="stylesheet" href="/dist/alt-theme/icons-alipay.css">
  <link rel="stylesheet" href="/dist/alt-theme/fonts.css">
  <link rel="stylesheet" media="print" onload="this.media='all'" href="/dist/css/splide.min.css">



  <link rel="manifest" href="/manifest.json" data-pwa-version="set_in_manifest_and_pwa_js">
  <link rel="apple-touch-icon" sizes="192x192" href="app/icons/icon-192x192.png">


  <script src="/plugins/jquery/jquery.min.js"></script>

  <script src="/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
  <link rel="stylesheet" href="/dist/css/toastr.min.css" type="text/css">
  <script src="/dist/js/toastr.min.js"></script>
  <script src="/dist/js/adminlte.min.js"></script>
  <!-- <script src="/dist/js/bower.json"></script> -->
  <script defer src="/dist/js/qrcode.min.js"></script>
  <script src="/synclib.js"></script>
  <script src="/lib.js"></script>
  <script src="/EXT/libEXT/marketlib.js"></script>
  <script defer src="/dist/js/print.min.js"></script>
  <script defer src="/dist/js/FileSaver.min.js"></script>


  <script defer src="/dist/js/select2.min.js"></script>
  <script src="/dist/js/splide.min.js"></script>





  <script src="/dist/js/dropzone.min.js"></script>



  <script defer src="/dist/js/jquery.dataTables.min.js"></script>
  <script defer src="/dist/js/moment.min.js"></script>



  <style>
    .card .dark-mode {
      background-color: rgb(36, 39, 44) !important;
      color: #e0e0e0;
    }


    .modal-content .dark-mode {
      background-color: rgb(36, 39, 44) !important;
      color: #e0e0e0;
    }

    input .dark-mode {
      background-color: rgb(36, 39, 44) !important;
      color: #e0e0e022 !important;
    }

    textarea .dark-mode {
      background-color: rgb(36, 39, 44) !important;
      color: #e0e0e022 !important;
    }

    select .dark-mode {
      background-color: rgb(36, 39, 44) !important;
      color: #e0e0e022 !important;
    }

    form .dark-mode {
      background-color: rgb(36, 39, 44) !important;
      color: #e0e0e022 !important;
    }

    .tf-container .dark-mode {
      background-color: #121212;
      color: #e0e0e0;
      /* Light gray text color */
    }

    body {
      background-color: #ffffff;
      /* Light background */
      color: #000000;
      /* Dark text color */
      transition: background-color 0.3s, color 0.3s;
      /* Smooth transition */
    }

    body.dark-mode {
      background-color: #121212;
      color: #e0e0e0;
      /* Light gray text color */
    }

    .tf-balance-box {
      background-color: #ffffff;
      /* Light background */
      color: #000000;
      /* Dark text color */
    }

    .dark-mode .tf-balance-box {
      background-color: inherit;
      background-color: #24272c;
      color: #e0e0e0;
      /* Light gray text color */
    }

    .dark-mode .tf-statusbar {
      background-color: inherit;
      background-color: #24272c;
      color: #e0e0e0;
      /* Light gray text color */
    }

    .dark-mode .tf-navigation-bar {
      background-color: inherit;
      background-color: #24272c;
      color: #e0e0e0;
      /* Light gray text color */
    }

    .dark-mode .bottom-navigation-bar {
      background-color: inherit;
      background-color: #24272c;
      color: #e0e0e0;
      /* Light gray text color */
    }





    .dark-mode {
      background-color: inherit;
      background-color: #24272c;
      color: #e0e0e0;
      /* Light gray text color */
    }


    .dark-mode a {
      color: #e0e0e0;
    }

    body.dark-mode h4 {
      color: #ffffff;
      /* White color for h3 in dark mode */
    }

    body.dark-mode h3 {
      color: #ffffff;
      /* White color for h3 in dark mode */
    }

    body.dark-mode h2 {
      color: #ffffffc4;
      /* White color for h3 in dark mode */
    }

    .pagination {
      margin: 20px 0;
    }

    .pagination button {
      margin: 0 5px;
      padding: 5px 10px;
    }
  </style>

  <link rel="apple-touch-icon" sizes="180x180" href="/assets/icons/ios/180.png">
  <link rel="apple-touch-icon" sizes="167x167" href="/assets/icons/ios/167.png">
  <link rel="apple-touch-icon" sizes="152x152" href="/assets/icons/ios/152.png">
  <link rel="apple-touch-icon" sizes="120x120" href="/assets/icons/ios/120.png">

  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="Bukid Bounty Marketplace">

</head>



<body id="body-global">



  <div class="header is-fixed" id="maintopbarheader">
    <div class="tf-container">
      <div class="tf-statusbar d-flex justify-content-center align-items-center">
        <a href="javascript:void(0);" onclick="" class="back-btn" id="backbutton-top"> <i class="icon-left"></i> </a>
        <h3 id="topbar-title" onclick="ReloadPage();">@yield('title_bar')</h3>
        <a href="javascript:void(0);" onclick="ButtonGo('account_settings');" id="btn-popup-up" class="action-right"><i
            class="icon icon-filter"></i> </a>
      </div>
    </div>
  </div>
  <div id="app-wrap">
    <div class="bill-content">
      <br>
      <div class="tf-container" id="main-body" style="padding-top: 10px;padding-bottom: 10px;">
        @hasSection('body')
          @yield('body')
        @elseif(!empty($body))
          {!! $body !!}
        @else
          @include('layouts.partials.default.splash')
        @endif
      </div>
      <script>
        $('#SplashLogo').fadeIn(1000);

      </script>
    </div>
  </div>
  <div class="bottom-navigation-bar">
    <div class="tf-container">
      <ul class="tf-navigation-bar" id="main-nav-bar">
        {{-- @yield('nav_bar_content',view('layouts.navi-content')->render()) --}}
        @hasSection('nav_bar_content')
          @yield('nav_bar_content')
        @elseif(!empty($nav_bar_content))
          {!! $nav_bar_content !!}
        @else
          @include('layouts.partials.default.navigationbar')
        @endif
      </ul>
      <!-- <span class="line"></span> -->
    </div>
  </div>


  <script>
    const navbar = document.getElementById('main-nav-bar');
    if (navbar && navbar.innerHTML === '') {
      $('#main-nav-bar').load('/Components/NavBar/Main');
    }

    if (navigator.userAgent.match('iPhone') || navigator.userAgent.match('iphone')) {
      if (window.innerHeight < window.innerWidth) {
      } else {
        let headertopbar = document.getElementById('maintopbarheader');

        if (headertopbar) {
          headertopbar.style.paddingTop = "30px";
        } else {
        }
      }

    }
  </script>











  <script>
    const isthisLocalhost = ['localhost', '127.0.0.1', '::1'].includes(location.hostname);
    if (!window.isSecureContext && !isthisLocalhost) {
      console.info('Skipping service worker registration: insecure context', location.href);
      return;
    } else {
      navigator.serviceWorker.register('/service-worker.js');
    }
    PerformanceLog.Log('Finished Loading HTML Part of StarterHMTL');

  </script>
  <script type="text/javascript" src="/UIALT.js"></script>
  <script>
    PerformanceLog.Log('Finished Loading UI ALT JS');
  </script>
  <script type="text/javascript" src="/dist/alt-theme/main.js"></script>

  <script>
    PerformanceLog.Log('Finished Loading ALT theme Main js');
  </script>


  <script type="text/javascript" src="/starter.js"></script>
  <script type="text/javascript" src="/EXT/starterEXT/market.js"></script>

  <script>
    PerformanceLog.Log('Finished Loading Starter JS');
  </script>

  <style>
    table {
      table-layout: fixed;
      width: 100%;
    }
  </style>

  <script>
    function SetNotif(title, body = '', icon = '', tag = '') {
      Notification.requestPermission(function (result) { if (result === 'granted') { navigator.serviceWorker.ready.then(function (registration) { registration.showNotification(title, { body: body, icon: icon, tag: tag }); }); } });
    }

    function EraseAllNotif() {
      Notification.requestPermission(function (result) {
        if (result === 'granted') {
          navigator.serviceWorker.ready.then(function (registration) {
            registration.getNotifications().then(function (notifications) {
              notifications.forEach(function (notification) {
                notification.close();
              });
            });
          });
        }
      });
    }

    function EraseNotifwithTag(tag) {
      Notification.requestPermission(function (result) {
        if (result === 'granted') {
          // Replace 'specific-tag' with the tag you want to target
          const specificTag = tag;

          // Check if service workers are available
          if ('serviceWorker' in navigator) {
            navigator.serviceWorker.ready.then(function (registration) {
              registration.getNotifications().then(function (notifications) {
                notifications.forEach(function (notification) {
                  if (notification.tag === specificTag) {
                    notification.close();
                  }
                });
              });
            });
          }
        }
      });
    }

    function deepEqual(a, b) {
      if (a === b) return true;

      if (a == null || b == null) return false;

      if (Array.isArray(a) && Array.isArray(b)) {
        if (a.length !== b.length) return false;
        for (let i = 0; i < a.length; i++) {
          if (!deepEqual(a[i], b[i])) return false;
        }
        return true;
      }

      if (typeof a === 'object' && typeof b === 'object') {
        let keysA = Object.keys(a);
        let keysB = Object.keys(b);

        if (keysA.length !== keysB.length) return false;

        for (let key of keysA) {
          if (!keysB.includes(key) || !deepEqual(a[key], b[key])) return false;
        }
        return true;
      }

      return a === b;
    }

    @hasSection('final_scripts')
      @yield('final_scripts')
    @elseif(!empty($final_scripts))
      {!! $final_scripts !!}
    @endif

    //  EraseNotifwithTag('New_Transaction');
    //SetNotif(number_of_transactions + ' Orders Today', tableHtml, 'https://mq.hesed.sbs/assets/checkicon.png', 'New_Transaction');

    PerformanceLog.Log('Finished Everything');
    // PerformanceLog.DisplayLogs();



  </script>

</body>

</html>