@extends('layouts.accounts')

@section('breadcrumb')
<div class="main-breadcrumb d-flex flex-wrap align-items-center my-4 gap-3">
    <h2 class="breadcrumb-title mb-0 flex-grow-1 fs-16">
        {{ tr('beneficiary_transactions') }}
    </h2>

    <nav aria-label="breadcrumb">
        <ol class="breadcrumb mb-0">
            <li><i class="ri-home-4-line fs-16 me-2 text-primary"></i></li>
            <li class="breadcrumb-item">
                <a href="{{ route('accounts.dashboard') }}">{{ tr('home') }}</a>
            </li>
            <li class="breadcrumb-item">
                <a href="{{ route('accounts.beneficiary_transactions.index') }}">
                    {{ tr('beneficiary_transactions') }}
                </a>
            </li>
            <li class="breadcrumb-item active">
                {{ tr('transaction_details') }}
            </li>
        </ol>
    </nav>
</div>
@endsection

@section('content')

<div class="row">
    <div class="col-xl-12">

        <div class="card shadow-sm border-0">
            <div class="card-header">
                <h5 class="card-title mb-0">{{ tr('transaction_summary') }}</h5>
            </div>

            <div class="card-body">

                <div class="row">

                    <div class="col-md-6 mb-3">
                        <div class="d-flex justify-content-between align-items-center p-3 border rounded">
                            <div>
                                <h6 class="mb-1 text-muted">
                                    <i class="ri-hashtag me-2 text-primary"></i>{{ tr('unique_id') }}
                                </h6>
                                <div class="fw-medium">
                                    {{ $beneficiary_transaction->unique_id }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6 mb-3">
                        <div class="d-flex justify-content-between align-items-center p-3 border rounded">
                            <div>
                                <h6 class="mb-1 text-muted">
                                    <i class="ri-user-3-line me-2 text-primary"></i>{{ tr('beneficiary_name') }}
                                </h6>
                                <div class="fw-medium">
                                    {{ mask_value($beneficiary_transaction->beneficiaryAccount->account_name) }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6 mb-3">
                        <div class="d-flex justify-content-between align-items-center p-3 border rounded">
                            <div>
                                <h6 class="mb-1 text-muted">
                                    <i class="ri-user-line me-2 text-primary"></i>{{ tr('remitter_name') }}
                                </h6>
                                <div class="fw-medium">
                                    {{
                                        mask_value(
                                         trim(
                                                ($beneficiary_transaction->sender?->name ?? '') 
                                            )
                                        ) ?: tr('na')
                                    }}
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-md-6 mb-3">
                        <div class="d-flex justify-content-between align-items-center p-3 border rounded">
                            <div>
                                <h6 class="mb-1 text-muted">
                                    <i class="ri-bank-card-line me-2 text-primary"></i>{{ tr('amount') }}
                                </h6>
                                <div class="fw-medium">
                                    {{ formatted_amount(
                                        $beneficiary_transaction->recipient_amount,
                                        $beneficiary_transaction->receiving_currency
                                    ) }}
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>

    </div>
</div>

@endsection