@extends('backend.master')

@push('styles')
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
:root{ --gap:12px; --border:#e9ecef; --muted:#6c757d; }
.card{ border-radius:12px; } .card-header{ border-bottom:1px solid var(--border); }

/* Table */
.table thead th{ font-weight:600; text-transform:uppercase; font-size:12px; letter-spacing:.04em; border-bottom:2px solid var(--border)!important;}
.table td{ vertical-align:middle; }
.badge{ padding:.5em .65em; font-weight:600; }
.td-actions .btn{ margin-bottom:6px; }

/* Filters (mobile-first) */
.filters-wrap{ display:grid; grid-template-columns:1fr auto; gap:var(--gap);}
.filters-title{ display:flex; align-items:center; gap:10px;}
.filter-toggle{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--border); border-radius:8px; padding:6px 10px; background:#fff; cursor:pointer;}
.filters{ grid-column:1/-1; display:grid; gap:var(--gap); background:#f8f9fa; border:1px solid var(--border); border-radius:10px; padding:10px; transition:max-height .25s ease, opacity .2s ease; overflow:hidden; max-height:0; opacity:0;}
.filters.open{ max-height:360px; opacity:1; }
.filters-grid{ display:grid; gap:var(--gap); }
.filters-grid .input-group-text{ background:#fff; }

/* Desktop */
@media (min-width:768px){
  .filters-wrap{ grid-template-columns:auto 1fr; }
  .filter-toggle{ display:none; }
  .filters{ grid-column:2/3; background:transparent; border:none; padding:0; max-height:none; opacity:1; overflow:visible; }
  .filters-grid{ grid-auto-flow:column; grid-auto-columns:max-content; align-items:center; gap:var(--gap); }
  .filters-grid .form-select,.filters-grid .form-control{ width:220px; }
  .filters-grid .input-group{ width:300px; }
}

/* Custom modal (centered) */
.cmodal{ position:fixed; inset:0; z-index:1090; display:none; align-items:center; justify-content:center;}
.cmodal.show{ display:flex; }
.cmodal .cm-backdrop{ position:absolute; inset:0; background:rgba(10,12,16,.55); backdrop-filter:blur(2px);}
.cmodal .cm-dialog{ position:relative; z-index:1; width:min(560px, calc(100% - 32px)); border-radius:14px; background:#fff; box-shadow:0 20px 60px rgba(0,0,0,.25); overflow:hidden; transform:translateY(16px) scale(.98); opacity:0; transition:transform .18s ease, opacity .18s ease;}
.cmodal.show .cm-dialog{ transform:translateY(0) scale(1); opacity:1;}
.cm-header{ padding:14px 18px; border-bottom:1px solid #edf1f5; display:flex; align-items:center; gap:10px;}
.cm-title{ font-size:18px; font-weight:700; margin:0; display:flex; align-items:center; gap:10px;}
.cm-body{ padding:18px;} .cm-footer{ padding:14px 18px; border-top:1px solid #edf1f5; display:flex; justify-content:flex-end; gap:10px;}
.cm-close{ margin-left:auto; appearance:none; border:0; background:transparent; font-size:22px; line-height:1; padding:0 6px; cursor:pointer; color:var(--muted);}
.cm-close:hover{ color:#111; transform:scale(1.05); }
.cm-btn{ border:0; border-radius:10px; padding:9px 14px; cursor:pointer; font-weight:600;}
.cm-btn.light{ background:#f1f3f5; color:#111;}
.cm-btn.success{ background:#198754; color:#fff;}
.cm-btn.danger{ background:#dc3545; color:#fff;}
.cm-help{ color:var(--muted); font-size:12.5px;}
.btn-soft{ border:1px solid rgba(0,0,0,.08); background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.btn-soft:hover{ box-shadow:0 2px 6px rgba(0,0,0,.08); }
.text-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
</style>
@endpush

@section('content')
<div class="container py-4">
  <div class="card shadow-sm border-0">
    <div class="card-header bg-white">
      <div class="filters-wrap">
        <h5 class="filters-title mb-0">
          <i class="fa-solid fa-file-invoice-dollar me-2"></i> Bill Payments
        </h5>

        <button type="button" class="filter-toggle" id="filterToggle" aria-expanded="false" aria-controls="filters">
          <i class="fa-solid fa-filter"></i> Filters
        </button>

        <form id="filters" method="get" class="filters {{ request()->hasAny(['status','q']) ? 'open' : '' }}">
          <div class="filters-grid">
            <select name="status" class="form-select form-select-sm" onchange="this.form.submit()">
              <option value="">All statuses</option>
              <option value="pending"   @selected(request('status')==='pending')>Pending</option>
              <option value="succeeded" @selected(request('status')==='succeeded')>Succeeded</option>
              <option value="failed"    @selected(request('status')==='failed')>Failed</option>
            </select>

            <div class="input-group input-group-sm">
              <span class="input-group-text"><i class="fa-solid fa-magnifying-glass"></i></span>
              <input type="text" name="q" class="form-control" value="{{ request('q') }}" placeholder="Search account / ref / txn / user / biller">
            </div>

            <button class="btn btn-sm btn-primary" type="submit">
              <i class="fa-solid fa-filter me-1"></i><span class="d-none d-md-inline">Apply</span><span class="d-md-none">Go</span>
            </button>

            @if(request()->hasAny(['status','q']))
            <a href="{{ route('admin.bill_payments.index') }}" class="btn btn-sm btn-soft">
              <i class="fa-solid fa-rotate-left me-1"></i> Reset
            </a>
            @endif
          </div>
        </form>
      </div>
    </div>

    <div class="card-body">
      @if(session('ok'))
        <div class="alert alert-success mb-3"><i class="fa-solid fa-circle-check me-1"></i>{{ session('ok') }}</div>
      @endif
      @if ($errors->any())
        <div class="alert alert-danger mb-3">
          <strong><i class="fa-solid fa-triangle-exclamation me-1"></i>Validation error:</strong>
          <ul class="mb-0">@foreach ($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
        </div>
      @endif

      <div class="table-responsive">
        <table class="table align-middle">
          <thead>
            <tr>
              <th>#</th>
              <th>User</th>
              <th>Biller</th>
              <th>Account</th>
              <th>Amount</th>
              <th>Reference</th>
              <th>Txn</th>
              <th>Status</th>
              <th>Created</th>
              <th class="text-end">Actions</th>
            </tr>
          </thead>
          <tbody>
          @forelse($payments as $p)
            <tr>
              <td class="text-muted">#{{ $p->id }}</td>
              <td><i class="fa-solid fa-user me-1 text-muted"></i>{{ $p->user?->name }}</td>
              <td><i class="fa-solid fa-building-columns me-1 text-muted"></i>{{ $p->biller?->name ?? ('Biller #'.$p->biller_id) }}</td>
              <td>
                <div class="text-mono">{{ $p->account_name }}</div>
                <div class="text-mono text-muted">{{ $p->account_no }}</div>
              </td>
              <td><i class="fa-solid fa-bangladeshi-taka-sign me-1 text-muted"></i>{{ number_format($p->amount,2) }}</td>
              <td class="text-mono">{{ $p->reference }}</td>
              <td class="text-mono">{{ $p->txn_id }}</td>
              <td>
                @php
                  $badgeClass = match($p->status) {
                      'succeeded' => 'bg-success',
                      'failed'    => 'bg-danger',
                      default     => 'bg-warning text-dark'
                  };
                  $icon = match($p->status) {
                      'succeeded' => 'fa-circle-check',
                      'failed'    => 'fa-circle-xmark',
                      default     => 'fa-hourglass-half'
                  };
                @endphp
                <span class="badge {{ $badgeClass }}"><i class="fa-solid {{ $icon }} me-1"></i>{{ ucfirst($p->status) }}</span>
              </td>
              <td><i class="fa-regular fa-clock me-1 text-muted"></i>{{ $p->created_at?->format('Y-m-d H:i') }}</td>
              <td class="text-end td-actions">
                @if($p->status === 'pending')
                  <button type="button" class="btn btn-sm btn-success me-1"
                          onclick="openPaymentModal('succeed','{{ route('admin.bill_payments.succeed', $p) }}','{{ $p->reference }}','{{ $p->txn_id }}')">
                    <i class="fa-solid fa-check me-1"></i> Mark Succeeded
                  </button>
                  <button type="button" class="btn btn-sm btn-outline-danger btn-soft"
                          onclick="openPaymentModal('fail','{{ route('admin.bill_payments.fail', $p) }}','{{ $p->reference }}','{{ $p->txn_id }}')">
                    <i class="fa-solid fa-xmark me-1"></i> Mark Failed
                  </button>
                @else
                  <span class="text-muted"><i class="fa-regular fa-circle-check me-1"></i>—</span>
                @endif
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="10" class="text-center text-muted py-5">
                <i class="fa-regular fa-folder-open fa-2x mb-2 d-block"></i>
                No bill payments found.
              </td>
            </tr>
          @endforelse
          </tbody>
        </table>
      </div>

      <div class="mt-3">
        {{ $payments->links() }}
      </div>
    </div>
  </div>
</div>

{{-- Custom Modal for succeed/fail --}}
<div id="paymentModal" class="cmodal" aria-hidden="true">
  <div class="cm-backdrop" data-close="1"></div>
  <div class="cm-dialog" role="dialog" aria-modal="true" aria-labelledby="bpTitle">
    <form id="paymentForm" method="post" onsubmit="return lockSubmit(this)">
      @csrf
      <div class="cm-header">
        <h5 class="cm-title" id="bpTitle"><i id="bpIcon" class="fa-solid fa-circle-check"></i> Confirm</h5>
        <button type="button" class="cm-close" aria-label="Close" data-close="1">&times;</button>
      </div>
      <div class="cm-body">
        <p id="bpPrompt" class="mb-3"></p>

        <div class="row g-2">
          <div class="col-12">
            <label class="form-label mb-1">Reference (optional)</label>
            <input type="text" name="reference" id="bpRef" class="form-control" maxlength="100" placeholder="e.g., EXT-REF-12345">
          </div>
          <div class="col-12">
            <label class="form-label mb-1">Transaction ID <span id="bpTxnHelp" class="cm-help">(optional)</span></label>
            <input type="text" name="txn_id" id="bpTxn" class="form-control" maxlength="100" placeholder="Gateway txn id (if any)">
          </div>
        </div>
      </div>
      <div class="cm-footer">
        <button type="button" class="cm-btn light" data-close="1">
          <i class="fa-regular fa-circle-xmark me-1"></i> Cancel
        </button>
        <button id="bpSubmit" type="submit" class="cm-btn success">
          <i class="fa-solid fa-check me-1"></i> Confirm
        </button>
      </div>
    </form>
  </div>
</div>

@push('scripts')
<script>
(function(){
  // Mobile filters toggle
  const toggle = document.getElementById('filterToggle');
  const filters = document.getElementById('filters');
  if (toggle && filters) {
    toggle.addEventListener('click', function(){
      const open = filters.classList.toggle('open');
      toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
    });
  }

  // Modal logic
  const modal   = document.getElementById('paymentModal');
  const dialog  = modal.querySelector('.cm-dialog');
  const form    = modal.querySelector('#paymentForm');
  const titleEl = modal.querySelector('#bpTitle');
  const iconEl  = modal.querySelector('#bpIcon');
  const prompt  = modal.querySelector('#bpPrompt');
  const submit  = modal.querySelector('#bpSubmit');
  const refIpt  = modal.querySelector('#bpRef');
  const txnIpt  = modal.querySelector('#bpTxn');
  const txnHelp = modal.querySelector('#bpTxnHelp');

  window.openPaymentModal = function(type, actionUrl, refVal = '', txnVal = ''){
    form.action = actionUrl;
    refIpt.value = refVal || '';
    txnIpt.value = txnVal || '';

    if (type === 'succeed') {
      titleEl.textContent = 'Mark bill payment as succeeded';
      titleEl.prepend(iconEl);
      iconEl.className = 'fa-solid fa-circle-check';
      iconEl.style.color = '#198754';

      prompt.innerHTML = '<i class="fa-solid fa-circle-info me-1"></i> This will set status to <strong>succeeded</strong>. Optionally store <em>txn_id</em> and reference.';
      submit.className = 'cm-btn success';
      submit.innerHTML = '<i class="fa-solid fa-check me-1"></i> Mark Succeeded';

      txnIpt.required = false;
      txnHelp.textContent = '(optional)';
    } else {
      titleEl.textContent = 'Mark bill payment as failed';
      titleEl.prepend(iconEl);
      iconEl.className = 'fa-solid fa-circle-xmark';
      iconEl.style.color = '#dc3545';

      prompt.innerHTML = '<i class="fa-solid fa-triangle-exclamation me-1"></i> This will set status to <strong>failed</strong>. You can keep a failure reference.';
      submit.className = 'cm-btn danger';
      submit.innerHTML = '<i class="fa-solid fa-xmark me-1"></i> Mark Failed';

      txnIpt.required = false;
      txnHelp.textContent = '(optional)';
    }

    showModal();
  };

  function showModal(){
    modal.classList.add('show');
    modal.removeAttribute('aria-hidden');
    document.addEventListener('keydown', escClose);
    document.documentElement.style.overflow = 'hidden';
  }
  function hideModal(){
    modal.classList.remove('show');
    modal.setAttribute('aria-hidden','true');
    document.removeEventListener('keydown', escClose);
    document.documentElement.style.overflow = '';
  }
  function escClose(e){ if (e.key === 'Escape') hideModal(); }
  modal.addEventListener('click', function(e){ if (e.target.dataset.close) hideModal(); });
  dialog.addEventListener('click', function(e){ e.stopPropagation(); });
  modal.querySelectorAll('[data-close]').forEach(btn => btn.addEventListener('click', hideModal));

  // Double submit guard
  window.lockSubmit = function(frm){
    const btn = frm.querySelector('#bpSubmit');
    if (btn && !btn.dataset.loading) {
      btn.dataset.loading = '1';
      btn.disabled = true;
      btn.insertAdjacentHTML('beforeend', ' <i class="fa-solid fa-spinner fa-spin ms-1"></i>');
    }
    return true;
  };
})();
</script>
@endpush
@endsection