@extends('admin.layouts.masterlayout')
@section('content')

<div class="content-wrapper">
    <div class="row page-titles mx-0" data-aos="fade-up">
        <div class="col-sm-6 p-md-0">
            <!-- <div class="welcome-text">
                <h4>Edit User</h4>
            </div> -->
        </div>
        <div class="col-sm-6 p-md-0 justify-content-sm-end mt-2 mt-sm-0 d-flex">
            <ol class="breadcrumb">
                <li class="breadcrumb-item active">
                    <a href="{{route($modelName.'.view')}}">View all User</a>
                </li>
                <li class="breadcrumb-item">Wallet Operation</li>
            </ol>
        </div>
    </div>
    <!-- row -->
    <div class="row">
        <div class="col-xl-12 col-xxl-12">
            <div class="card" data-aos="fade-up">
                <div class="card-header">
                    <h4 class="card-title">Wallet Operation</h4>
                </div>
                <div class="card-body">
                    <div class="basic-form">

                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label class="lbl_frm py-2 col-md-4 " style="margin-left: 20px !important;">Select User</label>
                                <select name="user_id" id="user_id" class="form-control in_text select2" required>
                                    <option value="">-- Select User --</option>
                                    @foreach($users as $result)
                                    <option value="{{ base64_encode(serialize($result->id)) }}">
                                        {{ $result->user_info }}
                                    </option>
                                    @endforeach
                                </select>

                            </div>
                            <div class="form-group col-md-6"></div>
                            </div>
                            <div class="col-xl-12 col-xxl-12">
                                <div class="card aos-init aos-animate">

                                    <div id="walletFormContainer">

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


                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<style>
.select2-container {
    max-width: 60% !important; /* Or whatever size matches your design */
}
.select2-container .select2-selection--single {
    width: auto !important;
    height: 40px !important;/* Same as your .form-control */
    padding: 0.375rem 0.75rem;
    font-size: 0.905rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    border: 1px solid #f5f5f5;
    border-radius: 0.25rem;
    display: flex;
    align-items: center; /* Center the text vertically */
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Optional: Adjust the rendered text inside */
.select2-container .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
    color: #495057;
    padding-right: 0;
    line-height: normal;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color:  #495057 !important;
}
.select2-results__option {
    color: #495057 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 7px !important;

}
</style>
    @endsection
    @section('scripts')
    <!-- Select2 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />

    <!-- Select2 JS -->
    <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
    <!--********************************** Content body start  ***********************************-->
    <script type="text/javascript">
        $(document).ready(function() {
            $('.select2').select2({
                placeholder: "-- Select User --",
                allowClear: true,
                width: '100%'
            });

            $('#user_id').on('change', function() {
                let userId = $(this).val();
                
                if (userId) {
                    let fetchUrl = "{{ route('Registerusers.add_moneyin_wallet_ajax', ':id') }}".replace(':id', userId);

                    $.ajax({
                        url: fetchUrl,
                        type: 'GET',
                        success: function(response) {
                            $('#walletFormContainer').html(response); // inject Blade HTML here
                        },
                        error: function(xhr) {
                            console.error("Error loading wallet form:", xhr);
                            $('#walletFormContainer').html('<div class="alert alert-danger">Unable to load form.</div>');
                        }
                    });
                }
            });
        });
    </script>

    @endsection