{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: index.blade.php
------------------------------------------------------
Use: Admin credit-request review queue from the approved
     design: status filter, the detail modal with the
     collateral images, and the approve / reject
     decisions with plan+amount editable while pending.
=====================================================
--}}

@extends('layouts.admin')

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

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

@section('page')
    @php $canReview = auth('admin')->user()->allowed('requests.review'); @endphp

    <div x-data="requestReview({
        confirmApprove: @js(__('admin.requests.modal.confirm_approve')),
        confirmReject: @js(__('admin.requests.modal.confirm_reject')),
        invalid: @js(__('admin.requests.amount_out_of_range')),
        central: {
            net: {{ (int) $centralNet }},
            tomanSuffix: @js(__('admin.toman')),
            title: @js(__('admin.requests.modal.central.title')),
            currentLabel: @js(__('admin.requests.modal.central.current')),
            amountLabel: @js(__('admin.requests.modal.central.amount')),
            afterLabel: @js(__('admin.requests.modal.central.after')),
            note: @js(__('admin.requests.modal.central.note')),
            negativeWarning: @js(__('admin.requests.modal.central.negative_warning')),
        },
    })">
        <div class="mb-5">
            <h1 class="mb-1 text-2xl font-bold tracking-tight">{{ __('admin.requests.title') }}</h1>
            <p class="text-sm text-ink-muted">{{ __('admin.requests.subtitle') }}</p>
        </div>

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

        <x-admin.request-tabs />

        <div class="rounded-2xl border border-line bg-white p-5">
            <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.requests.filters') as $key => $label)
                        <a href="{{ route('admin.requests.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.requests.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.requests.search_placeholder') }}" class="w-44 border-none bg-transparent px-2 py-2.5 text-[13px] outline-none placeholder:text-ink-faint sm:w-52">
                </form>
            </div>

            <div class="overflow-x-auto rounded-[14px] border border-[#f0eff5]">
                <table class="w-full min-w-[860px] 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.requests.columns.code') }}</th>
                            <th class="px-4.5 py-3.5 font-bold">{{ __('admin.requests.columns.user') }}</th>
                            <th class="px-4.5 py-3.5 font-bold">{{ __('admin.requests.columns.details') }}</th>
                            <th class="px-4.5 py-3.5 font-bold">{{ __('admin.requests.columns.amount') }}</th>
                            <th class="px-4.5 py-3.5 font-bold">{{ __('admin.requests.columns.date') }}</th>
                            <th class="px-4.5 py-3.5 font-bold">{{ __('admin.requests.columns.status') }}</th>
                            <th class="px-4.5 py-3.5 text-center font-bold">{{ __('admin.requests.columns.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($requests as $creditRequest)
                            @php
                                $reqStanding = app(\App\Services\GoodStandingService::class)->breakdownFor($creditRequest->user);
                                $payload = [
                                    'code' => $creditRequest->code,
                                    'user' => $creditRequest->user->fullName(),
                                    'standingLabel' => \App\Support\GoodStanding::label($reqStanding['level']),
                                    'standingColor' => \App\Support\GoodStanding::color($reqStanding['level']),
                                    'standingScore' => \App\Support\Format::persianDigits((string) $reqStanding['score']),
                                    'standingMax' => \App\Support\Format::persianDigits((string) \App\Support\GoodStanding::MAX_SCORE),
                                    'standingPercent' => \App\Support\GoodStanding::percent($reqStanding['score']),
                                    'mobile' => \App\Support\Format::persianDigits($creditRequest->user->mobile),
                                    'userUrl' => route('admin.users.show', $creditRequest->user),
                                    'initials' => mb_substr($creditRequest->user->first_name, 0, 1).'.'.mb_substr($creditRequest->user->last_name, 0, 1),
                                    'collateral' => __("admin.collaterals.{$creditRequest->collateral_type}"),
                                    'organization' => $creditRequest->organization?->name,
                                    'planId' => $creditRequest->plan_id,
                                    'planName' => $creditRequest->plan->name,
                                    'amount' => $creditRequest->amount,
                                    'amountFa' => \App\Support\Format::persianDigits(\App\Support\Format::tomanFa($creditRequest->amount)),
                                    'feeFa' => \App\Support\Format::persianDigits(\App\Support\Format::tomanFa($creditRequest->fee_amount)),
                                    'status' => $creditRequest->status,
                                    'statusLabel' => __("admin.requests.statuses.{$creditRequest->status}"),
                                    'feeDue' => $creditRequest->fee_due_at ? \App\Support\Format::jalaliDateTimeFa($creditRequest->fee_due_at) : null,
                                    'pending' => $creditRequest->isPending(),
                                    'awaitingFee' => $creditRequest->isAwaitingFee(),
                                    'approveUrl' => route('admin.requests.approve', $creditRequest),
                                    'rejectUrl' => route('admin.requests.reject', $creditRequest),
                                    'documents' => $creditRequest->documents->map(fn ($d) => route('admin.requests.document', [$creditRequest, $d]))->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">{{ $creditRequest->code }}</td>
                                <td class="px-4.5 py-3.5 font-bold">{{ $creditRequest->user->fullName() }}</td>
                                <td class="px-4.5 py-3.5 text-ink-soft">{{ __("admin.collaterals.{$creditRequest->collateral_type}") }} • {{ $creditRequest->plan->name }}</td>
                                <td class="px-4.5 py-3.5 font-bold">@toman($creditRequest->amount) {{ __('admin.toman') }}</td>
                                <td class="px-4.5 py-3.5 text-ink-soft">@jalaliDateTime($creditRequest->created_at)</td>
                                <td class="px-4.5 py-3.5">
                                    <span @class([
                                        'rounded-2xl px-2.5 py-1.5 text-xs font-bold',
                                        'bg-[#fff5e6] text-amber-600' => $creditRequest->status === \App\Models\CreditRequest::STATUS_PENDING,
                                        'bg-[#eef2ff] text-indigo-600' => $creditRequest->status === \App\Models\CreditRequest::STATUS_APPROVED,
                                        'bg-[#e7f7ee] text-green-600' => $creditRequest->status === \App\Models\CreditRequest::STATUS_ACTIVE,
                                        'bg-secondary-50 text-secondary-500' => $creditRequest->status === \App\Models\CreditRequest::STATUS_REJECTED,
                                        'bg-[#f1f0f5] text-ink-muted' => $creditRequest->status === \App\Models\CreditRequest::STATUS_EXPIRED,
                                    ])>
                                        {{ __("admin.requests.statuses.{$creditRequest->status}") }}
                                    </span>
                                </td>
                                <td class="px-4.5 py-3.5 text-center">
                                    <span class="inline-flex rounded-[9px] bg-[#f2f0fa] px-4 py-2 text-[12.5px] font-bold text-primary-600">{{ __('admin.requests.details_button') }}</span>
                                </td>
                            </tr>
                        @empty
                            <tr class="border-t border-[#f0eff5]">
                                <td colspan="7" class="px-4.5 py-10 text-center text-sm text-ink-muted">{{ __('admin.requests.empty') }}</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

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

        {{-- ===== Review modal ===== --}}
        <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-[500px] 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.requests.modal.title') }}</h3>
                            {{-- The code reads left-to-right but sits right-aligned under the title. --}}
                            <p class="mt-0.5 text-right! text-[12.5px] text-ink-faint" dir="ltr" x-text="data.code"></p>
                        </div>
                        <div class="flex shrink-0 items-center gap-2.5">
                            {{-- Request status, beside the close button. --}}
                            <span class="rounded-2xl px-2.5 py-1 text-[11.5px] font-bold"
                                  x-bind:class="{
                                      'bg-[#e7f7ee] text-green-600': data.status === 'active',
                                      'bg-[#fff5e6] text-amber-600': data.status === 'pending' || data.status === 'approved',
                                      'bg-secondary-50 text-secondary-500': data.status === 'rejected' || data.status === 'expired',
                                  }"
                                  x-text="data.statusLabel"></span>
                            <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>

                    <div class="flex flex-col gap-3.5 overflow-y-auto px-6 py-5">
                        <div class="flex items-center gap-3 border-b border-[#f0eff5] pb-3.5">
                            <span class="flex size-11 shrink-0 items-center justify-center rounded-full bg-gradient-to-bl from-[#e9e5f9] to-[#d9d1f4] text-sm font-bold text-primary-600" x-text="data.initials"></span>
                            <div class="min-w-0 flex-1">
                                <a x-bind:href="data.userUrl" target="_blank" class="text-[14.5px] font-bold transition hover:text-primary-600" x-text="data.user"></a>
                                <div class="text-[12.5px] text-ink-faint"><span dir="ltr" x-text="data.mobile"></span></div>
                            </div>
                        </div>

                        {{-- Requester good-standing: the segments are fixed (per tier
                             span); only the marker and the label/score are per user. --}}
                        <div class="rounded-[12px] border border-[#f0eff5] bg-[#faf9fd] p-3.5">
                            <div class="mb-2 flex items-center justify-between gap-2">
                                <span class="text-[12px] text-ink-faint">{{ __('admin.requests.modal.standing') }}</span>
                                <span class="inline-flex items-center gap-1.5 text-[12.5px] font-bold" x-bind:style="`color: ${data.standingColor}`">
                                    <span class="size-2 rounded-full" x-bind:style="`background: ${data.standingColor}`"></span>
                                    <span x-text="data.standingLabel"></span>
                                    <span class="text-ink-faint" dir="ltr">(<span x-text="data.standingScore"></span>/<span x-text="data.standingMax"></span>)</span>
                                </span>
                            </div>
                            <div dir="ltr" class="relative">
                                <div class="flex h-2.5 overflow-hidden rounded-full">
                                    <span style="width:20%;background:#e11d48"></span>
                                    <span style="width:20%;background:#f97316"></span>
                                    <span style="width:15%;background:#f59e0b"></span>
                                    <span style="width:15%;background:#84cc16"></span>
                                    <span style="width:15%;background:#22c55e"></span>
                                    <span style="width:15%;background:#059669"></span>
                                </div>
                                <span class="absolute top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-full border-[3px] border-white shadow-md"
                                      x-bind:style="`left: ${data.standingPercent}%; background: ${data.standingColor}`"></span>
                            </div>
                        </div>

                        <div class="flex items-center justify-between">
                            <span class="text-[12.5px] text-ink-faint">{{ __('admin.requests.modal.collateral') }}</span>
                            <span class="text-[13.5px] font-bold" x-text="data.collateral"></span>
                        </div>
                        <div class="flex items-center justify-between" x-show="data.organization">
                            <span class="text-[12.5px] text-ink-faint">{{ __('admin.requests.modal.organization') }}</span>
                            <span class="text-[13.5px] font-bold" x-text="data.organization"></span>
                        </div>

                        {{-- Collateral documents --}}
                        <div class="border-t border-[#f5f4f9] pt-3.5">
                            <div class="mb-2 text-[12.5px] text-ink-faint">{{ __('admin.requests.modal.documents') }}</div>
                            <div class="flex gap-2.5" x-show="data.documents && data.documents.length">
                                <template x-for="(url, i) in data.documents" :key="i">
                                    <button type="button" class="h-24 flex-1 overflow-hidden rounded-xl border border-[#e3e1ec] bg-[#f4f3f7] transition hover:border-primary-600/50"
                                            x-on:click="$store.imageViewer.show(url, url, @js(__('admin.requests.modal.documents')))">
                                        <img x-bind:src="url" alt="" class="size-full object-cover">
                                    </button>
                                </template>
                            </div>
                            <p class="text-xs text-ink-faint" x-show="! data.documents || ! data.documents.length">{{ __('admin.requests.modal.no_documents') }}</p>
                        </div>

                        {{-- Plan + amount: editable while pending, read-only after --}}
                        <div class="border-t border-[#f5f4f9] pt-3.5" x-show="data.pending">
                            <label class="mb-1.5 block text-[12.5px] font-bold">{{ __('admin.requests.modal.plan_editable') }}</label>
                            <select x-model.number="editPlanId" class="mb-3 w-full rounded-[11px] border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-2.5 text-[13.5px] outline-none transition focus:border-primary-600 focus:bg-white">
                                @foreach ($plans as $plan)
                                    <option value="{{ $plan->id }}">{{ __('admin.requests.plan_option', ['name' => $plan->name, 'months' => \App\Support\Format::persianDigits((string) $plan->months), 'fee' => \App\Support\Format::persianDigits(\App\Support\Format::percentFromBp($plan->fee_percent))]) }}</option>
                                @endforeach
                            </select>
                            <label class="mb-1.5 block text-[12.5px] font-bold">{{ __('admin.requests.modal.amount_editable') }}</label>
                            <input type="text" inputmode="numeric" x-ref="amountInput" x-on:input="onAmount($event)"
                                   class="w-full rounded-[11px] border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-2.5 text-right text-[13.5px] font-bold outline-none transition focus:border-primary-600 focus:bg-white">
                        </div>

                        <div class="border-t border-[#f5f4f9] pt-3.5" x-show="! data.pending">
                            <div class="flex items-center justify-between">
                                <span class="text-[12.5px] text-ink-faint">{{ __('admin.requests.modal.plan') }}</span>
                                <span class="text-[13.5px] font-bold" x-text="data.planName"></span>
                            </div>
                            <div class="mt-2 flex items-center justify-between">
                                <span class="text-[12.5px] text-ink-faint">{{ __('admin.requests.modal.amount') }}</span>
                                <span class="text-[13.5px] font-bold"><span x-text="data.amountFa"></span> {{ __('admin.toman') }}</span>
                            </div>
                            <div class="mt-2 flex items-center justify-between">
                                <span class="text-[12.5px] text-ink-faint">{{ __('admin.requests.modal.fee') }}</span>
                                <span class="text-[13.5px] font-bold"><span x-text="data.feeFa"></span> {{ __('admin.toman') }}</span>
                            </div>
                        </div>

                        {{-- Awaiting fee: show the deadline --}}
                        <div class="rounded-[14px] border border-[#dfe2fb] bg-[#eef2ff] p-4 text-center" x-show="data.awaitingFee" x-cloak>
                            <div class="text-[12.5px] font-bold text-indigo-700">{{ __('admin.requests.modal.awaiting_fee') }}</div>
                            <div class="mt-2 text-[12.5px] text-indigo-600">{{ __('admin.requests.modal.fee_due') }} <span class="font-bold" x-text="data.feeDue"></span></div>
                        </div>
                    </div>

                    {{-- Actions (pending only, review ability only) --}}
                    @if ($canReview)
                        <div class="flex gap-2.5 border-t border-line px-6 py-4" x-show="data.pending" x-cloak>
                            <form x-ref="rejectForm" method="POST" x-bind:action="data.rejectUrl" class="flex-1">
                                @csrf
                                <button type="button" 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"
                                        x-on:click="reject()">
                                    <span x-show="busy" x-cloak class="size-4 animate-spin rounded-full border-2 border-secondary-500/30 border-t-secondary-500" aria-hidden="true"></span>
                                    {{ __('admin.requests.modal.reject') }}
                                </button>
                            </form>
                            <form x-ref="approveForm" method="POST" x-bind:action="data.approveUrl" class="flex-1">
                                @csrf
                                <input type="hidden" name="plan_id" x-bind:value="editPlanId">
                                <input type="hidden" name="amount" x-bind:value="editAmount">
                                <button type="button" x-bind:disabled="busy"
                                        class="inline-flex w-full items-center justify-center gap-2 rounded-xl bg-green-600 py-3 text-sm font-bold text-white shadow-lg shadow-green-600/25 transition hover:bg-green-700 disabled:cursor-not-allowed disabled:opacity-70"
                                        x-on:click="approve()">
                                    <span x-show="busy" x-cloak class="size-4 animate-spin rounded-full border-2 border-white/30 border-t-white" aria-hidden="true"></span>
                                    {{ __('admin.requests.modal.approve') }}
                                </button>
                            </form>
                        </div>
                    @endif
                </div>
            </div>
        </template>
    </div>
@endsection