@extends('app')
@section('content')
    @include('layout.header')
    @include('components.loader')
    <div class="withdraw-container page-container p-0">
        <div class="mx-lg-5 px-lg-3 mx-3">
            <div class="row py-5">
                <div class="d-md-flex justify-content-md-between ">
                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home"
                                type="button" role="tab" aria-controls="home" aria-selected="true">Withdraw
                                Funds</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="transaction-tab" data-bs-toggle="tab" data-bs-target="#transaction"
                                type="button" role="tab" aria-controls="transaction" aria-selected="false">Transaction
                                History</button>
                        </li>

                    </ul>
                    <div>
                        <a class="btn btn-brown switch-color p-lg-2 px-3 mt-3 mt-md-0"
                            href="{{ '/individual-dashboard' }}">Back to Individual

                        </a>
                    </div>
                </div>
                <div class="">
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane mt-5 fade show active py-3 bg-white p-md-5 position-relative" id="home"
                            role="tabpanel" aria-labelledby="home-tab">
                            <div class="container-md">
                                <form class="p-md-3 ">
                                    <button type="button"
                                        class=" wallet-btn  text-success mt-2 mt-md-0 btn rounded-3 bg-brown px-4 text-white">
                                        Available Wallet
                                        Balance:${{ $availableWalletBalance ? number_format($availableWalletBalance, 2) : '0' }}
                                    </button>
                                    <div class="row withdra-fund-text px-lg-5 mx-lg-5">
                                        <div class="col-md-6 mb-3">
                                            <label for="organization-name" class="col-form-label">Organization Name</label>
                                            <input type="text" disabled class="form-control" id="organization-name"
                                                readonly value="{{ $organization->name }}">
                                        </div>
                                        {{-- <div class="col-md-6 mb-3">
                                        <label for="activity" class="col-form-label">Activity/Cause <span class="text-danger">*</span></label>
                                        <input type="text" disabled class="form-control" id="activity" readonly value="{{$authUser->cause}}">
                                    </div> --}}
                                        <div class="col-md-6 mb-3">
                                            <label for="administrator-name" class="col-form-label">Administrator Name <span
                                                    class="text-danger">*</span></label>
                                            <input type="text" disabled class="form-control" id="administrator-name"
                                                readonly value="{{ $authUser->first_name . ' ' . $authUser->last_name }}">
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label for="email" class="col-form-label">Email <span
                                                    class="text-danger">*</span></label>
                                            <input type="text" class="form-control bg-color individual-withdraw-email"
                                                id="email" value="{{ $authUser->email }}">
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label for="phone-number" class="col-form-label">Phone <span
                                                    class="text-danger">*</span></label>
                                            <input type="text"
                                                class="form-control bg-color individual-withdraw-phone-number"
                                                id="phone-number" value="{{ $authUser->phone_number }}">
                                        </div>

                                        <div class="col-md-6 mb-3">
                                            <label for="amount-requested" class="col-form-label">Amount Requested $ <span
                                                    class="text-danger">*</span></label>
                                            @php
                                                $transactionFeeRate = 0.04;
                                                $transactionFee = $amountValue * $transactionFeeRate;
                                                $actualAmount = $amountValue - $transactionFee;
                                            @endphp

                                            <input type="text" class="form-control bg-color" placeholder="$0.00"
                                                id="indivual-amount-requested"
                                                value="{{ $amountValue == 0 ? '' : '$' . number_format($amountValue, 2) }}"
                                                data-wallet-balance="{{ number_format($availableWalletBalance, 2, '.', '') }}">

                                            <span id="transaction-fee"
                                                class="text-danger {{ $amountValue > 0 ? '' : 'd-none' }}">
                                                Transaction fee (4%): $<span
                                                    id="fee-amount">{{ number_format($transactionFee, 2) }}</span>
                                            </span><br>

                                            <span id="actual-amount"
                                                class="text-success {{ $amountValue > 0 ? '' : 'd-none' }}">
                                                Actual Amount You Will Receive: $<span
                                                    id="actual-amount-value">{{ number_format($actualAmount, 2) }}</span>
                                            </span>
                                        </div>
                                    </div>
                                    <h5 class="my-4 text-blue px-lg-5 mx-lg-5">How would you like Check Made out?</h5>
                                    <div class="row withdra-fund-text px-lg-5 mx-lg-5">
                                        <div class="col-md-6 mb-3">
                                            <label for="recipient-name" class="col-form-label">Name <span
                                                    class="text-danger">*</span></label>
                                            <input type="text"
                                                class="form-control bg-color individual-withdraw-recipient-name"
                                                id="recipient-name"
                                                value="{{ $authUser->first_name . ' ' . $authUser->last_name }}">
                                        </div>
                                        <div class="col-md-6 mb-3 withdraw-state">
                                            <label for="recipient-state" class="col-form-label">State <span
                                                    class="text-danger">*</span></label>
                                            <select
                                                class="admin-select-state rounded-2 p-4 state form-control individual-withdraw_state_id"
                                                name="state_id" id="withdraw_state_id" style="padding:9rem 0 9rem 0">
                                                <option value="" selected>Select State</option>
                                                @foreach ($states as $state)
                                                    <option value="{{ $state->id }}"
                                                        {{ $state->name == $authUser->states ? 'selected' : '' }}>
                                                        {{ $state->name }}</option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-6 mb-3 withdraw-city">
                                            <label for="recipient-city" class="col-form-label">City <span
                                                    class="text-danger">*</span></label>
                                            <select
                                                class="admin-select-city rounded-2 p-4 city form-control individual-withdraw_city_id"
                                                name="city_id" id="withdraw_city_id" style="padding:9rem 0 9rem 0"
                                                data-withdraw-zip-code="{{ $authUser->zip_code }}"
                                                data-withdraw-city-name="{{ $authUser->city }}">
                                                <option value="" selected>Select City</option>
                                            </select>
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label for="recipient-street" class="col-form-label">Street</label>
                                            <input type="text" class="form-control bg-color "
                                                id="individual-withdraw-recipient-street"
                                                value="{{ $authUser->address }}">
                                        </div>
                                        <div class="col-md-6 mb-3">
                                            <label for="recipient-phone" class="col-form-label">Zip Code <span
                                                    class="text-danger">*</span></label>
                                            <input type="text"
                                                class="form-control bg-color individual-withdraw-zip-code"
                                                id="recipient-phone" value="{{ $authUser->zip_code }}">
                                        </div>
                                        <div class="col-12 mb-3 processed-days">
                                            Check will be processed within 1-10 business days and mailed
                                        </div>
                                    </div>
                                </form>
                                @php

                                    $isPending =
                                        $withdrawFundAmount &&
                                        in_array($withdrawFundAmount->status, [
                                            'Pending',
                                            'Under Review',
                                            'Processing',
                                        ]);
                                @endphp

                                <div class="submit-contact mb-3 px-lg-5 mx-lg-5">
                                    @if ($isPending)
                                        <div class="card bg-success p-2 text-dark bg-opacity-25  ms-lg-4 border-0">
                                            <div class="ms-lg-4 ps-1 processed-days">Your withdrawal request of
                                               ${{ number_format($amountValue, 2) ?? 0 }}
                                                has been received and is currently pending review by the admin. You cannot
                                                submit a new withdrawal request until the previous one is completed.
                                            </div>
                                        </div>
                                    @else
                                        <button type="button"
                                            class="btn  btn-blue contact-submit-btn rounded-3 ms-lg-4  {{ $isPending ? 'disabled' : '' }}"
                                            data-wallet-balance="{{ number_format($availableWalletBalance, 2, '.', '') }}"
                                            id="individual-withdraw-fund-btn">Submit
                                            <span id=""
                                                class="spinner-border spinner-border-sm d-none withdraw-btn-spinner"
                                                role="status" aria-hidden="true" style="margin-left: 7px;"></span>
                                        </button>
                                    @endif
                                </div>
                            </div>
                        </div>

                        <div class="tab-pane fade data-count" id="transaction" role="tabpanel"
                            aria-labelledby="transaction-tab">
                            <h5 class="text-blue my-4">Withdrawal History</h5>
                            <div class="table-responsive table-responsive-coustom px-3 bg-white">
                                <table class="table text-center custom-table" id="individual-transaction-history">
                                    <thead class="table-heading-with-draw py-4">
                                        <tr class="m-3">
                                            <th class="p-2 text-dark rounded-start">#</th>
                                            <th class="p-2 text-dark">Amount</th>
                                            <th class="p-2 text-dark">Requested Date</th>
                                            <th class="p-2 text-dark">Updated Date</th>
                                            <th class="p-2 text-dark rounded-end">Status</th>
                                        </tr>
                                    </thead>
                                    <tbody class="table-body-transaction">
                                        @foreach ($withdrawFund as $withdrawFund)
                                            <tr style="background-color: #efe8e8;">
                                                <td data-label="#" class="p-2">{{ $loop->iteration }}</td>
                                                <td data-label="Amount" class="p-2">${{ $withdrawFund->amount }}</td>
                                                <td data-label="Requested Date" class="p-2">
                                                    {{ $withdrawFund->created_at->format('m-d-Y') }}</td>
                                                <td data-label="Updated Date" class="p-2">
                                                    {{ $withdrawFund->updated_at->format('m-d-Y') }}</td>
                                                <td data-label="Status" class="p-2">{{ $withdrawFund->status }}</td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                            <h5 class="text-blue my-4">Pay It Forward™ & Kick It Back™ History</h5>
                            <div class="table-responsive table-responsive-coustom px-3 bg-white my-2">
                                <table class="table text-center custom-table" id="individual-pay-kick-history">
                                    <thead class="table-heading-with-draw py-4">
                                        <tr class="m-3">
                                            <th class="p-2 text-dark rounded-start">#</th>
                                            <th class="p-2 text-dark">Individual Name</th>
                                            <th class="p-2 text-dark">Individual Email</th>
                                            <th class="p-2 text-dark">Donor Name</th>
                                            <th class="p-2 text-dark">Donor Email</th>
                                            <th class="p-2 text-dark">Amount</th>
                                            <th class="p-2 text-dark rounded-end">Date</th>
                                        </tr>
                                    </thead>
                                    <tbody class="table-body-transaction">
                                        @foreach ($sponsorData as $sponsorData)
                                            <tr style="background-color: #efe8e8;">
                                                <td data-label="#" class="p-2">{{ $loop->iteration }}</td>
                                                <td data-label="Participant Name" class="p-2">
                                                    {{ $sponsorData->user_first_name . '' . $sponsorData->user_last_name }}
                                                </td>
                                                <td data-label="Participant Email" class="p-2">
                                                    {{ $sponsorData->user_email }}</td>
                                                <td data-label="Donor Name" class="p-2">
                                                    {{ $sponsorData->first_name . '' . $sponsorData->last_name }}</td>
                                                <td data-label="Donor Email" class="p-2">{{ $sponsorData->email }}
                                                </td>
                                                <td data-label="Amount" class="p-2">
                                                    ${{ $sponsorData->pay_it_forward + $sponsorData->kick_it_back }}</td>
                                                <td data-label="Date" class="p-2">
                                                    {{ \Carbon\Carbon::parse($sponsorData->sponsor_payment_created_at)->format('m-d-Y') ?? '--' }}
                                                </td>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    @include('layout.footer')
    @vite(['resources/js/admin_signup.js'])
    @vite(['resources/js/city.js'])
    @vite(['resources/js/pagination.js'])
    @vite(['resources/js/withdraw_fund.js'])
@endsection