@extends('admin.layouts.layout')
@section('title', 'Transaction Logs')
@section('content')
    <div class="py-2 ">
        <form action="{{ route('admin.transaction-logs') }}">

            <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
                <div class="flex gap-3 flex-wrap items-center">



                    <div
                        class="bg-[#133754] border border-[#EAEAEA] rounded-[5px] px-[10px] py-[10px]   flex justify-center">
                        <img src="{{ asset('newsites/admin/images/user-icon.png') }}" alt="images" />
                    </div>
                    <h1
                        class="text-[14px] lg:text-[15px] xl:text-[16px] 2xl:text-[17px] Poppins-medium
            text-[#133754]">
                        Transaction Logs
                    </h1>
                </div>

                <div class="flex gap-3 flex-wrap">

                    <div class="relative  md:w-[248px] w-full">
                        <select name="payment_status" onchange="this.form.submit()"
                            class="appearance-none w-full border border-[#EEEEEE] py-2.75 outline-0 rounded-md Poppins text-[14px] px-4 py-2 pr-10 text-[#4C4C4C] bg-white">
                            <option value="">Payment Status</option>
                            <option value="completed" {{ request('payment_status') == 'completed' ? 'selected' : '' }}>Completed
                            </option>
                            <option value="field" {{ request('payment_status') == 'field' ? 'selected' : '' }}>Field</option>
                            

                        </select>

                        <div class="pointer-events-none absolute inset-y-0 right-3 flex items-center text-gray-500">
                            <img src="{{ asset('newsites/admin/images/select-arrow.png') }}" class=" text-gray-500" />

                        </div>
                    </div>
                    <div class="relative md:w-[288px] w-full">
                        <div class="absolute inset-y-0 left-3 flex items-center pointer-events-none">
                            <i class="fa-solid fa-magnifying-glass text-[#9CA3AF]"></i>
                        </div>


                        <input type="text" placeholder="Search by Name" name="search" value="{{ request('search') }}"
                            class="border border-[#EEEEEE] placeholder:text-[#4C4C4C] rounded-md pl-10 pr-4 py-2.75 text-[#4C4C4C] Poppins text-[14px] w-full focus:outline-none " />

                    </div>
                </div>

            </div>

            <div class="w-full overflow-x-auto">
                <table class="min-w-225 w-full text-left text-[#1F1F1F] text-sm bg-white border-separate border-spacing-0">
                    <thead class="bg-[#F9F9FB] border">
                        <tr>
                            <th
                                class="sm:py-3.25 py-2 px-4 Poppins-medium text-[#44444A] text-[15px] rounded-tl-[6.79px] min-w-[224px]">
                                Student</th>
                            <th class="py-2 px-3 Poppins-medium text-[#44444A] text-[15px] min-w-[260px]">Tutor</th>
                            <th class="py-2 px-3 Poppins-medium text-[#44444A] text-[15px] min-w-[160px]">Booking ID</th>
                            <th class="py-2 px-3 Poppins-medium text-[#44444A] text-[15px] min-w-[160px]">Status</th>
                            <th class="py-2 px-3 Poppins-medium text-[#44444A] text-[15px] min-w-[160px]">Payment Date</th>
                            <th
                                class="py-2 px-3 Poppins-medium text-[#44444A] text-[15px] min-w-[160px] rounded-tr-[6.79px]">
                                Payment Amount</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($transactions as $transaction)
                        @if($transaction->booking)
                            <tr>
                                <td class="py-4 px-3 border-b border-[#E6E6E6]">
                                    <div class="flex items-center gap-2 text-[#636363] text-[17px] Poppins-medium">
                                        @if (!$transaction->student)
                                                N/A
                                        @else

                                        <img
                                        src="{{ asset($transaction->student->studentDefaultImage) }}"
                                        class="w-11 rounded-[4.62px] h-11 border border-[#D8DADF]" />{{ $transaction->student->name  ?? 'N/A'}}
                                        @endif
                                    </div>
                                </td>
                                <td class="py-4 px-3 border-b border-[#E6E6E6]">
                                    <div class="flex items-center gap-2 text-[#636363] text-[17px] Poppins-medium">
                                        @if (!$transaction->tutor)
                                        N/A
                                            @else
                                                
                                            <img
                                            src="{{ asset($transaction->tutor->tutorDefaultImage) }}"
                                            class="w-11 rounded-[4.62px] h-11 border border-[#D8DADF]" />{{ $transaction->tutor->name ?? 'N/A' }}
                                            @endif
                                    </div>
                                </td>
                                <td
                                    class="py-4 px-3 text-[#1F1F1F] font-bold Poppins-medium text-[15px] border-b border-[#E6E6E6]">
                                    {{ ($transaction->booking->session_id)?'#'.$transaction->booking->session_id:'N/A' }}</td>

                                <td class="py-4 px-3 text-[#009D2C] Poppins-medium text-[15px] border-b border-[#E6E6E6]">
                                    Completed</td>
                                <td class="py-4 px-3 text-[#636363] Poppins-medium text-[15px] border-b border-[#E6E6E6]">
                                    {{ dateFormate($transaction->booking_date, 'd/m/Y') }}</td>
                                <td class="py-4 px-3 text-[#009D2C] Poppins-medium text-[15px] border-b border-[#E6E6E6]">
                                    ${{ $transaction->amount }}
                                </td>
                            </tr>
                            @endif
                        @endforeach

                    </tbody>
                </table>
            </div>



            <div class="flex flex-wrap items-center justify-between mt-6 gap-4 text-sm text-gray-600">

                <div class="flex items-center gap-3">
                    <span class="text-[#4E4F54] text-sm Poppins">Items per page:</span>
                    <select name="per_page" onchange="this.form.submit()"
                        class="border border-[#E1E2E3] text-[#171717] Poppins rounded-md bg-[#F8F8F8] px-2 py-2">
                        <option value="5" {{ request('per_page') == 5 ? 'selected' : '' }}>5</option>
                        <option value="10" {{ request('per_page') == 10 ? 'selected' : '' }}>10</option>
                        <option value="20" {{ request('per_page') == 20 || !request('per_page') ? 'selected' : '' }}>20
                        </option>
                    </select>
                    <span class="text-[#4E4F54] text-sm Poppins">
                        {{ $transactions->firstItem() }}–{{ $transactions->lastItem() }} of {{ $transactions->total() }} Users
                    </span>
                </div>

                <div class="flex items-center gap-3">
                    <select name="page" onchange="this.form.submit()"
                        class="border border-[#E1E2E3] text-[#171717] Poppins rounded-md bg-[#F8F8F8] px-4 py-2">
                        @for ($i = 1; $i <= $transactions->lastPage(); $i++)
                            <option value="{{ $i }}" {{ $transactions->currentPage() == $i ? 'selected' : '' }}>
                                {{ $i }}
                            </option>
                        @endfor
                    </select>
                    <span class="text-[#4E4F54] text-sm Poppins">
                        of {{ $transactions->lastPage() }} pages
                    </span>

                    <button type="submit" name="page" value="{{ $transactions->currentPage() - 1 }}"
                        {{ $transactions->onFirstPage() ? 'disabled' : '' }}
                        class="border w-11 h-11 border-[#E1E2E3] rounded-md hover:bg-gray-100 cursor-pointer">
                        <i class="fa-solid fa-angle-left"></i>
                    </button>

                    <button type="submit" name="page" value="{{ $transactions->currentPage() + 1 }}"
                        {{ $transactions->hasMorePages() ? '' : 'disabled' }}
                        class="border w-11 h-11 border-[#E1E2E3] rounded-md hover:bg-gray-100 cursor-pointer">
                        <i class="fa-solid fa-angle-right"></i>
                    </button>
                </div>

            </div>
        </form>

    </div>
@endsection
