{{-- <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css" rel="stylesheet" /> --}}

<div class="modal-header">
    <h3 class="modal-title">Copy Rates</h3>

    <div class="btn btn-icon btn-sm btn-active-light-primary ms-2" data-bs-dismiss="modal" aria-label="Close">
        <i class="ki-duotone ki-cross fs-1"><span class="path1"></span><span class="path2"></span></i>
    </div>
</div>

<form class="form" action="{{ route('admin.users.copy_rates') }}" method="post" data-xhr="true">
    @csrf
    <div class="modal-body">
        <h4>Copy rates from <span style="color: #5398f7;"> [#{{ $user_details->client_id }} -
                {{ $user_details->username }}] </span> <br> <br> To - </h4>
        <div class="form-group">
            <label class="form-group__service-name">Select User</label>
            <select class="form-select" id="selectUser" data-control="select2" data-placeholder="Select a user"
                name="to">
                <option></option>
                @foreach ($users as $user)
                    <option value="{{ $user->client_id }}">
                        {{ $user->client_id }} - {{ $user->username }}
                    </option>
                @endforeach
            </select>
        </div>
        <input type="hidden" name="from" value="{{ $user_details->client_id }}">
    </div>

    <div class="modal-footer">
        <button type="button" class="btn btn-dark" id="copyRatesSubmit">Copy</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
    </div>
</form>

<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/select2.min.js"></script>
<script>
    $(document).ready(function() {
        $('#selectUser').select2();
    });
</script>