<style>
.ui-autocomplete {
z-index: 1500;
}    
</style>
<form class="row g-3 auto-width doctor" action="{{ route('doctor-fee.store') }}" method="post" enctype='multipart/form-data' id="doctor_fee">
    @csrf
     <!-- Doctor -->
     <div class="col-md-12">
        <div>
            <label class="form-label">Doctor <span class="text-danger"><b>*</b></span></label>
        </div>
        <div class="input-group autocomplete">
            <input type="text" name="" id="doctor_id" class="doctor-select form-control" placeholder="Search Doctor">
            <ul class="searchResult"></ul>
            <input type="hidden" name="doctor_id" value="">
        </div>
        <span class="text-danger error_doctor_id" style="display:none;">This field is required.</span>
    </div>
    <!-- Consulting Fee -->
    <div class="col-md-6">
        <label for="consulting_fees" class="form-label">consulting Fees <span class="text-danger"><b>*</b></span></label>
        <input type="text" class="form-control" id="consulting_fees" name="consulting_fees" aria-describedby="inputGroupPrepend" required>
        <span class="text-danger error_consulting_fees" style="display:none;">This field is required.</span>
    </div>
   
    <!-- Appointment Shift -->
    <div class="col-md-6">
        <div>
            <label for="shift_id" class="form-label">Appointment Shift <span class="text-danger"><b>*</b></span></label>
        </div>
        <div class="input-group">
            <select class="single-select form-control" name="shift_id">
                @foreach ($shift as $list)
                    <option value="{{ $list->id }}">{{ $list->name }}</option>
                @endforeach
            </select>
        </div>
        <span class="text-danger error_shift_id" style="display: none;">This field is required.</span>
    </div>    
   
</form>
