{{--
=====================================================
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 user's bank accounts from the approved design:
     card grid with the default and review states, and
     the add-account modal with live BIN detection.
=====================================================
--}}

@extends('layouts.user')

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

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

@section('page')
    <div>
        <div class="mb-[22px] flex flex-wrap items-end justify-between gap-4">
            <div>
                <h1 class="mb-1 text-2xl font-bold tracking-tight">{{ __('front.bank_accounts.title') }}</h1>
                <p class="text-sm text-ink-muted">{{ __('front.bank_accounts.subtitle') }}</p>
            </div>

            @if ($accounts->count() < $limit)
                <button type="button" x-on:click="$dispatch('open-add-account')"
                        class="inline-flex items-center gap-2 rounded-xl bg-primary-600 px-5 py-3 text-sm font-bold text-white shadow-lg shadow-primary-600/25 transition hover:bg-primary-700">
                    <svg class="size-[17px]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
                    {{ __('front.bank_accounts.add') }}
                </button>
            @endif
        </div>

        @if ($accounts->isEmpty())
            <div class="mb-[22px] rounded-2xl border border-dashed border-[#d9d6e6] bg-white px-6 py-12 text-center text-sm text-ink-muted">
                {{ __('front.bank_accounts.empty') }}
            </div>
        @else
            <div class="mb-[22px] grid gap-[18px] sm:grid-cols-2 xl:grid-cols-3">
                @foreach ($accounts as $account)
                    @php $isDefault = $account->is_default && $account->isApproved(); @endphp

                    <div @class([
                        'relative overflow-hidden rounded-[18px] p-[22px]',
                        'bg-gradient-to-bl from-[#5e42be] to-[#3f2a8f] text-white' => $isDefault,
                        'border border-line bg-white' => ! $isDefault,
                    ])>
                        @if ($isDefault)
                            <span class="absolute -top-10 left-[-30px] size-[130px] rounded-full bg-white/10" aria-hidden="true"></span>
                        @endif

                        <div class="relative mb-5 flex items-center justify-between gap-3">
                            <div class="flex items-center gap-2.5">
                                <x-ui.bank-mark :account="$account" :on-dark="$isDefault" />
                                <span class="text-sm font-bold">{{ $account->bankName() }}</span>
                            </div>

                            @if ($isDefault)
                                <span class="rounded-[10px] bg-white/15 px-2.5 py-1 text-[11px] font-bold">{{ __('front.bank_accounts.default') }}</span>
                            @endif
                        </div>

                        <div class="relative mb-3.5 text-left text-lg tracking-[2px]" dir="ltr">@fa($account->maskedCard())</div>

                        <div class="relative flex items-end justify-between gap-2.5">
                            <div class="min-w-0">
                                <div @class(['text-[11px]', 'opacity-80' => $isDefault, 'text-ink-faint' => ! $isDefault]) dir="ltr">@fa($account->formattedSheba())</div>

                                <span @class([
                                    'mt-2 inline-flex items-center gap-1.5 rounded-xl px-2.5 py-1 text-[11px] font-bold',
                                    'bg-white/20 text-white' => $isDefault,
                                    'bg-[#e7f7ee] text-green-600' => ! $isDefault && $account->isApproved(),
                                    'bg-[#fff5e6] text-amber-600' => $account->isPending(),
                                    'bg-secondary-50 text-secondary-500' => $account->status === \App\Models\BankAccount::STATUS_REJECTED,
                                ])>{{ __("front.bank_accounts.statuses.{$account->status}") }}</span>

                                @if ($account->reject_reason !== null)
                                    <span class="mt-1 block text-[11px] text-secondary-500">
                                        {{ __('front.bank_accounts.reject_reason') }}: {{ $account->reject_reason }}
                                    </span>
                                @endif
                            </div>

                            <div class="flex shrink-0 gap-2">
                                @if ($account->isApproved() && ! $account->is_default)
                                    <form method="POST" action="{{ route('account.bank-accounts.default', $account) }}" x-data="{ busy: false }"
                                          x-on:submit.prevent="$store.confirm.ask({ message: @js(__('front.bank_accounts.confirm_default', ['card' => \App\Support\Format::persianDigits($account->maskedCard())])), onConfirm: () => { busy = true; $el.submit(); } })">
                                        @csrf
                                        <button type="submit" x-bind:disabled="busy"
                                                class="rounded-lg bg-[#f2f0fa] px-2.5 py-1.5 text-[11.5px] font-bold text-primary-600 transition hover:bg-[#e8e3f8] disabled:opacity-60">
                                            {{ __('front.bank_accounts.make_default') }}
                                        </button>
                                    </form>
                                @endif

                                <form method="POST" action="{{ route('account.bank-accounts.destroy', $account) }}" x-data="{ busy: false }"
                                      x-on:submit.prevent="$store.confirm.ask({ message: @js(__('front.bank_accounts.confirm_delete', ['card' => \App\Support\Format::persianDigits($account->maskedCard())])), onConfirm: () => { busy = true; $el.submit(); } })">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" x-bind:disabled="busy" @class([
                                        'rounded-lg px-2.5 py-1.5 text-[11.5px] font-bold transition disabled:opacity-60',
                                        'bg-white/15 text-white hover:bg-white/25' => $isDefault,
                                        'bg-secondary-50 text-secondary-500 hover:bg-secondary-100' => ! $isDefault,
                                    ])>{{ __('front.bank_accounts.delete') }}</button>
                                </form>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        @endif

        <div class="flex gap-3.5 rounded-[14px] border border-[#e4ddf7] bg-[#f3f0fb] px-[18px] py-4">
            <svg class="mt-0.5 size-[19px] shrink-0 text-primary-600" 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.5"/></svg>
            <p class="text-[13px] leading-8 text-ink-soft">{{ __('front.bank_accounts.note', ['name' => auth()->user()->fullName()]) }}</p>
        </div>

        @include('account.bank-accounts._add-modal')
    </div>
@endsection