@props(['label', 'name', 'options', 'addNewRoute'])

<label for="example-text-input" class="col-form-label col-sm">{{$label}}</label> <!-- Adjusted label text -->
<div class="col-sm-4">
    <select class="js-multiple multiple-select" name="{{$name}}[]" multiple style="width: 100%;">
        @foreach($options as $option)
            <option value="{{$option->id}}">{{$option->name}}</option>
        @endforeach
        <option value="addNew">إضافة {{$label}}</option> <!-- Adjusted dynamic text -->
    </select>
    @error($name)
    <span class="invalid-feedback" role="alert">
            <strong>{{ $message }}</strong>
        </span>
    @enderror
</div>

<script>
    $(document).ready(function() {
        $('.js-multiple').select2();
        $(".js-multiple").change(function () {
            var selectedValues = $(this).val();
            if (selectedValues.includes("addNew")) {
                window.location.href = "{{ $addNewRoute }}";
            }ءذ
        });
    });
</script>