@extends('layouts.frontend')

@section('title', 'Wallet')

@section('content')

@if(Session::has('message'))
     <x-withraw-success-component />
@else
    <div class="page-content pb-0 mb-0 card" style="box-shadow: 0px 5px 9px 0px #000000;">
        <div class="profile-img text-center text-bg-dark shadow" style="height: 60px !important;">
            <h4 class="fw-bolder" style="margin-top:15px;">Wallet</h4>
        </div>
    </div>
    
    <div class="page-content m-0 pb-0 card">
        
        <!-- <div class="pt-2">
            <h6><span class=" border-bottom border-warning border-3"> &nbsp;Account Number</span></h6>
            <div class="card rounded-3 mt-2 text-bg-success">
                <div class="card-body py-3">
                    <div class="category-name d-flex justify-content-around gap-2">
                        <h6 class="mb-0 text-white">{{ auth()->user()->member->bank_username_hide ?? '' }}</h6>
                        <h6 class="mb-0 text-white">{{ auth()->user()->member->bank_number_hide ?? '' }}</h6>
                    </div>
                </div>
            </div>
        </div> -->
        <div class="page-content pb-0 mb-0">
            <div class="card profile-img border text-center rounded-3 text-bg-dark shadow mt-2" style="background-color:#f60005 !important;width:80%;margin-left:10%;margin-bottom: 10px;box-shadow: 0px 7px 3px 0px #333333;padding:5px;">
                <h3 class="fw-bolder">{{ number_format(auth()->user()->member->credit ?? 0, 0) }}
                   </h3>
                <p class="mb-0 fw-bold" style="color:black;">Account Balance ({{ $settings_->where('key', 'currency')->first()->value ?? '' }})</p>
               {{--  <p class="mb-0 fw-bold" style="color:black;">Current Balance 
                    @if(isset(auth()->user()->member->loans))
                        {{number_format(auth()->user()->member->loans()->sum('amount')??0,0)}} {{ $settings_->where('key', 'currency')->first()->value ?? '' }}
                    @else
                        0.0
                    @endif
                </p> --}}
            </div>
        </div>
    </div>
    <div class="list-group row" style="flex-direction:row !important;">
        <div class="list-group-item col-4" style="float: right !important;text-align: center;color:black;font-weight: bold;font-size: 16px;width:50%;border:1px solid #ccc">
            Wallet<br/>
            <span style="color:#f60005;">
                ({{ $settings_->where('key', 'currency')->first()->value ?? '' }})<b>{{ number_format(auth()->user()->member->credit ?? 0, 0) }}</b>
            </span>
        </div>
        <div class="list-group-item col-4" style="float: right !important;text-align: center;color:black;font-weight: bold;font-size: 16px;width:50%;border:1px solid #ccc">
            Withdrawing <br/> 
            <span style="color:#f60005;"> 
                ({{ $settings_->where('key', 'currency')->first()->value ?? '' }})
                @if(isset(auth()->user()->member->transactions))
                    {{number_format(auth()->user()->member->amountToWithdrawn()??'0' ,0)}}
                @endif
            </span>
        </div>
        

        <div class="w-100" role="group" aria-label="Basic example" style="margin-top:3px;margin-bottom: 15px;">
            <button type="button" class="btn" data-bs-toggle="modal"
                data-bs-target="#staticBackdrop" style="box-shadow: rgba(14, 30, 37, 0.12) 0px 2px 4px 0px, rgba(14, 30, 37, 0.32) 0px 2px 16px 0px;font-size: 16px;font-weight: 600;border-radius: 10px;width:100%;color:black;margin-top: 7px;color:balck;">
                Withdraw
            </button>
        </div>
    </div>

    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true" style="width:80%;margin-left:10%;">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title text-center" id="staticBackdropLabel" style="color:#0079b7;font-weight: 600;"> 
                        Wallet Withdrawal
                    </h6>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body" x-init>
                    <form action="{{ route('member.withdraw', auth()->id()) }}" method="POST" autocomplete="off">
                        @csrf
                        <div class="form-floating mb-3">
                            <input type="number" class="form-control" id="amount" name="amount" min="1" required="" max="{{auth()->user()->member->credit??0}}" style="color:#0079b7;height:30px;padding-top:10px;" placeholder="Enter Amount">
                            {{-- <label for="amount">Enter Amount</label> --}}
                        </div>

                        <div class="input-group mb-3" id="show_hide_password">
                            <div class="form-floating flex-grow-1">
                                <input type="password" class="form-control"
                                    id="pwdcode" name="withdraw_code" placeholder="Withdrawal Code" style="height:30px;padding-top:10px;" required>
                                {{-- <label for="pwdcode">Withdrawal code</label> --}}
                            </div>
                            <!-- <span class="input-group-text bg-transparent rounded-start-0 rounded-3" style="height:30px;"><i
                                    class="bi bi-eye-slash"></i></span> -->
                        </div>
                        <div class="mb-0 d-grid">
                            <button type="submit" class="btn btn-success btn-ecomm rounded-3" style="color: black;">Confirm</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>f
    </div>
    {{--  --}}
    <div class="tab-content pb-5 card" id="myTabContent">
        <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
            <x-loan-app :back="0"/>    
        </div>
        @include('frontend.quee')

    </div>

    
@endif
@include('app.sweetAlert')
@endsection

@push('scripts')
    <script src="{{ asset('assets/js/show-hide-password.js') }}"></script>
@endpush

@push('styles')
    <style>
        .ms-success {
            z-index: 1300;
            top: 2rem !important;
        }
        input::placeholder {
            color: #212529 !important;
        }
        .form-floating>.form-control, .form-floating>.form-control-plaintext{
            padding:0.6rem 1em !important;
        }
    </style>
@endpush