<div style="margin-left: 40px; margin-right: 40px;">
    <div class="iq-card">
        <div class="iq-card-header d-flex justify-content-between">
            <div class="iq-header-title">
                <h4 class="card-title">Rate Management</h4>
            </div>
        </div>
        <div class="iq-card-body">
            <div class="row justify-content-center mb-3">
                <div class="col-sm-6 col-md-4 col-lg-3">
                    <h5 class="text-center mb-3">Select Rate</h5>
                    <div class="form-group">
                        <select class="form-control" wire:model="selectedRate">
                            <option value="">-- Select Rate (%) --</option>
                            @for ($i = 1; $i <= 30; $i++)
                                <option value="{{ $i }}">{{ $i }}%</option>
                            @endfor
                        </select>
                    </div>
                    
                    <div class="text-center mt-3">
                        <button class="btn btn-primary" wire:click="applyRate">
                            Apply Rate
                        </button>
                    </div>
                </div>
            </div>

            @if($message)
                <div class="row justify-content-center">
                    <div class="col-sm-12 col-md-8 col-lg-6">
                        <div class="alert {{ empty($selectedRate) ? 'alert-warning' : 'alert-success' }}">
                            {{ $message }}
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>