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

@section('contents')
    <div class="min-h-screen">
        <!-- Top Navigation Spacer for Desktop -->
        <div class="hidden lg:block h-16"></div>
        <!-- Content Area -->
        <div class="p-6">
            <div class="">
                <section class="mt-4 md:mt-12 lg:mt-20 lg:px-40">
                    <div class="grid grid-cols-1 gap-4 mb-4">
                        <!-- Header and Controls Section -->

                        <!-- transactions content -->
                        <div class="border border-transparent bg-clip-border rounded-2xl p-4 mt-4 relative w-full"
                            style="background: linear-gradient(to right,#14f19510,#e39dff10,#80ecff10);">
                            <!-- Pseudo-element for gradient border -->
                            <div class="absolute inset-0 rounded-2xl pointer-events-none"
                                style="background: linear-gradient(to right,#14f195,#80ecff,#e39dff);padding: 1px;mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite: xor;mask-composite: exclude;">
                            </div>
                            <div class="flex flex-col md:flex-row justify-between w-full">
                                <div class="flex flex-col space-y-3 md:w-80">
                                    <div
                                        class="flex items-center space-x-2 border gradient-border3 text-black rounded-2xl px-2 py-2">
                                        <img src="{{ asset('/assets/templates/lunex/images/search-icon.svg') }}"
                                            alt="" class="w-5 h-5" />
                                        <input type="text" placeholder="Tnx Ref" id="search-transaction-input"
                                            value="{{ request()->s }}"
                                            class="bg-transparent focus:outline-none text-sm flex-grow placeholder-gray-500 w-full" />

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

                                <h2 class="text-black text-xl font-semibold mb-2 md:mb-0 order-first">
                                    Total Transactions
                                </h2>
                            </div>

                            <div class="relative z-10 text-center py-8">
                                <p class="text-5xl md:text-[7rem] font-bold text-black my-1">
                                    {{ $transactions->total() }}
                                </p>
                                <p class="text-gray-600">Transactions</p>
                            </div>

                            <hr class="border-t border-green-300 my-4" />

                            <div
                                class="overflow-x-auto rounded-lg max-h-[calc(100vh-300px)] md:max-h-[60vh] overflow-y-auto pr-2 scrollbar-thin scrollbar-thumb-gray-600 scrollbar-track-transparent hover:scrollbar-thumb-gray-500 relative z-10">
                                <table class="w-full min-w-[640px]">
                                    <thead>
                                        <tr class="">
                                            <th class="text-black px-3 md:px-4 py-3 text-start text-sm w-1/5">
                                                Date/Time
                                            </th>
                                            <th class="text-black px-3 md:px-4 py-3 text-start text-sm w-1/5">
                                                User
                                            </th>
                                            <th class="text-black px-3 md:px-4 py-3 text-start text-sm w-1/5">
                                                Ref
                                            </th>
                                            <th class="text-black px-3 md:px-4 py-3 text-start text-sm w-1/5">
                                                Amount
                                            </th>
                                            <th class="text-black px-3 md:px-4 py-3 text-end text-sm w-1/5">
                                                Transaction
                                            </th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                        @forelse ($transactions as $transaction)
                                            <tr class="border-b border-[#a3dc2f]/20">
                                                <td class="text-black px-3 md:px-4 py-4 w-1/5">
                                                    {{ date('d-m-y H:i:s', strtotime($transaction->created_at)) }}
                                                </td>
                                                <td class="text-black px-3 md:px-4 py-4 text-start w-1/5">
                                                    {{ $transaction->description }}
                                                </td>
                                                <td class="text-black px-3 md:px-4 py-4 text-start text-sm w-1/5">
                                                    <span class="clipboard cursor-pointer"
                                                        data-copy="{{ $transaction->ref }}">{{ $transaction->ref }}</span>
                                                </td>
                                                <td class="text-black px-3 md:px-4 py-4 text-start text-sm w-1/5">
                                                    {{ formatAmount($transaction->amount) }}
                                                </td>
                                                <td
                                                    class="text-[#ea0a0e] px-3 md:px-4 py-4 text-end text-sm w-1/5 capitalize">
                                                    @if ($transaction->type == 'debit')
                                                        <span class="bg-[#ea0a03]/5 rounded-2xl py-2 px-4">
                                                            {{ $transaction->type }}
                                                        </span>
                                                    @else
                                                        <span class="bg-[#08c949]/5 text-green-500 rounded-2xl py-2 px-4">
                                                            {{ $transaction->type }}
                                                        </span>
                                                    @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>
                    </div>


                </section>
            </div>
        </div>
    </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
