@extends('dashboard.user.layouts.app')
@section('content')
    <div class="page-container">

        <div class="page-title-head d-flex align-items-sm-center flex-sm-row flex-column gap-2">
            <div class="flex-grow-1">
                <h4 class="fs-18 fw-semibold mb-0">{{ $title }}</h4>
            </div>

            <div class="text-end">
                <x-dashboard.user.breadcrumbs :breadcrumbs="$breadcrumbs" />
            </div>
        </div>

        <div class="row">
            <div class="col-lg-10 mx-auto">
                <div class="card border-0 shadow rounded-4 overflow-hidden">

                    {{-- ── CARD HEADER ── --}}
                    <div class="card-header bg-light border-bottom px-4 px-md-5 py-4">
                        <h5 class="fw-bold mb-1">Review Transfer Details</h5>
                        <p class="text-muted mb-0 small">
                            Please carefully review the information below before authorizing this transaction.
                        </p>
                    </div>

                    <div class="card-body p-4 p-md-5">

                        {{-- ── AMOUNT HERO ── --}}
                        <div class="border text-center rounded-3 py-5 px-3 mb-4 position-relative txr-hero">
                            <div class="txr-hero-glow"></div>
                            <div class="position-relative">
                                <p class="text-uppercase fw-bold mb-2 text-muted"
                                    style="font-size:.68rem;letter-spacing:.1em;">Amount to Debit</p>
                                <h2 class="display-5 fw-bold mb-1 text-dark">
                                    {{ currency($user->currency) }}{{ formatAmount($transfer->amount) }}
                                </h2>
                                <span class="badge bg-white border text-muted fw-semibold px-3 py-2 rounded-pill"
                                    style="font-size:.72rem;letter-spacing:.04em;">
                                    {{ $transfer->transfer_type->fullLabel() }}
                                </span>
                            </div>
                        </div>

                        {{-- ── BENEFICIARY INFO ── --}}
                        <p class="text-uppercase text-muted fw-bold mb-3 pb-2 border-bottom"
                            style="font-size:.68rem;letter-spacing:.1em;">
                            Beneficiary Information
                        </p>

                        <div class="row g-0 mb-4">

                            <div class="col-12 col-sm-6 py-3 pe-sm-4 border-bottom">
                                <p class="text-muted mb-1" style="font-size:.75rem;font-weight:500;">Beneficiary Name</p>
                                <strong>{{ $transfer->recipient_name }}</strong>
                            </div>

                            <div class="col-12 col-sm-6 py-3 ps-sm-4 border-bottom txr-border-start-sm">
                                <p class="text-muted mb-1" style="font-size:.75rem;font-weight:500;">Account Number</p>
                                <strong style="font-family:monospace;">{{ $transfer->recipient_account_number }}</strong>
                            </div>

                            <div class="col-12 col-sm-6 py-3 pe-sm-4 border-bottom">
                                <p class="text-muted mb-1" style="font-size:.75rem;font-weight:500;">Bank Name</p>
                                <strong>{{ $transfer->recipient_bank }}</strong>
                            </div>

                            @if ($transfer->recipient_swift_code || $transfer->recipient_iban_code || $transfer->recipient_routing_number)
                                <div class="col-12 col-sm-6 py-3 ps-sm-4 border-bottom txr-border-start-sm">
                                    <p class="text-muted mb-1" style="font-size:.75rem;font-weight:500;">
                                        @if ($transfer->recipient_swift_code)
                                            SWIFT Code
                                        @elseif ($transfer->recipient_iban_code)
                                            IBAN
                                        @elseif ($transfer->recipient_routing_number)
                                            Routing Number
                                        @endif
                                    </p>
                                    <strong style="font-family:monospace;">
                                        {{ $transfer->recipient_swift_code ?? ($transfer->recipient_iban_code ?? $transfer->recipient_routing_number) }}
                                    </strong>
                                </div>
                            @endif

                            @if ($transfer->description)
                                <div class="col-12 py-3 border-bottom">
                                    <p class="text-muted mb-1" style="font-size:.75rem;font-weight:500;">Description</p>
                                    <strong>{{ $transfer->description }}</strong>
                                </div>
                            @endif

                        </div>

                        {{-- ── ADDITIONAL CODES (if multiple) ── --}}
                        @php
                            $codes = array_filter([
                                'SWIFT' => $transfer->recipient_swift_code ?? null,
                                'IBAN' => $transfer->recipient_iban_code ?? null,
                                'Routing' => $transfer->recipient_routing_number ?? null,
                            ]);
                        @endphp
                        @if (count($codes) > 1)
                            <div class="d-flex flex-wrap gap-2 mb-4">
                                @foreach ($codes as $label => $value)
                                    <div class="border rounded-3 px-3 py-2 bg-light">
                                        <p class="text-uppercase text-muted fw-bold mb-1"
                                            style="font-size:.6rem;letter-spacing:.08em;">{{ $label }}</p>
                                        <span class="fw-semibold"
                                            style="font-family:monospace;font-size:.85rem;">{{ $value }}</span>
                                    </div>
                                @endforeach
                            </div>
                        @endif

                        {{-- ── AUTHORIZATION NOTICE ── --}}
                        <div
                            class="rounded-3 border border-warning-subtle bg-warning-subtle px-4 py-3 mb-4 d-flex align-items-start gap-3">
                            <i class="bi bi-exclamation-triangle-fill text-warning mt-1 flex-shrink-0"></i>
                            <p class="mb-0 small text-warning-emphasis">
                                By confirming this transfer, you authorize the debit of the above amount from your account.
                                This action may not be reversible once processed.
                            </p>
                        </div>

                        {{-- ── ACTIONS ── --}}
                        <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 pt-3 border-top">

                            <a href="{{ route('user.transfer.cancel', $transfer->uuid) }}"
                                onclick="return confirm('Are you sure you want to cancel this transfer?')"
                                class="btn btn-outline-secondary d-inline-flex align-items-center gap-2 rounded-3 px-4">
                                <i class="bi bi-x-lg"></i> Cancel
                            </a>

                            @if (!$user->shouldTransferFail())
                                @if ($transferNeedVerificationCode)
                                    <a href="{{ route('user.transfer.verify', [$transfer->uuid, $orderNo]) }}"
                                        class="btn btn-primary d-inline-flex align-items-center gap-2 rounded-3 px-4">
                                        Confirm &amp; Continue <i class="bi bi-arrow-right"></i>
                                    </a>
                                @else
                                    <a href="{{ route('user.transfer.complete', $transfer->uuid) }}"
                                        class="btn btn-primary d-inline-flex align-items-center gap-2 rounded-3 px-4">
                                        Confirm Transfer <i class="bi bi-check2"></i>
                                    </a>
                                @endif
                            @else
                                <a href="{{ route('user.transfer.fail', $transfer->uuid) }}"
                                    class="btn btn-primary d-inline-flex align-items-center gap-2 rounded-3 px-4">
                                    Confirm Transfer <i class="bi bi-check2"></i>
                                </a>
                            @endif

                        </div>

                    </div>{{-- /card-body --}}
                </div>{{-- /card --}}
            </div>

            <style>
                /* Amount hero */
                .txr-hero {
                    /* background-color: #f7f8fa; */
                }

                .txr-hero-glow {
                    position: absolute;
                    inset: 0;
                    pointer-events: none;
                    background: radial-gradient(ellipse 70% 70% at 50% 0%, rgba(99, 102, 241, .08) 0%, transparent 70%);
                    border-radius: inherit;
                }

                /* Responsive left border for paired detail columns */
                @media (min-width: 576px) {
                    .txr-border-start-sm {
                        border-left: 1px solid #dee2e6 !important;
                    }
                }
            </style>
        </div>
    </div>
@endsection