@extends('admin.layouts.layout')
@section('title','Payout management')
@section('content')


    <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-[160px] p-3 w-full rounded-[10px] border border-[#DADADA] shadow bg-no-repeat bg-cover"
                style="background-image: url('{{ asset('newsites/admin/images/card-bg-1.png') }}');">
                <div class="flex items-center justify-between mb-0">
                    <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>

                </div>
                <p class="text-sm text-[#313131] Poppins mb-0">Total Payouts Processed</p>
                <p class="text-[28px]  text-[#133754] Poppins font-semibold  mb-0">${{ $totalPayoutProcessed ?? 0 }}</p>
                <p class="text-sm Poppins-medium text-[#3F3F3F]">Total amount paid out to tutors</p>
            </div>


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


                </div>
                <p class="text-sm text-[#313131] Poppins mb-0">Pending Payout Requests</p>
                <p class="text-[28px]  text-[#133754] Poppins font-semibold  mb-0">${{ $pendingPayoutAmount ?? 0 }}</p>
                <p class="text-sm Poppins-medium text-[#3F3F3F]">No. of payout requests awaiting approval</p>
            </div>

            <div class="bg-white max-h-[160px] p-3 w-full rounded-[10px] border border-[#DADADA] shadow bg-no-repeat bg-cover"
                style="background-image: url('{{ asset('newsites/admin/images/card-bg-3.png') }}');">
                <div class="flex items-center justify-between mb-0">
                    <img src="{{ asset('newsites/admin/images/card-payout-icon-3.png') }}" />
                </div>
                <p class="text-sm text-[#313131] Poppins mb-0">Payouts This Month</p>
                <p class="text-[28px]  text-[#133754] Poppins font-semibold  mb-0">${{ $payoutThisMonth ?? 0 }}</p>
                <p class="text-sm Poppins-medium text-[#3F3F3F]">Total payouts processed this month</p>
            </div>
            <div class="bg-white max-h-[160px] p-3 w-full rounded-[10px] border border-[#DADADA] shadow bg-no-repeat bg-cover"
                style="background-image: url('{{ asset('newsites/admin/images/card-bg-5.png') }}');">
                <div class="flex items-center justify-between mb-0">
                    <div
                        class="bg-[#91FF3C] border border-[#EAEAEA] rounded-[5px] px-[10px] py-[10px]   flex justify-center">
                        <img src="{{ asset('newsites/admin/images/session-icon.png') }}" alt="images" />
                    </div>


                </div>
                <p class="text-sm text-[#313131] Poppins mb-0">Held Amount</p>
                <p class="text-[28px]  text-[#133754] Poppins font-semibold  mb-0">${{ $heldAmount ?? 0 }}</p>
                <p class="text-sm Poppins-medium text-[#3F3F3F]">Amount currently on hold</p>
            </div>
        </div>
        <div class="flex gap-2 flex-wrap">
            <button
                class=" cursor-pointer bg-[#133754] text-[#FFFFFF] Poppins-medium text-[16px] w-45.5 py-2.75 rounded-[5px] ">
                Payout Requests
            </button>
            <button
                class=" cursor-pointer bg-[#FEFEFE] border border-[#E5E5E5] text-[#313131] Poppins text-[14px] w-45.5 py-2.75 rounded-[5px]"
                onclick="window.location.href='payout-history'">
                Payout History
            </button>





        </div>

        <div class="grid xldesk:grid-cols-4 xl:grid-cols-3  sm:grid-cols-2 grid-cols-1   gap-2">
            @foreach ($tutorPayouts as $payout)
                <div class="bg-white border border-[#D8DADF] rounded-[10px] p-4 font-sans shadow-sm">
                    <div class="flex justify-between items-start mb-4">
                        <img src="{{ asset($payout->tutor->tutorDefaultImage) }}" alt="Profile"
                            class="w-[87px] h-[82px] rounded-[10px] object-cover ">
                        <div class="text-right">
                            <p class="text-[#070707] Poppins text-sm ">Request Date</p>
                            <p class="text-[#070707] Poppins-medium text-sm ">
                                {{ dateFormate($payout->request_date, 'd-m-Y') }}</p>
                        </div>
                    </div>

                    <div class="mb-5">
                        <h2 class="text-[#133754] Poppins-medium text-[20px]  leading-tight">{{ $payout->tutor->name }}
                        </h2>
                        <p class="text-[#636363] text-base Poppins text-[15px]">{{ $payout->tutor->email }}</p>
                    </div>

                    <div class="mb-2">
                        <p class="text-[#133754] Poppins-medium text-[16px]  mb-1">Requested Amount</p>
                        <div class="flex gap-2">
                            <div class="w-10 h-11.25 flex items-center justify-center bg-[#F4C701] rounded-[4px]">
                                <span class="text-[#655200]  Poppins text-2xl font-bold">$</span>
                            </div>
                            @foreach (str_split((string) $payout->amount) as $digit)
                                <div class="w-10 h-11.25 flex items-center justify-center bg-[#1CD8C4] rounded-[4px]">
                                    <span class="text-[#0D2B45] text-2xl Poppins font-bold">
                                        {{ $digit }}
                                    </span>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="space-y-4">
                        <div>
                            <p class="text-[#133754] Poppins-medium text-[16px]  mb-3">Payout Method</p>
                            @if ($payout->type == 'bank')
                                <button
                                    class="w-full h-[52px] bg-[#F4C701] rounded-[3px] flex items-center px-4 gap-4 transition hover:opacity-90">
                                    <div class="flex items-center justify-center border-r border-[#0D2B45]/20 pr-4">
                                        <img src="{{ asset('newsites/admin/images/bank.png') }}" class=""
                                            alt="Bank">
                                    </div>
                                    <span class="text-[#1A1A1A] Poppins-medium text-[15px] ">View Account Details</span>
                                </button>
                            @else
                                <button
                                    class="w-full h-[52px] bg-[#F4C701] rounded-[3px] flex items-center px-4 gap-4 transition hover:opacity-90">
                                    <div class="flex items-center justify-center border-r border-[#0D2B45]/20 pr-4">
                                        <img src="{{asset('newsites/admin/images/paypal-p.png')}}"
                                            class="" alt="paypal">
                                    </div>
                                    <span class="text-[#1A1A1A] Poppins-medium text-[15px] ">{{$payout->paypal_email}}</span>
                                </button>
                            @endif

                        </div>

                        @if ($payout->status=='pending')
                            <button command="show-modal" commandfor="confirm{{$payout->id}}"
                            class="w-full h-14 bg-[#133754] Poppins-medium text-white text-[15px] font-bold rounded-[5px] transition hover:bg-[#0D2B45] cursor-pointer">
                            Mark as Paid
                        </button>
                            
                        @else
                            <button  disabled
                            class="w-full h-14 bg-[#d7d9db] Poppins-medium text-white text-[15px] font-bold rounded-[5px] transition  cursor-pointer">
                            Mark as Paid
                        </button>
                        
                        @endif

                        
                    </div>
                </div>

               
            @endforeach

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



    </div>


    @foreach ($tutorPayouts as $payout)
         @include('components.confirmModal',[
                    'id'=>$payout->id,
                    'message'=>'Are you sure to mark as paid this payout?',
                    'route'=>route('admin.payout.markAsPaid',$payout->id)

                ])
    @endforeach


@endsection
