@extends('../screenwriter/screenwriter_layout.app')

@section('content')
<div class="page_right">

    <div class="screenwriter_wallet_user_type row w-100">
        <div class="col-12">
            <p class="text-sm-end text-center">In Program</p>
        </div>
    </div>

    <!-- Beardcrumbs -->
    <div class="breadcrumbs">
        <a href="{{ route('screenwriter.index') }}">Dashboard</a><span>/{{ ucfirst(Route::current()->getName()) }}</span>
    </div>

    <header class="screenwriter_wallet_header mt-2">
        <div class="row mx-0 w-100">
            <div class="col-sm-6 text-sm-start text-center mt-sm-0 mt-2">
                <h3>
                    <span>Account Balance</span>
                </h3>
            </div>
        </div>
    </header>

    <section class="screenwriter_wallet">
        <div class="row w-100 mx-0">
            <div class="col-md-8 col-12 order-md-1 order-2 mt-md-0 mt-3">
                <div class="row mx-0 float-xl-start float-none shadow">
                    @if(empty($transactions))
                    @foreach ($transactions as $trans)
                    @if($index == 0)
                    <!-- Wallet to bank send Info needed - check last payout from transaction with status of bank -->
                    <div class="col-sm-6">
                        <div>
                            <span>Previous Payout</span>
                            <span class="float-end">April 2 2022</span>
                        </div>
                        <div class="mt-3">
                            <span class="me-4">$ 2000</span>
                            <span>Paid</span>
                        </div>
                    </div>
                    <div class="col-sm-6 mt-sm-0 mt-3">
                        <div>
                            <span>Next Payout</span>
                            <span class="float-end">April 2 2022</span>
                        </div>
                        <div class="mt-3">
                            <span class="me-4">$ 2000</span>
                            <span>Pending</span>
                        </div>
                    </div>
                    @endif
                    @endforeach
                    @else
                    <div class="col-sm-6">
                        <div>
                            <span>Previous Payout</span>
                            <span class="float-end"></span>
                        </div>
                        <div class="mt-3">
                            <span class="me-4">$ 0</span>
                        </div>
                    </div>
                    <div class="col-sm-6 mt-sm-0 mt-3">
                        <div>
                            <span>Next Payout</span>
                            <span class="float-end"></span>
                        </div>
                        <div class="mt-3">
                            <span class="me-4">$ 0</span>
                        </div>
                    </div>
                    @endif
                </div>
                <div class="row mx-0">
                    <div class="col-12">
                        <div>Balance</div>
                        <div>
                            <span class="mt-2 float-start">$ {{$balance}}</span>
                            <button class="float-end border-0 get_balance_btn">Get money</button>
                        </div>
                    </div>
                </div>
                <div class="row w-100 mx-0 mt-4 mb-4">
                    <div class="p-0">
                        <span>Latest Sales</span>
                        <span class="float-end">Today <i class="fa-solid fa-calendar ms-3"></i></span>
                    </div>
                    <table class="table table-light">
                        <thead>
                            <tr>
                                <th>Date</th>
                                <th>Status</th>
                                <th>Payment name</th>
                                <th class="text-end">Payment</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($transactions as $trans)
                            <tr>
                                <th>{{\Carbon\Carbon::parse($trans->created)->format('d-m-Y')}}</th>
                                <td><span class="pending">{{ucfirst($trans->status)}}</span></td>
                                <td>
                                    @if($trans->payment_name == 'treatment_purchased')
                                    <span class="treatment_purchase">Treatment Purchased</span>
                                    @elseif($trans->payment_name == 'script_purchased')
                                    <span class="script_purchase">Script Purchased</span>
                                    @elseif($trans->payment_name == 'screenplay_purchased')
                                    <span class="screenplay">Script Purchased</span>
                                    @elseif($trans->payment_name == 'transfer')
                                    <span class="transfer">Transfer</span>
                                    @endif
                                </td>
                                <td class="text-end pe-3">
                                    <span>$ {{$trans->amount->value}}</span>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-md-4 col-12 order-md-2 order-1">
                <div class="row mx-0 w-100 flex-column align-items-center text-center mb-5 mb-md-2">
                    <img src="https://picsum.photos/100/100" alt="Profile Picture" class="image-fluid rounded-circle w-50">
                    <h5 class="mt-2">{{$fullname}}</h5>
                    <span class="mb-4">Screenwriter</span>
                    <a href="{{ route('screenwriter.settings') }}"><button type="button"> View Full Profile</button></a>
                </div>
            </div>
        </div>
    </section>

    @if(!$bankSource)
    <!-- Modal 1-->
    <div class="modal fade" id="screenwriter_getmoney" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="screenwriter_getmoney_Label" aria-hidden="true">
        <div class="modal-dialog m-0 top-50 start-50 translate-middle h-100 pt-5">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body px-md-5 px-3">
                    <div class="bg-danger p-4 rounded-lg mb-5 text-light text-center d-none auth_failed"></div>
                    <form action="{{route('screenwriter.wallet.add.source')}}" id="screenwriter_bank_details_form" method="post">
                        @csrf
                        <div class="d-flex justify-content-center mb-2">
                            <div class="text-center">
                                <div class="col-6 float-start">
                                    <i class="fa-solid fa-building-columns mt-2"></i>
                                </div>
                                <div class="col-6 float-end text-start">Bank Transfer</div>
                            </div>
                        </div>
                        <hr>
                        <p>Add your bank account details First</p>
                        <div class="row w-100 mx-0 justify-content-between">
                            <div class="col-md-5 col-12 mb-3 p-0">
                                <label for="screenwriter_routing_number" class="form-label mb-1">Routing Number</label>
                                <input type="number" class="form-control px-2" name="screenwriter_routing_number" id="screenwriter_routing_number">
                                <div class="text-danger mt-2 fs-6 screenwriter_routing_number_error"></div>
                            </div>
                            <div class="col-md-6 col-12 mb-3 p-0">
                                <label for="screenwriter_account_number" class="form-label mb-1">Account Number</label>
                                <input type="number" class="form-control px-2" name="screenwriter_account_number" id="screenwriter_account_number">
                                <div class="text-danger mt-2 fs-6 screenwriter_account_number_error"></div>
                            </div>
                        </div>
                        <div class="row w-100 mx-0">
                            <div class="col-md-5 mb-3 col-12 p-0">
                                <label for="screenwriter_bank_account_type" class="form-label mb-1">Bank Account Type</label>
                                <input type="text" class="form-control px-2" name="screenwriter_bank_account_type" id="screenwriter_bank_account_type" value="checking">
                            </div>
                        </div>
                        <p class="text-danger">Note: This Bank Account will be used for your Future Payments also.</p>
                        <div class="row w-100 mx-0 mb-3 mt-4 flex-column align-items-center">
                            <button type="submit" class="border-0 w-50">Submit</button>
                            <button type="button" class="border-0 w-50 bg-transparent mt-2" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal 3-->
    <div class="modal fade" id="screenwriter_done_bank" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="Screenwriter Funding Source Added Successfully Message" aria-hidden="true">
        <div class="modal-dialog m-0 top-50 start-50 translate-middle h-100 pt-5">
            <div class="modal-content">
                <div class="modal-body px-sm-5 px-2 mt-3">
                    <div class="d-flex justify-content-center">
                        <div class="rounded-circle text-center mark">
                            <i class="fa-solid fa-check"></i>
                        </div>
                    </div>
                    <h4 class="mt-3 mb-3 text-center">Bank Funding Source Added</h4>
                    <p class="text-center mb-4">You can get money on your Bank Account.</p>
                    <div class="mb-3 text-center">
                        <button type="button" class="border-0 w-75" data-bs-dismiss="modal" data-bs-toggle="modal">
                            <a href="" class="w-100">Ok</a>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif

    @if($bankSource)
    @if($bankSource->removed)
    <!-- Modal 1-->
    <div class="modal fade" id="screenwriter_getmoney" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="screenwriter_getmoney_Label" aria-hidden="true">
        <div class="modal-dialog m-0 top-50 start-50 translate-middle h-100 pt-5">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body px-md-5 px-3">
                    <div class="bg-danger p-4 rounded-lg mb-5 text-light text-center d-none auth_failed"></div>
                    <form action="{{route('screenwriter.wallet.add.source')}}" id="screenwriter_bank_details_form" method="post">
                        @csrf
                        <div class="d-flex justify-content-center mb-2">
                            <div class="text-center">
                                <div class="col-6 float-start">
                                    <i class="fa-solid fa-building-columns mt-2"></i>
                                </div>
                                <div class="col-6 float-end text-start">Bank Transfer</div>
                            </div>
                        </div>
                        <hr>
                        <p>Add your bank account details First</p>
                        <div class="row w-100 mx-0 justify-content-between">
                            <div class="col-md-5 col-12 mb-3 p-0">
                                <label for="screenwriter_routing_number" class="form-label mb-1">Routing Number</label>
                                <input type="number" class="form-control px-2" name="screenwriter_routing_number" id="screenwriter_routing_number">
                                <div class="text-danger mt-2 fs-6 screenwriter_routing_number_error"></div>
                            </div>
                            <div class="col-md-6 col-12 mb-3 p-0">
                                <label for="screenwriter_account_number" class="form-label mb-1">Account Number</label>
                                <input type="number" class="form-control px-2" name="screenwriter_account_number" id="screenwriter_account_number">
                                <div class="text-danger mt-2 fs-6 screenwriter_account_number_error"></div>
                            </div>
                        </div>
                        <div class="row w-100 mx-0">
                            <div class="col-md-5 mb-3 col-12 p-0">
                                <label for="screenwriter_bank_account_type" class="form-label mb-1">Bank Account Type</label>
                                <input type="text" class="form-control px-2" name="screenwriter_bank_account_type" id="screenwriter_bank_account_type" value="checking">
                            </div>
                        </div>
                        <p class="text-danger">Note: This Bank Account will be used for your Future Payments also.</p>
                        <div class="row w-100 mx-0 mb-3 mt-4 flex-column align-items-center">
                            <button type="submit" class="border-0 w-50">Submit</button>
                            <button type="button" class="border-0 w-50 bg-transparent mt-2" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal 3-->
    <div class="modal fade" id="screenwriter_done_bank" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="Screenwriter Funding Source Added Successfully Message" aria-hidden="true">
        <div class="modal-dialog m-0 top-50 start-50 translate-middle h-100 pt-5">
            <div class="modal-content">
                <div class="modal-body px-sm-5 px-2 mt-3">
                    <div class="d-flex justify-content-center">
                        <div class="rounded-circle text-center mark">
                            <i class="fa-solid fa-check"></i>
                        </div>
                    </div>
                    <h4 class="mt-3 mb-3 text-center">Bank Funding Source Added</h4>
                    <p class="text-center mb-4">You can get money on your Bank Account.</p>
                    <div class="mb-3 text-center">
                        <a href="" class="">
                        <button type="button" class="border-0 w-75" data-bs-dismiss="modal">Ok</button>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @else
    <!-- Modal 2-->
    <div class="modal fade" id="screenwriter_confirmmoney" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="screenwriter_confirmmoney_Label" aria-hidden="true">
        <div class="modal-dialog m-0 top-50 start-50 translate-middle h-100 pt-5">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body px-3">
                    <form action="" method="POST">
                        <div class="d-flex justify-content-center mb-2">
                            <div class="text-center">
                                <div class="col-6 float-start">
                                    <i class="fa-solid fa-building-columns mt-2"></i>
                                </div>
                                <div class="col-6 float-end text-start">Bank Transfer</div>
                            </div>
                        </div>
                        <p class="text-center">Send the amount to your Bank Account</p>
                        <div class="mb-3 text-center">
                            <label>Pay Amount:</label>
                            <input type="number" class="form-control mx-auto mt-1" name="amount" id="amount" min="0" placeholder="$">
                        </div>
                        <hr>
                        <div class="d-flex justify-content-center">
                            <div class="rounded-circle text-center">
                                <i class="fa-solid fa-key"></i>
                            </div>
                        </div>
                        <p class="text-center mt-2">Confirm your Password to Verify</p>
                        <div class="mb-3">
                            <label for="screenwriter_password" class="form-label mb-1">Password</label>
                            <input type="password" class="form-control px-4" name="screenwriter_password" id="screenwriter_password" placeholder="Enter your password">
                        </div>
                        <div class="row w-100 mx-0 mb-3 mt-5 flex-column align-items-center">
                            <button type="button" class="border-0 w-50" data-bs-dismiss="modal" data-bs-toggle="modal" data-bs-target="#screenwriter_donemoney">Withdraw</button>
                            <button type="button" class="border-0 w-50 bg-transparent mt-2 pt-0" data-bs-dismiss="modal" data-bs-toggle="modal">Cancel</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal 3-->
    <div class="modal fade" id="screenwriter_donemoney" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="screenwriter_donemoney_Label" aria-hidden="true">
        <div class="modal-dialog m-0 top-50 start-50 translate-middle h-100 pt-5">
            <div class="modal-content">
                <div class="modal-body px-sm-5 px-2 mt-3">
                    <div class="d-flex justify-content-center">
                        <div class="rounded-circle text-center">
                            <i class="fa-solid fa-check"></i>
                        </div>
                    </div>
                    <h4 class="mt-3 mb-3 text-center">Payment is Complete</h4>
                    <p class="text-center mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel repellendus enim illum doloremque eligendi ullam saepe rem, alias assumenda architecto.</p>
                    <div class="mb-3 text-center">
                        <button type="button" class="border-0 w-75" data-bs-dismiss="modal" data-bs-toggle="modal">
                            <a href="">See my Transactions</a>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endif
    @endif

</div>
@endsection