@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">

                {{-- ── CARD ── --}}
                <div class="card border-0 shadow rounded-4 overflow-hidden">

                    {{-- ── CARD HEADER ── --}}
                    <div
                        class="card-header bg-light border-bottom py-3 px-4 d-flex justify-content-between align-items-center gap-2">
                        <div>
                            <p class="text-uppercase text-muted fw-semibold mb-0"
                                style="font-size:.68rem;letter-spacing:.08em;">Reference ID</p>
                            <span class="fw-semibold"
                                style="font-family:monospace;font-size:.85rem;">{{ $transaction->reference_id }}</span>
                        </div>
                        <span class="{{ $transaction->status->badge() }} rounded-pill px-3 py-2"
                            style="font-size:.72rem;letter-spacing:.04em;">
                            {{ $transaction->status->label() }}
                        </span>
                    </div>

                    {{-- ── AMOUNT HERO ── --}}
                    <div
                        class="text-center py-5 px-3 position-relative txn-hero {{ $transaction->isDirectionCredit() ? 'txn-hero--credit' : 'txn-hero--debit' }}">
                        <div class="txn-hero-glow"></div>
                        <div class="position-relative">
                            <p class="mb-2 d-inline-flex align-items-center gap-1 fw-semibold txn-direction-label"
                                style="font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;">
                                @if ($transaction->isDirectionCredit())
                                    <i class="bi bi-arrow-up-circle-fill"></i> Credit Transaction
                                @else
                                    <i class="bi bi-arrow-down-circle-fill"></i> Debit Transaction
                                @endif
                            </p>
                            <h2 class="display-5 fw-bold mb-0 txn-amount">
                                @if ($transaction->isDirectionCredit())
                                    +{{ currency($user->currency) }}{{ formatAmount($transaction->amount) }}
                                @else
                                    &minus;{{ currency($user->currency) }}{{ formatAmount($transaction->amount) }}
                                @endif
                            </h2>
                        </div>
                    </div>

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

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

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

                            <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;">Transaction Type
                                </p>
                                <strong>{{ $transaction->type->label() }}</strong>
                            </div>

                            <div class="col-12 col-sm-6 py-3 ps-sm-4 border-bottom txn-border-start-sm">
                                <p class="text-muted mb-1" style="font-size:.75rem;font-weight:500;">Transaction Date
                                </p>
                                <strong>{{ formatDateTime($transaction->transaction_at) }}</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;">Balance After
                                    Transaction</p>
                                <strong style="font-family:monospace;">
                                    {{ currency($user->currency) }}{{ formatAmount($transaction->current_balance) }}
                                </strong>
                            </div>

                            <div class="col-12 py-3 border-bottom">
                                <p class="text-muted mb-1" style="font-size:.75rem;font-weight:500;">Description</p>
                                <strong>{{ $transaction->description ?? 'Not provided' }}</strong>
                            </div>

                        </div>

                        {{-- ── TRANSFER DETAILS ── --}}
                        @if ($transaction->transfer)
                            <p class="text-uppercase text-muted fw-bold mb-3 pb-2 border-bottom"
                                style="font-size:.68rem;letter-spacing:.1em;">
                                Transfer Details
                            </p>

                            {{-- Sender → Recipient visual block --}}
                            <div class="bg-light rounded-3 p-3 p-md-4 mb-4">
                                <div class="row align-items-center g-3">

                                    {{-- Sender --}}
                                    <div class="col-12 col-sm">
                                        <p class="text-uppercase text-muted fw-bold mb-1"
                                            style="font-size:.63rem;letter-spacing:.08em;">Sender</p>
                                        <p class="fw-bold mb-1">{{ $transaction->transfer->sender_bank }}</p>
                                        <p class="text-muted mb-0" style="font-family:monospace;font-size:.82rem;">
                                            {{ $transaction->transfer->sender_account_number }}</p>
                                    </div>

                                    {{-- Arrow --}}
                                    <div class="col-12 col-sm-auto text-center">
                                        <div
                                            class="d-flex flex-row flex-sm-column align-items-center justify-content-center gap-1">
                                            <div class="txn-arrow-line d-none d-sm-block"></div>
                                            <span class="badge bg-white text-muted border fw-bold"
                                                style="font-size:.63rem;letter-spacing:.05em;">
                                                {{ $transaction->transfer->transfer_type->fullLabel() }}
                                            </span>
                                            <i class="bi bi-arrow-right d-inline d-sm-none text-muted fs-5"></i>
                                            <i class="bi bi-arrow-down d-none d-sm-block text-muted fs-5"></i>
                                            <div class="txn-arrow-line d-none d-sm-block"></div>
                                        </div>
                                    </div>

                                    {{-- Recipient --}}
                                    <div class="col-12 col-sm text-sm-end">
                                        <p class="text-uppercase text-muted fw-bold mb-1"
                                            style="font-size:.63rem;letter-spacing:.08em;">Beneficiary</p>
                                        <p class="fw-bold mb-1">{{ $transaction->transfer->recipient_name }}</p>
                                        <p class="text-muted mb-1" style="font-size:.82rem;">
                                            {{ $transaction->transfer->recipient_bank }}</p>
                                        <p class="text-muted mb-0" style="font-family:monospace;font-size:.82rem;">
                                            {{ $transaction->transfer->recipient_account_number }}</p>
                                    </div>

                                </div>
                            </div>

                            {{-- Optional Banking Codes --}}
                            @if (
                                $transaction->transfer->recipient_swift_code ||
                                    $transaction->transfer->recipient_iban_code ||
                                    $transaction->transfer->recipient_routing_number)
                                <div class="d-flex flex-wrap gap-2 mb-4">

                                    @if ($transaction->transfer->recipient_swift_code)
                                        <div class="border rounded-3 px-3 py-2 bg-white">
                                            <p class="text-uppercase text-muted fw-bold mb-1"
                                                style="font-size:.6rem;letter-spacing:.08em;">SWIFT</p>
                                            <span class="fw-semibold"
                                                style="font-family:monospace;font-size:.85rem;">{{ $transaction->transfer->recipient_swift_code }}</span>
                                        </div>
                                    @endif

                                    @if ($transaction->transfer->recipient_iban_code)
                                        <div class="border rounded-3 px-3 py-2 bg-white">
                                            <p class="text-uppercase text-muted fw-bold mb-1"
                                                style="font-size:.6rem;letter-spacing:.08em;">IBAN</p>
                                            <span class="fw-semibold"
                                                style="font-family:monospace;font-size:.85rem;">{{ $transaction->transfer->recipient_iban_code }}</span>
                                        </div>
                                    @endif

                                    @if ($transaction->transfer->recipient_routing_number)
                                        <div class="border rounded-3 px-3 py-2 bg-white">
                                            <p class="text-uppercase text-muted fw-bold mb-1"
                                                style="font-size:.6rem;letter-spacing:.08em;">Routing</p>
                                            <span class="fw-semibold"
                                                style="font-family:monospace;font-size:.85rem;">{{ $transaction->transfer->recipient_routing_number }}</span>
                                        </div>
                                    @endif

                                </div>
                            @endif
                        @endif

                        {{-- ── ACTIONS ── --}}
                        <div class="d-flex flex-wrap justify-content-end gap-2 pt-3 border-top">
                            <a href="{{ route('transaction.receipt', [$transaction->uuid, $user->uuid]) }}"
                                class="btn btn-dark d-inline-flex align-items-center gap-2 rounded-3">
                                <i class="bi bi-printer"></i> Print Receipt
                            </a>
                            <a href="{{ route('user.transaction.index') }}"
                                class="btn btn-outline-secondary d-inline-flex align-items-center gap-2 rounded-3">
                                <i class="bi bi-arrow-left"></i> Back
                            </a>
                        </div>

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

            </div>

            <style>
                /* Hero panel */
                .txn-hero {
                    overflow: hidden;
                }

                .txn-hero--credit {
                    background-color: #f0faf4;
                }

                .txn-hero--debit {
                    background-color: #fff5f5;
                }

                .txn-hero-glow {
                    position: absolute;
                    inset: 0;
                    pointer-events: none;
                }

                .txn-hero--credit .txn-hero-glow {
                    background: radial-gradient(ellipse 70% 70% at 50% 0%, rgba(34, 197, 94, .18) 0%, transparent 70%);
                }

                .txn-hero--debit .txn-hero-glow {
                    background: radial-gradient(ellipse 70% 70% at 50% 0%, rgba(239, 68, 68, .15) 0%, transparent 70%);
                }

                .txn-direction-label {
                    opacity: .75;
                }

                .txn-hero--credit .txn-direction-label,
                .txn-hero--credit .txn-amount {
                    color: #1a7a4a;
                }

                .txn-hero--debit .txn-direction-label,
                .txn-hero--debit .txn-amount {
                    color: #c0392b;
                }

                /* Transfer arrow connector */
                .txn-arrow-line {
                    width: 2px;
                    height: 22px;
                    background: #dee2e6;
                    border-radius: 2px;
                }

                /* Left border for right column on sm+ breakpoint */
                @media (min-width: 576px) {
                    .txn-border-start-sm {
                        border-left: 1px solid #dee2e6 !important;
                    }
                }
            </style>
        </div>
    </div>
@endsection