{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: index.blade.php
------------------------------------------------------
Use: The user's transaction history from the approved
     design: type filters, search, and a printable
     receipt for any row.
=====================================================
--}}

@extends('layouts.user')

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

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

@section('page')
    <div class="mb-[22px]">
        <h1 class="mb-1 text-2xl font-bold tracking-tight">{{ __('front.transactions.title') }}</h1>
        <p class="text-sm text-ink-muted">{{ __('front.transactions.subtitle') }}</p>
    </div>

    <div class="rounded-[18px] border border-line bg-white p-[22px]" x-data="txReceipt()">
        <div class="mb-[18px] 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 (__('front.transactions.filters') as $key => $label)
                    <a href="{{ route('account.transactions', array_filter(['type' => $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' => $type === $key,
                           'text-ink-muted hover:text-primary-600' => $type !== $key,
                       ])>{{ $label }}</a>
                @endforeach
            </div>

            <form method="GET" action="{{ route('account.transactions') }}" 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 ($type !== 'all')
                    <input type="hidden" name="type" value="{{ $type }}">
                @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="{{ __('front.transactions.search_placeholder') }}" class="w-40 border-none bg-transparent px-2 py-2.5 text-[13px] outline-none placeholder:text-ink-faint sm:w-48">
            </form>
        </div>

        <div class="overflow-x-auto rounded-[14px] border border-[#f0eff5]">
            <table class="w-full min-w-[720px] border-collapse text-right text-[13.5px]">
                <thead>
                    <tr class="bg-[#faf9fd] text-ink-muted">
                        <th class="px-[18px] py-3.5 font-bold">{{ __('front.transactions.columns.description') }}</th>
                        <th class="px-[18px] py-3.5 font-bold">{{ __('front.transactions.columns.code') }}</th>
                        <th class="px-[18px] py-3.5 font-bold">{{ __('front.transactions.columns.type') }}</th>
                        <th class="px-[18px] py-3.5 font-bold">{{ __('front.transactions.columns.date') }}</th>
                        <th class="px-[18px] py-3.5 font-bold">{{ __('front.transactions.columns.amount') }}</th>
                        <th class="px-[18px] py-3.5 font-bold">{{ __('front.transactions.columns.status') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($transactions as $transaction)
                        @php
                            $incoming = $transaction->isIncoming();
                            $description = $transaction->describe('front.transactions.order_description', 'front.credit.reasons');
                            $typeLabel = __("front.transactions.types.{$transaction->type}");

                            $entry = $transaction->primaryEntry();

                            $payload = [
                                'title' => $description,
                                'code' => \App\Support\Format::persianDigits($transaction->code),
                                'type' => $typeLabel,
                                'date' => \App\Support\Format::jalaliDateTimeFa($transaction->created_at),
                                'amount' => ($incoming ? '+' : '−').\App\Support\Format::tomanFa($transaction->amount),
                                'status' => __("front.transactions.statuses.{$transaction->status}"),
                                'successful' => $transaction->isSuccessful(),
                                // The printed receipt carries everything the
                                // user could be asked for by support.
                                'holder' => auth()->user()->fullName(),
                                'mobile' => \App\Support\Format::persianDigits(auth()->user()->mobile),
                                'reason' => $entry?->reasonLabel('front.credit.reasons') ?? '',
                                'order' => $transaction->order?->code ?? '',
                                'shop' => $transaction->order?->shop->name ?? ($transaction->shop?->name ?? ''),
                                'reference' => \App\Support\Format::persianDigits(
                                    $transaction->external_reference ?? $transaction->order?->reference_id ?? ''
                                ),
                                'bucket' => $entry === null ? '' : __("front.transactions.buckets.{$entry->bucket}"),
                                'balance' => $entry === null ? '' : \App\Support\Format::tomanFa($entry->balance_after),
                            ];
                        @endphp
                        <tr class="cursor-pointer border-t border-[#f0eff5] transition hover:bg-[#faf9fd]" x-on:click='open(@json($payload))'>
                            <td class="px-[18px] py-3.5">
                                <div class="flex items-center gap-2.5">
                                    <span @class([
                                        'flex size-[34px] shrink-0 items-center justify-center rounded-[10px]',
                                        'bg-[#e7f7ee] text-green-600' => $incoming,
                                        'bg-[#efeafb] text-primary-600' => ! $incoming,
                                    ])>
                                        @if ($incoming)
                                            <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12l7 7 7-7"/></svg>
                                        @else
                                            <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7-7 7 7"/></svg>
                                        @endif
                                    </span>
                                    <span class="font-bold">{{ $description }}</span>
                                </div>
                            </td>
                            <td class="px-[18px] py-3.5 text-right text-ink-soft" dir="ltr">@fa($transaction->code)</td>
                            <td class="px-[18px] py-3.5">
                                <x-ui.type-badge :type="$transaction->type" :label="$typeLabel" />
                            </td>
                            <td class="px-[18px] py-3.5 text-ink-soft">@jalaliDateTime($transaction->created_at)</td>
                            <td @class([
                                'px-[18px] py-3.5 font-bold',
                                'text-green-600' => $incoming,
                                'text-secondary-500' => ! $incoming,
                            ])>
                                <span dir="ltr">{{ $incoming ? '+' : '−' }}@toman($transaction->amount)</span>
                                {{ __('front.transactions.toman') }}
                            </td>
                            <td class="px-[18px] py-3.5">
                                <x-ui.status-badge :status="$transaction->status" :label="__('front.transactions.statuses.'.$transaction->status)" />
                            </td>
                        </tr>
                    @empty
                        <tr class="border-t border-[#f0eff5]">
                            <td colspan="6" class="px-[18px] py-10 text-center text-sm text-ink-muted">{{ __('front.transactions.empty') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

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

        {{-- ===== Receipt ===== --}}
        <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/45 p-5 backdrop-blur-[2px]" x-on:click.self="close()">
                <div class="flex max-h-[90vh] w-full max-w-[380px] flex-col overflow-hidden rounded-[20px] bg-white shadow-2xl print:max-h-none print:block" x-show="shown" x-transition.scale.origin.center data-print-area>
                    <div class="flex shrink-0 items-center justify-between bg-gradient-to-bl from-[#5e42be] to-[#3f2a8f] px-6 py-[22px] text-white">
                        <div class="flex items-center gap-2.5">
                            <span class="flex size-9 items-center justify-center rounded-[10px] bg-white/15">
                                <svg class="size-[19px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="5.5" width="19" height="13" rx="2.5"/><line x1="2.5" y1="9.5" x2="21.5" y2="9.5"/></svg>
                            </span>
                            <span class="text-[15px] font-bold">{{ __('front.app.name') }} &mdash; {{ __('front.transactions.receipt_title') }}</span>
                        </div>
                        <button type="button" class="flex size-[30px] items-center justify-center rounded-[9px] bg-white/15" x-on:click="close()" aria-label="{{ __('front.transactions.close') }}" data-print-hide>
                            <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>

                    {{-- Scrollable body: a long receipt scrolls inside the modal,
                         while printing expands it fully (print: variants). --}}
                    <div class="flex-1 overflow-y-auto print:max-h-none print:overflow-visible">
                    <div class="border-b border-dashed border-[#e6e4ee] px-6 py-[26px] text-center">
                        <span class="mx-auto mb-3.5 flex size-16 items-center justify-center rounded-full"
                              x-bind:class="data.successful ? 'bg-[#e7f7ee] text-green-600' : 'bg-secondary-50 text-secondary-500'">
                            <svg x-show="data.successful" class="size-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
                            <svg x-show="! data.successful" x-cloak class="size-8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="7" x2="17" y2="17"/><line x1="17" y1="7" x2="7" y2="17"/></svg>
                        </span>
                        <div class="text-[15px] font-bold" x-text="data.title"></div>
                        <div class="mt-2 text-2xl font-bold">
                            <span dir="ltr" x-text="data.amount"></span>
                            <span class="text-xs font-normal text-ink-faint">{{ __('front.transactions.toman') }}</span>
                        </div>
                    </div>

                    <div class="flex flex-col gap-[13px] px-6 py-5">
                        <div class="flex items-center justify-between">
                            <span class="text-[12.5px] text-ink-faint">{{ __('front.transactions.receipt_id') }}</span>
                            <span class="text-[13px] font-bold" dir="ltr" x-text="data.code"></span>
                        </div>
                        <div class="flex items-center justify-between border-t border-[#f5f4f9] pt-[13px]">
                            <span class="text-[12.5px] text-ink-faint">{{ __('front.transactions.receipt_type') }}</span>
                            <span class="text-[13px] font-bold" x-text="data.type"></span>
                        </div>
                        <div class="flex items-center justify-between border-t border-[#f5f4f9] pt-[13px]">
                            <span class="text-[12.5px] text-ink-faint">{{ __('front.transactions.receipt_date') }}</span>
                            <span class="text-[13px] font-bold" x-text="data.date"></span>
                        </div>
                        <div class="flex items-center justify-between border-t border-[#f5f4f9] pt-[13px]">
                            <span class="text-[12.5px] text-ink-faint">{{ __('front.transactions.receipt_status') }}</span>
                            <span class="text-[13px] font-bold" x-bind:class="data.successful ? 'text-green-600' : 'text-secondary-500'" x-text="data.status"></span>
                        </div>
                        <div class="flex items-center justify-between border-t border-[#f5f4f9] pt-[13px]" x-show="data.reason">
                            <span class="text-[12.5px] text-ink-faint">{{ __('front.transactions.receipt_reason') }}</span>
                            <span class="text-[13px] font-bold" x-text="data.reason"></span>
                        </div>
                        <div class="flex items-center justify-between border-t border-[#f5f4f9] pt-[13px]" x-show="data.order">
                            <span class="text-[12.5px] text-ink-faint">{{ __('front.transactions.receipt_order') }}</span>
                            <span class="text-[13px] font-bold" dir="ltr" x-text="data.order"></span>
                        </div>
                        <div class="flex items-center justify-between border-t border-[#f5f4f9] pt-[13px]" x-show="data.shop">
                            <span class="text-[12.5px] text-ink-faint">{{ __('front.transactions.receipt_shop') }}</span>
                            <span class="text-[13px] font-bold" x-text="data.shop"></span>
                        </div>
                        <div class="flex items-center justify-between border-t border-[#f5f4f9] pt-[13px]" x-show="data.reference">
                            <span class="text-[12.5px] text-ink-faint">{{ __('front.transactions.receipt_reference') }}</span>
                            <span class="text-[13px] font-bold" dir="ltr" x-text="data.reference"></span>
                        </div>
                        <div class="flex items-center justify-between border-t border-[#f5f4f9] pt-[13px]" x-show="data.bucket">
                            <span class="text-[12.5px] text-ink-faint">{{ __('front.transactions.receipt_bucket') }}</span>
                            <span class="text-[13px] font-bold" x-text="data.bucket"></span>
                        </div>
                        <div class="flex items-center justify-between border-t border-[#f5f4f9] pt-[13px]" x-show="data.balance">
                            <span class="text-[12.5px] text-ink-faint">{{ __('front.transactions.receipt_balance') }}</span>
                            <span class="text-[13px] font-bold">
                                <span dir="ltr" x-text="data.balance"></span>
                                {{ __('front.transactions.toman') }}
                            </span>
                        </div>
                        <div class="flex items-center justify-between border-t border-[#f5f4f9] pt-[13px]">
                            <span class="text-[12.5px] text-ink-faint">{{ __('front.transactions.receipt_holder') }}</span>
                            <span class="text-[13px] font-bold" x-text="data.holder"></span>
                        </div>
                        <div class="flex items-center justify-between border-t border-[#f5f4f9] pt-[13px]">
                            <span class="text-[12.5px] text-ink-faint">{{ __('front.transactions.receipt_mobile') }}</span>
                            <span class="text-[13px] font-bold" dir="ltr" x-text="data.mobile"></span>
                        </div>

                        {{-- Only on paper: when this copy was printed. --}}
                        <div class="print-only border-t border-[#f5f4f9] pt-[13px]">
                            <div class="flex items-center justify-between">
                                <span class="text-[12.5px] text-ink-faint">{{ __('front.transactions.receipt_printed_at') }}</span>
                                <span class="text-[13px] font-bold">@jalaliDateTime(now())</span>
                            </div>
                        </div>
                    </div>

                    <div class="px-6 pb-2">
                        <div class="flex items-center justify-center gap-1.5 border-t border-dashed border-[#e6e4ee] pt-3.5 text-[11.5px] text-[#b4b1c4]">
                            <svg class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v5c0 4.5-3 8-7 10-4-2-7-5.5-7-10V6z"/><path d="M9 12l2 2 4-4"/></svg>
                            {{ __('front.transactions.receipt_note') }}
                        </div>
                    </div>

                    </div>{{-- /scrollable body --}}

                    <div class="flex shrink-0 gap-2.5 px-6 pb-[22px] pt-4" data-print-hide>
                        <button type="button" x-on:click="print()"
                                class="inline-flex flex-1 items-center justify-center gap-2 rounded-xl bg-primary-600 p-3 text-sm font-bold text-white shadow-lg shadow-primary-600/25 transition hover:bg-primary-700">
                            <svg class="size-[17px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9V2h12v7"/><rect x="6" y="13" width="12" height="9"/><path d="M6 17H3v-5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v5h-3"/></svg>
                            {{ __('front.transactions.print') }}
                        </button>
                        <button type="button" x-on:click="close()" class="flex-1 rounded-xl bg-[#f2f0fa] p-3 text-sm font-bold text-primary-600 transition hover:bg-[#e8e3f8]">
                            {{ __('front.transactions.close') }}
                        </button>
                    </div>
                </div>
            </div>
        </template>
    </div>
@endsection