<style type="text/css">
    table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      width: 50%;
    }

    td, th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 10px;
    }

    .select2-selection__choice {
        display: none;
    }
</style>
<form class="row g-3 auto-width form" method="post" id="form_data" action="{{ route('product-features.store') }}">
    @csrf
    @method('post')
    <div class="col-md-12" id="test_items">
        <label for="module_code" class="form-label">Module Name <span class="text-danger"><b>*</b></span></label>

        <div class="input-group">
            <select id="module_code" class="multi-select-tests module_code" multiple name="module_code[]">
                @foreach ($module as $module)
                    <option value="{{ $module->id }}">{{ $module->menu_name }}</option>
                @endforeach
            </select>
            <input type="hidden" name="product_code">
        </div>
        <p><a href="javascript:;" class="add_all_features">Do you want to add all modules with status "<b>No</b>"?</a></p>
        <span class="text-danger error_module_code" style="display:none;">This field is required.</span>
    </div>

    <table id="selectedTable">
        {{-- <thead>
            <tr>
                <th style="width: 15%;">Sl No</th>
                <th>module </th>
                <th style="width: 15%;">Remove</th>
            </tr>
        </thead> --}}
        <tbody>
            <tr>
                <td style="text-align: center;" colspan="4">Items not selected</td>
            </tr>
        </tbody>
    </table>
</form>

<script type="text/javascript">
$('.multi-select-tests').select2({
    theme: 'bootstrap4',
    dropdownParent: $("#test_items"),
    placeholder: "Select Test Modules",
    width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
    allowClear: Boolean($(this).data('allow-clear')),
});
</script>

<script>
$(document).ready(function() {
    $("#module_code").on("change", function() {
        var selectedOptions = $("#module_code option:selected").toArray();
        var tableBody = $("#selectedTable tbody").empty();

        var ids = [];
        selectedOptions.forEach(function(option, index) {
            var optionValue = $(option).val();
            var optionText = $(option).text();
            ids.push(optionValue);
        });

        url = "{{ route('product-features.selected',$id) }}"

        $.ajax({
            url:url,
            type:'GET',
            data:{id:ids},
            success: function(response){
                $("#selectedTable tbody").append(response);
                $.switcher('#selectedTable .changeStatusCustom');
            },
        });

        $(document).on("click", '.remove-btn', function() {
            var optionValue = $(this).data("value");
            $("#module_code option[value='" + optionValue + "']").prop("selected", false);
            $(this).closest("tr").remove();
        });
    });
});
</script>
