@extends('user_dashboard.layouts.app')
@section('content')
    <div class="rbt-dashboard-area mt--30 mb--50">
        <div class="container-fluid">
            <div class="row g-5">
                <div class="col-lg-3">
                    @include('user_dashboard.layouts.sidebar')
                </div>
                <div class="col-lg-9">
                    <div class="rbt-dashboard-content bg-color-white rbt-shadow-box mb--10">
                        <div class="content">
                            <div class="row">
                                <div class="col-lg-8">
                                    <div class="section-title">
                                        <h4 class="rbt-title-style-3">
                                            @isset($page_title)
                                                {{$page_title}}
                                            @endisset
                                            (Total Withdrawal Amount: ₹ {{Auth::guard('web')->user()->userDetail->remaining_amount}})
                                        </h4>
                                    </div>
                                </div>
                                <div class="col-lg-4 text-end">
                                    <div class="section-title">
                                        <a class="rbt-btn btn-gradient btn-sm" onclick="openWithdrawalForm()"><i class="fas fa-plus"></i> Withdrawal Request</a>
                                    </div>
                                </div>
                            </div>
                            <div class="row gy-5">
                                <div class="col-lg-12">
                                    <div class="rbt-dashboard-table table-responsive">
                                        <table class="rbt-table table table-borderless">
                                            <thead>
                                                <tr>
                                                    <th class="text-center">#</th>
                                                    <th class="text-center">Amount</th>
                                                    <th class="text-center">Status</th>
                                                    <th class="text-center">Date</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                @foreach ($wallet_transactions as $key=>$wallet_transaction)
                                                    <tr>
                                                        <td class="text-center">{{ ($key+1) + ($wallet_transactions->currentPage() - 1)*$wallet_transactions->perPage() }}</td>
                                                        <td class="text-center">₹ {{ $wallet_transaction->amount }}</td>
                                                        <th class="text-center">{{ ucfirst($wallet_transaction->status) }}</th>
                                                        <th class="text-center">{{ $wallet_transaction->created_at }}</th>
                                                    </tr>
                                                @endforeach
                                            </tbody>
                                        </table>
                                        <div class="d-flex justify-content-center mt-3">
                                            {!! $wallet_transactions->links() !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="withdrawal_modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Withdrawal Request</h4>
                    <button type="button" class="btn-close bg-white" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="withdrawal_form">
                    @csrf
                    <div class="modal-body">
                        <label for="amount">Amount</label>
                        <input type="text" class="form-control mt-2" name="amount" value="{{Auth::guard('web')->user()->userDetail->remaining_amount}}" placeholder="Enter Amount..." required>
                        <span class="text-danger lbl_msg error_amount"></span>
                    </div>
                    <div class="modal-footer justify-content-between">
                        <button type="button" class="rbt-btn btn-border radius-round-6 btn-sm" data-bs-dismiss="modal" aria-label="Close">Close</button>
                        <button type="button" class="rbt-btn btn-gradient btn-sm" onclick="withdrawalRequest()">Request</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('js')

        <script>

            function openWithdrawalForm(){
                $('#withdrawal_modal').modal('show');
            }

            function withdrawalRequest(){
                $.ajax({
                    type: 'POST',
                    url: "{{route('user.withdrawal.request')}}",
                    data: $('#withdrawal_form').serialize(),
                    success: function(data) {
                        const Toast = Swal.mixin({
                            toast: true,
                            position: 'top-end',
                            showConfirmButton: false,
                            timer: 3000,
                            timerProgressBar: true,
                        });
                        Toast.fire({
                            icon: "success",
                            title: data.message,
                        });
                        location.reload();
                    },
                    error: function(request, status, error) {
                        $('.lbl_msg').text('');
                        if (request.status === 422) {
                            var errors = request.responseJSON.errors;
                            $.each(errors, function(field, messages) {
                                $.each(messages, function(index, message) {
                                    $('.error_' + field).text(message);
                                });
                            });
                        } else {
                            alert('Somthing went wrong!');
                        }
                    }
                });
            }

        </script>

    @endpush

@endsection