@extends('layouts.main')

@section('content')
    <section class="container">
        <div class="row">
            @include('layouts.brokersidebar')

            <div class="col-xl-9 col-md-9 col-12 rightbar mt-5">

                <div class="">

                    <div class="card-body">
                        <h2 class="card-title text-center mb-4">Wallet Details</h2>
                        <div class="row justify-content-center text-center mb-3">
                            <div class="col-md-6">
                                <div class="py-3 px-4 border rounded">
                                    <h6>Wallet Balance</h6>
                                    <p class="font-weight-bold"><i class="fa fa-rupee"></i>
                                        {{ number_format($walletBalance, 2) }}</p>
                                </div>
                            </div>

                        </div>

                    </div>
                </div>



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


    <div class="modal fade" id="withdrawmodal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Request Withdraw Wallet Balance</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="walletForm">
                        <input type="hidden" name="_token" value="xyolhuNSat7fMLv3jY7kc5alDnV3RpfUwmt7AfJJ">
                        <input type="hidden" name="_user_id" value="57">
                        <div class="modal-body">
                            <div class="form-row">
                                <div class="form-group col-md-12">
                                    <label>Amount<span class="text-danger">*</span></label>
                                    <div class="input-group has-append">
                                        <input type="text" name="amount" class="form-control"
                                            placeholder="Please provide positive amount">
                                        <div class="input-group-append">
                                            <span class="input-group-text"><i class="fa fa-rupee"></i></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-dark" data-bs-dismiss="modal">Close</button>
                            <button type="button" id="requestWithdraw" class="btn btn-success">Withdraw</button>

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection



@push('scripts')
    <script>
        $(document).ready(function() {
           
            $('#requestWithdraw').click(function() {
                var formData = {
                    'amount': $('input[name="amount"]').val(),
                    // Add any other data you need to send
                };

                $.ajax({
                    url: '{{ route('broker.requestWithdraw') }}', // Ensure you have a route named 'broker.requestWithdraw'
                    type: 'POST',
                    data: formData,
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        alert(response.message); // Show success message
                        $('#withdrawmodal').modal('hide'); // Hide the modal
                        location.reload(); // Optionally reload to update the UI
                    },
                    error: function(xhr, status, error) {
                        console.error('Error:', error);
                        alert(
                        'Failed to process the request. Please try again.'); // Show error message
                    }
                });
            });
        });
    </script>
@endpush