@extends('layouts.user')
@section('content')
    <h2 class="title-bar">
        {{ __('Redeem') }}
    </h2>
    @include('admin.message')

    <div class="row">
        <div class="col-md">
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-money"></i> Current Wallet
                </div>

                <div class="card-body">
                    {{ 'Rp '.number_format(auth()->user()->getPoint(),2,',','.')}}
                </div>
            </div>
        </div>

        <div class="col-md">
            <div class="card">
                <div class="card-header">
                    <i class="fa fa-money"></i> Total Withdrawal
                </div>

                <div class="card-body">
                    Rp. 50.000
                </div>
            </div>
        </div>
    </div>

    <div class="row justify-content-center" style="padding-top:20px">
        <div class="col-md">
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-money-check-alt"></i> Withdrawal Information
                </div>

                <div class="card-body">
<form action="" method="POST">
                        @csrf
                        <div class="row">
                            <div class="form-group col-md-12">
                                <label for="username">Username</label>
                                <input type="text" class="form-control" id="username"
                                    value="{{ auth()->user()->first_name . ' ' . auth()->user()->last_name }}" readonly>
                            </div>
    
                            <div class="form-group col-md-6">
                                <label for="email">Email</label>
                                <input type="email" class="form-control" id="email" value="{{ auth()->user()->email }}"
                                    readonly>
                            </div>

                            <div class="form-group col-md-6">
                                <label for="email">Referral</label>
                                <input type="email" class="form-control" id="referral_code" value="{{ auth()->user()->referral_code }}"
                                    readonly>
                            </div>
    
                            <div class="form-group col-md-12">
                                <label for="withdrawal_amount">Withdrawal Amount</label>
                                <input type="number" class="form-control" id="withdrawal_amount" name="withdrawal_amount"
                                    required>
                            </div>
    
                            <div class="form-group col-md-12">
                                <label for="bank_name">Bank Name</label>
                                <select class="form-control" id="bank_name" name="bank_name" required>
                                    @foreach($banks as $bank)
                                        <option value="{{ $bank->bank_code }}">{{ $bank->name }} ({{ $bank->bank_code }})</option>
                                    @endforeach
                                </select>
                            </div>
    
                            {{-- Notification --}}
                            <div class="justify-content-center mt-3 col-md-12">
                                {{-- <div class="col-md"> --}}
                                    <div class="alert alert-warning" id="bankWarning" style="display: none;">
                                        Choosing a bank other than BCA and Mandiri may incur an additional transfer fee.
                                    </div>
                                {{-- </div> --}}
                            </div>
    
                            <div class="form-group col-md-12">
                                <label for="account_number">Account Number</label>
                                <input type="text" class="form-control" id="account_number" name="account_number" required>
                            </div>
                        </div> 
                       

                        <button type="submit" class="btn btn-primary">Withdraw</button>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="row" style="padding-top:20px">
        <div class="col-md">
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-money-check-alt"></i> Pending Withdrawal
                </div>
                <div class="card-body">
                    <table id="pendingWithdrawalTable" class="table">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Amount</th>
                                <th>Bank</th>
                                <th>Account Number</th>
                                <th>Status</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>Rp. 100</td>
                                <td>Bank BCA</td>
                                <td>1234567890</td>
                                <td><span class="badge badge-warning">Pending</span></td>
                                <td>11 August 2023</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>RP. 200</td>
                                <td>Bank Mandiri</td>
                                <td>9876543210</td>
                                <td><span class="badge badge-success">Success</span></td>
                                <td>11 August 2023</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


    <div class="row" style="padding-top: 20px">
        <div class="col-md">
            <div class="card">
                <div class="card-header">
                    <i class="fas fa-money-check-alt"></i> Transaction
                </div>
                <div class="card-body">
                    <table id="transactionTable" class="table">
                        <thead>
                            <tr>
                                <th>No</th>
                                <th>Amount</th>
                                <th>Category</th>
                                <th>Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach ($userPoints as $key => $item)
                                <tr style="background-color: {{ $item->category == 'Redeem' ? '#d4626d' : ($item->category == 'Referral' ? '#43a8b8' : 'transparent') }}">
                                    <td><span style="color: white;">{{ $key + 1 }}</span></td>
                                    <td><span style="color: white;">Rp. {{ custom_number_format($item->amount , 2, ',', '.') }}</span></td>
                                    <td><span style="color: white;">{{ $item->category }}</span></td>
                                    <td><span style="color: white;">{{ \Carbon\Carbon::parse($item->created_at)->format('d F Y') }}</span></td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


@endsection