{{--
=====================================================
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 central-wallet page: net position, cash vs
     obligations, the operator deposit/withdraw modal, and
     the recent balance changes.
=====================================================
--}}

@extends('layouts.admin')

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

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

@section('page')
    @php $canManage = auth('admin')->user()->allowed('central.manage'); @endphp

    <div class="mb-5" x-data="centralAdjust({
        depositUrl: @js(route('admin.central.deposit')),
        withdrawUrl: @js(route('admin.central.withdraw')),
        maxWithdraw: {{ $maxWithdrawable }},
        confirmDeposit: @js(__('admin.central.confirm_deposit')),
        confirmWithdraw: @js(__('admin.central.confirm_withdraw')),
    })">
        <div class="mb-1 flex flex-wrap items-end justify-between gap-3">
            <div>
                <h1 class="mb-1 text-2xl font-bold tracking-tight">{{ __('admin.central.title') }}</h1>
                <p class="text-sm text-ink-muted">{{ __('admin.central.subtitle') }}</p>
            </div>
            @if ($canManage)
                <div class="flex items-center gap-2">
                    <button type="button" x-on:click="start('deposit')" class="inline-flex items-center gap-2 rounded-xl bg-primary-600 px-4 py-2.5 text-[13px] font-bold text-white transition hover:bg-primary-700">
                        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>
                        {{ __('admin.central.deposit') }}
                    </button>
                    <button type="button" x-on:click="start('withdraw')" class="inline-flex items-center gap-2 rounded-xl bg-secondary-50 px-4 py-2.5 text-[13px] font-bold text-secondary-500 transition hover:bg-[#fbd5d9]">
                        <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><path d="M5 12h14"/></svg>
                        {{ __('admin.central.withdraw') }}
                    </button>
                </div>
            @endif
        </div>

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

        {{-- Negative net warning --}}
        @if ($net < 0)
            <div class="mb-5 flex items-start gap-3 rounded-xl border border-secondary-500/25 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="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3 2 20h20L12 3z"/><line x1="12" y1="10" x2="12" y2="14.5"/><circle cx="12" cy="17.5" r="0.5"/></svg>
                <p class="text-[13px] font-bold leading-7 text-secondary-600">{{ __('admin.central.negative_warning') }}</p>
            </div>
        @endif

        {{-- Net position + cash/obligations --}}
        <div class="grid grid-cols-1 gap-5 lg:grid-cols-[1.4fr_1fr]">
            <div @class([
                'overflow-hidden rounded-2xl p-6 text-white',
                'bg-gradient-to-l from-primary-600 to-[#6f52c8]' => $net >= 0,
                'bg-gradient-to-l from-[#b70b1c] to-secondary-500' => $net < 0,
            ])>
                <div class="text-[13px] font-bold text-white/85">{{ __('admin.central.net') }}</div>
                <div class="mt-3 flex items-baseline gap-2">
                    <span class="text-[34px] font-black leading-none tracking-tight sm:text-[40px]" dir="ltr">{{ $net < 0 ? '−' : '' }}@toman(abs($net))</span>
                    <span class="text-[15px] font-bold text-white/75">{{ __('admin.toman') }}</span>
                </div>
                <p class="mt-3 text-[11.5px] leading-6 text-white/70">{{ __('admin.central.net_hint') }}</p>
            </div>
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <x-admin.stat-tile :label="__('admin.central.cash')" :amount="$cash" />
                <x-admin.stat-tile :label="__('admin.central.obligations')" :amount="$obligations" tone="muted" />
            </div>
        </div>

        {{-- Obligations breakdown --}}
        <h2 class="mb-3 mt-8 text-[15px] font-bold">{{ __('admin.central.breakdown_title') }}</h2>
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
            <x-admin.stat-tile :label="__('admin.central.shop_wallets')" :amount="$shopWallets" />
            <x-admin.stat-tile :label="__('admin.central.user_cash')" :amount="$userCash" />
            <x-admin.stat-tile :label="__('admin.central.user_installment')" :amount="$userInstallment" />
            <x-admin.stat-tile :label="__('admin.central.pending_withdrawals')" :amount="$pendingWithdrawals" />
            <x-admin.stat-tile :label="__('admin.central.pending_settlements')" :amount="$pendingSettlements" />
        </div>

        {{-- Recent adjustments --}}
        <h2 class="mb-3 mt-8 text-[15px] font-bold">{{ __('admin.central.recent_title') }}</h2>
        <div class="overflow-hidden rounded-2xl border border-line bg-white">
            @forelse ($transactions as $transaction)
                @php $incoming = $transaction->type === \App\Models\Transaction::TYPE_ADMIN_TOPUP; @endphp
                <div @class(['flex items-center justify-between gap-3 px-5 py-3.5', 'border-t border-line' => ! $loop->first])>
                    <div class="min-w-0">
                        <div class="text-[13px] font-bold">{{ $transaction->primaryEntry()?->reasonLabel('admin.wallet_reasons') ?? __('admin.wallet_reasons.other') }}</div>
                        <div class="mt-0.5 text-[11.5px] text-ink-faint" dir="ltr">
                            <span class="font-mono">{{ $transaction->external_reference }}</span>
                            @if ($transaction->admin) • {{ __('admin.central.by_admin') }} {{ $transaction->admin->name }}@endif
                            • @jalaliDateTime($transaction->created_at)
                        </div>
                    </div>
                    <span @class(['shrink-0 text-[14px] font-bold', 'text-green-600' => $incoming, 'text-secondary-500' => ! $incoming]) dir="ltr">{{ $incoming ? '+' : '−' }}@toman($transaction->amount)</span>
                </div>
            @empty
                <p class="px-5 py-10 text-center text-sm text-ink-muted">{{ __('admin.central.no_transactions') }}</p>
            @endforelse
        </div>

        {{-- ===== Adjust modal ===== --}}
        @if ($canManage)
            <template x-teleport="body">
                <div x-cloak x-show="open" x-transition.opacity class="fixed inset-0 z-modal flex items-center justify-center bg-ink/50 p-5" x-on:click.self="open = false" x-on:keydown.escape.window="open = false">
                    <div class="w-full max-w-[440px] overflow-hidden rounded-[22px] bg-white shadow-2xl" x-show="open" x-transition.scale.origin.center>
                        <div class="flex items-center justify-between gap-3 border-b border-line px-6 py-5">
                            <h3 class="text-[16px] font-bold" x-text="mode === 'deposit' ? @js(__('admin.central.deposit')) : @js(__('admin.central.withdraw'))"></h3>
                            <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="open = false" 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"><path d="M6 6l12 12M18 6 6 18"/></svg>
                            </button>
                        </div>
                        <form method="POST" x-ref="form" x-bind:action="actionUrl" x-on:submit.prevent="submit()" class="px-6 py-5">
                            @csrf
                            <div class="mb-4">
                                <label class="mb-1.5 block text-[13px] font-bold">{{ __('admin.central.amount') }}</label>
                                <div class="relative">
                                    <input type="text" inputmode="numeric" dir="ltr" x-on:input="onAmount($event)" x-bind:value="grouped"
                                           x-bind:class="overMax ? 'border-secondary-500' : 'border-[#e3e1ec] focus:border-primary-600'"
                                           class="w-full rounded-xl border-[1.5px] bg-[#fbfbfd] px-3.5 py-3 pl-16 text-right text-sm outline-none transition focus:bg-white" style="direction:rtl">
                                    <input type="hidden" name="amount" x-bind:value="amount">
                                    <span class="pointer-events-none absolute left-3.5 top-1/2 -translate-y-1/2 text-[12px] font-bold text-ink-faint">{{ __('admin.toman') }}</span>
                                </div>
                                <p x-show="mode === 'withdraw'" x-cloak class="mt-1.5 text-[11.5px]" x-bind:class="overMax ? 'text-secondary-500 font-bold' : 'text-ink-faint'">
                                    {{ __('admin.central.max_withdraw') }} <span dir="ltr">@toman($maxWithdrawable)</span> {{ __('admin.toman') }}
                                </p>
                            </div>
                            <div class="mb-5">
                                <label class="mb-1.5 block text-[13px] font-bold">{{ __('admin.central.reference') }}</label>
                                <input type="text" name="reference" x-model="reference" dir="ltr" class="w-full rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-3 text-left text-sm outline-none transition focus:border-primary-600 focus:bg-white">
                                <p class="mt-1.5 text-[11.5px] text-ink-faint">{{ __('admin.central.reference_hint') }}</p>
                            </div>
                            <button type="submit" x-bind:disabled="! valid"
                                    x-bind:class="mode === 'deposit' ? 'bg-primary-600 hover:bg-primary-700 shadow-primary-600/25' : 'bg-secondary-500 hover:bg-secondary-600 shadow-secondary-500/25'"
                                    class="w-full rounded-xl py-3 text-sm font-bold text-white shadow-lg transition disabled:cursor-not-allowed disabled:opacity-50">
                                <span x-text="mode === 'deposit' ? @js(__('admin.central.deposit')) : @js(__('admin.central.withdraw'))"></span>
                            </button>
                        </form>
                    </div>
                </div>
            </template>
        @endif
    </div>
@endsection