{{-- jx-date-override-v1 : global approval UI (admin bell + cashier waiting modal) --}}
{{-- Included from layouts/app.blade.php just before </body>. Loads on every page. --}}

@php
    $jx_business_id = session('user.business_id');
    $jx_is_admin = auth()->check() && auth()->user()->hasRole('Admin#' . $jx_business_id);
@endphp

<style>
  #jxdo-bell-wrap{position:fixed;top:12px;right:70px;z-index:99999}
  #jxdo-bell{position:relative;cursor:pointer;background:#2563eb;color:#fff;border-radius:50%;width:42px;height:42px;
    display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.25);font-size:18px}
  #jxdo-bell.has{animation:jxdoPulse 1s infinite}
  @keyframes jxdoPulse{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.6)}50%{box-shadow:0 0 0 10px rgba(37,99,235,0)}}
  #jxdo-count{position:absolute;top:-4px;right:-4px;background:#dc2626;color:#fff;border-radius:10px;
    min-width:18px;height:18px;font-size:11px;font-weight:700;display:none;align-items:center;justify-content:center;padding:0 4px}
  #jxdo-panel{position:absolute;top:50px;right:0;width:340px;max-height:420px;overflow:auto;background:#fff;
    border:1px solid #e5e7eb;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);display:none;padding:8px}
  #jxdo-panel h4{margin:6px 8px;font-size:13px;color:#1e3a8a}
  .jxdo-req{border:1px solid #eef;border-radius:8px;padding:8px;margin:6px 0;font-size:12px}
  .jxdo-req b{color:#111}
  .jxdo-req .row2{color:#555;margin:3px 0}
  .jxdo-req .btns{display:flex;gap:6px;margin-top:6px}
  .jxdo-btn{flex:1;border:0;border-radius:6px;padding:6px;font-weight:700;font-size:12px;cursor:pointer;color:#fff}
  .jxdo-ok{background:#15803d}.jxdo-no{background:#b91c1c}
  .jxdo-empty{color:#94a3b8;font-size:12px;padding:12px;text-align:center}
  /* cashier waiting modal */
  #jxdo-wait{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:100000;display:none;align-items:center;justify-content:center}
  #jxdo-wait .card{background:#fff;border-radius:14px;padding:26px 30px;max-width:420px;text-align:center;box-shadow:0 10px 40px rgba(0,0,0,.3)}
  #jxdo-wait h3{margin:0 0 8px;font-size:18px;color:#1e3a8a}
  #jxdo-wait p{margin:6px 0;color:#334155;font-size:14px}
  #jxdo-spinner{width:44px;height:44px;border:5px solid #dbeafe;border-top-color:#2563eb;border-radius:50%;
    margin:14px auto;animation:jxdoSpin .9s linear infinite}
  @keyframes jxdoSpin{to{transform:rotate(360deg)}}
  #jxdo-timer{font-weight:700;color:#2563eb}
  #jxdo-cancel{margin-top:14px;background:#64748b;color:#fff;border:0;border-radius:8px;padding:8px 16px;cursor:pointer;font-weight:600}
  .jxdo-declined h3{color:#b91c1c}
</style>

@if($jx_is_admin)
<div id="jxdo-bell-wrap">
  <div id="jxdo-bell" title="Sale-date authorisation requests">
    &#128276;<span id="jxdo-count">0</span>
  </div>
  <div id="jxdo-panel">
    <h4>Date-change requests</h4>
    <div id="jxdo-list"><div class="jxdo-empty">No pending requests</div></div>
  </div>
</div>
@endif

{{-- cashier waiting modal (present for everyone; only shown when they trigger a request) --}}
<div id="jxdo-wait">
  <div class="card" id="jxdo-wait-card">
    <h3>Authorisation required</h3>
    <p id="jxdo-wait-msg">This sale is dated differently from today.<br>Waiting for admin approval…</p>
    <div id="jxdo-spinner"></div>
    <p>Expires in <span id="jxdo-timer">60</span>s</p>
    <button id="jxdo-cancel" type="button">Cancel</button>
  </div>
</div>

<script>
(function(){
  var CSRF = $('meta[name="csrf-token"]').attr('content') || $('input[name="_token"]').val();
  var BASE = "{{ url('/') }}";

  /* ============ ADMIN BELL ============ */
  @if($jx_is_admin)
  var $bell=$('#jxdo-bell'), $count=$('#jxdo-count'), $panel=$('#jxdo-panel'), $list=$('#jxdo-list');
  $bell.on('click', function(){ $panel.toggle(); });

  function renderReqs(reqs){
    if(!reqs.length){ $list.html('<div class="jxdo-empty">No pending requests</div>'); return; }
    var h='';
    reqs.forEach(function(r){
      h += '<div class="jxdo-req" data-id="'+r.id+'">'
         + '<b>'+ $('<i>').text(r.who).html() +'</b> wants to record a sale dated <b>'+ r.date +'</b>'
         + '<div class="row2">'+ $('<i>').text(r.summary||'').html() +'</div>'
         + '<div class="row2">Expires in '+ r.seconds_left +'s</div>'
         + '<div class="btns">'
         + '<button class="jxdo-btn jxdo-ok" data-act="approve" data-id="'+r.id+'">Approve</button>'
         + '<button class="jxdo-btn jxdo-no" data-act="decline" data-id="'+r.id+'">Decline</button>'
         + '</div></div>';
    });
    $list.html(h);
  }

  function pollPending(){
    $.getJSON(BASE+'/date-override/pending')
      .done(function(d){
        var n=(d.requests||[]).length;
        if(n>0){ $count.text(n).show(); $bell.addClass('has'); }
        else   { $count.hide(); $bell.removeClass('has'); }
        if($panel.is(':visible')) renderReqs(d.requests||[]);
      })
      .always(function(){ setTimeout(pollPending, 3000); });
  }
  pollPending();

  $list.on('click','.jxdo-btn', function(){
    var act=$(this).data('act'), id=$(this).data('id'), $b=$(this);
    $b.prop('disabled',true).text('...');
    $.ajax({url:BASE+'/date-override/'+act+'/'+id, method:'POST', data:{_token:CSRF}, dataType:'json'})
      .done(function(){ $('.jxdo-req[data-id="'+id+'"]').fadeOut(150,function(){$(this).remove(); if(!$list.children('.jxdo-req').length) $list.html('<div class="jxdo-empty">No pending requests</div>');}); })
      .fail(function(){ $b.prop('disabled',false).text(act==='approve'?'Approve':'Decline'); });
  });
  @endif

  /* ============ CASHIER WAITING FLOW ============ */
  var pollTimer=null, countdownTimer=null, activeReqId=null, activeForm=null;

  // Intercept sell/pos submit responses at the AJAX layer.
  $(document).ajaxSuccess(function(evt, xhr, settings){
    var url = settings.url || '';
    if(!/\/(sells|pos)(\?|$)/.test(url)) return;               // only sale submits
    if((settings.type||settings.method||'').toUpperCase() !== 'POST') return;
    var data;
    try { data = (typeof xhr.responseJSON!=='undefined') ? xhr.responseJSON : JSON.parse(xhr.responseText); } catch(e){ return; }
    if(!data || data.success !== 2 || !data.jx_override) return; // only our pending signal

    // Identify which form was submitted (add or edit pos)
    activeForm = $('form#edit_pos_sell_form').length && $('form#edit_pos_sell_form').data('jxsubmitting')
                 ? $('form#edit_pos_sell_form') : $('form#add_pos_sell_form');
    if(!activeForm.length){ activeForm = $('form#add_pos_sell_form'); }

    activeReqId = data.jx_request_id;
    showWaiting(data.jx_requested_date);
    startPolling();
  });

  // Track which form is mid-submit so we resubmit the right one.
  $(document).on('submit','form#add_pos_sell_form,form#edit_pos_sell_form',function(){
    $('form#add_pos_sell_form,form#edit_pos_sell_form').data('jxsubmitting',false);
    $(this).data('jxsubmitting',true);
  });

  function showWaiting(dateStr){
    $('#jxdo-wait-card').removeClass('jxdo-declined');
    $('#jxdo-wait-card h3').text('Authorisation required');
    $('#jxdo-wait-msg').html('This sale is dated <b>'+ (dateStr||'a different day') +'</b>, not today.<br>Waiting for admin approval…');
    $('#jxdo-spinner').show();
    $('#jxdo-cancel').show().text('Cancel');
    var t=60; $('#jxdo-timer').text(t);
    clearInterval(countdownTimer);
    countdownTimer=setInterval(function(){ t--; $('#jxdo-timer').text(t<0?0:t); if(t<=0){clearInterval(countdownTimer);} },1000);
    $('#jxdo-wait').css('display','flex');
  }

  function stopAll(){ clearTimeout(pollTimer); clearInterval(countdownTimer); }

  function startPolling(){
    clearTimeout(pollTimer);
    (function poll(){
      if(!activeReqId) return;
      $.getJSON(BASE+'/date-override/status/'+activeReqId)
        .done(function(d){
          if(d.status==='approved'){ onApproved(); }
          else if(d.status==='declined'){ onResolved('Declined by admin','The date change was not authorised. This sale was not saved.'); }
          else if(d.status==='expired'){ onResolved('Request expired','No response in time. Please try again.'); }
          else if(d.status==='used'){ onResolved('Already processed','This request was already used.'); }
          else { pollTimer=setTimeout(poll,3000); } // still pending
        })
        .fail(function(){ pollTimer=setTimeout(poll,3000); });
    })();
  }

  function onApproved(){
    stopAll();
    $('#jxdo-wait-card h3').text('Approved');
    $('#jxdo-wait-msg').html('Authorised. Saving the sale…');
    $('#jxdo-cancel').hide();
    // Append token to the form and resubmit through the app's own submit handler.
    var $f = activeForm && activeForm.length ? activeForm : $('form#add_pos_sell_form');
    $f.find('input[name="jx_override_token"]').remove();
    $('<input>',{type:'hidden',name:'jx_override_token',value:activeReqId}).appendTo($f);
    var reqId = activeReqId; activeReqId=null;
    // mark used, then resubmit
    $.ajax({url:BASE+'/date-override/mark-used/'+reqId, method:'POST', data:{_token:CSRF}})
      .always(function(){
        setTimeout(function(){
          $('#jxdo-wait').hide();
          // Re-trigger submit: prefer the express-finalize path if present, else native submit.
          if($f.attr('id')==='add_pos_sell_form' || $f.attr('id')==='edit_pos_sell_form'){
            $f.trigger('submit');
          }
        },300);
      });
  }

  function onResolved(title, msg){
    stopAll(); activeReqId=null;
    $('#jxdo-wait-card').addClass('jxdo-declined');
    $('#jxdo-wait-card h3').text(title);
    $('#jxdo-spinner').hide();
    $('#jxdo-wait-msg').text(msg);
    $('#jxdo-cancel').show().text('Close');
  }

  $('#jxdo-cancel').on('click', function(){
    stopAll(); activeReqId=null; $('#jxdo-wait').hide();
  });
})();
</script>