@extends('tutor.layouts.layout')

@section('title', 'Earning and payouts')
@section('content')
<style>
    .user-profile{
        width:40px;
        height:40px;
    }
</style>
    <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('tutor/images/card-bg-1.png') }}');">
                    <div class="flex items-center justify-between mb-0">
                        <img src="{{ asset('tutor/images/card-icon-1.png') }}" />

                    </div>
                    <p class="text-sm text-[#313131] Poppins mb-0">Monthly Earnings</p>
                    <p class="text-[28px]  text-[#133754] Poppins font-semibold  mb-0">
                        ${{ auth()->user()->monthlyAverageEarnings() }}</p>
                    <p class="text-sm Poppins-medium text-[#3F3F3F]">Earnings 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('tutor/images/card-bg-2.png') }}');">
                    <div class="flex items-center justify-between mb-0">
                        <img src="{{ asset('tutor/images/card-payout-icon-2.png') }}" />

                    </div>
                    <p class="text-sm text-[#313131] Poppins mb-0">Amount in Wallet</p>
                    <p class="text-[28px]  text-[#133754] Poppins font-semibold  mb-0">
                        ${{ auth()->user()->getTutorWalletAmount() }}</p>
                    <p class="text-sm Poppins-medium text-[#3F3F3F]">Amount awaiting release</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('tutor/images/card-bg-3.png') }}');">
                    <div class="flex items-center justify-between mb-0">
                        <img src="{{ asset('tutor/images/card-payout-icon-3.png') }}" />
                    </div>
                    <p class="text-sm text-[#313131] Poppins mb-0">Pending Amount</p>
                    <p class="text-[28px]  text-[#133754] Poppins font-semibold  mb-0">
                        ${{ auth()->user()->getTutorPendingEarning() }}</p>
                    <p class="text-sm Poppins-medium text-[#3F3F3F]">{{ date('M Y') }}</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('tutor/images/card-bg-green.png') }}');">
                    <div class="flex items-center justify-between mb-0">
                        <img src="{{ asset('tutor/images/card-payout-icon-4.png') }}" />

                    </div>
                    <p class="text-sm text-[#313131] Poppins mb-0">This Month</p>
                    <p class="text-[28px]  text-[#133754] Poppins font-semibold  mb-0">
                        ${{ auth()->user()->getTutorMonthPayout() }}</p>
                    <p class="text-sm Poppins-medium text-[#3F3F3F]">Payout of this month</p>
                </div>
            </div>
            <div class="flex justify-between   mt-3 mb-3 pb-3 border-b border-[#DADADA]">

                <div class="flex items-center gap-2 ">
                    <img src="{{ asset('tutor/images/payment-method-icon.png') }}" alt="images"
                        class="sm:w-[53px] sm:h-[50px] w-11" />

                    <h3 class="text-[#4A4A4A] Poppins-medium  sm:text-[16px] text-sm  mb-0 sm:px-3 ">Payment Method</h3>
                </div>
                <div>

                    <button
                        class="text-[#000000] Poppins-medium text-sm border border-[#DFDFDF] bg-[#F4C701] sm:px-12 px-6 rounded-sm sm:py-3.5 py-2 cursor-pointer"
                        command="show-modal" commandfor="requestpayoutpop">Request Payout</button>
                </div>
            </div>
            <div class="grid sm:grid-cols-2 grid-cols-1 gap-5 2xl:w-[53%] lg:w-[80%]">

                <div class="bg-white relative p-3 w-full border-[#c9eeff] rounded-[10px] border  shadow bg-no-repeat bg-cover"
                    style="background-image: url('{{ asset('tutor/images/payment-card-1.png') }}');">
                    <div class="flex justify-center mt-3">
                        <img src="{{ asset('tutor/images/paypal.png') }}" class="h-[50px] bg-cover" />
                    </div>


                    <div class="absolute top-3 right-3 z-10">
                        <label class="flex items-center gap-2 text-[16px] syne-medium text-[#111827]">

                            <input type="radio" name="2" value="paypal"
                                class="radio-button-checked payment_method_check" checked />

                        </label>
                    </div>

                    <p class="text-center mt-6 mb-3 text-[#133754] text-[16px] Poppins-medium">
                        PayPal
                    </p>
                    <button
                        class="w-full bg-[#1CD8C4] text-[#000000] py-3 text-sm rounded-sm font-medium Poppins-medium cursor-pointer"
                        command="show-modal" commandfor="paypalpop">
                        Add Details
                    </button>
                </div>

                <div class="bg-white  relative  p-3 w-full rounded-[10px] border border-[#c0ffc0] shadow bg-no-repeat bg-cover"
                    style="background-image: url('{{ asset('tutor/images/payment-card-2.png') }}');">
                    <div class="flex  justify-center  mt-3">
                        <img src="{{ asset('tutor/images/bank-icon.png') }}" class="h-[50px] bg-cover" />

                    </div>
                    <div class="absolute top-3 right-3 z-10">
                        <label class="flex items-center gap-2 text-[16px] syne-medium text-[#111827]">

                            <input type="radio" name="2" value="bank"
                                class="radio-button-checked payment_method_check" />

                        </label>
                    </div>
                    <p class="text-center mt-6 mb-3 text-[#133754] text-[16px] Poppins-medium">
                        Bank Account
                    </p>
                    <button
                        class="w-full bg-[#1CD8C4] text-[#000000] py-3 text-sm rounded-sm font-medium Poppins-medium cursor-pointer"
                        command="show-modal" commandfor="bankpop">
                        Add Details
                    </button>
                </div>

            </div>
            <div class="bg-white grid mt-3 rounded-[10px] border border-[#DADADA]  shadow max-h-[500px] overflow-y-auto">
                <div
                    class="flex justify-between sm:px-6 px-3 sm:pb-4 pb-2 sm:py-6 py-4
              border-b border-[#DADADA]">

                    <div class="flex items-center sm:gap-4 gap-2 ">
                        <img src="{{ asset('tutor/images/eraning-tras-icon.png') }}" alt="images"
                            class="sm:w-[53px] sm:h-[50px] w-11" />
                        <h3 class="text-[#4A4A4A] Poppins-medium  text-[16px]  mb-0">Earning Transactions</h3>
                    </div>
                    <div>


                    </div>
                </div>

                <div class="w-full overflow-x-auto">
                    <table
                        class="min-w-[900px] w-full  sm:p-5 p-3 text-left text-[#1F1F1F] text-sm bg-white border-separate border-spacing-0">
                        <thead class="bg-[#F3F3F3] border ">
                            <tr>
                                <th
                                    class="sm:py-4 py-2 px-4  Poppins text-[#1F1F1F] text-[14px] font-normal rounded-bl-2xl rounded-tl-2xl overflow-hidden">
                                    Student
                                </th>
                                <th class="py-2 px-3  Poppins text-[#1F1F1F] text-[14px] font-normal">
                                    Date
                                </th>
                                <th class="py-2 px-3  Poppins text-[#1F1F1F] text-[14px] font-normal">
                                    Duration
                                </th>
                                <th class="py-2 px-3  Poppins text-[#1F1F1F] text-[14px] font-normal">
                                    Tutor Earning
                                </th>
                                 <th
                                    class="py-2 px-3 Poppins text-[#1F1F1F] text-[14px] font-normal ">
                                    Status
                                </th>
                                <th class="py-2 px-3  Poppins text-[#1F1F1F] text-[14px] font-normal rounded-tr-2xl rounded-br-2xl overflow-hidden">
                                    Payout Date
                                </th>
                               
                            </tr>
                        </thead>

                        <tbody>


                            @foreach ($earnings as $earning)
                                @if ($earning->session)
                                    <tr>
                                        <td class="py-4 px-3 border-b border-[#E6E6E6]">
                                            <div class="flex items-center gap-2 text-[#111111] text-sm Inter-m font-medium">
                                                <img src="{{ asset($earning->student->userDefaultProfile) }}" class="user-profile" />
                                                {{ $earning->student->name }}
                                            </div>
                                        </td>
                                        <td
                                            class="py-4 px-4 text-[#4B4B4B] text-[14.65px] font-medium Inter-m border-b border-[#E6E6E6]">
                                            {{ dateFormate($earning->date, 'd-m-Y') }} </td>
                                        <td
                                            class="py-4 px-4 text-[#4B4B4B] text-[14.65px] font-medium Inter-m border-b border-[#E6E6E6]">
                                            {{ $earning->session->duration }} </td>
                                        <td
                                            class="py-4 px-4 text-[#4B4B4B] text-[14.65px] font-medium Inter-m border-b border-[#E6E6E6]">
                                            ${{ $earning->amount }}</td>
                                      
                                        @if ($earning->status == 'pending')
                                         <td class="py-4 px-4 text-[#F4C701] Inter font-bold border-b border-[#E6E6E6]">
                                                {{ ucFirst($earning->status) }}</td>
                                        @elseif($earning->status == 'cancelled' || $earning->status == 'refunded')
                                            <td class="py-4 px-4 text-[#c9202b] Inter font-bold border-b border-[#E6E6E6]">
                                                {{ ucFirst($earning->status) }}</td>
                                        @else
                                            <td class="py-4 px-4 text-[#00C200] Inter font-bold border-b border-[#E6E6E6]">
                                                {{ ucFirst($earning->status) }}</td>
                                        @endif
                                          <td
                                            class="py-4 px-4 text-[#4B4B4B] text-[14.65px] font-medium Inter-m border-b border-[#E6E6E6]">
                                            @if ($earning->payout_date != '')
                                                {{ dateFormate($earning->payout_date, 'd-m-Y') }}
                                            @else
                                                -
                                            @endif
                                        </td>

                                    </tr>
                                @endif
                            @endforeach

                        </tbody>
                    </table>
                    <div class="w-full flex justify-center mb-3">
                        {!! $earnings->links('site.partials.ajax-pagination') !!}

                    </div>
                </div>


            </div>




        </div>
        <el-dialog>
            <dialog id="paypalpop" aria-labelledby="dialog-title"
                class="fixed  modalShadow inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent">
                <el-dialog-backdrop
                    class="fixed inset-0 bg-gray-900/80 opacity-80 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"></el-dialog-backdrop>

                <div tabindex="0"
                    class="m-auto  flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0">
                    <el-dialog-panel
                        class="m-auto relative transform overflow-hidden rounded-sm bg-gray-800 text-left shadow-xl outline -outline-offset-1 outline-white/10 transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-[554px]  w-full   data-closed:sm:translate-y-0 data-closed:sm:scale-95">
                        <div class="form bg-[#FFFFFF] px-4 pt-5 pb-4 sm:p-8 sm:pb-4">
                            <form action="{{ route('tutor.account.add') }}" method="post">
                                @csrf
                                <div class="flex justify-between sm:items-start">
                                    <div>

                                        <h1 class="text-[#181D27] fo-m sm:text-[26px] text-[20px] Poppins font-semibold">
                                            Add/Edit Paypal Account</h1>
                                    </div>
                                    <button type="button" command="close" commandfor="paypalpop"
                                        class="cursor-pointer">

                                        <img src="{{ asset('tutor/images/cros-icon.png') }}" />
                                    </button>
                                </div>

                                <div class="mt-3">
                                    <p class="Poppins-medium text-lg text-[#414651] font-medium">PayPal Email Address</p>
                                    <div class="relative flex gap-5 w-full mt-3">
                                        <div class="field w-full">
                                            <input
                                                class="w-full text-[#717680] placeholder:text-[#717680] shadow-[0px_1.38px_2.77px_0px_#0A0D120D]  Poppins text-[17px] border-[#D5D7DA] border-[1.29px] sm:p-3 p-3 rounded-[10px] bg-white"
                                                name="paypal_email" value="{{ $paypalAccount->paypal_email }}"
                                                placeholder="Enter paypal email address *">
                                            @error('paypal_email')
                                                <span class="text-red-600">{{ $message }}</span>
                                            @enderror
                                        </div>

                                    </div>
                                </div>
                                <p class="text-[#6D6D6D] Poppins text-sm mt-3">You need to add your PayPal email ID above.
                                </p>







                                <div class="mt-3">
                                    <button name="type" value="paypal" type="submit"
                                        class="bg-[#1CD8C4] cursor-pointer px-3 border-[#1CD8C4] border rounded-sm w-full sm:py-4 py-3 text-[#000000] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                        Save & Update Changes
                                    </button>
                                </div>

                            </form>
                        </div>

                    </el-dialog-panel>
                </div>
            </dialog>
        </el-dialog>
        <el-dialog>
            <dialog id="bankpop" aria-labelledby="dialog-title"
                class="fixed  modalShadow inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent">
                <el-dialog-backdrop
                    class="fixed inset-0 bg-gray-900/80 opacity-80 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"></el-dialog-backdrop>

                <div tabindex="0"
                    class="m-auto  flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0">
                    <el-dialog-panel
                        class="m-auto relative transform overflow-hidden rounded-sm bg-gray-800 text-left shadow-xl outline -outline-offset-1 outline-white/10 transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-[554px] w-full   data-closed:sm:translate-y-0 data-closed:sm:scale-95">
                        <div class="form bg-[#FFFFFF] px-4 pt-5 pb-4 sm:p-8 sm:pb-4">
                            <div class="flex justify-between sm:items-start">
                                <div>

                                    <h1 class="text-[#181D27] fo-m sm:text-[26px] text-[20px] Poppins font-semibold">
                                        Add/Edit Bank Account</h1>
                                </div>
                                <button type="button" command="close" commandfor="bankpop" class="cursor-pointer">

                                    <img src="{{ asset('tutor/images/cros-icon.png') }}" />
                                </button>
                            </div>

                            <form class="space-y-4 " action="{{ route('tutor.account.add') }}" method="post">
                                @csrf

                                <div>
                                    <label for="bank_account_title"
                                        class="block mb-1 text-[#414651] font-medium Poppins text-lg">
                                        Bank Account Title *
                                    </label>
                                    <input type="text" name="account_title" value="{{ $bankAccount->account_title }}"
                                        placeholder="Bank account title *"
                                        class="w-full p-3 text-[17px] Poppins text-[#717680] placeholder:text-[#717680] border border-[#D5D7DA] rounded-[10px] bg-white shadow-[0px_1.38px_2.77px_0px_#0A0D120D] focus:outline-none" />
                                </div>

                                <div>
                                    <label for="bank_account_number"
                                        class="block mb-1 text-[#414651] font-medium Poppins text-lg">
                                        Bank Account Number *
                                    </label>

                                    <input type="number" id="bank_account_number" name="account_number"
                                        value="{{ $bankAccount->account_number }}" placeholder="Bank account number *"
                                        class="w-full p-3 text-[17px] Poppins text-[#717680] placeholder:text-[#717680] border border-[#D5D7DA] rounded-[10px] bg-white shadow-[0px_1.38px_2.77px_0px_#0A0D120D] focus:outline-none" />
                                </div>

                                <div>
                                    <label for="bank_name" class="block mb-1 text-[#414651] font-medium Poppins text-lg">
                                        Bank Name *
                                    </label>

                                    <input type="text" id="bank_name" name="bank_name"
                                        value="{{ $bankAccount->bank_name }}" placeholder="Bank name *"
                                        class="w-full p-3 text-[17px] Poppins text-[#717680] placeholder:text-[#717680] border border-[#D5D7DA] rounded-[10px] bg-white shadow-[0px_1.38px_2.77px_0px_#0A0D120D] focus:outline-none" />
                                </div>

                                <div>
                                    <label for="bank_routing_number"
                                        class="block mb-1 text-[#414651] font-medium Poppins text-lg">
                                        Bank Routing Number *
                                    </label>

                                    <input type="text" id="bank_routing_number" name="bank_routing_number"
                                        value="{{ $bankAccount->bank_routing_number }}"
                                        placeholder="Bank routing number *"
                                        class="w-full p-3 text-[17px] Poppins text-[#717680] placeholder:text-[#717680] border border-[#D5D7DA] rounded-[10px] bg-white shadow-[0px_1.38px_2.77px_0px_#0A0D120D] focus:outline-none" />
                                </div>

                                <div>
                                    <label for="bank_iban" class="block mb-1 text-[#414651] font-medium Poppins text-lg">
                                        Bank IBAN *
                                    </label>

                                    <input type="text" id="bank_iban" name="account_iban"
                                        value="{{ $bankAccount->account_iban }}" placeholder="Bank IBAN *"
                                        class="w-full p-3 text-[17px] Poppins text-[#717680] placeholder:text-[#717680] border border-[#D5D7DA] rounded-[10px] bg-white shadow-[0px_1.38px_2.77px_0px_#0A0D120D] focus:outline-none" />
                                </div>

                                <div>
                                    <label for="bank_bic" class="block mb-1 text-[#414651] font-medium Poppins text-lg">
                                        Bank BIC/SWIFT *
                                    </label>

                                    <input type="text" id="bank_bic" name="bank_bic_swift"
                                        value="{{ $bankAccount->bank_bic_swift }}" placeholder="Bank BIC/SWIFT *"
                                        class="w-full p-3 text-[17px] Poppins text-[#717680] placeholder:text-[#717680] border border-[#D5D7DA] rounded-[10px] bg-white shadow-[0px_1.38px_2.77px_0px_#0A0D120D] focus:outline-none" />
                                </div>











                                <div class="mt-3">
                                    <button type="submit" name="type" value="bank"
                                        class="bg-[#1CD8C4] cursor-pointer px-3 border-[#1CD8C4] border rounded-sm w-full sm:py-4 py-3 text-[#000000] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                        Save & Update Changes
                                    </button>
                                </div>
                            </form>


                        </div>

                    </el-dialog-panel>
                </div>
            </dialog>
        </el-dialog>
        <el-dialog>
            <dialog id="requestpayoutpop" aria-labelledby="dialog-title"
                class="fixed  modalShadow inset-0 size-auto max-h-none max-w-none overflow-y-auto bg-transparent backdrop:bg-transparent">
                <el-dialog-backdrop
                    class="fixed inset-0 bg-gray-900/80 opacity-80 transition-opacity data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in"></el-dialog-backdrop>

                <div tabindex="0"
                    class="m-auto  flex min-h-full items-end justify-center p-4 text-center focus:outline-none sm:items-center sm:p-0">
                    <el-dialog-panel
                        class="m-auto relative transform overflow-hidden rounded-sm bg-gray-800 text-left shadow-xl outline -outline-offset-1 outline-white/10 transition-all data-closed:translate-y-4 data-closed:opacity-0 data-enter:duration-300 data-enter:ease-out data-leave:duration-200 data-leave:ease-in sm:my-8 sm:w-[554px] w-full   data-closed:sm:translate-y-0 data-closed:sm:scale-95">
                        <div class="form bg-[#FFFFFF] px-4 pt-2 pb-4 sm:p-7 sm:pb-4">
                            <div class="flex justify-between sm:items-center">

                                <h1
                                    class="text-[#181D27] flex-1 text-center fo-m sm:text-[26px] text-[24px] Poppins font-semibold">
                                    Request Payout</h1>

                                <button command="close" commandfor="requestpayoutpop" class="cursor-pointer ">

                                    <img src="{{ asset('tutor/images/cros-icon.png') }}" />
                                </button>
                            </div>

                            <p class="text-[#414651] Poppins-medium text-[17px] text-center mt-4">Are you sure you want to
                                request payout on your PayPal Accout?</p>







                            <form action="{{ route('tutor.payout.request') }}" method="post" id="payout_request_form">
                                @csrf

                                <input type="hidden" class="payment_method" name="payment_method" id="payment_method">

                                <div class="mt-3 flex w-full gap-3">
                                    <button
                                        class=" cursor-pointer px-3 Poppins-medium text-[16px] border-[#1CD8C4] border rounded-sm w-full sm:py-4 py-3 text-[#000000] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                        Cancel
                                    </button>
                                    <button type="button" id="payout_request_btn"
                                        class="bg-[#1CD8C4] cursor-pointer px-3 border-[#1CD8C4] border rounded-sm w-full sm:py-4 py-3 text-[#000000] Poppins-medium mt-3  sm:text-[16px] text-sm">
                                        Confirm
                                    </button>
                                </div>
                            </form>

                        </div>

                    </el-dialog-panel>
                </div>
            </dialog>
        </el-dialog>
    </div>
    @push('scripts')
        <script>
            $('#payout_request_btn').click(function() {
                let payment_method = $('.payment_method_check:checked').val();
                if (payment_method != "" && (payment_method == "paypal" || payment_method == "bank")) {
                    $('#payment_method').val(payment_method)
                    $('#payout_request_form').submit()
                } else {

                    toastr.error('something went wrong')
                }
            })
        </script>
    @endpush
@endsection
