@extends('templates.' . site('template') . '.layouts.user')

@section('contents')
    <div class="transition-all duration-300 ease-in-out"
        :class="{
            'lg:ml-64': !isCollapsed,
            'lg:ml-20': isCollapsed
        }">


        <div class="min-h-screen" id="pageContent">
            <!-- Top Navigation Spacer for Desktop -->
            <div class="hidden lg:block h-20"></div>
            <!-- Content Area -->

            <div class="p-6 md:p-12">
                <!-- My Transactions  -->
                <div class="mt-8" id="transactions">
                    <div class="grid cols-1 md:grid-cols-2 gap-4 mb-4">
                        <h2 class="text-white text-lg font-semibold md:col-span-1">
                            Transaction History
                            <span class="text-xs text-sky-400 block">You have made 4740 transactions</span>
                        </h2>

                        <div
                            class="flex items-center space-x-2 border border-gray-800 text-white rounded-2xl px-2 py-1 w-68 md:col-span-1 md:ml-auto">
                            <!-- Search Icon -->
                            <img src="{{ asset('/assets/templates/pandel/images/search-icon.png') }}" alt="" />

                            <!-- Input Field -->
                            <input type="text" placeholder="Txn Ref" id="search-transaction-input"
                                value="{{ request()->s }}"
                                class="bg-transparent focus:outline-none text-sm flex-grow placeholder-gray-500" />

                            <!-- Search Button -->
                            <div class="simple-pagination" data-paginator="transactions">
                                <a id="search-transaction-button" data-link="{{ route('user.transactions.index') }}"
                                    href=""
                                    class="paginator-link bg-gray-800 px-3 py-1 rounded-md text-sm hover:bg-gray-700 flex items-center justify-center">
                                    Search
                                </a>
                            </div>
                        </div>

                    </div>

                    <div class="bg-gray-800/50 rounded-lg p-6">
                        <div class="w-full overflow-x-auto">
                            <table class="w-full">
                                <thead>
                                    <tr class="border-b border-gray-700">
                                        <th class="text-gray-500 px-4 py-3 text-left">
                                            Txn Ref
                                        </th>
                                        <th class="text-gray-500 px-4 py-3 text-left">
                                            Exit Time (UTC)
                                        </th>
                                        <th class="text-gray-500 px-4 py-3 text-left">Amount</th>
                                        <th class="text-gray-500 px-4 py-3 text-end">Source</th>
                                        <th class="text-gray-500 px-4 py-3 text-end">Status</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($transactions as $transaction)
                                        <tr class="border-b border-gray-700">
                                            <td class="text-white px-4 py-4 text-sm">
                                                <p class="clipboard cursor-pointer" data-copy="{{ $transaction->ref }}">
                                                    Ref: {{ $transaction->ref }}</p>
                                            </td>
                                            <td class="text-gray-400 px-4 py-4 text-sm">
                                                {{ date('d-m-y H:i:s', strtotime($transaction->created_at)) }}
                                            </td>
                                            <td class="text-white px-4 py-4 text-sm">
                                                {{ formatAmount($transaction->amount) }}</td>
                                            <td class="text-gray-400 px-4 py-4 text-end text-sm">
                                                <p class="cursor-pointer" data-copy="{{ $transaction->description }}">
                                                    {{ $transaction->description }}</p>
                                            </td>
                                            <td class="text-white px-4 py-4 cursor-pointer text-end">

                                                @if ($transaction->type == 'debit')
                                                    <button
                                                        class="bg-red-900/30 text-red-500 py-1 px-4 rounded-3xl items-center justify-center w-40 h-10 text-sm gap-2">
                                                        {{ $transaction->type }}
                                                    </button>
                                                @else
                                                    <button
                                                        class="bg-green-900/30 text-green-500 py-1 px-4 rounded-3xl items-center justify-center w-40 h-10 text-sm gap-2">
                                                        {{ $transaction->type }}
                                                    </button>
                                                @endif


                                            </td>
                                        </tr>
                                    @empty
                                        <div>
                                            <p
                                                class="w-full flex justify-center items-center ts-gray-3 p-2 rounded-lg border border-slate-800 hover:border-slate-600 cursor-pointer">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-orange-500"
                                                    fill="currentColor" class="bi bi-exclamation-triangle-fill"
                                                    viewBox="0 0 16 16">
                                                    <path
                                                        d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
                                                </svg>
                                                <span>Empty Record!</span>
                                            </p>
                                        </div>
                                    @endforelse
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- navigation arrows  -->
                    <div class="cursor-pointer simple-pagination" data-paginator="transactions">
                        {{ $transactions->links('templates.' . site('template') . '.paginations.simple') }}
                    </div>


                </div>
            </div>


        </div>

        <footer>
            <div class="mt-8 text-center text-sm text-sky-400 mb-4">
                All Rights Operational
            </div>
        </footer>


    </div>
@endsection

@section('scripts')
    <script>
        // search transaction
        $(document).on('input keyup', '#search-transaction-input', function(e) {
            var ref = $(this).val();
            var base_link = $('#search-transaction-button').data('link');
            var encodedRef = encodeURIComponent(ref);

            // Append the query parameter to the URL
            var link = base_link + '?s=' + encodedRef;
            $('#search-transaction-button').attr('href', link);
        });
    </script>
@endsection
