@extends('student.layouts.layout')
@section('title', 'Payments')
@section('content')
    <div class=" ">

        <div class="w-[full flex flex-col gap-3 justify-between">
            <div class="grid sm:grid-cols-2 xl:grid-cols-3 grid-cols-1 xldesk:grid-cols-4 gap-3">


                <div class="bg-white max-h-[155px] p-3 w-full rounded-[10px] border border-[#DADADA] shadow bg-no-repeat bg-cover"
                    style="background-image: url('{{ asset('student/Sites/images/card-bg-1.png') }}');">
                    <div class="flex items-center justify-between mb-0">
                        <img src="{{ asset('student/Sites/images/card-icon-1.png') }}" />

                    </div>
                    <p class="text-sm text-[#313131] Poppins mb-0">Monthly Spending</p>
                    <p class="text-[28px]  text-[#133754] Poppins font-semibold  mb-0">
                        ${{ number_format($monthlySpending, 2) }}</p>
                    <p class="text-sm Poppins-medium text-[#3F3F3F]">Spending since joining</p>
                </div>


                <div class="bg-white max-h-[155px] p-3 w-full rounded-[10px] border border-[#DADADA] shadow bg-no-repeat bg-cover"
                    style="background-image: url('{{ asset('student/Sites/images/card-bg-2.png') }}');">
                    <div class="flex items-center justify-between mb-0">
                        <img src="{{ asset('student/Sites/images/card-icon-2.png') }}" />

                    </div>
                    <p class="text-sm text-[#313131] Poppins mb-0">Monthly Spending</p>
                    <p class="text-[28px]  text-[#133754] Poppins font-semibold  mb-0">
                        ${{ number_format($thisMonthSpending, 2) }}</p>
                    <p class="text-sm Poppins-medium text-[#3F3F3F]">Spending this month</p>
                </div>

                <div class="bg-white max-h-[155px] p-3 w-full rounded-[10px] border border-[#DADADA] shadow bg-no-repeat bg-cover"
                    style="background-image: url('{{ asset('student/Sites/images/card-bg-3.png') }}');">
                    <div class="flex items-center justify-between mb-0">
                        <img src="{{ asset('student/Sites/images/card-payout-icon-3.png') }}" />
                    </div>
                    <p class="text-sm text-[#313131] Poppins mb-0">Monthly Pending Amount</p>
                    <p class="text-[28px]  text-[#133754] Poppins font-semibold  mb-0">
                        ${{ number_format($monthlyPending, 2) }}</p>
                    <p class="text-sm Poppins-medium text-[#3F3F3F]">Pending this month</p>
                </div>
                <div class="bg-white max-h-[155px] p-3 w-full rounded-[10px] border border-[#DADADA] shadow bg-no-repeat bg-cover"
                    style="background-image: url('{{ asset('student/Sites/images/card-bg-green.png') }}');">
                    <div class="flex items-center justify-between mb-0">
                        <img src="{{ asset('student/Sites/images/card-payout-icon-4.png') }}" />

                    </div>
                    <p class="text-sm text-[#313131] Poppins mb-0">Monthly Approved Amount</p>
                    <p class="text-[28px]  text-[#133754] Poppins font-semibold  mb-0">
                        ${{ number_format($monthlyApproved, 2) }}</p>
                    <p class="text-sm Poppins-medium text-[#3F3F3F]">Approved this month</p>
                </div>
            </div>

            <div class="flex justify-between   mt-5 ">
                <div class="flex items-center sm:gap-4 gap-2 ">
                    <div class="bg-[#2AE3D1] border border-[#EAEAEA] rounded-[5px] px-[8px] py-[11px]  flex justify-center">
                        <img src="{{ asset('student/Sites/images/session-frame.png') }}" alt="images" />
                    </div>
                    <h3 class="text-[#133754] Poppins-medium text-[20px]      mb-0">All Transcations</h3>
                </div>
            </div>

            <hr class="border-[#E5E5E5] ">
            <div class="grid grid-cols-1 desk:grid-cols-4 md:grid-cols-3 gap-2">
                @foreach ($transactions as $transaction)
                @if($transaction->booking)
                    <div class="border-dashed border border-[#A4A4A4] rounded-[7px] bg-white max-w-[367px] overflow-hidden">

                        <div class="p-3 space-y-1 text-[14px] text-[#333]">
                            <div class="flex justify-between">
                                <span class="text-[#7A7A7A] Poppins text-[15.76px]">Transaction ID</span>
                                <span
                                    class="text-[#212121] Poppins-medium text-lg">{{ $transaction->transaction_token }}</span>
                            </div>

                            <div class="flex justify-between">
                                <span class="text-[#7A7A7A] Poppins text-[15.76px]">Transaction Date</span>
                                <span
                                    class="text-[#212121] Poppins-medium text-lg">{{ \Carbon\Carbon::parse($transaction->date)->format('d, M Y') }}</span>
                            </div>

                            <div class="flex justify-between items-center">
                                <span class="text-[#7A7A7A] Poppins text-[15.76px]">Payment Status</span>
                                <span
                                    class="{{ $transaction->status == 'completed' ? 'bg-[#0AC400]' : 'bg-[#F44336]' }} text-sm Poppins-medium text-[12px] text-white sm:px-8 px-5 sm:py-1.75 py-1.5 rounded-xs">
                                    {{ $transaction->status == 'completed' ? 'Completed' : 'Pending' }}
                                </span>
                            </div>

                            <hr class="border-[#E5E5E5] my-3">

                            <div class="flex justify-between">
                                <span class="text-[#7A7A7A] Poppins text-[15.76px]">Tutor name</span>
                                <span class="text-[#212121] Poppins-medium text-lg">{{ $transaction->tutor->name ?? 'N/A' }}
                                    </span>
                            </div>

                            <div class="flex justify-between">
                                <span class="text-[#7A7A7A] Poppins text-[15.76px]">Booking ID</span>
                                <span class="text-[16px] Poppins">#{{ $transaction->booking->session_id ?? 'N/A' }}</span>
                            </div>

                            <div class="flex justify-between">
                                <span class="text-[#7A7A7A] Poppins text-[15.76px]">Sessions</span>
                                <span
                                    class="text-[#212121] Poppins-medium text-lg">{{ $transaction->total_sessions ?? $transaction->total_sessions }}</span>
                            </div>
                        </div>

                        <div class="bg-[#00D2BB] text-white text-center text-2xl Poppins-medium py-1.5">
                            ${{ number_format($transaction->amount, 2) }}
                        </div>

                        <div class="p-4 space-y-3 text-[14px] text-[#333]">
                            <div class="flex justify-between">
                                <span class="text-[#7A7A7A] Poppins text-[15.76px]">Payment Method</span>
                                <span
                                    class="text-[#133754] Poppins-medium text-[16px]">{{ $transaction->payment_method ?? 'Paypal' }}</span>
                            </div>

                            <div class="flex justify-between">
                                <span class="text-[#7A7A7A] Poppins text-[15.76px]">Authorization Date</span>
                                <span
                                    class="text-[#212121] Poppins-medium text-lg">{{ \Carbon\Carbon::parse($transaction->date)->format('d, M Y') }}</span>
                            </div>

                            {{-- <button class="bg-[#F4C701] w-full text-[16.97px] text-[#212121] py-2.75 rounded-sm Poppins-medium">
            Download
        </button>
         --}}
                            <a href="{{ route('student.payments.download', encrypt($transaction->id)) }}"
                                class="bg-[#F4C701] w-full text-[16.97px] text-[#212121] py-2.75 rounded-sm Poppins-medium text-center inline-block">
                                Download
                            </a>
                        </div>

                    </div>
                @endif
                @endforeach
            </div>

              <div class="w-full flex justify-center mt-12">
                {!! $transactions->links('components.pagination') !!}
            </div>




        </div>

    </div>
@endsection
