{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: show.blade.php
------------------------------------------------------
Use: A single credit request's status page, ported from
     the approved design: the status hero (with the 48h
     fee countdown + pay action while awaiting fee) and
     the plan / collateral / request detail sections.
     Never names a shop or a product.
=====================================================
--}}

@extends('layouts.user')

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

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

@php
    use App\Models\CreditRequest;

    $plan = $creditRequest->plan;
    $status = $creditRequest->status;
    $awaitingFee = $creditRequest->isAwaitingFee() && ! $creditRequest->feeWindowExpired();

    // A window that lapsed before the nightly job flipped the row still reads
    // as expired to the user.
    $displayStatus = ($status === CreditRequest::STATUS_APPROVED && $creditRequest->feeWindowExpired())
        ? CreditRequest::STATUS_EXPIRED
        : $status;

    $visuals = [
        CreditRequest::STATUS_PENDING => ['icon' => '⏳', 'bg' => '#fff5e6', 'color' => '#d97706'],
        CreditRequest::STATUS_APPROVED => ['icon' => '✓', 'bg' => '#e7f7ee', 'color' => '#16a34a'],
        CreditRequest::STATUS_ACTIVE => ['icon' => '✓', 'bg' => '#e7f7ee', 'color' => '#16a34a'],
        CreditRequest::STATUS_REJECTED => ['icon' => '✕', 'bg' => '#fdeaec', 'color' => '#e80e23'],
        CreditRequest::STATUS_EXPIRED => ['icon' => '✕', 'bg' => '#fdeaec', 'color' => '#e80e23'],
    ][$displayStatus];

    // Snapshot at approval; before that, show the expected fee for the plan.
    $feeDisplay = $creditRequest->fee_amount > 0
        ? $creditRequest->fee_amount
        : intdiv($creditRequest->amount * $plan->fee_percent, 10000);

    $perInstallment = intdiv($creditRequest->amount, max($plan->months, 1));
@endphp

@section('page')
    <div class="mb-6 flex flex-wrap items-end justify-between gap-4">
        <div>
            <h1 class="mb-1 text-2xl font-bold tracking-tight">{{ __('front.credit.title') }}</h1>
            <p class="text-sm text-ink-muted">{{ __('front.credit.subtitle') }}</p>
        </div>
        <div class="inline-flex gap-1 rounded-xl bg-[#eeedf3] p-1">
            <a href="{{ route('account.credit.form') }}" class="rounded-lg bg-white px-4 py-2 text-[13px] font-bold text-primary-600 shadow-sm">{{ __('front.credit.tab_new') }}</a>
            <a href="{{ route('account.credit.history') }}" class="rounded-lg px-4 py-2 text-[13px] font-bold text-ink-muted transition hover:text-primary-600">{{ __('front.credit.tab_history') }}</a>
        </div>
    </div>

    <div class="mx-auto max-w-[680px]">
        {{-- ===== Status hero ===== --}}
        <div class="rounded-[20px] border border-line bg-white p-8 text-center">
            <div class="mx-auto flex size-[84px] items-center justify-center rounded-[24px] text-[38px] font-bold"
                 style="background: {{ $visuals['bg'] }}; color: {{ $visuals['color'] }};">{{ $visuals['icon'] }}</div>
            <h2 class="mb-2 mt-3.5 text-[22px] font-bold">{{ __("front.credit.status.{$displayStatus}_title") }}</h2>
            <p class="mx-auto mb-[22px] max-w-[420px] text-sm leading-8 text-ink-muted">{{ __("front.credit.status.{$displayStatus}_desc") }}</p>

            {{-- While under review, watch for the operator's decision: reloads on
                 change, plus a manual refresh. --}}
            @if ($status === CreditRequest::STATUS_PENDING)
                <div class="mb-[22px]" x-data="statusWatcher(@js([
                    'url' => route('account.credit.status', $creditRequest),
                    'current' => $creditRequest->status,
                    'interval' => 20000,
                ]))">
                    <button type="button" x-on:click="refresh()" x-bind:disabled="checking"
                            class="inline-flex items-center gap-2 rounded-xl border-[1.5px] border-line bg-white px-6 py-3 text-sm font-bold text-primary-600 transition hover:bg-primary-50 disabled:opacity-60">
                        <span x-show="checking" x-cloak class="size-4 animate-spin rounded-full border-2 border-primary-600/30 border-t-primary-600"></span>
                        <svg x-show="! checking" class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-2.64-6.36M21 3v6h-6"/></svg>
                        <span x-text="checking ? @js(__('front.live_status.checking')) : @js(__('front.live_status.refresh'))"></span>
                    </button>
                    <p class="mt-3 text-[12px] leading-6 text-ink-faint" x-show="! noChange">{{ __('front.live_status.auto_hint') }}</p>
                    <p class="mt-3 text-[12px] font-bold leading-6 text-[#d97706]" x-show="noChange" x-cloak x-transition>{{ __('front.live_status.unchanged') }}</p>
                </div>
            @endif

            {{-- 48h countdown + pay action, only while awaiting the fee --}}
            @if ($awaitingFee)
                <div x-data="feeCountdown({{ $creditRequest->fee_due_at->getTimestampMs() }})">
                    <div class="mb-[22px] rounded-[16px] border border-[#f6e6c6] bg-[#fff7ea] p-5">
                        <div class="mb-3 text-[13px] font-bold text-[#996515]">{{ __('front.credit.deadline_label') }}</div>
                        <div class="flex items-center justify-center gap-2.5" dir="ltr">
                            @foreach (['h' => 'cd_hours', 'm' => 'cd_minutes', 's' => 'cd_seconds'] as $part => $label)
                                @if ($part !== 'h')
                                    <span class="text-2xl font-bold text-[#d97706]">:</span>
                                @endif
                                <div class="min-w-[64px] rounded-xl border border-[#f6e6c6] bg-white px-3.5 py-2.5">
                                    <div class="text-[26px] font-bold tabular-nums text-[#d97706]" x-text="{{ $part }}"></div>
                                    <div class="text-[11px] text-ink-faint">{{ __("front.credit.{$label}") }}</div>
                                </div>
                            @endforeach
                        </div>
                        <div class="mt-3 text-xs text-[#996515]">{{ __('front.credit.expire_note') }}</div>
                    </div>

                    @php
                        $walletPortion = min($cashBalance, $feeDisplay);
                        $shortfall = max(0, $feeDisplay - $cashBalance);
                        $fa = fn (int $v) => \App\Support\Format::persianDigits(\App\Support\Format::tomanFa($v));
                    @endphp

                    <div class="mx-auto max-w-[360px]">
                        <div class="mb-3 rounded-xl bg-[#f6f6fa] px-4 py-2.5 text-[12.5px] text-ink-soft">
                            {{ __('front.credit.wallet_balance', ['amount' => $fa($cashBalance)]) }}
                        </div>

                        @if ($cashBalance >= $feeDisplay)
                            {{-- Wallet fully covers the fee: pay from wallet, or online. --}}
                            <x-account.pay-button :request="$creditRequest" method="wallet"
                                :label="__('front.credit.pay_with_wallet')"
                                :confirm="__('front.credit.confirm_pay_wallet', ['amount' => $fa($feeDisplay)])" primary />
                            <x-account.pay-button :request="$creditRequest" method="online"
                                :label="__('front.credit.pay_with_online')"
                                :confirm="__('front.credit.confirm_pay_online', ['amount' => $fa($feeDisplay)])" />
                        @else
                            @if ($cashBalance > 0)
                                <div class="mb-2 rounded-xl border border-[#dfe2fb] bg-[#eef2ff] px-4 py-2.5 text-[12px] leading-6 text-indigo-700">
                                    {{ __('front.credit.mixed_hint', ['wallet' => $fa($walletPortion), 'online' => $fa($shortfall)]) }}
                                </div>
                                <x-account.pay-button :request="$creditRequest" method="mixed"
                                    :label="__('front.credit.pay_mixed', ['wallet' => $fa($walletPortion), 'online' => $fa($shortfall)])"
                                    :confirm="__('front.credit.confirm_pay_mixed', ['wallet' => $fa($walletPortion), 'online' => $fa($shortfall)])" primary />
                            @endif
                            <x-account.pay-button :request="$creditRequest" method="online"
                                :label="__('front.credit.pay_online_full')"
                                :confirm="__('front.credit.confirm_pay_online', ['amount' => $fa($feeDisplay)])" :primary="$cashBalance === 0" />

                            {{-- Charge the wallet by the shortfall, then return here to pay. --}}
                            <form method="POST" action="{{ route('account.wallet.topup') }}"
                                  x-on:submit.prevent="$store.confirm.ask({
                                    message: @js(__('front.credit.confirm_charge', ['amount' => $fa($shortfall)])),
                                    onConfirm: () => $el.submit(),
                                  })">
                                @csrf
                                <input type="hidden" name="amount" value="{{ $shortfall }}">
                                <input type="hidden" name="return_request_id" value="{{ $creditRequest->id }}">
                                <button type="submit" class="mb-2 w-full rounded-[13px] border border-primary-600/30 bg-white p-3 text-[13.5px] font-bold text-primary-600 transition hover:bg-primary-50">
                                    {{ __('front.credit.charge_wallet', ['amount' => $fa($shortfall)]) }}
                                </button>
                            </form>
                        @endif
                    </div>
                </div>
            @endif

            {{-- request summary --}}
            <div class="mt-1.5 flex flex-col gap-2.5 rounded-[14px] border border-[#f0eff5] bg-[#faf9fd] px-[18px] py-4 text-right">
                <div class="flex items-center justify-between">
                    <span class="text-[12.5px] text-ink-faint">{{ __('front.credit.tracking_code') }}</span>
                    <span class="text-[13px] font-bold text-right" dir="ltr">{{ $creditRequest->code }}</span>
                </div>
                <div class="flex items-center justify-between border-t border-[#f0eff5] pt-2.5">
                    <span class="text-[12.5px] text-ink-faint">{{ __('front.credit.summary_amount') }}</span>
                    <span class="text-[13px] font-bold">@toman($creditRequest->amount) {{ __('front.credit.toman') }}</span>
                </div>
                <div class="flex items-center justify-between border-t border-[#f0eff5] pt-2.5">
                    <span class="text-[12.5px] text-ink-faint">{{ __('front.credit.fee_label') }}</span>
                    <span class="text-[13px] font-bold">@toman($feeDisplay) {{ __('front.credit.toman') }}</span>
                </div>
            </div>
        </div>

        {{-- ===== Detail sections ===== --}}
        <div class="mt-4 rounded-[20px] border border-line bg-white p-6">
            <div class="mb-2.5 text-[13px] font-bold">{{ __('front.credit.plan_info') }}</div>
            <div class="mb-[18px] flex flex-col gap-[11px] rounded-[14px] border border-[#f0eff5] bg-[#faf9fd] p-4">
                <div class="flex items-center justify-between">
                    <span class="text-[12.5px] text-ink-faint">{{ __('front.credit.summary_plan') }}</span>
                    <span class="text-[13px] font-bold">{{ __('front.credit.summary_plan_months', [
                        'plan' => $plan->name,
                        'months' => \App\Support\Format::persianDigits((string) $plan->months),
                    ]) }}</span>
                </div>
                <div class="flex items-center justify-between border-t border-[#f0eff5] pt-[11px]">
                    <span class="text-[12.5px] text-ink-faint">{{ __('front.credit.summary_amount') }}</span>
                    <span class="text-[13px] font-bold">@toman($creditRequest->amount) {{ __('front.credit.toman') }}</span>
                </div>
                <div class="flex items-center justify-between border-t border-[#f0eff5] pt-[11px]">
                    <span class="text-[12.5px] text-ink-faint">{{ __('front.credit.per_installment') }}</span>
                    <span class="text-[13px] font-bold text-primary-600">@toman($perInstallment) {{ __('front.credit.toman') }}</span>
                </div>
                <div class="flex items-center justify-between border-t border-[#f0eff5] pt-[11px]">
                    <span class="text-[12.5px] text-ink-faint">{{ __('front.credit.fee_with_percent', ['percent' => \App\Support\Format::persianDigits(\App\Support\Format::percentFromBp($plan->fee_percent))]) }}</span>
                    <span class="text-[13px] font-bold">@toman($feeDisplay) {{ __('front.credit.toman') }}</span>
                </div>
                <div class="flex items-center justify-between border-t border-[#f0eff5] pt-[11px]">
                    <span class="text-[12.5px] text-ink-faint">{{ __('front.credit.grace_period') }}</span>
                    <span class="text-[13px] font-bold">
                        {{ $plan->grace_days > 0 ? __('front.credit.grace_days', ['days' => \App\Support\Format::persianDigits((string) $plan->grace_days)]) : __('front.credit.grace_none') }}
                    </span>
                </div>
                <div class="flex items-center justify-between border-t border-[#f0eff5] pt-[11px]">
                    <span class="text-[12.5px] text-ink-faint">{{ __('front.credit.late_penalty') }}</span>
                    <span class="text-[13px] font-bold text-secondary-500">{{ __('front.credit.penalty_monthly', ['percent' => \App\Support\Format::persianDigits(\App\Support\Format::percentFromBp($plan->penalty_percent))]) }}</span>
                </div>
            </div>

            <div class="mb-2.5 text-[13px] font-bold">{{ __('front.credit.collateral_section') }}</div>
            <div class="mb-[18px] flex items-center gap-3 rounded-[14px] border border-[#f0eff5] bg-[#faf9fd] px-4 py-3.5">
                <span class="flex size-10 shrink-0 items-center justify-center rounded-[11px] bg-[#efeafb] text-primary-600">
                    <svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" 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>
                </span>
                <div class="min-w-0 flex-1">
                    <div class="text-[13.5px] font-bold">{{ __("front.credit.collaterals.{$creditRequest->collateral_type}") }}</div>
                    @if ($creditRequest->organization)
                        <div class="text-[12px] text-ink-faint">{{ $creditRequest->organization->name }}</div>
                    @endif
                </div>
            </div>

            <div class="mb-2.5 text-[13px] font-bold">{{ __('front.credit.request_specs') }}</div>
            <div class="flex flex-col gap-[11px] rounded-[14px] border border-[#f0eff5] bg-[#faf9fd] p-4">
                <div class="flex items-center justify-between">
                    <span class="text-[12.5px] text-ink-faint">{{ __('front.credit.submitted_at') }}</span>
                    <span class="text-[13px] font-bold">@jalaliDateTime($creditRequest->created_at)</span>
                </div>
                @if ($creditRequest->activated_at)
                    <div class="flex items-center justify-between border-t border-[#f0eff5] pt-[11px]">
                        <span class="text-[12.5px] text-ink-faint">{{ __('front.credit.activated_at') }}</span>
                        <span class="text-[13px] font-bold">@jalaliDateTime($creditRequest->activated_at)</span>
                    </div>
                @endif
                @if ($firstDueAt)
                    <div class="flex items-center justify-between border-t border-[#f0eff5] pt-[11px]">
                        <span class="text-[12.5px] text-ink-faint">{{ __('front.credit.installments_start') }}</span>
                        <span class="text-[13px] font-bold">@jalali($firstDueAt)</span>
                    </div>
                @endif
            </div>
        </div>

        {{-- ===== Transactions (wallet ledger) ===== --}}
        <div class="mt-4 rounded-[20px] border border-line bg-white p-6">
            <div class="mb-3 text-[13px] font-bold">{{ __('front.credit.transactions_section') }}</div>
            @if ($entries->isEmpty())
                <p class="rounded-[14px] border border-dashed border-[#d9d6e6] px-4 py-6 text-center text-xs leading-6 text-ink-muted">
                    {{ __('front.credit.transactions_empty') }}
                </p>
            @else
                <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.credit.tx_columns.reason') }}</th>
                                <th class="px-4 py-3 font-bold">{{ __('front.credit.tx_columns.code') }}</th>
                                <th class="px-4 py-3 font-bold">{{ __('front.credit.tx_columns.date') }}</th>
                                <th class="px-4 py-3 font-bold">{{ __('front.credit.tx_columns.amount') }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($entries as $entry)
                                <tr class="border-t border-[#f0eff5]">
                                    <td class="px-4 py-3 font-bold">
                                        {{ $entry->reasonLabel('front.credit.reasons') }}
                                        @if ($entry->bucket === \App\Models\WalletEntry::BUCKET_INSTALLMENT)
                                            <span class="mr-1 rounded-md bg-[#efeafb] px-1.5 py-0.5 text-[10.5px] font-normal text-primary-600">{{ __('front.credit.bucket_installment') }}</span>
                                        @endif
                                    </td>
                                    <td class="px-4 py-3 text-right text-ink-faint" dir="ltr">{{ $entry->transaction?->code ?? '—' }}</td>
                                    <td class="px-4 py-3 text-ink-soft">@jalaliDateTime($entry->created_at)</td>
                                    {{-- RTL reading order: the figure first, the unit after it.
                                         Only the signed number itself is an LTR run. --}}
                                    <td class="px-4 py-3 font-bold {{ $entry->isCredit() ? 'text-green-600' : 'text-secondary-500' }}">
                                        <span dir="ltr">{{ $entry->isCredit() ? '+' : '−' }}@toman($entry->amount)</span>
                                        {{ __('front.credit.toman') }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            @endif
        </div>

        <a href="{{ route('account.credit.history') }}" class="mt-4 flex w-full items-center justify-center rounded-xl bg-[#f2f0fa] py-3 text-sm font-bold text-primary-600 transition hover:bg-[#e8e3f8]">
            {{ __('front.credit.back_to_history') }}
        </a>
    </div>
@endsection