<style>
    .add_btn {
        height: 30px; width: 30px; border-radius: 100%; padding: 0
    }
</style>
<form class="row g-3 auto-width" method="post" action="{{ route('symptoms.store') }}">
    @csrf
    @method('post')
    <div class="col-md-12">
        <label for="symptoms_title" class="form-label">Name<span class="text-danger"><b>*</b></span></label>
        <input type="text" class="form-control symptoms_title" name="symptoms_title" aria-describedby="inputGroupPrepend" placeholder="Title">
    </div>
    <div class="col-md-12">
        <label for="code" class="form-label">Code</label>
        <input type="text" class="form-control code" name="code" aria-describedby="inputGroupPrepend" placeholder="Code">
    </div>
    <div class="col-md-12">
        <label for="type" class="form-label">Type<span class="text-danger"><b>*</b></span></label>
        <div class="input-group mb-3">
            <select style="width: 50%" class="form-control symptoms_type" name="type">
                @foreach($symptom_types as $symptom_type)
                    <option value="{{ $symptom_type->id }}">{{ $symptom_type->symptoms_type }}</option>
                @endforeach
            </select>

            @if(auth()->user()->can('symptom-classifications-create'))
            <div class="input-group-append" style="margin: auto 10px;">
                <button class="btn btn-success add_btn" id="create_symptom_type" type="button"> + </button>
            </div>
            @endif
        </div>
        <span class="text-danger error_symptoms_type" style="display:none;">This field is required.</span>
    </div>
    <div class="col-md-12">
        <label for="priority" class="form-label">Priority<span class="text-danger"><b></b></span></label>
        <input type="number" value="{{ $priority }}" class="form-control" name="priority" disabled aria-describedby="inputGroupPrepend">
        <span class="text-danger error_priority" style="display:none;">This field is required.</span>
    </div>
    <div class="col-md-12">
        <label for="description" class="form-label">Description</label>
        <textarea class="form-control" name="description" placeholder="Description"></textarea>
    </div>
</form>