<div class="modal fade" id="spinWheelModal" tabindex="-1" role="dialog" aria-labelledby="spinWheelModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header py-2">
        <h6 class="modal-title" id="spinWheelModalLabel">Spin Wheel</h6>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body p-0" id="spinWheelContent">
        <div class="text-center p-4">Loading...</div>
      </div>
    </div>
  </div>
</div>
<script>
  $(document).ready(function() {
    var appBasePath = '<?php echo rtrim(str_replace('\\', '/', dirname($_SERVER['SCRIPT_NAME'] ?? '')), '/') ?>';
    if (appBasePath === '/') appBasePath = '';
    function appUrl(path) {
      path = String(path || '').replace(/^\/+/, '');
      return appBasePath ? (appBasePath + '/' + path) : ('/' + path);
    }
    window.appUrl = window.appUrl || appUrl;
    var isLogged = <?php echo (function_exists('is_logged') && is_logged()) ? 'true' : 'false'; ?>;

    $(document).on('click', '.js-spin-wheel', function(e){
      e.preventDefault();
      if (!isLogged) {
        window.location.href = appUrl('auth/otp');
        return;
      }
      var $body = $('#spinWheelContent');
      $body.html('<div class="text-center p-4">Loading...</div>');
      $('#spinWheelModal').modal('show');
      fetch(appUrl('spin/list'), { credentials: 'same-origin', headers: { 'X-Requested-With': 'XMLHttpRequest' } })
        .then(function(r){
          if (r.status === 401) {
            window.location.href = appUrl('auth/otp');
            return '';
          }
          return r.text();
        })
        .then(function(html){
          if (!html) return;
          $body.html(html);
        })
        .catch(function(){ $body.html('<div class="alert alert-danger m-0">Failed to load spin wheels.</div>'); });
    });

    $(document).off('click.spin', '#spinWheelContent .spin-open-wheel').on('click.spin', '#spinWheelContent .spin-open-wheel', function(){
      var $btn = $(this);
      var id = $btn.data('id');
      var $body = $('#spinWheelContent');
      if (!id) return;
      if ($btn.data('loading')) return;
      $btn.data('loading', 1).prop('disabled', true);
      $body.html('<div class="text-center p-4">Loading...</div>');
      fetch(appUrl('spin/view/' + id), { credentials: 'same-origin', headers: { 'X-Requested-With': 'XMLHttpRequest' } })
        .then(function(r){
          if (r.status === 401) {
            window.location.href = appUrl('auth/otp');
            return '';
          }
          return r.text();
        })
        .then(function(html){
          if (!html) return;
          $body.html(html);
          try { $('#spinWheelModal .modal-body').scrollTop(0); } catch(e) {}
        })
        .catch(function(){
          $body.html('<div class="alert alert-danger m-0">Failed to load wheel.</div>');
        })
        .then(function(){
          $btn.data('loading', 0).prop('disabled', false);
        });
    });
  });
</script>
