@use('App\Models\Supplier', 'Supplier')
@use('Illuminate\Support\Arr', 'Arr')

{{-- Auto-hides the "New" button when rendered inside an AJAX modal.
     See x-input.company-select for the pattern. --}}
@aware(['submitToSelect2' => false])

@props([
    'label',
    'name',
    'selected' => null,
    'required' => false,
    'multiple' => false,
    'hideNewButton' => false,
    'companyId' => null,
    'id' => null,
])

@php
    $selectId = $id ?? $name.'_select';
    $hideNewButton = $hideNewButton || $submitToSelect2;
@endphp

<div
    @class([
        'form-group',
        'has-error' => $errors->has($name),
    ])
>
    <label for="{{ $selectId }}" class="col-md-3 control-label">{{ $label }}</label>
    <div class="col-md-7">
        <select
            class="js-data-ajax"
            data-endpoint="suppliers"
            data-placeholder="{{ trans('general.select_supplier') }}"
            name="{{ $name }}{{ $multiple ? '[]' : '' }}"
            id="{{ $selectId }}"
            style="width: 100%"
            aria-label="{{ $label }}"
            @required($required)
            @if ($multiple) multiple @endif
            @if ($companyId) data-company-id="{{ $companyId }}" @endif
        >
            <option value=""></option>
            @if ($selected)
                @foreach(Arr::wrap($selected) as $value)
                    <option value="{{ $value }}" selected="selected" role="option" aria-selected="true">
                        {{ Supplier::find($value)?->name }}
                    </option>
                @endforeach
            @endif
        </select>
    </div>

    @unless($hideNewButton)
        <div class="col-md-1 col-sm-1 text-left">
            @can('create', Supplier::class)
                <a href="{{ route('modal.show', 'supplier') }}" data-toggle="modal" data-target="#createModal" data-select="{{ $selectId }}" class="btn btn-sm btn-theme">{{ trans('button.new') }}</a>
            @endcan
        </div>
    @endunless

    <div class="col-md-8 col-md-offset-3"><x-form.error :name="$name" /></div>
</div>