{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: index.blade.php
------------------------------------------------------
Use: Every transaction in the system, with the receipt
     modal that also carries the ledger lines and the
     reversal action for operators who may use it.
=====================================================
--}}

@extends('layouts.admin')

@section('title', __('admin.transactions.title'))

@section('breadcrumb')
    <x-ui.breadcrumb :items="[
        ['label' => __('admin.breadcrumb.home'), 'url' => route('admin.users.index')],
        ['label' => __('admin.transactions.breadcrumb')],
    ]" />
@endsection

@section('page')
    @php $canReverse = auth('admin')->user()->allowed('transactions.reverse'); @endphp

    <div class="mb-5">
        <h1 class="mb-1 text-2xl font-bold tracking-tight">{{ __('admin.transactions.title') }}</h1>
        <p class="text-sm text-ink-muted">{{ __('admin.transactions.subtitle') }}</p>
    </div>

    <x-ui.info-box class="mb-5">
        {{ __('admin.transactions.info') }}
    </x-ui.info-box>

    <div class="rounded-2xl border border-line bg-white p-5" x-data="txReceipt()">
        <div class="mb-4.5 flex flex-wrap items-center justify-between gap-3.5">
            <div class="inline-flex flex-wrap gap-0.5 rounded-xl bg-[#f2f0fa] p-1">
                @foreach (__('admin.transactions.filters') as $key => $label)
                    <a href="{{ route('admin.transactions.index', array_filter(['status' => $key === 'all' ? null : $key, 'q' => $search ?: null])) }}"
                       @class([
                           'rounded-[9px] px-4 py-2 text-[13px] font-bold transition',
                           'bg-white text-primary-600 shadow-sm' => $status === $key,
                           'text-ink-muted hover:text-primary-600' => $status !== $key,
                       ])>{{ $label }}</a>
                @endforeach
            </div>

            <form method="GET" action="{{ route('admin.transactions.index') }}" class="flex items-center rounded-[11px] border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3 transition focus-within:border-primary-600 focus-within:bg-white">
                @if ($status !== 'all')
                    <input type="hidden" name="status" value="{{ $status }}">
                @endif
                <svg class="size-4 shrink-0 text-ink-faint" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>
                <input type="text" name="q" value="{{ $search }}" placeholder="{{ __('admin.transactions.search_placeholder') }}" class="w-44 border-none bg-transparent px-2 py-2.5 text-[13px] outline-none placeholder:text-ink-faint sm:w-56">
            </form>
        </div>

        <div class="overflow-x-auto rounded-[14px] border border-[#f0eff5]">
            <table class="w-full min-w-[900px] border-collapse text-right text-[13.5px]">
                <thead>
                    <tr class="bg-[#faf9fd] text-ink-muted">
                        <th class="px-4.5 py-3.5 font-bold">{{ __('admin.transactions.columns.code') }}</th>
                        <th class="px-4.5 py-3.5 font-bold">{{ __('admin.transactions.columns.description') }}</th>
                        <th class="px-4.5 py-3.5 font-bold">{{ __('admin.transactions.columns.order') }}</th>
                        <th class="px-4.5 py-3.5 font-bold">{{ __('admin.transactions.columns.user') }}</th>
                        <th class="px-4.5 py-3.5 font-bold">{{ __('admin.transactions.columns.shop') }}</th>
                        <th class="px-4.5 py-3.5 font-bold">{{ __('admin.transactions.columns.type') }}</th>
                        <th class="px-4.5 py-3.5 font-bold">{{ __('admin.transactions.columns.amount') }}</th>
                        <th class="px-4.5 py-3.5 font-bold">{{ __('admin.transactions.columns.date') }}</th>
                        <th class="px-4.5 py-3.5 font-bold">{{ __('admin.transactions.columns.status') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($transactions as $transaction)
                        @php
                            $incoming = $transaction->isIncoming();
                            $description = $transaction->describe('front.transactions.order_description', 'admin.wallet_reasons');
                            $payload = [
                                'title' => $description,
                                'code' => \App\Support\Format::persianDigits($transaction->code),
                                'type' => __("admin.transactions.types.{$transaction->type}"),
                                'orderCode' => $transaction->order?->code,
                                'orderUrl' => $transaction->order ? route('admin.orders.index', ['q' => $transaction->order->code]) : null,
                                'date' => \App\Support\Format::jalaliDateTimeFa($transaction->created_at),
                                'amount' => ($incoming ? '+' : '−').\App\Support\Format::tomanFa($transaction->amount),
                                'status' => __("admin.transactions.statuses.{$transaction->status}"),
                                'successful' => $transaction->isSuccessful(),
                                'reversed' => $transaction->isReversed(),
                                'reversedBy' => $transaction->isReversed() ? ($transaction->admin?->name ?? '') : '',
                                'actor' => (! $transaction->isReversed() && $transaction->admin) ? __('admin.transactions.by_actor', ['name' => $transaction->admin->name]) : '',
                                'reversible' => $canReverse && $reversals->reversible($transaction),
                                'reverseUrl' => route('admin.transactions.reverse', $transaction),
                                'entries' => $transaction->entries->map(fn ($entry) => [
                                    'label' => $entry->reasonLabel('admin.wallet_reasons'),
                                    'amount' => ($entry->isCredit() ? '+' : '−').\App\Support\Format::tomanFa($entry->amount),
                                    'incoming' => $entry->isCredit(),
                                    'balance' => \App\Support\Format::tomanFa($entry->balance_after),
                                ])->values(),
                            ];
                        @endphp
                        <tr class="cursor-pointer border-t border-[#f0eff5] transition hover:bg-[#faf9fd]" x-on:click='open(@json($payload))'>
                            <td class="px-4.5 py-3.5 text-right! text-ink-soft" dir="ltr">@fa($transaction->code)</td>
                            <td class="px-4.5 py-3.5 font-bold">
                                {{ $transaction->primaryEntry()?->reasonLabel('admin.wallet_reasons') ?? __('admin.wallet_reasons.other') }}
                                @if ($transaction->primaryEntry()?->bucket === \App\Models\WalletEntry::BUCKET_INSTALLMENT)
                                    {{-- Installment-bucket movements carry this badge everywhere. --}}
                                    <span class="mr-1 rounded-md bg-[#efeafb] px-1.5 py-0.5 text-[10.5px] font-normal text-primary-600">{{ __('admin.users.wallet.bucket_installment') }}</span>
                                @endif
                                @if (! $transaction->isReversed() && $transaction->admin)
                                    {{-- Operator-made action: name the operator so misuse is traceable. --}}
                                    <div class="mt-0.5 text-[11px] font-normal text-ink-faint">{{ __('admin.transactions.by_actor', ['name' => $transaction->admin->name]) }}</div>
                                @endif
                            </td>
                            <td class="px-4.5 py-3.5">
                                @if ($transaction->order)
                                    <span class="font-bold text-primary-600" dir="ltr">{{ $transaction->order->code }}</span>
                                @else
                                    <span class="text-ink-faint">&mdash;</span>
                                @endif
                            </td>
                            <td class="px-4.5 py-3.5">
                                @if ($transaction->user)
                                    <a href="{{ route('admin.users.show', $transaction->user) }}" target="_blank" class="font-bold transition hover:text-primary-600" x-on:click.stop>{{ $transaction->user->fullName() }}</a>
                                @else
                                    <span class="text-ink-faint">&mdash;</span>
                                @endif
                            </td>
                            <td class="px-4.5 py-3.5 text-ink-soft">{{ $transaction->shop?->name ?? '—' }}</td>
                            <td class="px-4.5 py-3.5">
                                <x-ui.type-badge :type="$transaction->type" :label="__('admin.transactions.types.'.$transaction->type)" />
                            </td>
                            <td @class([
                                'px-4.5 py-3.5 font-bold',
                                'text-green-600' => $incoming && $transaction->isSuccessful(),
                                'text-secondary-500' => ! $incoming && $transaction->isSuccessful(),
                                'text-ink-faint' => ! $transaction->isSuccessful(),
                            ])>
                                <span dir="ltr">{{ $incoming ? '+' : '−' }}@toman($transaction->amount)</span>
                                {{ __('admin.toman') }}
                            </td>
                            <td class="px-4.5 py-3.5 text-ink-soft">@jalaliDateTime($transaction->created_at)</td>
                            <td class="px-4.5 py-3.5">
                                <x-ui.status-badge :status="$transaction->status" :label="__('admin.transactions.statuses.'.$transaction->status)" />
                            </td>
                        </tr>
                    @empty
                        <tr class="border-t border-[#f0eff5]">
                            <td colspan="8" class="px-4.5 py-10 text-center text-sm text-ink-muted">{{ __('admin.transactions.empty') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if ($transactions->hasPages())
            <div class="mt-4.5">{{ $transactions->links() }}</div>
        @endif

        {{-- ===== Receipt + ledger ===== --}}
        <template x-teleport="body">
            <div x-cloak x-show="shown" x-transition.opacity x-on:keydown.escape.window="close()"
                 class="fixed inset-0 z-modal flex items-center justify-center bg-ink/60 p-4" x-on:click.self="close()">
                <div class="flex max-h-[88vh] w-full max-w-[460px] flex-col overflow-hidden rounded-[22px] bg-white shadow-2xl" x-show="shown" x-transition.scale.origin.center>
                    <div class="flex items-center justify-between gap-3 border-b border-line px-6 py-5">
                        <div>
                            <h3 class="text-[17px] font-bold">{{ __('admin.transactions.receipt_title') }}</h3>
                            <p class="mt-0.5 text-right! text-[12.5px] text-ink-faint" dir="ltr" x-text="data.code"></p>
                        </div>
                        <button type="button" class="flex size-8 items-center justify-center rounded-[9px] bg-[#f2f0fa] text-ink-soft transition hover:bg-[#e8e3f8]" x-on:click="close()" aria-label="{{ __('admin.actions.close') }}">
                            <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>
                        </button>
                    </div>

                    <div class="overflow-y-auto px-6 py-5">
                        <div class="mb-4 rounded-[14px] bg-[#faf9fd] p-4 text-center">
                            <div class="text-[13px] font-bold" x-text="data.title"></div>
                            <div class="mt-1 text-[11.5px] text-ink-faint" x-show="data.actor" x-cloak x-text="data.actor"></div>
                            <div class="mt-2 text-[22px] font-bold" x-bind:class="data.successful ? '' : 'text-ink-faint'">
                                <span dir="ltr" x-text="data.amount"></span>
                                <span class="text-xs font-normal text-ink-faint">{{ __('admin.toman') }}</span>
                            </div>
                            <div class="mt-2">
                                <span class="rounded-2xl px-2.5 py-1.5 text-xs font-bold"
                                      x-bind:class="data.successful ? 'bg-[#e7f7ee] text-green-600' : (data.reversed ? 'bg-[#f1f0f5] text-ink-muted' : 'bg-secondary-50 text-secondary-500')"
                                      x-text="data.status"></span>
                            </div>
                        </div>

                        {{-- Says out loud that this one was walked back, and by whom. --}}
                        <div class="mb-4 flex gap-2.5 rounded-xl border border-[#e6e4ee] bg-[#faf9fd] px-3.5 py-3" x-show="data.reversed" x-cloak>
                            <svg class="mt-0.5 size-4 shrink-0 text-ink-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 14 4 9l5-5"/><path d="M4 9h11a5 5 0 0 1 0 10h-1"/></svg>
                            <span class="text-[12px] leading-6 text-ink-soft">
                                {{ __('admin.transactions.reversed_note') }}
                                <span x-show="data.reversedBy" x-cloak>
                                    &mdash; {{ __('admin.transactions.reversed_by') }}: <span class="font-bold" x-text="data.reversedBy"></span>
                                </span>
                            </span>
                        </div>

                        <div class="mb-4 flex flex-col gap-2.5">
                            <div class="flex items-center justify-between">
                                <span class="text-[12.5px] text-ink-faint">{{ __('admin.transactions.columns.type') }}</span>
                                <span class="text-[13px] font-bold" x-text="data.type"></span>
                            </div>
                            {{-- Order id (for order-linked transactions), linked to the
                                 orders page filtered to this order. --}}
                            <template x-if="data.orderCode">
                                <div class="flex items-center justify-between border-t border-[#f5f4f9] pt-2.5">
                                    <span class="text-[12.5px] text-ink-faint">{{ __('admin.transactions.columns.order') }}</span>
                                    <a x-bind:href="data.orderUrl" target="_blank" class="text-[13px] font-bold text-primary-600 underline underline-offset-[3px] transition hover:text-primary-700" dir="ltr" x-text="data.orderCode"></a>
                                </div>
                            </template>
                            <div class="flex items-center justify-between border-t border-[#f5f4f9] pt-2.5">
                                <span class="text-[12.5px] text-ink-faint">{{ __('admin.transactions.columns.date') }}</span>
                                <span class="text-[13px] font-bold" x-text="data.date"></span>
                            </div>
                        </div>

                        <div class="mb-2 text-[12.5px] font-bold text-ink-muted">{{ __('admin.transactions.ledger') }}</div>
                        <p class="text-xs text-ink-faint" x-show="! data.entries || data.entries.length === 0">{{ __('admin.transactions.no_ledger') }}</p>
                        <div class="flex flex-col gap-2">
                            <template x-for="(entry, index) in data.entries" :key="index">
                                <div class="flex items-center justify-between rounded-xl border border-[#f0eff5] px-3.5 py-2.5">
                                    <span class="text-[12.5px] font-bold" x-text="entry.label"></span>
                                    <span class="text-[12.5px] font-bold" dir="ltr"
                                          x-bind:class="entry.incoming ? 'text-green-600' : 'text-secondary-500'"
                                          x-text="entry.amount"></span>
                                </div>
                            </template>
                        </div>
                    </div>

                    <div class="border-t border-line px-6 py-4" x-show="data.reversible" x-cloak>
                        <form method="POST" x-bind:action="data.reverseUrl" x-ref="reverseForm" x-data="{ busy: false }"
                              x-on:submit.prevent="$store.confirm.ask({ message: @js(__('admin.transactions.confirm_reverse')), onConfirm: () => { busy = true; $refs.reverseForm.submit(); } })">
                            @csrf
                            <button type="submit" x-bind:disabled="busy"
                                    class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-secondary-50 py-3 text-sm font-bold text-secondary-500 transition hover:bg-[#fbd5d9] disabled:cursor-not-allowed disabled:opacity-60">
                                <span x-show="busy" x-cloak class="size-4 animate-spin rounded-full border-2 border-secondary-500/30 border-t-secondary-500"></span>
                                {{ __('admin.transactions.reverse') }}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </template>
    </div>
@endsection