@extends('admin.layouts.app')

@php
  $pageTitle = $pageTitle ?? 'All Transactions';

  $userDetailsUrl = function ($id) {
    if(\Illuminate\Support\Facades\Route::has('admin.users.detail')) return route('admin.users.detail', $id);
    if(\Illuminate\Support\Facades\Route::has('admin.users.show')) return route('admin.users.show', $id);
    return '#';
  };
@endphp

@section('panel')

@push('style')
<style>
.pagerBar{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.pagerBtn{border-radius:999px!important;min-width:140px;height:44px;display:inline-flex;align-items:center;justify-content:center;gap:8px;box-shadow:0 10px 18px rgba(15,23,42,.08)}
.pagerBtn:hover{transform:translateY(-1px)}
.pagerBtn:disabled{opacity:.55;box-shadow:none;transform:none}
</style>
@endpush

<div class="row">
  <div class="col-12">

    <div class="card b-radius--10">
      <div class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
        <div class="d-flex align-items-center gap-2 flex-wrap">
          <h5 class="card-title mb-0">
            <i class="las la-exchange-alt me-1"></i> @lang('All Transactions')
          </h5>
          <span class="text-muted small">@lang('Total'): {{ $transactions->total() }}</span>
        </div>
      </div>

      <div class="card-body">
        @if(session('ok'))
          <div class="alert alert--success mb-3">
            <i class="las la-check-circle me-1"></i> {{ session('ok') }}
          </div>
        @endif

        @if(session('error'))
          <div class="alert alert--danger mb-3">
            <i class="las la-exclamation-triangle me-1"></i> {{ session('error') }}
          </div>
        @endif
      </div>

      <div class="card-body p-0">
        <div class="table-responsive--md table-responsive">
          <table class="table table--light style--two">
            <thead>
              <tr>
                <th style="width:80px">@lang('ID')</th>
                <th style="width:170px">@lang('TRX')</th>
                <th style="width:170px">@lang('User')</th>
                <th style="width:160px">@lang('Type')</th>
                <th style="width:110px">@lang('Flow')</th>
                <th style="width:140px">@lang('Amount')</th>
                <th style="width:180px">@lang('Date')</th>
                <th style="width:140px">@lang('Action')</th>
              </tr>
            </thead>

            <tbody>
              @forelse($transactions as $t)
                @php
                  $isIn = ($t->flow ?? '') === 'in';
                  $u = $t->user;
                  $userId = $t->user_id ?? null;
                  $userName = $u?->name ?? 'N/A';
                  $userEmail = $u?->email ?? '-';
                  $uUrl = $userId ? $userDetailsUrl($userId) : '#';

                  $ref = $t->reference ?? '-';
                  $meta = $t->meta ?? [];
                  if(is_string($meta)){
                    $decoded = json_decode($meta, true);
                    $meta = is_array($decoded) ? $decoded : [];
                  }
                @endphp

                <tr>
                  <td data-label="@lang('ID')">#{{ $t->id }}</td>

                  <td data-label="@lang('TRX')">
                    <span class="fw-bold">{{ $t->trx_id }}</span>
                  </td>

                  <td data-label="@lang('User')">
                    <span class="fw-bold">{{ $userName }}</span>
                    @if($userId)
                      <div class="text-muted small">#{{ $userId }}</div>
                    @endif
                  </td>

                  <td data-label="@lang('Type')">
                    <span class="text--small">{{ $t->type }}</span>
                  </td>

                  <td data-label="@lang('Flow')">
                    @if($isIn)
                      <span class="badge badge--success">IN</span>
                    @else
                      <span class="badge badge--danger">OUT</span>
                    @endif
                  </td>

                  <td data-label="@lang('Amount')">
                    <span class="fw-bold">{{ number_format((float)$t->amount, 2) }}</span>
                  </td>

                  <td data-label="@lang('Date')">
                    <span class="text--small">{{ optional($t->created_at)->format('d M Y, h:i A') }}</span>
                  </td>

                  <td data-label="@lang('Action')">
                    <button
                      type="button"
                      class="btn btn-sm btn-outline--primary btnTxDetails"
                      data-trx="{{ e($t->trx_id) }}"
                      data-user="{{ e($userName) }}"
                      data-userid="{{ e((string)($userId ?? '')) }}"
                      data-useremail="{{ e($userEmail) }}"
                      data-userurl="{{ e($uUrl) }}"
                      data-type="{{ e($t->type) }}"
                      data-flow="{{ e($t->flow) }}"
                      data-amount="{{ e(number_format((float)$t->amount,2,'.','')) }}"
                      data-before="{{ e(number_format((float)$t->balance_before,2,'.','')) }}"
                      data-after="{{ e(number_format((float)$t->balance_after,2,'.','')) }}"
                      data-ref="{{ e($ref) }}"
                      data-date="{{ e(optional($t->created_at)->format('d M Y, h:i A')) }}"
                      data-meta='@json($meta)'
                    >
                      <i class="las la-desktop"></i> @lang('Details')
                    </button>
                  </td>
                </tr>
              @empty
                <tr>
                  <td class="text-muted text-center" colspan="100%">
                    @lang('No transactions found')
                  </td>
                </tr>
              @endforelse
            </tbody>

          </table>
        </div>
      </div>

      @if($transactions->hasPages())
        <div class="card-footer py-4">
          <div class="pagerBar">
            @if($transactions->onFirstPage())
              <button class="btn btn--dark pagerBtn" disabled>
                <i class="las la-arrow-left"></i> @lang('Previous')
              </button>
            @else
              <a class="btn btn--primary btn--gradi pagerBtn"
                 href="{{ $transactions->appends(request()->query())->previousPageUrl() }}">
                <i class="las la-arrow-left"></i> @lang('Previous')
              </a>
            @endif

            @if($transactions->hasMorePages())
              <a class="btn btn--primary btn--gradi pagerBtn"
                 href="{{ $transactions->appends(request()->query())->nextPageUrl() }}">
                @lang('Next') <i class="las la-arrow-right"></i>
              </a>
            @else
              <button class="btn btn--dark pagerBtn" disabled>
                @lang('Next') <i class="las la-arrow-right"></i>
              </button>
            @endif
          </div>
        </div>
      @endif

    </div>

  </div>
</div>

<div class="modal fade" id="txDetailsModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">
          <i class="las la-receipt me-1"></i> @lang('Transaction Details')
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <div class="modal-body">
        <div class="row g-3">

          <div class="col-md-6">
            <div class="card b-radius--10">
              <div class="card-body">
                <div class="d-flex justify-content-between">
                  <span class="text-muted">@lang('TRX')</span>
                  <span class="fw-bold" id="m_trx"></span>
                </div>
                <div class="d-flex justify-content-between mt-2">
                  <span class="text-muted">@lang('Type')</span>
                  <span class="fw-bold" id="m_type"></span>
                </div>
                <div class="d-flex justify-content-between mt-2">
                  <span class="text-muted">@lang('Flow')</span>
                  <span class="fw-bold" id="m_flow"></span>
                </div>
                <div class="d-flex justify-content-between mt-2">
                  <span class="text-muted">@lang('Date')</span>
                  <span class="fw-bold" id="m_date"></span>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-6">
            <div class="card b-radius--10">
              <div class="card-body">
                <div class="d-flex justify-content-between">
                  <span class="text-muted">@lang('Amount')</span>
                  <span class="fw-bold" id="m_amount"></span>
                </div>
                <div class="d-flex justify-content-between mt-2">
                  <span class="text-muted">@lang('Before')</span>
                  <span class="fw-bold" id="m_before"></span>
                </div>
                <div class="d-flex justify-content-between mt-2">
                  <span class="text-muted">@lang('After')</span>
                  <span class="fw-bold" id="m_after"></span>
                </div>
                <div class="d-flex justify-content-between mt-2">
                  <span class="text-muted">@lang('Reference')</span>
                  <span class="fw-bold text-end" id="m_ref" style="max-width:60%"></span>
                </div>
              </div>
            </div>
          </div>

          <div class="col-12">
            <div class="card b-radius--10">
              <div class="card-header d-flex justify-content-between align-items-center gap-2 flex-wrap">
                <h6 class="mb-0"><i class="las la-user me-1"></i> @lang('User')</h6>
                <a href="#" class="btn btn-sm btn-outline--primary" id="btnViewUser" target="_blank">
                  <i class="las la-desktop me-1"></i> @lang('View User')
                </a>
              </div>
              <div class="card-body">
                <div class="d-flex justify-content-between">
                  <span class="text-muted">@lang('Name')</span>
                  <span class="fw-bold" id="m_user"></span>
                </div>
                <div class="d-flex justify-content-between mt-2">
                  <span class="text-muted">@lang('User ID')</span>
                  <span class="fw-bold" id="m_userid"></span>
                </div>
                <div class="d-flex justify-content-between mt-2">
                  <span class="text-muted">@lang('Email')</span>
                  <span class="fw-bold" id="m_useremail"></span>
                </div>
              </div>
            </div>
          </div>

          <div class="col-12">
            <div class="card b-radius--10">
              <div class="card-header d-flex justify-content-between align-items-center">
                <h6 class="mb-0"><i class="las la-code me-1"></i> @lang('Meta')</h6>
                <button type="button" class="btn btn-sm btn--dark" id="btnCopyMeta">
                  <i class="las la-copy"></i> @lang('Copy')
                </button>
              </div>
              <div class="card-body">
                <pre class="mb-0" id="m_meta" style="white-space:pre-wrap;word-break:break-word;font-size:12px"></pre>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn--dark" data-bs-dismiss="modal">
          <i class="las la-times"></i> @lang('Close')
        </button>
      </div>
    </div>
  </div>
</div>

@endsection

@push('breadcrumb-plugins')
  <x-search-form placeholder="TRX / Type / User ID / Name" />
@endpush

@push('script')
<script>
(function(){
  function fmt(n){
    const x = Number(n || 0);
    return x.toLocaleString(undefined,{minimumFractionDigits:2,maximumFractionDigits:2});
  }

  const modalEl = document.getElementById('txDetailsModal');
  if(!modalEl) return;

  const bsModal = new bootstrap.Modal(modalEl);
  const $ = (id)=>document.getElementById(id);

  const m_trx = $('m_trx');
  const m_type = $('m_type');
  const m_flow = $('m_flow');
  const m_date = $('m_date');
  const m_amount = $('m_amount');
  const m_before = $('m_before');
  const m_after = $('m_after');
  const m_ref = $('m_ref');

  const m_user = $('m_user');
  const m_userid = $('m_userid');
  const m_useremail = $('m_useremail');

  const m_meta = $('m_meta');
  const btnCopyMeta = $('btnCopyMeta');
  const btnViewUser = $('btnViewUser');

  let lastMetaText = '';

  document.addEventListener('click', function(e){
    const btn = e.target.closest('.btnTxDetails');
    if(!btn) return;

    const metaRaw = btn.getAttribute('data-meta') || '{}';
    let metaObj = {};
    try{ metaObj = JSON.parse(metaRaw); }catch(err){ metaObj = {}; }

    const flow = (btn.dataset.flow || '').toLowerCase();

    m_trx.textContent = btn.dataset.trx || '-';
    m_type.textContent = btn.dataset.type || '-';
    m_flow.innerHTML = flow === 'in'
      ? '<span class="badge badge--success">IN</span>'
      : (flow === 'out' ? '<span class="badge badge--danger">OUT</span>' : '-');
    m_date.textContent = btn.dataset.date || '-';

    m_amount.textContent = fmt(btn.dataset.amount);
    m_before.textContent = fmt(btn.dataset.before);
    m_after.textContent = fmt(btn.dataset.after);

    m_ref.textContent = btn.dataset.ref || '-';

    m_user.textContent = btn.dataset.user || 'N/A';
    m_userid.textContent = btn.dataset.userid || '-';
    m_useremail.textContent = btn.dataset.useremail || '-';

    const userUrl = btn.dataset.userurl || '#';
    if(userUrl === '#'){
      btnViewUser.setAttribute('href', '#');
      btnViewUser.style.pointerEvents = 'none';
      btnViewUser.style.opacity = '0.6';
    }else{
      btnViewUser.setAttribute('href', userUrl);
      btnViewUser.style.pointerEvents = '';
      btnViewUser.style.opacity = '';
    }

    lastMetaText = JSON.stringify(metaObj, null, 2);
    m_meta.textContent = lastMetaText || '{}';

    bsModal.show();
  });

  btnCopyMeta?.addEventListener('click', async function(){
    try{
      await navigator.clipboard.writeText(lastMetaText || '{}');
      btnCopyMeta.innerHTML = '<i class="las la-check"></i> Copied';
      setTimeout(()=>btnCopyMeta.innerHTML='<i class="las la-copy"></i> Copy',1200);
    }catch(e){}
  });
})();
</script>
@endpush