@props([])

<div class="card border shadow-none mb-4">
    <div class="card-body">
        <div class="d-flex align-items-center gap-2 mb-1">
            <span class="badge bg-label-primary rounded-2 p-2 lh-1"><i class="ti tabler-cash ti-sm"></i></span>
            <h6 class="mb-0 fw-bold text-uppercase text-primary">{{ __('Pricing details') }}</h6>
        </div>
        <p class="text-muted small mb-4 ms-1">{{ __('Specify the price range and currency.') }}</p>

        <div class="row g-4">
            <div class="col-md-6">
                <label class="form-label" for="pi_price_range">{{ __('Price range') }} <span class="text-danger">*</span></label>
                <div class="input-group input-group-merge">
                    <span class="input-group-text"><i class="ti tabler-currency-dollar"></i></span>
                    <input type="text" id="pi_price_range" inputmode="decimal" maxlength="20" class="form-control @error('form.priceInfo.price_range') is-invalid @enderror"
                        wire:model.defer="form.priceInfo.price_range" placeholder="{{ __('1000 - 2000') }}">
                </div>
                @error('form.priceInfo.price_range') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
            </div>

            <div class="col-md-6">
                <label class="form-label" for="pi_currency">{{ __('Currency') }} <span class="text-danger">*</span></label>
                <div class="input-group input-group-merge">
                    <span class="input-group-text"><i class="ti tabler-coin"></i></span>
                    <select id="pi_currency" class="form-select @error('form.priceInfo.currency_id') is-invalid @enderror"
                        wire:model.defer="form.priceInfo.currency_id">
                        <option value="">{{ __('Select currency') }}</option>
                        @foreach (\App\Models\Currency::orderBy('code')->get() as $currency)
                            <option value="{{ $currency->id }}">{{ $currency->formatted_name }}</option>
                        @endforeach
                    </select>
                </div>
                @error('form.priceInfo.currency_id') <div class="text-danger small mt-1">{{ $message }}</div> @enderror
            </div>
        </div>
    </div>
</div>