{{--
=====================================================
Etebarit - by Gisoo Web Solutions
------------------------------------------------------
Gisoo.net
------------------------------------------------------
Copyright (c) 2026 Gisoo Web Solutions
=====================================================
This code is protected by copyright
=====================================================
File: installments.blade.php
------------------------------------------------------
Use: The user's installments. Rows show the plan name
     and the request tracking code only -- never a shop
     or a product.
=====================================================
--}}

@extends('layouts.user')

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

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

@section('page')
    @php
        $payConfig = [
            'balance' => $cashBalance,
            'chargeUrl' => route('account.wallet'),
            'strings' => [
                'confirmWallet' => __('front.installments.confirm_pay_wallet'),
                'confirmOnline' => __('front.installments.confirm_pay_online'),
                'confirmMixed' => __('front.installments.confirm_pay_mixed'),
            ],
        ];
    @endphp

    <div x-data="installmentPay(@js($payConfig))">
    <div class="mb-6">
        <h1 class="mb-1 text-2xl font-bold tracking-tight">{{ __('front.installments.title') }}</h1>
        <p class="text-sm text-ink-muted">
            {{ __('front.installments.subtitle') }}
            <span class="text-primary-600">{{ __('front.installments.wallet_balance', ['amount' => \App\Support\Format::persianDigits(\App\Support\Format::tomanFa($cashBalance))]) }}</span>
        </p>
    </div>

    {{-- ===== KPI summary cards ===== --}}
    @unless ($installments->isEmpty())
    @php
        $kpis = [
            ['key' => 'due', 'color' => 'text-secondary-500', 'bg' => 'bg-[#fdeaec]', 'stroke' => '#e80e23', 'icon' => '<circle cx="12" cy="12" r="9"/><path d="M12 8v4l3 2"/>'],
            ['key' => 'upcoming', 'color' => 'text-amber-600', 'bg' => 'bg-[#fff5e6]', 'stroke' => '#d97706', 'icon' => '<rect x="3" y="4" width="18" height="17" rx="3"/><path d="M3 9h18M8 2v4M16 2v4"/>'],
            ['key' => 'paid', 'color' => 'text-green-600', 'bg' => 'bg-[#e7f7ee]', 'stroke' => '#16a34a', 'icon' => '<path d="M20 6 9 17l-5-5"/>'],
            ['key' => 'remaining', 'color' => 'text-ink', 'bg' => 'bg-[#efeafb]', 'stroke' => '#563bb1', 'icon' => '<path d="M4 20V10M12 20V4M20 20v-6"/>'],
        ];
    @endphp
    <div class="mb-6 grid grid-cols-2 gap-3.5 sm:gap-4 lg:grid-cols-4">
        @foreach ($kpis as $kpi)
            @php $bucket = $summary[$kpi['key']]; @endphp
            <div class="rounded-2xl border border-line bg-white p-4 sm:p-5">
                <div class="mb-3 flex items-center gap-2.5">
                    <span class="flex size-9 items-center justify-center rounded-[11px] {{ $kpi['bg'] }}">
                        <svg class="size-[18px]" viewBox="0 0 24 24" fill="none" stroke="{{ $kpi['stroke'] }}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">{!! $kpi['icon'] !!}</svg>
                    </span>
                    <span class="text-[12.5px] text-ink-muted">{{ __('front.installments.summary.'.$kpi['key']) }}</span>
                </div>
                <div class="text-[19px] font-bold sm:text-[22px] {{ $kpi['color'] }}">@toman($bucket['amount'])</div>
                <div class="mt-1 text-[11.5px] text-ink-faint">
                    {{ __('front.installments.summary.'.($kpi['key'] === 'remaining' ? 'remaining_count' : 'count'), ['count' => \App\Support\Format::persianDigits((string) $bucket['count'])]) }}
                </div>
            </div>
        @endforeach
    </div>
    @endunless

    @if ($installments->isEmpty())
        <div class="rounded-2xl border border-dashed border-[#d9d6e6] bg-white px-6 py-12 text-center text-sm text-ink-muted">
            {{ __('front.installments.empty') }}
        </div>
    @else
        <div class="rounded-2xl border border-line bg-white p-5">
            <div class="overflow-x-auto rounded-[14px] border border-[#f0eff5]">
                <table class="w-full min-w-[780px] 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">{{ __('front.installments.columns.sequence') }}</th>
                            <th class="px-4.5 py-3.5 font-bold">{{ __('front.installments.columns.plan') }}</th>
                            <th class="px-4.5 py-3.5 font-bold">{{ __('front.installments.columns.due') }}</th>
                            <th class="px-4.5 py-3.5 font-bold">{{ __('front.installments.columns.amount') }}</th>
                            <th class="px-4.5 py-3.5 font-bold">{{ __('front.installments.columns.penalty') }}</th>
                            <th class="px-4.5 py-3.5 font-bold">{{ __('front.installments.columns.status') }}</th>
                            <th class="px-4.5 py-3.5 font-bold">{{ __('front.installments.columns_action') }}</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($installments as $installment)
                            <tr class="border-t border-[#f0eff5]">
                                <td class="px-4.5 py-3.5 font-bold">
                                    @fa($installment->sequence) {{ __('front.installments.of') }} @fa($installment->creditRequest->plan->months)
                                </td>
                                <td class="px-4.5 py-3.5 text-ink-soft">
                                    {{ $installment->creditRequest->plan->name }}
                                    <span class="text-[11px] text-ink-faint" dir="ltr">{{ $installment->creditRequest->code }}</span>
                                    @if ($installment->isSalaryBacked() && ! $installment->isPaid())
                                        {{-- Paid by the organization and deducted from the
                                             payslip; never payable by the user directly. --}}
                                        <span class="mt-1 block text-[11px] text-primary-600">{{ __('front.installments.salary_backed_note') }}</span>
                                    @endif
                                </td>
                                <td class="px-4.5 py-3.5 text-ink-soft">@jalali($installment->due_at)</td>
                                <td class="px-4.5 py-3.5 font-bold">
                                    @toman($installment->amount) {{ __('front.credit.toman') }}
                                </td>
                                <td class="px-4.5 py-3.5">
                                    @if ($installment->penalty_amount > 0)
                                        <span class="font-bold text-secondary-500">@toman($installment->penalty_amount) {{ __('front.credit.toman') }}</span>
                                    @else
                                        <span class="text-ink-faint">&mdash;</span>
                                    @endif
                                </td>
                                <td class="px-4.5 py-3.5">
                                    <span @class([
                                        'rounded-2xl px-2.5 py-1.5 text-xs font-bold',
                                        'bg-[#f1f0f5] text-ink-muted' => $installment->status === \App\Models\Installment::STATUS_UPCOMING,
                                        'bg-[#fff5e6] text-amber-600' => $installment->status === \App\Models\Installment::STATUS_DUE,
                                        'bg-secondary-50 text-secondary-500' => $installment->status === \App\Models\Installment::STATUS_OVERDUE,
                                        'bg-[#e7f7ee] text-green-600' => $installment->status === \App\Models\Installment::STATUS_PAID,
                                    ])>
                                        {{ __("front.installments.statuses.{$installment->status}") }}
                                    </span>
                                </td>
                                <td class="px-4.5 py-3.5">
                                    @if ($installment->payableByUser())
                                        <button type="button"
                                                x-on:click="start(@js(route('account.installments.pay', $installment)), {{ $installment->payable() }})"
                                                class="rounded-[10px] bg-primary-600 px-4 py-1.5 text-[12.5px] font-bold text-white transition hover:bg-primary-700">
                                            {{ __('front.installments.pay') }}
                                        </button>
                                    @else
                                        <span class="text-ink-faint">&mdash;</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    @endif

    {{-- One hidden form the modal posts; its action is set to the chosen row. --}}
    <form method="POST" id="installment-pay-form" class="hidden">
        @csrf
        <input type="hidden" name="wallet_amount" id="installment-wallet-amount" value="0">
    </form>

    {{-- ===== Pay modal ===== --}}
    <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-[430px] 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-[#efeafb] text-primary-600">
                        <svg class="size-[23px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18M8 14h3"/></svg>
                    </span>
                    <div>
                        <h3 class="text-lg font-bold">{{ __('front.installments.pay_modal_title') }}</h3>
                        <p class="mt-0.5 text-[12.5px] text-ink-faint">{{ __('front.installments.pay_modal_subtitle') }}</p>
                    </div>
                </div>

                {{-- Total owed --}}
                <div class="flex items-center justify-between rounded-[14px] bg-[#faf9fd] px-4 py-3">
                    <span class="text-[12.5px] text-ink-faint">{{ __('front.installments.pay_total') }}</span>
                    <span class="text-[15px] font-bold">
                        <span dir="ltr" x-text="faTotal()"></span> {{ __('front.credit.toman') }}
                    </span>
                </div>

                {{-- Wallet choice (only when there is a balance to use) --}}
                <template x-if="balance > 0">
                    <div class="mt-4">
                        <label class="flex cursor-pointer items-center justify-between gap-3">
                            <span class="flex items-center gap-2.5">
                                <button type="button" x-on:click="toggleWallet()"
                                        class="relative h-6 w-11 rounded-full transition"
                                        x-bind:class="useWallet ? 'bg-primary-600' : 'bg-[#d5d3e0]'">
                                    <span class="absolute top-0.5 size-5 rounded-full bg-white transition-all"
                                          x-bind:class="useWallet ? 'right-0.5' : 'right-[22px]'"></span>
                                </button>
                                <span class="text-[13px] font-bold">{{ __('front.installments.pay_use_wallet') }}</span>
                            </span>
                        </label>
                        <p class="mt-1.5 text-[11.5px] text-ink-faint">{{ __('front.installments.pay_wallet_available', ['amount' => \App\Support\Format::persianDigits(\App\Support\Format::tomanFa($cashBalance))]) }}</p>

                        <div x-show="useWallet" x-cloak class="mt-3">
                            <label for="inst-wallet-amount" class="mb-1.5 block text-[12.5px] font-bold">{{ __('front.installments.pay_wallet_amount_label') }}</label>
                            <div class="flex items-stretch gap-2">
                                <input id="inst-wallet-amount" type="text" inputmode="numeric" dir="ltr"
                                       x-model="walletText" x-on:input="onWallet($event)"
                                       class="min-w-0 flex-1 rounded-xl border-[1.5px] border-[#e3e1ec] bg-[#fbfbfd] px-3.5 py-2.5 text-left text-sm font-bold outline-none transition focus:border-primary-600 focus:bg-white">
                                <button type="button" x-on:click="useMax()"
                                        class="shrink-0 rounded-xl bg-[#f2f0fa] px-3 text-xs font-bold text-primary-600 transition hover:bg-[#e8e3f8]">
                                    {{ __('front.installments.pay_use_all') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </template>

                {{-- The exact split, always visible so the sum is never a surprise --}}
                <div class="mt-4 flex flex-col gap-2 rounded-[14px] border border-[#f0eff5] p-4 text-[13px]">
                    <div class="flex items-center justify-between">
                        <span class="text-ink-faint">{{ __('front.installments.pay_row_wallet') }}</span>
                        <span class="font-bold"><span dir="ltr" x-text="faWallet()"></span> {{ __('front.credit.toman') }}</span>
                    </div>
                    <div class="flex items-center justify-between border-t border-[#f5f4f9] pt-2">
                        <span class="text-ink-faint">{{ __('front.installments.pay_row_online') }}</span>
                        <span class="font-bold text-primary-600"><span dir="ltr" x-text="faOnline()"></span> {{ __('front.credit.toman') }}</span>
                    </div>
                    <div class="flex items-center justify-between border-t border-[#f5f4f9] pt-2">
                        <span class="font-bold text-ink-faint">{{ __('front.installments.pay_row_total') }}</span>
                        <span class="font-bold"><span dir="ltr" x-text="faTotal()"></span> {{ __('front.credit.toman') }}</span>
                    </div>
                </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]">
                        {{ __('front.bank_accounts.cancel') }}
                    </button>
                    <button type="button" x-on:click="submit()" x-bind:disabled="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:opacity-60">
                        <span x-show="onlineAmount <= 0">{{ __('front.installments.pay_submit_wallet') }}</span>
                        <span x-show="onlineAmount > 0" x-cloak>{{ __('front.installments.pay_submit_online') }}</span>
                    </button>
                </div>

                {{-- Quick top-up when the wallet cannot cover it --}}
                <div class="mt-3 text-center" x-show="onlineAmount > 0" x-cloak>
                    <a href="{{ route('account.wallet') }}" class="text-[12.5px] font-bold text-primary-600">{{ __('front.installments.charge_wallet') }}</a>
                </div>
            </div>
        </div>
    </template>
    </div>
@endsection