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

@section('contents')
    {{-- mobile gradients  --}}
    <!-- Top Blurs -->
    <div class="absolute inset-x-0 -top-20 w-[70vw] h-[20vh] bg-[#552481]/50 rounded-full blur-3xl lg:hidden -z-10"></div>
    <div class="absolute right-0 -top-28 w-[60vw] h-[30vh] bg-[#552481]/50 rounded-full blur-3xl lg:hidden -z-10"></div>
    <div class="absolute left-10 md:left-40 -top-40 w-[50vw] h-[25vh] bg-[#1f4470]/50 rounded-full blur-3xl lg:hidden -z-10">
    </div>

    <!-- Mid-Screen Blurs -->
    <div
        class="absolute right-5 md:right-32 top-[50vh] w-[50vw] h-[20vh] bg-[#552481]/50 rounded-full blur-3xl lg:hidden -z-10">
    </div>
    <div
        class="absolute left-5 md:left-28 top-[60vh] w-[60vw] h-[25vh] bg-[#1f4470]/50 rounded-full blur-3xl lg:hidden -z-10">
    </div>

    <!-- Bottom Blurs -->
    <div
        class="absolute left-10 md:left-40 -bottom-32 w-[50vw] h-[25vh] bg-[#1f4470]/50 rounded-full blur-3xl lg:hidden -z-10">
    </div>
    <div
        class="absolute right-5 md:right-32 -bottom-52 w-[60vw] h-[30vh] bg-[#552481]/50 rounded-full blur-3xl lg:hidden -z-10">
    </div>
    <div class="absolute inset-x-0 -bottom-72 w-[70vw] h-[20vh] bg-[#1f4470]/50 rounded-full blur-3xl lg:hidden -z-10"></div>

    <!--my transaction-->
    <section class="px-6 md:mt-28 lg:max-w-7xl mx-auto lg:relative" id="pageContent">
        <div class="absolute -left-72 -top-28 p-40 bg-[#552481]/50 rounded-full blur-3xl hidden lg:block -z-10"></div>
        <div class="absolute -right-40 -top-28 p-40 md:p-80 bg-[#552481]/50 rounded-full blur-3xl hidden lg:block -z-10">
        </div>
        <div class="absolute left-40 md:left-96 -top-60 p-40 bg-[#1f4470]/50 rounded-full blur-3xl hidden lg:block -z-10">
        </div>
        <div
            class="absolute left-40 md:left-96 -bottom-40 p-40 bg-[#1f4470]/50 rounded-full blur-3xl hidden lg:block -z-10">
        </div>
        <div class="lg:max-w-screen-xl mx-auto p-4 mb-3 text-white">

            {{-- <div class="block mb-3">
                <h1 class="text-xl lg:text-3xl font-bold">Transactions</h1>
            </div> --}}

            <div class="lg:flex justify-between items-center mb-5 py-5">
                <div class="mb-3 block p-2">
                    <p> <span class=" text-white px-6 py-2 rounded-xl gradient-tab">My
                            Transactions</span></p>
                </div>
                <div x-data="{ search: '' }"
                    class="flex items-center space-x-2 border border-[#ff8ac63e] text-white rounded-2xl py-1 px-2 text-sm">
                    <!-- Search Icon -->
                    <img src="{{ asset('/assets/templates/trello/images/search-icon.png') }}" alt="" />

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

                    <!-- Search Button -->
                    <div class="simple-pagination" data-paginator="deposits">
                        <a id="search-deposit-button" data-link="{{ route('user.deposits.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="col-span-2">
                <div class="block bg-gradient-to-r from-[#561bbe]/80 to-[#fa5ed3]/80 rounded-t-xl overflow-auto w-full p-6">
                    <div class="flex items-center gap-2 mb-4">
                        <img src="{{ asset('/assets/templates/trello/images/transaction-icon.svg') }}" alt="">
                        <p class="font-medium text-white">Total Transactions</p>
                    </div>

                    <h2 class="text-white text-2xl md:text-3xl lg:text-5xl"> {{ $transactions->total() }}</h2>


                </div>

                <div class="lg:grid  gap-10" id="transactions">
                    <div class="col-span-3 mb-10" data-aos="zoom-in">
                        <div
                            class="block bg-slate800/70 border  border-white/50 rounded-b-2xl overflow-auto w-full max-h-[60vh]">
                            <table class="w-full" id="transactionsTable">
                                <thead class="text-left ">
                                    <th class="p-6 lg:min-w-32 min-w-[50vw]">Date/Time</th>
                                    <th class="p- lg:min-w-32 min-w-[50vw]">User</th>
                                    <th class="p-2 lg:min-w-32 min-w-[50vw]">Ref</th>
                                    <th class="p-2 lg:min-w-32 min-w-[30vw]">Amount</th>
                                    <th class="p-2 lg:min-w-32 min-w-[20vw] text-end px-4">Status</th>
                                </thead>
                                <tbody>
                                    @forelse ($transactions as $transaction)
                                        <tr class="border-b border-opacity-25 border-blue-200 py-6">
                                            <td class="py-6 px-4">
                                                <p>{{ date('d-m-y H:i:s', strtotime($transaction->created_at)) }}</p>
                                            </td>
                                            <td class="py-6">
                                                <p class="cursor-pointer" data-copy="{{ $transaction->description }}">
                                                    {{ $transaction->description }}</p>
                                            </td>
                                            <td class="py-6" data-transaction_tnx="{{ $transaction->ref }}">
                                                <p class="clipboard cursor-pointer" data-copy="{{ $transaction->ref }}">
                                                    {{ $transaction->ref }}</p>
                                            </td>
                                            <td class="py-6">
                                                <p>{{ formatAmount($transaction->amount) }}</p>
                                            </td>
                                            <td class="py-6 flex justify-end px-4">
                                                @if ($transaction->type == 'debit')
                                                    <span
                                                        class="text-end rounded-full w-auto bg-[#EA0A0E]/10  py-1 px-3 text-sm text-[#EA0A0E]">{{ $transaction->type }}</span>
                                                @else
                                                    <span
                                                        class="text-end rounded-full w-auto bg-[#00aa39]/10  py-1 px-3 text-sm text-[#00aa39]">{{ $transaction->type }}</span>
                                                @endif
                                            </td>
                                        </tr>
                                    @empty
                                    @endforelse
                                </tbody>
                            </table>
                        </div>

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

                    </div>



                </div>


            </div>
    </section>
    <!--end my transaction-->
@endsection

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

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