<div class="my-6">
    <!-- Date and Amount section - visible on small/medium screens, hidden on lg+ -->
    <div class="lg:hidden my-6 grid grid-cols-2 gap-4">
        <!-- Date column - aligned with From column -->
        <div>
            <div class="text-theme-muted text-sm font-normal uppercase mb-2">
                {{ __('Date') }}
            </div>
            <div class="whitespace-no-wrap text-theme-primary font-bold">
                {{ ucfirst($transaction['datetime']->locale(app()->getLocale())->translatedFormat('l d-m-Y')) }}
            </div>
            <div class="whitespace-no-wrap text-theme-primary">
                {{ str_replace('@TIME@', $transaction['datetime']->locale(app()->getLocale())->translatedFormat('H:i:s'), __('on @TIME@')) }}
            </div>
        </div>
        <!-- Amount column - aligned with To column -->
        <div>
            <div class="text-theme-muted text-sm font-normal uppercase mb-2">
                {{ __('Amount') }}
            </div>
            <div class="whitespace-no-wrap text-theme-primary font-bold">
                {{ tbFormat($transaction['amount']) }}
            </div>
        </div>
    </div>

    <!--Statement table / grid -->
    <div class="lg:hidden grid grid-cols-2 gap-4">
        <!-- From column header -->
        <div class="text-theme-muted text-sm font-normal uppercase py-4">
            {{ __('From') }}
        </div>
        <!-- To column header -->
        <div class="text-theme-muted text-sm font-normal uppercase py-4">
            {{ __('To') }}
        </div>

        <!-- From profile content -->
        <div class="align-top text-sm">
            <div class="flex flex-col sm:flex-row items-start">
                <div class="flex-shrink-0 mb-2 sm:mb-0">
                    <div class="relative block cursor-pointer"
                         onclick="window.location='{{ url($transaction['from_profile_path']) }}'">
                        <img alt="profile"
                             class="h-10 w-10 md:h-16 md:w-16 rounded-full profile-photo object-cover outline outline-1 outline-offset-1 outline-gray-500"
                             src="{{ Storage::url($transaction['from_profile_photo']) }}" />
                    </div>
                </div>
                <div class="sm:ml-3">
                    <div class="whitespace-no-wrap text-theme-primary font-bold mb-2">
                        @if ($transaction['from_profile_full_name'] == $transaction['from_profile_name'])
                            {{ $transaction['from_profile_name'] }}
                            <div class="text-theme-muted text-2xs font-normal">
                                {{ $transaction['from_profile_location'] }} </div>
                        @else
                            {{ $transaction['from_profile_name'] }}
                            <div class="text-theme-muted text-2xs font-normal">
                                {{ Illuminate\Support\Str::limit($transaction['from_profile_name'] . ', ' . $transaction['from_profile_location'], 35) }}
                            </div>
                        @endif
                    </div>
                    <div class="whitespace-no-wrap text-theme-primary">
                        {{ __(ucfirst(strtolower($transaction['from_account']))) }} {{ __('bank account') }}
                    </div>
                </div>
            </div>
        </div>

        <!-- To profile content -->
        <div class="align-top text-sm">
            <div class="flex flex-col sm:flex-row items-start">
                <div class="flex-shrink-0 mb-2 sm:mb-0">
                    <div class="relative block cursor-pointer"
                         onclick="window.location='{{ url($transaction['to_profile_path']) }}'">
                        <img alt="profile"
                             class="h-10 w-10 md:h-16 md:w-16 rounded-full profile-photo object-cover outline outline-1 outline-offset-1 outline-gray-500"
                             src="{{ Storage::url($transaction['to_profile_photo']) }}" />
                    </div>
                </div>
                <div class="sm:ml-3">
                    <div class="whitespace-no-wrap text-theme-primary font-bold mb-2">
                        @if ($transaction['to_profile_full_name'] == $transaction['to_profile_name'])
                            {{ $transaction['to_profile_name'] }}
                            <div class="text-theme-muted text-2xs font-normal">
                                {{ $transaction['to_profile_location'] }} </div>
                        @else
                            {{ $transaction['to_profile_name'] }}
                            <div class="text-theme-muted text-2xs font-normal">
                                {{ Illuminate\Support\Str::limit($transaction['to_profile_full_name'] . ', ' . $transaction['to_profile_location'], 35) }}
                            </div>
                        @endif
                    </div>
                    <div class="whitespace-no-wrap text-theme-primary">
                        {{ __(ucfirst(strtolower($transaction['to_account']))) }} {{ __('bank account') }}
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Table for large screens -->
    <table class="hidden lg:table w-full min-w-full text-left leading-normal" id="transaction">
        <thead class="uppercase">
            <tr>
                <th class="pr-4 py-4">
                    <div class="text-theme-muted text-sm font-normal">
                        {{ __('Date') }}
                    </div>
                </th>
                <th class="pr-4 py-4">
                    <div class="text-theme-muted text-sm font-normal">
                        {{ __('From') }}
                    </div>
                </th>
                <th class="pr-4 py-4">
                    <div class="text-theme-muted text-sm font-normal">
                        {{ __('To') }}
                    </div>
                </th>
                <th class="">
                    <div class="text-theme-muted text-sm font-normal">
                        {{ __('Amount') }}
                    </div>
                </th>
            </tr>
        </thead>

        <tbody>
            <tr class="" style="cursor: pointer;">
                <td class="w-2/20 align-top text-sm">
                    <div class="whitespace-no-wrap text-theme-primary font-bold">
                        {{ ucfirst($transaction['datetime']->locale(app()->getLocale())->translatedFormat('l d-m-Y')) }}
                    </div>
                    <div class="whitespace-no-wrap text-theme-primary">
                        {{ str_replace('@TIME@', $transaction['datetime']->locale(app()->getLocale())->translatedFormat('H:i:s'), __('on @TIME@')) }}
                    </div>
                </td>
                <td class="w-8/20 align-top text-sm">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <div class="relative block cursor-pointer"
                                 onclick="window.location='{{ url($transaction['from_profile_path']) }}'">
                                <img alt="profile"
                                     class="mx-auto h-10 w-10 md:h-16 md:w-16 rounded-full profile-photo object-cover outline outline-1 outline-offset-1 outline-gray-500"
                                     src="{{ Storage::url($transaction['from_profile_photo']) }}" />
                            </div>
                        </div>
                        <div class="ml-3">
                            <div class="whitespace-no-wrap text-theme-primary font-bold mb-2">
                                @if ($transaction['from_profile_full_name'] == $transaction['from_profile_name'])
                                    {{ $transaction['from_profile_name'] }}
                                    <div class="text-theme-muted text-2xs font-normal">
                                        {{ $transaction['from_profile_location'] }} </div>
                                @else
                                    {{ $transaction['from_profile_name'] }}
                                    <div class="text-theme-muted text-2xs font-normal">
                                        {{ Illuminate\Support\Str::limit($transaction['from_profile_name'] . ', ' . $transaction['from_profile_location'], 35) }}
                                    </div>
                                @endif
                            </div>
                            <div class="whitespace-no-wrap text-theme-primary">
                                {{ __(ucfirst(strtolower($transaction['from_account']))) }} {{ __('bank account') }}
                            </div>
                        </div>
                    </div>
                </td>

                <td class="w-8/20 align-top text-sm">
                    <div class="flex items-start">
                        <div class="flex-shrink-0">
                            <div class="relative block cursor-pointer"
                                 onclick="window.location='{{ url($transaction['to_profile_path']) }}'">
                                <img alt="profile"
                                     class="mx-auto h-10 w-10 md:h-16 md:w-16 rounded-full profile-photo object-cover outline outline-1 outline-offset-1 outline-gray-500"
                                     src="{{ Storage::url($transaction['to_profile_photo']) }}" />
                            </div>
                        </div>
                        <div class="ml-3">
                            <div class="whitespace-no-wrap text-theme-primary font-bold mb-2">
                                @if ($transaction['to_profile_full_name'] == $transaction['to_profile_name'])
                                    {{ $transaction['to_profile_name'] }}
                                    <div class="text-theme-muted text-2xs font-normal">
                                        {{ $transaction['to_profile_location'] }} </div>
                                @else
                                    {{ $transaction['to_profile_name'] }}
                                    <div class="text-theme-muted text-2xs font-normal">
                                        {{ Illuminate\Support\Str::limit($transaction['to_profile_full_name'] . ', ' . $transaction['to_profile_location'], 35) }}
                                    </div>
                                @endif
                            </div>
                            <div class="whitespace-no-wrap text-theme-primary">
                                {{ __(ucfirst(strtolower($transaction['to_account']))) }} {{ __('bank account') }}
                            </div>
                        </div>
                    </div>
                </td>

                <td class="w-2/20 text-semibold align-top text-sm font-bold">
                    <div class="whitespace-no-wrap text-theme-primary">
                        {{ tbFormat($transaction['amount']) }}
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

    <!-- Description --->
    <div class="text-theme-muted mb-4 mt-8 px-0 text-sm font-normal uppercase">
        {{ __('Description') }}
    </div>
    <div class="text-theme-primary text-base leading-loose">
        {{ $transaction['description'] }}
    </div>

   <!-- Transaction type -->
    @if (!empty($transaction['type_label']))
        <div class="text-theme-muted uppercase mt-12 px-0 text-sm font-normal">
            {{ __('Transaction type') }}
        </div>
        <div class="text-theme-primary my-6 text-base leading-loose">
            <div class="flex flex-col md:flex-row items-start md:items-center">
                <div class="mb-2 md:mb-0 flex items-center justify-center rounded-full outline outline-1 outline-offset-1 outline-gray-600">
                    <x-icon class="" mini name="{{ $transaction['type_icon'] }}" />
                </div>
                <span class="md:ml-3">{{ __(ucfirst(strtolower($transaction['type_label']))) }}</span>
            </div>
        </div>
    @endif

    <div class="text-theme-primary my-6 align-bottom">
        <!-- Creater user -->
        @if ($transaction['creator_user'])
            <div class="text-theme-primary float-left mt-12 px-0 text-sm font-normal">
                {{ __('Payment executed by') . ' ' }}
                <a href="{{ url($transaction['creator_user']['path']) }}">
                    {{ $transaction['creator_user']['name'] }}
                </a>
            </div>
        @else
            <div class="text-theme-muted float-left mt-12 px-0 text-sm font-normal">
                {{ __('Payment executed by') . ' ' }}
                {{ config('app.name') . ' ' . __('system administration') }}
            </div>
        @endif
        <span class="float-right mt-6 mb-20 place-items-end" onclick="qrModal()" style="cursor: pointer;"
              wire:click="$toggle('qrModalVisible')">
            {{ SimpleSoftwareIO\QrCode\Facades\QrCode::size(60)->errorCorrection('L')->color(17, 24, 39)->generate(route('transaction.show', ['transactionId' => $transactionId])) }}
        </span>

    </div>

    <!---- QR Modal ---->
    <x-jetstream.dialog-modal wire:model.live="qrModalVisible">

        <x-slot name="title">
            {{ __('QR code') }} {{ strtolower(__('Transaction # ')) }} {{ $transaction['trans_id'] }}
        </x-slot>

        <x-slot name="content">
            <div class="flex h-full flex-col items-center justify-center">
                <div class="items-center justify-center py-6">
                    {!! __('messages.payment.qr_statement', [
                        'from_profile' => $transaction['from_profile_name'],
                        'to_profile' => $transaction['to_profile_name'],
                        'app_url' => config('app.url'),
                    ]) !!}
                </div>
                <!-- Align QR code in center and scale to max width -->
                <div class="relative mb-4 object-cover" id="qr-container" wire:click="$toggle('qrModalVisible')">
                    {{ SimpleSoftwareIO\QrCode\Facades\QrCode::size(280)->errorCorrection('L')->color(17, 24, 39)->generate(route('transaction.show', ['transactionId' => $transactionId])) }}
                </div>

                <!-- Route Link -->
                {{ route('transaction.show', ['transactionId' => $transactionId]) }}
                <x-jetstream.secondary-button class="mt-6" no-spinner wire:click="$toggle('qrModalVisible')">
                    {{ __('Close') }}
                </x-jetstream.secondary-button>
            </div>
        </x-slot>

        <x-slot name="footer">
        </x-slot>

        <x-slot name="footer">
        </x-slot>
    </x-jetstream.dialog-modal>
</div>
