<style>
    .ui-autocomplete {
        z-index: 1500;
    }

    #doctor_schedule {}
    #shift_schedule {}
</style>
<form class="row g-3 auto-width scheduleDays" action="{{ route('store-days') }}" method="post"
    enctype='multipart/form-data' id="scheduleDays">
    @csrf
    <!-- Doctor -->
    {{-- <div class="col-md-12" id="doctor_schedule_id">
        <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> --}}
    <!-- Appointment Day -->
    <div class="col-md-12" id="test_items">
        <label for="day" class="form-label">Appointment Day <span class="text-danger"><b>*</b></span></label>
        <select class="multi-select-tests" multiple name="day[]">
            @foreach (daysOfWeek() as $key => $value)
                <option value="{{ $key }}">{{ $value }}</option>
            @endforeach
        </select>
        <span class="text-danger error_day" style="display:none;">This field is required.</span>
        <button class="btn btn-primary select-all-button" style="float: right; margin-top: 2px">Select All</button>
    </div>

    <!-- Appointment Shift -->
    {{-- <div class="col-md-6" id="shift_schedule">
        <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 ($AppointmentShift 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>
<script>
    $(document).ready(function() {
        $('.multi-select-tests').select2({
              theme: 'bootstrap4',
              dropdownParent: $("#test_items"),
              placeholder: "Select Test Items",
              width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
              allowClear: Boolean($(this).data('allow-clear')),
          });
  
        $('.select-all-button').on('click', function(event) {
            event.preventDefault();
            var $multiSelect = $('.multi-select-tests');
            var $options = $multiSelect.find('option');

            // Check if all options are currently selected
            var allSelected = $options.length === $options.filter(':selected').length;

            // If all options are currently selected, unselect them; otherwise, select them all
            $options.prop('selected', !allSelected);
            $multiSelect.trigger('change');

            // Update the button text based on the new state
            $(this).text(allSelected ? 'Select All' : 'Unselect All');
        });
    });
</script>
