{{--
=====================================================
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 wallet, from the approved design: the
     balance banner, the ledger with its in/out filter,
     the withdrawal modal and the recent requests.
=====================================================
--}}

@extends('layouts.user')

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

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

@section('page')
    @php
        $accountOptions = $accounts->map(fn ($account) => [
            'id' => $account->id,
            'bank' => $account->bankName(),
            'card' => \App\Support\Format::persianDigits($account->maskedCard()),
            'isDefault' => $account->is_default,
        ])->values();
    @endphp

    @php
        $walletConfig = [
            'balance' => $withdrawable,
            'minimum' => $minimum,
            'topupMinimum' => 1000,
            'accounts' => $accountOptions,
            'blocked' => $pendingWithdrawal !== null,
            'strings' => [
                'confirmWithdraw' => __('front.wallet.withdraw_confirm'),
                'confirmTopup' => __('front.wallet.topup_confirm'),
            ],
        ];
    @endphp

    <div x-data="walletPage(@js($walletConfig))">
        <div class="mb-[22px]">
            <h1 class="mb-1 text-2xl font-bold tracking-tight">{{ $showSwitcher ? __('front.wallet.title_personal') : __('front.wallet.title') }}</h1>
            <p class="text-sm text-ink-muted">{{ $showSwitcher ? __('front.wallet.subtitle_personal') : __('front.wallet.subtitle') }}</p>
        </div>

        @if ($showSwitcher)
            <x-wallet.switcher
                active="personal"
                :personal-url="route('account.wallet')"
                :shop-url="route('account.shop.wallet')"
                :personal-amount="$cashBalance"
                :shop-amount="$shopBalance" />
        @endif

        {{-- ===== Balance banner + actions ===== --}}
        <div class="mb-[22px] grid gap-5 lg:grid-cols-[1.3fr_1fr]">
            <div class="relative overflow-hidden rounded-[20px] bg-gradient-to-bl from-[#5e42be] to-[#3f2a8f] p-[26px] text-white">
                <span class="absolute -top-12 left-[-30px] size-[180px] rounded-full bg-white/10" aria-hidden="true"></span>
                <span class="absolute -bottom-16 right-[-20px] size-40 rounded-full bg-secondary-500/15" aria-hidden="true"></span>

                <div class="relative">
                    <div class="mb-2 text-[13px] opacity-85">{{ __('front.wallet.cash_balance') }}</div>
                    <div class="text-[34px] font-bold tracking-tight">
                        @toman($cashBalance)
                        <span class="text-[15px] font-normal opacity-80">{{ __('front.wallet.toman') }}</span>
                    </div>

                    <div class="mt-[22px] flex flex-wrap gap-6">
                        <div>
                            <div class="mb-1 text-[11.5px] opacity-75">{{ __('front.wallet.credited_total') }}</div>
                            <div class="text-base font-bold">@toman($creditedTotal)</div>
                        </div>
                        <span class="w-px bg-white/20" aria-hidden="true"></span>
                        <div>
                            <div class="mb-1 text-[11.5px] opacity-75">{{ __('front.wallet.spent_total') }}</div>
                            <div class="text-base font-bold">@toman($spentTotal)</div>
                        </div>
                        <span class="w-px bg-white/20" aria-hidden="true"></span>
                        <div>
                            <div class="mb-1 text-[11.5px] opacity-75">{{ __('front.wallet.withdrawn_total') }}</div>
                            <div class="text-base font-bold">@toman($withdrawnTotal)</div>
                        </div>
                        @if ($installmentBalance > 0)
                            <span class="w-px bg-white/20" aria-hidden="true"></span>
                            <div>
                                <div class="mb-1 text-[11.5px] opacity-75">{{ __('front.wallet.installment_balance') }}</div>
                                <div class="text-base font-bold">@toman($installmentBalance)</div>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <div class="flex flex-col justify-center gap-3 rounded-[20px] border border-line bg-white p-6">
                <button type="button" x-on:click="openWithdraw()"
                        class="inline-flex items-center justify-center gap-2.5 rounded-[13px] bg-primary-600 p-3.5 text-[14.5px] font-bold text-white shadow-lg shadow-primary-600/25 transition hover:bg-primary-700">
                    <svg class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7 7 7-7"/></svg>
                    {{ __('front.wallet.withdraw') }}
                </button>

                <button type="button" x-on:click="openTopup()"
                        class="inline-flex w-full items-center justify-center gap-2.5 rounded-[13px] bg-[#f2f0fa] p-3.5 text-[14.5px] font-bold text-primary-600 transition hover:bg-[#e8e3f8]">
                    <svg class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                    {{ __('front.wallet.topup') }}
                </button>

                @if ($installmentBalance > 0)
                    <p class="text-center text-[11.5px] leading-6 text-ink-faint">{{ __('front.wallet.installment_note') }}</p>
                @endif
            </div>
        </div>

        {{-- ===== Ledger ===== --}}
        <div class="rounded-[18px] border border-line bg-white p-[22px]">
            <div class="mb-[18px] flex flex-wrap items-center justify-between gap-3.5">
                <div class="text-base font-bold">{{ __('front.wallet.ledger') }}</div>

                <div class="inline-flex gap-0.5 rounded-xl bg-[#f2f0fa] p-1">
                    @foreach (__('front.wallet.directions') as $key => $label)
                        <a href="{{ route('account.wallet', $key === 'all' ? [] : ['direction' => $key]) }}"
                           @class([
                               'rounded-[9px] px-4 py-2 text-[13px] font-bold transition',
                               'bg-white text-primary-600 shadow-sm' => $direction === $key,
                               'text-ink-muted hover:text-primary-600' => $direction !== $key,
                           ])>{{ $label }}</a>
                    @endforeach
                </div>
            </div>

            <div class="overflow-x-auto rounded-[14px] border border-[#f0eff5]">
                <table class="w-full min-w-[640px] 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.wallet.columns.reason') }}</th>
                            <th class="px-[18px] py-3.5 font-bold">{{ __('front.wallet.columns.bucket') }}</th>
                            <th class="px-[18px] py-3.5 font-bold">{{ __('front.wallet.columns.date') }}</th>
                            <th class="px-[18px] py-3.5 font-bold">{{ __('front.wallet.columns.amount') }}</th>
                            <th class="px-[18px] py-3.5 font-bold">{{ __('front.wallet.columns.balance') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($entries as $entry)
                            @php $incoming = $entry->isCredit(); @endphp
                            <tr class="border-t border-[#f0eff5]">
                                <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-secondary-50 text-secondary-500' => ! $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">{{ $entry->reasonLabel('front.credit.reasons') }}</span>
                                    </div>
                                </td>
                                <td class="px-[18px] py-3.5 text-ink-soft">{{ __("front.transactions.buckets.{$entry->bucket}") }}</td>
                                <td class="px-[18px] py-3.5 text-ink-soft">@jalaliDateTime($entry->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($entry->amount)</span>
                                    {{ __('front.wallet.toman') }}
                                </td>
                                <td class="px-[18px] py-3.5 text-ink-soft">@toman($entry->balance_after) {{ __('front.wallet.toman') }}</td>
                            </tr>
                        @empty
                            <tr class="border-t border-[#f0eff5]">
                                <td colspan="5" class="px-[18px] py-10 text-center text-sm text-ink-muted">
                                    {{ $direction === 'all'
                                        ? __('front.wallet.empty')
                                        : __("front.wallet.empty_{$direction}") }}
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

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

        {{-- ===== Withdrawal requests ===== --}}
        <div class="mt-5 rounded-[18px] border border-line bg-white p-[22px]">
            <div class="mb-[18px] text-base font-bold">{{ __('front.wallet.withdrawals') }}</div>

            <div class="overflow-x-auto rounded-[14px] border border-[#f0eff5]">
                <table class="w-full min-w-[640px] 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.wallet.withdrawal_columns.code') }}</th>
                            <th class="px-[18px] py-3.5 font-bold">{{ __('front.wallet.withdrawal_columns.account') }}</th>
                            <th class="px-[18px] py-3.5 font-bold">{{ __('front.wallet.withdrawal_columns.amount') }}</th>
                            <th class="px-[18px] py-3.5 font-bold">{{ __('front.wallet.withdrawal_columns.date') }}</th>
                            <th class="px-[18px] py-3.5 font-bold">{{ __('front.wallet.withdrawal_columns.status') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($withdrawals as $withdrawal)
                            <tr class="border-t border-[#f0eff5]">
                                <td class="px-[18px] py-3.5 text-right font-bold" dir="ltr">@fa($withdrawal->code)</td>
                                <td class="px-[18px] py-3.5 text-ink-soft">
                                    {{ $withdrawal->bankAccount?->bankName() }}
                                    <span class="block text-[11.5px] text-ink-faint" dir="ltr">@fa($withdrawal->bankAccount?->maskedCard())</span>
                                </td>
                                <td class="px-[18px] py-3.5 font-bold">@toman($withdrawal->amount) {{ __('front.wallet.toman') }}</td>
                                <td class="px-[18px] py-3.5 text-ink-soft">@jalaliDateTime($withdrawal->created_at)</td>
                                <td class="px-[18px] py-3.5">
                                    <span @class([
                                        'rounded-2xl px-[11px] py-[5px] text-xs font-bold',
                                        'bg-[#fff5e6] text-amber-600' => $withdrawal->status === \App\Models\Withdrawal::STATUS_PENDING,
                                        'bg-[#eef0fb] text-primary-600' => $withdrawal->status === \App\Models\Withdrawal::STATUS_APPROVED,
                                        'bg-[#e7f7ee] text-green-600' => $withdrawal->status === \App\Models\Withdrawal::STATUS_SETTLED,
                                        'bg-secondary-50 text-secondary-500' => $withdrawal->status === \App\Models\Withdrawal::STATUS_REJECTED,
                                    ])>{{ __("front.wallet.withdrawal_statuses.{$withdrawal->status}") }}</span>

                                    @if ($withdrawal->reference !== null)
                                        <span class="mt-1 block text-[11px] text-ink-faint" dir="ltr">
                                            {{ __('front.wallet.withdrawal_reference') }}: @fa($withdrawal->reference)
                                        </span>
                                    @endif
                                    @if ($withdrawal->reject_reason !== null)
                                        <span class="mt-1 block text-[11px] text-secondary-500">
                                            {{ __('front.wallet.withdrawal_reject_reason') }}: {{ $withdrawal->reject_reason }}
                                        </span>
                                    @endif
                                </td>
                            </tr>
                        @empty
                            <tr class="border-t border-[#f0eff5]">
                                <td colspan="5" class="px-[18px] py-10 text-center text-sm text-ink-muted">{{ __('front.wallet.withdrawals_empty') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        {{-- ===== Withdrawal modal ===== --}}
        <template x-teleport="body">
            <div x-cloak x-show="withdrawOpen" x-transition.opacity x-on:keydown.escape.window="withdrawOpen = false"
                 class="fixed inset-0 z-modal flex items-center justify-center bg-ink/45 p-5 backdrop-blur-[2px]" x-on:click.self="withdrawOpen = false">
                <div class="w-full max-w-[420px] rounded-[22px] bg-white p-7 shadow-2xl" x-show="withdrawOpen" x-transition.scale.origin.center>
                    <div class="mb-5 flex items-center gap-3">
                        <span class="flex size-[46px] items-center justify-center rounded-[13px] bg-[#efeafb] text-primary-600">
                            <svg class="size-[23px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M5 12l7 7 7-7"/></svg>
                        </span>
                        <div>
                            <h3 class="text-lg font-bold">{{ __('front.wallet.withdraw_title') }}</h3>
                            <p class="mt-0.5 text-[12.5px] text-ink-faint">
                                {{ __('front.wallet.withdraw_available', ['amount' => \App\Support\Format::persianDigits(\App\Support\Format::tomanFa($withdrawable))]) }}
                            </p>
                        </div>
                    </div>

                    @if ($pendingWithdrawal !== null)
                        <p class="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-[13px] leading-7 text-amber-700">
                            {{ __('front.wallet.withdraw_already_pending') }}
                        </p>
                    @elseif ($accounts->isEmpty())
                        <p class="rounded-xl border border-[#e4ddf7] bg-[#f3f0fb] px-4 py-3 text-[13px] leading-7 text-ink-soft">
                            {{ __('front.wallet.withdraw_no_accounts') }}
                        </p>
                    @endif

                    <form method="POST" action="{{ route('account.wallet.withdraw') }}" id="withdraw-form"
                          x-on:submit.prevent="submitWithdraw()">
                        @csrf
                        <input type="hidden" name="amount" x-bind:value="amount">
                        <input type="hidden" name="bank_account_id" x-bind:value="accountId">

                        <label for="withdraw-amount" class="mt-4 block text-[13px] font-bold">{{ __('front.wallet.withdraw_amount_label') }}</label>
                        <input id="withdraw-amount" type="text" inputmode="numeric" dir="ltr"
                               x-model="amountText" x-on:input="onAmount($event)"
                               placeholder="{{ __('front.wallet.withdraw_amount_placeholder', ['amount' => \App\Support\Format::persianDigits(\App\Support\Format::tomanFa($minimum))]) }}"
                               class="mt-2 w-full rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-3 text-left text-base font-bold outline-none transition focus:border-primary-600 focus:bg-white">

                        <div class="mt-2 flex items-center justify-between gap-3">
                            <span class="text-xs text-secondary-500" x-show="amountError" x-cloak>
                                {{ __('front.wallet.withdraw_min_hint', ['amount' => \App\Support\Format::persianDigits(\App\Support\Format::tomanFa($minimum))]) }}
                            </span>
                            <button type="button" x-on:click="useMax()"
                                    class="mr-auto rounded-[9px] bg-[#f2f0fa] px-3 py-1.5 text-xs font-bold text-primary-600 transition hover:bg-[#e8e3f8]">
                                {{ __('front.wallet.withdraw_max') }}
                            </button>
                        </div>

                        <div class="mt-4">
                            <div class="mb-2 text-[12.5px] text-ink-faint">{{ __('front.wallet.withdraw_destination') }}</div>

                            <div class="flex flex-col gap-2">
                                <template x-for="account in accounts" :key="account.id">
                                    <button type="button" x-on:click="accountId = account.id"
                                            class="flex items-center justify-between gap-3 rounded-xl border-[1.5px] p-3 text-right transition"
                                            x-bind:class="accountId === account.id ? 'border-primary-600 bg-[#faf9ff]' : 'border-[#e3e1ec] bg-white hover:border-primary-600/40'">
                                        <span class="flex items-center gap-2.5">
                                            <span class="flex size-4 items-center justify-center rounded-full border-2"
                                                  x-bind:class="accountId === account.id ? 'border-primary-600' : 'border-[#d5d3e0]'">
                                                <span class="size-2 rounded-full bg-primary-600" x-show="accountId === account.id"></span>
                                            </span>
                                            <span>
                                                <span class="block text-[13px] font-bold" x-text="account.bank"></span>
                                                <span class="block text-[11.5px] text-ink-faint" dir="ltr" x-text="account.card"></span>
                                            </span>
                                        </span>
                                        <span class="rounded-xl bg-[#efeafb] px-2.5 py-1 text-[11px] font-bold text-primary-600" x-show="account.isDefault" x-cloak>
                                            {{ __('front.bank_accounts.default') }}
                                        </span>
                                    </button>
                                </template>

                                {{-- Opens the shared add-account dialog in place, so the
                                     user never loses the withdrawal they were filling in. --}}
                                <button type="button" x-on:click="withdrawOpen = false; $dispatch('open-add-account')"
                                        class="flex items-center justify-center gap-2 py-1.5 text-[12.5px] font-bold text-primary-600">
                                    <svg class="size-[15px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                                    <span x-show="accounts.length === 0">{{ __('front.wallet.withdraw_add_account') }}</span>
                                    <span x-show="accounts.length > 0" x-cloak>{{ __('front.wallet.withdraw_other_account') }}</span>
                                </button>
                            </div>
                        </div>

                        <div class="mt-5 flex gap-2.5">
                            <button type="button" x-on:click="withdrawOpen = false"
                                    class="flex-1 rounded-xl bg-[#f2f0fa] p-3 text-sm font-bold text-ink-soft transition hover:bg-[#e8e3f8]">
                                {{ __('front.bank_accounts.cancel') }}
                            </button>
                            <button type="submit" x-bind:disabled="! canWithdraw() || busy"
                                    class="flex-1 rounded-xl bg-primary-600 p-3 text-sm font-bold text-white shadow-lg shadow-primary-600/25 transition hover:bg-primary-700 disabled:cursor-not-allowed disabled:bg-[#c9c3e0] disabled:shadow-none">
                                {{ __('front.wallet.withdraw_submit') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </template>

        {{-- ===== Top-up modal ===== --}}
        <template x-teleport="body">
            <div x-cloak x-show="topupOpen" x-transition.opacity x-on:keydown.escape.window="topupOpen = false"
                 class="fixed inset-0 z-modal flex items-center justify-center bg-ink/45 p-5 backdrop-blur-[2px]" x-on:click.self="topupOpen = false">
                <div class="w-full max-w-[420px] rounded-[22px] bg-white p-7 shadow-2xl" x-show="topupOpen" x-transition.scale.origin.center>
                    <div class="mb-5 flex items-center gap-3">
                        <span class="flex size-[46px] items-center justify-center rounded-[13px] bg-[#e7f7ee] text-green-600">
                            <svg class="size-[23px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                        </span>
                        <div>
                            <h3 class="text-lg font-bold">{{ __('front.wallet.topup_title') }}</h3>
                            <p class="mt-0.5 text-[12.5px] text-ink-faint">{{ __('front.wallet.topup_subtitle') }}</p>
                        </div>
                    </div>

                    <form method="POST" action="{{ route('account.wallet.topup') }}" id="topup-form"
                          x-on:submit.prevent="submitTopup()">
                        @csrf
                        <input type="hidden" name="amount" x-bind:value="topupAmount">

                        <label for="topup-amount" class="block text-[13px] font-bold">{{ __('front.wallet.topup_amount_label') }}</label>
                        <input id="topup-amount" type="text" inputmode="numeric" dir="ltr"
                               x-model="topupText" x-on:input="onTopupAmount($event)"
                               placeholder="{{ __('front.wallet.topup_placeholder', ['amount' => \App\Support\Format::persianDigits(\App\Support\Format::tomanFa(1000))]) }}"
                               class="mt-2 w-full rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-3 text-left text-base font-bold outline-none transition focus:border-primary-600 focus:bg-white">

                        <p class="mt-2 text-xs text-secondary-500" x-show="topupError" x-cloak>
                            {{ __('front.wallet.topup_min_hint', ['amount' => \App\Support\Format::persianDigits(\App\Support\Format::tomanFa(1000))]) }}
                        </p>

                        <div class="mt-5 flex gap-2.5">
                            <button type="button" x-on:click="topupOpen = false"
                                    class="flex-1 rounded-xl bg-[#f2f0fa] p-3 text-sm font-bold text-ink-soft transition hover:bg-[#e8e3f8]">
                                {{ __('front.bank_accounts.cancel') }}
                            </button>
                            <button type="submit" x-bind:disabled="! canTopup() || busy"
                                    class="flex-1 rounded-xl bg-primary-600 p-3 text-sm font-bold text-white shadow-lg shadow-primary-600/25 transition hover:bg-primary-700 disabled:cursor-not-allowed disabled:bg-[#c9c3e0] disabled:shadow-none">
                                {{ __('front.wallet.topup_submit') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </template>

        {{-- Shared add-account dialog: opened from the withdraw modal's
             "add another account" link via the open-add-account event. --}}
        @include('account.bank-accounts._add-modal')
    </div>
@endsection