{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: wallet.blade.php
------------------------------------------------------
Use: The shop wallet: sales earnings net of the merchant
     fee, the settlement flow to the merchant's own bank
     account, and the shop-wallet ledger. The switcher at
     the top keeps it distinct from the personal wallet.
=====================================================
--}}

@extends('layouts.merchant')

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

@php use App\Support\Format; @endphp

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

@section('page')
    @php
        $settleStatusStyles = [
            'pending' => 'bg-[#fff5e6] text-amber-600',
            'approved' => 'bg-[#eef0fb] text-primary-600',
            'settled' => 'bg-[#e7f7ee] text-green-600',
            'rejected' => 'bg-[#f1f0f5] text-ink-muted',
        ];
        $hasAccounts = $bankAccounts->isNotEmpty();
        $canRequest = $pendingSettlement === null && $hasAccounts && $walletBalance >= $settlementMinimum;
        $defaultAccount = optional($bankAccounts->firstWhere('is_default', true) ?? $bankAccounts->first())->id;
    @endphp

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

    <div class="mt-5"></div>

    {{-- The two wallets, side by side: this one is highlighted. --}}
    <x-wallet.switcher
        active="shop"
        :personal-url="route('account.wallet')"
        :shop-url="route('account.shop.wallet')"
        :personal-amount="$personalCash"
        :shop-amount="$walletBalance" />

    {{-- What this wallet is (and is not) --}}
    <div class="mb-6 flex items-start gap-3 rounded-2xl border border-[#f6ccd1] bg-secondary-50 px-4 py-3.5">
        <svg class="mt-0.5 size-5 shrink-0 text-secondary-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><line x1="12" y1="11" x2="12" y2="16"/><circle cx="12" cy="7.5" r="0.4"/></svg>
        <p class="text-[12.5px] leading-7 text-secondary-600">{{ __('front.shop.wallet.explainer') }}</p>
    </div>

    {{-- Balance + settlement action --}}
    <div class="mb-6 grid gap-5 lg:grid-cols-[1.3fr_1fr]">
        <div class="relative overflow-hidden rounded-[20px] bg-gradient-to-bl from-secondary-500 to-[#b3242f] p-6 text-white shadow-lg shadow-secondary-500/20">
            <span class="pointer-events-none absolute -top-12 left-[-30px] size-44 rounded-full bg-white/10"></span>
            <span class="pointer-events-none absolute -bottom-16 right-[-20px] size-40 rounded-full bg-black/5"></span>
            <div class="relative">
                <div class="mb-2 text-[13px] opacity-85">{{ __('front.shop.wallet.available') }}</div>
                <div class="text-[34px] font-bold tracking-tight"><span dir="ltr">@toman($walletBalance)</span> <span class="text-[15px] font-normal opacity-80">{{ __('front.shop.toman') }}</span></div>
                @if ($canRequest)
                    <button type="button" x-on:click="$dispatch('open-settlement')"
                            class="mt-5 inline-flex items-center gap-2 rounded-xl bg-white px-5 py-2.5 text-[13px] font-bold text-secondary-500 shadow-sm transition hover:bg-white/90">
                        <svg class="size-4" 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.shop.settlement.request') }}
                    </button>
                @endif
            </div>
        </div>

        {{-- State / guidance --}}
        <div class="rounded-[20px] border border-line bg-white p-5">
            <div class="mb-3 text-[13.5px] font-bold">{{ __('front.shop.wallet.settle_title') }}</div>
            @if ($pendingSettlement)
                <div class="flex items-start gap-2.5 rounded-xl border border-[#f4dfb0] bg-[#fff8ea] px-3.5 py-3 text-[12.5px] leading-6 text-amber-700">
                    <svg class="mt-0.5 size-4 shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
                    <span>{{ __('front.shop.settlement.pending_note', ['amount' => Format::persianDigits(Format::tomanFa($pendingSettlement->amount))]) }}</span>
                </div>
            @elseif (! $hasAccounts)
                <a href="{{ route('account.bank-accounts') }}" class="flex items-start gap-2.5 rounded-xl border border-[#f6ccd1] bg-secondary-50 px-3.5 py-3 text-[12.5px] leading-6 text-secondary-600 transition hover:bg-[#fbd5d9]">
                    <svg class="mt-0.5 size-4 shrink-0" 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>{{ __('front.shop.settlement.no_account') }}</span>
                </a>
            @elseif ($walletBalance < $settlementMinimum)
                <p class="text-[12.5px] leading-6 text-ink-muted">{{ __('front.shop.settlement.below_minimum', ['min' => Format::persianDigits(Format::tomanFa($settlementMinimum))]) }}</p>
            @else
                <p class="text-[12.5px] leading-6 text-ink-muted">{{ __('front.shop.wallet.settle_hint') }}</p>
            @endif
        </div>
    </div>

    {{-- Settlement history --}}
    @if ($settlements->isNotEmpty())
        <div class="mb-6 rounded-2xl border border-line bg-white p-5.5">
            <h2 class="mb-4 text-[15px] font-bold">{{ __('front.shop.wallet.settlements_title') }}</h2>
            <div class="overflow-x-auto rounded-[14px] border border-[#f0eff5]">
                <table class="w-full min-w-[560px] border-collapse text-right text-[13px]">
                    <thead>
                        <tr class="bg-[#faf9fd] text-ink-muted">
                            <th class="px-4 py-3 font-bold">{{ __('front.shop.settlement.code') }}</th>
                            <th class="px-4 py-3 font-bold">{{ __('front.shop.settlement.amount') }}</th>
                            <th class="px-4 py-3 font-bold">{{ __('front.shop.settlement.destination') }}</th>
                            <th class="px-4 py-3 font-bold">{{ __('front.shop.settlement.status') }}</th>
                            <th class="px-4 py-3 font-bold">{{ __('front.shop.settlement.date') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($settlements as $settlement)
                            <tr class="border-t border-[#f0eff5]">
                                <td class="px-4 py-3 font-bold text-secondary-500" dir="ltr">{{ $settlement->code }}</td>
                                <td class="px-4 py-3 font-bold"><span dir="ltr">@toman($settlement->amount)</span> {{ __('front.shop.toman') }}</td>
                                <td class="px-4 py-3 text-ink-soft" dir="ltr">{{ $settlement->bankAccount?->maskedCard() ?? '—' }}</td>
                                <td class="px-4 py-3"><span @class(['inline-block rounded-lg px-2.5 py-1 text-[11.5px] font-bold', $settleStatusStyles[$settlement->status] ?? 'bg-[#f1f0f5] text-ink-muted'])>{{ __('front.shop.settlement.statuses.'.$settlement->status) }}</span></td>
                                <td class="px-4 py-3 text-ink-soft">@jalaliDateTime($settlement->created_at)</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif

    {{-- Shop wallet ledger --}}
    <div class="rounded-2xl border border-line bg-white p-5.5">
        <h2 class="mb-1 text-[15px] font-bold">{{ __('front.shop.wallet.ledger_title') }}</h2>
        <p class="mb-4 text-[12.5px] text-ink-muted">{{ __('front.shop.wallet.ledger_hint') }}</p>
        <div class="overflow-hidden rounded-xl border border-[#f0eff5]">
            @forelse ($entries as $entry)
                @php $credit = $entry->isCredit(); @endphp
                <div @class(['flex items-center justify-between gap-3 px-4 py-3', 'border-t border-[#f0eff5]' => ! $loop->first])>
                    <div class="min-w-0">
                        <div class="text-[13px] font-bold">{{ $entry->reasonLabel('front.shop.wallet.reasons') }}</div>
                        <div class="mt-0.5 text-right text-[11.5px] text-ink-faint" dir="ltr">
                            @if ($entry->transaction?->order)<span class="text-secondary-500">{{ $entry->transaction->order->code }}</span> • @endif{{ \App\Support\Format::jalaliDateTimeFa($entry->created_at) }}
                        </div>
                    </div>
                    <span @class(['shrink-0 text-[13.5px] font-bold', 'text-green-600' => $credit, 'text-secondary-500' => ! $credit])><span dir="ltr">{{ $credit ? '+ ' : '− ' }}@toman($entry->amount)</span> {{ __('front.shop.toman') }}</span>
                </div>
            @empty
                <p class="px-4 py-10 text-center text-sm text-ink-muted">{{ __('front.shop.wallet.ledger_empty') }}</p>
            @endforelse
        </div>
        @if ($entries->hasPages())
            <div class="mt-4">{{ $entries->links() }}</div>
        @endif
    </div>

    {{-- Settlement request modal. Same layout as the personal-wallet withdrawal
         modal (icon header, amount + max, radio-list of destinations), only in
         the shop's secondary red. --}}
    @if ($canRequest)
        @php
            $settleAccounts = $bankAccounts->map(fn ($account) => [
                'id' => $account->id,
                'bank' => $account->bankName(),
                'card' => Format::persianDigits($account->maskedCard()),
                'isDefault' => (bool) $account->is_default,
            ])->values();
        @endphp
        <div x-data="shopSettlement({
                min: {{ $settlementMinimum }},
                max: {{ $walletBalance }},
                accounts: @js($settleAccounts),
                confirmTemplate: @js(__('front.shop.settlement.confirm')),
             })"
             x-on:open-settlement.window="start()">
            <template x-teleport="body">
                <div x-cloak x-show="open" x-transition.opacity x-on:keydown.escape.window="open = false"
                     class="fixed inset-0 z-modal flex items-center justify-center bg-ink/45 p-5 backdrop-blur-[2px]" x-on:click.self="open = false">
                    <div class="w-full max-w-[420px] rounded-[22px] bg-white p-7 shadow-2xl" x-show="open" 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-secondary-50 text-secondary-500">
                                <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.shop.settlement.request') }}</h3>
                                <p class="mt-0.5 text-[12.5px] text-ink-faint">
                                    {{ __('front.shop.settlement.available_balance', ['amount' => Format::persianDigits(Format::tomanFa($walletBalance))]) }}
                                </p>
                            </div>
                        </div>

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

                            <label for="settle-amount" class="mt-1 block text-[13px] font-bold">{{ __('front.shop.settlement.amount') }}</label>
                            <input id="settle-amount" type="text" inputmode="numeric" dir="ltr"
                                   x-model="amountText" x-on:input="onAmount($event)"
                                   placeholder="{{ __('front.shop.settlement.min_hint', ['min' => Format::persianDigits(Format::tomanFa($settlementMinimum))]) }}"
                                   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-secondary-500 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.shop.settlement.min_hint', ['min' => Format::persianDigits(Format::tomanFa($settlementMinimum))]) }}
                                </span>
                                <button type="button" x-on:click="useMax()"
                                        class="mr-auto rounded-[9px] bg-secondary-50 px-3 py-1.5 text-xs font-bold text-secondary-500 transition hover:bg-secondary-100">
                                    {{ __('front.shop.settlement.use_max') }}
                                </button>
                            </div>

                            <div class="mt-4">
                                <div class="mb-2 text-[12.5px] text-ink-faint">{{ __('front.shop.settlement.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-secondary-500 bg-secondary-50/50' : 'border-[#e3e1ec] bg-white hover:border-secondary-500/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-secondary-500' : 'border-[#d5d3e0]'">
                                                    <span class="size-2 rounded-full bg-secondary-500" 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-secondary-50 px-2.5 py-1 text-[11px] font-bold text-secondary-500" x-show="account.isDefault" x-cloak>
                                                {{ __('front.bank_accounts.default') }}
                                            </span>
                                        </button>
                                    </template>
                                </div>
                            </div>

                            <div class="mt-4 flex items-start gap-2.5 rounded-xl border border-[#f0eff5] bg-[#faf9fd] px-3.5 py-3 text-[11.5px] leading-6 text-ink-soft">
                                <svg class="mt-0.5 size-4 shrink-0 text-ink-faint" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><line x1="12" y1="11" x2="12" y2="16"/><circle cx="12" cy="7.5" r="0.4"/></svg>
                                <span>{{ __('front.shop.settlement.review_note') }}</span>
                            </div>

                            <div class="mt-5 flex gap-2.5">
                                <button type="button" x-on:click="open = false" class="flex-1 rounded-xl bg-[#f2f0fa] p-3 text-sm font-bold text-ink-soft transition hover:bg-[#e8e3f8]">{{ __('admin.actions.cancel') }}</button>
                                <button type="submit" x-bind:disabled="! valid" class="flex-1 rounded-xl bg-secondary-500 p-3 text-sm font-bold text-white transition hover:bg-secondary-600 disabled:cursor-not-allowed disabled:opacity-60">{{ __('front.shop.settlement.submit') }}</button>
                            </div>
                        </form>
                    </div>
                </div>
            </template>
        </div>
    @endif
@endsection