@if(count($data)>0)
    <div class="table-responsive">
    	<table id="example" class="table table-bordered align-middle" style="width:100%">
    	    <thead class="table-light">
    		    <tr>
    		        <th class="thbutton">Sl No</th>
                  <th>Option Name</th>
    		          <th>Style Type</th>
                  <th class="thbutton">Status</th>
      		        <th class="thbutton">Duplicate</th>
                  <th class="thbutton">Remove</th>
    		    </tr>
    	    </thead>
    	    <tbody> 
              @php $sno = 1; @endphp
    		    	@foreach ($data as $key => $test_item_option)
    				    <tr>
                  <td>{{ $sno++ }}</td>
  				        <td>{{ $test_item_option[0] }}</td>
                  <td>{{ $test_item_option[1] }}</td>
                  <td>{{ $test_item_option[2] }}</td>
                  @if ($test_item_option['status'] == 1)
                      <td class="text-success">No</td>
                  @else
                      <td class="text-danger">Duplicate</td>
                  @endif
                  <td class="text-center">
                      <a data-url="{{route('test-item-options.import-session-destroy')}}" data-id="{{ $key }}" class="btn btn-danger deleteDataCustom" class="text-danger" data-bs-toggle="tooltip" data-bs-placement="left" title="Delete">
                          <i class="bi bi-trash text-white"></i>
                      </a>
                  </td>
    				    </tr>
    			    @endforeach
    	    </tbody>
    	</table>
    </div>
@else
    <tr>
        <td colspan="10">No Data Found</td>
    </tr>
@endif
<script>
    /*********delete data**********/
    $("body").on("click",'.deleteDataCustom', function(event){
      dataString    = {"id":$(this).data('id')};  
      var UrlValue  = $(this).data('url');
      var btn = $(this);

      Swal.fire({
          title: 'Are you sure you want to delete this?',
          icon: 'warning',
          showDenyButton: true,
          showCancelButton: false,
          confirmButtonText: 'Yes',
          denyButtonText: 'No',
      }).then((result) => {
          /* Read more about isConfirmed, isDenied below */
          if (result.isConfirmed) {
              $.ajax({
              url     : UrlValue,
              method  : 'post',
              data    :{
                      "_token": $('meta[name="csrf-token"]').attr('content'),
                      "id": $(this).data('id')
              },
              headers:
              {
                  'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              },
              beforeSend: function( xhr ) {
                  // xhr.overrideMimeType( "text/plain; charset=x-user-defined" );
              },
              success : function(response){
                  if (response.success){
                      var ErroMsg = $(this).printErrorMsg(response.message);
                      btn.closest('tr').remove();
                      $(this).Toastshow('success',ErroMsg);
                  } else {
                      var ErroMsg = $(this).printErrorMsg(response.message);
                      $(this).Toastshow('error',ErroMsg);
                  }
              },
              error: function (data) {
                console.log("error ",data);
              }   
          });
          }
      });
    });
</script>