@extends('backend.layout.exposcale')

@section('page_title', 'Deposit Requests')

@section('topbar_actions')
  <span class="badge bpend" id="open-lbl">{{ count($pendingInvoices) }} pending</span>
@endsection

@section('content')

<div style="flex:1;display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;padding:14px 18px;height:calc(100vh - 49px);overflow:hidden;">

  <!-- ⏳ PENDING COLUMN -->
  <div style="background:var(--card);border:1px solid rgba(245,158,11,0.35);border-radius:10px;display:flex;flex-direction:column;overflow:hidden;">
    <div style="padding:10px 14px 9px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;">
      <span style="font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px;"><span style="font-size:14px;">⏳</span>Pending</span>
      <span class="badge bpend" id="pending-count-badge">{{ count($pendingInvoices) }}</span>
    </div>
    <div id="pending-col" style="flex:1;overflow-y:auto;">
      @forelse($pendingInvoices as $index => $req)
      @php
        $clientName = $req->user ? trim($req->user->first_name . ' ' . $req->user->last_name) : $req->billed_to_name;
      @endphp
      <div class="req-card" id="req-{{ $req->id }}" data-id="{{ $req->id }}" data-ref="{{ $req->invoice_number }}" data-client="{{ $clientName }}" data-amount="{{ $req->amount }}" data-net="{{ $req->amount }}" data-currency="{{ $req->currency }}" data-time="{{ $req->created_at->format('d M Y H:i') }}" data-pdf="{{ $req->pdf_link }}">
        <div class="req-ref-tag">{{ $req->invoice_number }}</div>
        <div class="req-client-name"><span class="client-link">{{ $clientName }}</span></div>
        <div class="req-meta-row"><span class="badge bpend" style="font-size:9px;">{{ ucfirst($req->status) }}</span> <span>{{ $req->currency === 'EUR' ? '€' : '$' }} {{ $req->amount }}</span></div>
        <div class="req-time">{{ $req->created_at->format('d M Y H:i') }}</div>
        <div class="req-btns" style="margin-top: 8px;">
          @if($req->pdf_link)
            <a href="{{ $req->pdf_link }}" target="_blank" style="display:block;margin-bottom:8px;font-size:10px;color:var(--accent);text-decoration:none;font-weight:600;">📄 View Invoice</a>
          @endif
          <button class="req-btn-confirm" onclick="confirmReq({{ $req->id }})">✓ Confirm</button>
          <button class="req-btn-deny" onclick="denyReq({{ $req->id }})">✗ Deny</button>
        </div>
      </div>
      @empty
      <div id="pending-empty" style="padding:28px 14px;text-align:center;color:var(--muted);font-size:11px;">No pending requests</div>
      @endforelse
    </div>
  </div>

  <!-- ✓ CONFIRMED COLUMN -->
  <div style="background:var(--card);border:1px solid rgba(16,185,129,0.35);border-radius:10px;display:flex;flex-direction:column;overflow:hidden;">
    <div style="padding:10px 14px 9px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;">
      <span style="font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px;"><span style="font-size:14px;">✅</span>Confirmed</span>
      <span class="badge ba" id="confirmed-count-badge">{{ count($confirmedInvoices) }}</span>
    </div>
    <div id="confirmed-col" style="flex:1;overflow-y:auto;">
      @forelse($confirmedInvoices as $index => $req)
      @php
        $clientName = $req->user ? trim($req->user->first_name . ' ' . $req->user->last_name) : $req->billed_to_name;
      @endphp
      <div class="req-card confirmed" style="background:rgba(16,185,129,0.03);">
        <div class="req-ref-tag" style="color:var(--muted);">{{ $req->invoice_number }}</div>
        <div class="req-client-name" style="font-size:12px;font-weight:600;">{{ $clientName }}</div>
        <div class="req-meta-row"><span class="badge bgrowth" style="font-size:9px;">{{ ucfirst($req->status) }}</span> <span><strong style="color:var(--green);">{{ $req->currency === 'EUR' ? '€' : '$' }} {{ $req->amount }}</strong> credited</span></div>
        <div class="req-time">{{ $req->created_at->format('d M Y H:i') }}</div>
        @if($req->pdf_link)
          <div class="req-btns" style="margin-top: 8px;">
            <a href="{{ $req->pdf_link }}" target="_blank" style="display:block;font-size:10px;color:var(--accent);text-decoration:none;font-weight:600;">📄 View Invoice</a>
          </div>
        @endif
      </div>
      @empty
      <div id="confirmed-empty" style="padding:28px 14px;text-align:center;color:var(--muted);font-size:11px;">No confirmed requests</div>
      @endforelse
    </div>
  </div>

  <!-- ✗ DENIED COLUMN -->
  <div style="background:var(--card);border:1px solid rgba(239,68,68,0.3);border-radius:10px;display:flex;flex-direction:column;overflow:hidden;">
    <div style="padding:10px 14px 9px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;">
      <span style="font-size:12px;font-weight:700;display:flex;align-items:center;gap:6px;"><span style="font-size:14px;">🚫</span>Denied</span>
      <span class="badge br" id="denied-count-badge">{{ count($deniedInvoices) }}</span>
    </div>
    <div id="denied-col" style="flex:1;overflow-y:auto;">
      @forelse($deniedInvoices as $index => $req)
      @php
        $clientName = $req->user ? trim($req->user->first_name . ' ' . $req->user->last_name) : $req->billed_to_name;
      @endphp
      <div class="req-card" style="background:rgba(239,68,68,0.03);">
        <div class="req-ref-tag">{{ $req->invoice_number }}</div>
        <div class="req-client-name" style="font-size:12px;font-weight:600;color:var(--red);">{{ $clientName }}</div>
        <div class="req-meta-row"><span class="badge br" style="font-size:9px;">{{ ucfirst($req->status) }}</span> <span style="color:var(--muted);">{{ $req->currency === 'EUR' ? '€' : '$' }} {{ $req->amount }}</span></div>
        <div class="req-time">{{ $req->created_at->format('d M Y H:i') }}</div>
        @if($req->pdf_link)
          <div class="req-btns" style="margin-top: 8px;">
            <a href="{{ $req->pdf_link }}" target="_blank" style="display:block;font-size:10px;color:var(--accent);text-decoration:none;font-weight:600;">📄 View Invoice</a>
          </div>
        @endif
      </div>
      @empty
      <div id="denied-empty" style="padding:28px 14px;text-align:center;color:var(--muted);font-size:11px;">No denied requests</div>
      @endforelse
    </div>
  </div>
</div>
@endsection

@section('page_scripts')
<script>
function updateCounts() {
  const pc = document.getElementById('pending-col').querySelectorAll('.req-card').length;
  const cc = document.getElementById('confirmed-col').querySelectorAll('.req-card').length;
  const dc = document.getElementById('denied-col').querySelectorAll('.req-card').length;
  
  document.getElementById('pending-count-badge').textContent = pc;
  document.getElementById('confirmed-count-badge').textContent = cc;
  document.getElementById('denied-count-badge').textContent = dc;
  document.getElementById('open-lbl').textContent = pc + ' pending';
  
  const pe = document.getElementById('pending-empty');
  if (pe) pe.style.display = pc === 0 ? '' : 'none';
  
  const ce = document.getElementById('confirmed-empty');
  if (ce) ce.style.display = cc === 0 ? '' : 'none';
  
  const de = document.getElementById('denied-empty');
  if (de) de.style.display = dc === 0 ? '' : 'none';
}

function confirmReq(id) {
  if(!confirm('Are you sure you want to confirm this request and mark it as Paid?')) return;
  
  const card = document.getElementById('req-' + id);
  if (!card) return;
  
  // Disable buttons while loading
  const btns = card.querySelectorAll('button');
  btns.forEach(b => b.disabled = true);

  fetch(`/deposit-requests/${id}/confirm`, {
    method: 'POST',
    headers: {
      'X-CSRF-TOKEN': '{{ csrf_token() }}',
      'Accept': 'application/json',
    },
  })
  .then(r => r.json())
  .then(res => {
    if (res.success) {
      const client = card.dataset.client;
      const net = card.dataset.net;
      const ref = card.dataset.ref;
      const time = card.dataset.time;
      const currency = card.dataset.currency;
      const pdf = card.dataset.pdf;
      const symbol = currency === 'EUR' ? '€' : '$';
      
      card.remove();
      
      let pdfHtml = '';
      if(pdf) {
        pdfHtml = `<div class="req-btns" style="margin-top: 8px;"><a href="${pdf}" target="_blank" style="display:block;font-size:10px;color:var(--accent);text-decoration:none;font-weight:600;">📄 View Invoice</a></div>`;
      }
      
      const html = `<div class="req-card confirmed" style="background:rgba(16,185,129,0.03);">
        <div class="req-ref-tag" style="color:var(--muted);">${ref}</div>
        <div class="req-client-name" style="font-size:12px;font-weight:600;">${client}</div>
        <div class="req-meta-row"><span class="badge bgrowth" style="font-size:9px;">Paid</span> <span><strong style="color:var(--green);">${symbol} ${net}</strong> credited</span></div>
        <div class="req-time">${time}</div>
        ${pdfHtml}
      </div>`;
      
      const ce = document.getElementById('confirmed-empty');
      if (ce) ce.style.display = 'none';
      
      document.getElementById('confirmed-col').insertAdjacentHTML('afterbegin', html);
      showToast('✅ ' + client + ' top-up confirmed (' + net + ')', '#10b981');
      updateCounts();
    } else {
      btns.forEach(b => b.disabled = false);
      alert(res.message || 'Failed to confirm.');
    }
  })
  .catch(() => {
    btns.forEach(b => b.disabled = false);
    alert('Error connecting to server.');
  });
}

function denyReq(id) {
  if(!confirm('Are you sure you want to deny this request?')) return;
  
  const card = document.getElementById('req-' + id);
  if (!card) return;
  
  const btns = card.querySelectorAll('button');
  btns.forEach(b => b.disabled = true);

  fetch(`/deposit-requests/${id}/deny`, {
    method: 'POST',
    headers: {
      'X-CSRF-TOKEN': '{{ csrf_token() }}',
      'Accept': 'application/json',
    },
  })
  .then(r => r.json())
  .then(res => {
    if (res.success) {
      const client = card.dataset.client;
      const amount = card.dataset.amount;
      const ref = card.dataset.ref;
      const time = card.dataset.time;
      const currency = card.dataset.currency;
      const pdf = card.dataset.pdf;
      const symbol = currency === 'EUR' ? '€' : '$';
      
      card.remove();
      
      let pdfHtml = '';
      if(pdf) {
        pdfHtml = `<div class="req-btns" style="margin-top: 8px;"><a href="${pdf}" target="_blank" style="display:block;font-size:10px;color:var(--accent);text-decoration:none;font-weight:600;">📄 View Invoice</a></div>`;
      }
      
      const html = `<div class="req-card" style="background:rgba(239,68,68,0.03);">
        <div class="req-ref-tag">${ref}</div>
        <div class="req-client-name" style="font-size:12px;font-weight:600;color:var(--red);">${client}</div>
        <div class="req-meta-row"><span class="badge br" style="font-size:9px;">Rejected</span> <span style="color:var(--muted);">${symbol} ${amount}</span></div>
        <div class="req-time">${time}</div>
        ${pdfHtml}
      </div>`;
      
      const de = document.getElementById('denied-empty');
      if (de) de.style.display = 'none';
      
      document.getElementById('denied-col').insertAdjacentHTML('afterbegin', html);
      showToast('✗ ' + client + ' request denied', '#ef4444');
      updateCounts();
    } else {
      btns.forEach(b => b.disabled = false);
      alert(res.message || 'Failed to deny.');
    }
  })
  .catch(() => {
    btns.forEach(b => b.disabled = false);
    alert('Error connecting to server.');
  });
}

document.addEventListener('DOMContentLoaded', updateCounts);
</script>
@endsection