@extends('layouts.admin.app')
<style type="text/css">
  .badge-success{color: #23BF08 !important;
    border: 1px solid #23BF08;
    padding: 4px;
    font-weight: 500;background-color: transparent !important;}
    .badge-danger{
      color: #dc3545 !important;
    border: 1px solid #dc3545;
    padding: 4px;
    font-weight: 500;background-color: transparent !important;
    }
    #pageloader{
  background: rgb(255 255 255);
  box-shadow: 2px 3px 9px 2px #00000057;
    display: none;
    height: 70%;
    position: fixed;
    width: 40%;
    left: 33%;
    z-index: 9999;
  }
  #pageloader img
  {
    left: 49%;
    margin-left: -32px;
    margin-top: -32px;
    position: absolute;
    top: 50%;
  }
  table, th, td {
    border: 1px solid grey;
    border-collapse: collapse;
  }
  body .select2-container--default .select2-selection--single {
    height: 27px !important;
  }
  .inputHeight{
    height: 27px;
  }
  .inputstyle{
    width: 200px;
    padding: 5px;
    display: inline-block;
    background-color: #eaeaea;
    border: 1px solid #b1a6a6;
  }

  .suggestion-box {
        position: absolute;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 5px;
        max-height: 150px;
        overflow-y: auto;
        width: 300px;
        z-index: 1000;
        display: none;
    }
    .suggestion-item {
        padding: 10px;
        cursor: pointer;
    }
    .suggestion-item:hover {
        background: #f1f1f1;
    }
</style>

@section('content')
<!-- <div class="modal fade bd-example-modal-lg" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true"> 
 <div class="modal-dialog" role="document">
    <div class="modal-content" style="width:700px;">
    <div class="modal-body">
        <div id="pageloader" class="">
           
        </div>
    </div>
    </div>
  </div>
</div> -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content" style="border:none;background:transparent!important">
      <div class="modal-body">
      <img src="{{asset('admin/gif/Hourglass.gif')}}" alt="processing..." />
      </div>
    </div>
  </div>
</div>

 <script src="{{asset('admin/js/just-validate.min.js')}}"></script>

      <div class="pd-30">
        <h4 class="tx-gray-800 mg-b-5 title">Add SIEF Member</h4>
        <p class="mg-b-0"></p>
      </div><!-- d-flex -->
      <div class="br-pagebody mg-t-5 pd-x-30">
        <div class="br-section-wrapper row row-sm">
          <div class="col-sm-12 col-xl-12">
            <form id="myform" class="form" method="post" action="/gpclrmainportal/upload-decision/store-js-sief-member">
              @csrf @method('POST')

              <div class="row">
                
                <div class="col-lg-4 col-md-4 col-sm-12">

                  <div class="form-group">
                    <label>CAS No - </label>
                    
                    <input type="text" name="sel_cas_no" class="inputstyle" value="{{$casNo}}" readonly>
                    <input type="hidden" name="js_member_tbl_id" value="{{ $tbl_id }}">

                  </div>

                </div>  

              </div>

              <div class="row">
                  
                <div class="col-lg-12 col-md-12 col-sm-12">

                  <div class="table-responsive" style="overflow-x:auto;">

                    <table id="sief_member_table" class="table">
                    
                      <thead class="">
                        <tr>
                          <th>Sr. No</th>
                          <th>SIEF Member</th>
                          <th>SIEF Email Id</th>
                          <th>SIEF Tonnage Band</th>
                          <th>Refrence Status</th>
                          <th>#</th>
                        </tr>
                      </thead>

                      <tbody>

                        @if(count($js_member_list) == 0)

                          <tr>
                              <td>
                                  1
                                  <input type="hidden" value="1" name="siefmrowCount[]">
                              </td>
                              <td>
                                  <input type="text" id="sief_member1" name="sief_member[]" placeholder="Enter SIEF Member" class="form-control inputHeight sief_member" onkeyup="siefMemberList(1)" autocomplete="off" />

                                  <div id="sm-suggestion-box1" class="suggestion-box"></div>
                              </td>
                              <td>
                                  <input type="text" id="sief_email_id1" name="sief_email_id[]" placeholder="Enter SIEF Email Id" class="form-control inputHeight"/>
                              </td>
                              <td>
                                  <!-- <input type="text" id="sief_tonnage_band1" name="sief_tonnage_band[]" placeholder="Enter SIEF Tonnage Band" class="form-control"/> -->

                                  <select class="form-control m-select2 m-select2-general" name="sief_tonnage_band[]" id="sief_tonnage_band1">
                                    <option value="">Select SIEF Tonnage Band</option>
                                    
                                    <option value="Annex VI">Annex VI</option>
                                    <option value="Annex VII">Annex VII</option>
                                    <option value="Annex VIII">Annex VIII</option>
                                    <option value="Annex VII PC">Annex VII PC</option>
                                    <option value="Annex IX">Annex IX</option>
                                    <option value="N/A">N/A</option>
                                    <option value="Annex X">Annex X</option>
                                    <option value="0">0</option>
                                    <option value="Tonnage not specified">Tonnage not specified</option>
                                    <option value="> 1000 tpa">> 1000 tpa</option>
                                    
                                  </select>

                              </td>
                              <td>
                                  <!-- <input type="text" id="refrence_status1" name="refrence_status[]" placeholder="Select Refrence Status" class="form-control"/> -->

                                  <select class="form-control m-select2 m-select2-general" name="refrence_status[]" id="refrence_status1">
                                    <option value="">Select Refrence Status</option>
                                    
                                    <option value="Active">Active</option>
                                    <option value="Inactive">Inactive</option>
                                    <option value="Revoked">Revoked</option>
                                    <option value="N/A">N/A</option>
                                    <option value="Invalid">Invalid</option>
                                    <option value="Invalid (GPC)">Invalid (GPC)</option>
                                    <option value="Invalid In a different JS">Invalid In a different JS</option>
                                    <option value="Inactive (GPC) Revoked">Inactive (GPC) Revoked</option>
                                    <option value="Invalid (GPC) Active">Invalid (GPC) Active</option>
                                    
                                  </select>
                              </td>
                              <td style="width: 10%;">
                                  <button type="button" name="add" id="sief_member_Data" class="btn btn-primary">Add More</button>
                              </td>  
                          </tr>

                        @else

                          @php $esrno =1; @endphp
                            @foreach($js_member_list as $erow)

                            <tr id="sief_member_row{{$esrno}}">
                              <td>
                                    {{$esrno}}
                                    <input type="hidden" value="{{$esrno}}" name="siefmrowCount[]">
                                </td>
                                <td>
                                    <input type="text" id="sief_member{{$esrno}}" name="sief_member[]" placeholder="Enter SIEF Member" value="{{ $erow['sief_member'] }}" class="form-control inputHeight sief_member" onkeyup="siefMemberList({{$esrno}})" autocomplete="off"/>

                                    <div id="sm-suggestion-box{{$esrno}}" class="suggestion-box"></div>
                                </td>
                                <td>
                                    <input type="text" id="sief_email_id{{$esrno}}" name="sief_email_id[]" placeholder="Enter SIEF Email Id" value="{{ $erow['sief_email_id'] }}" class="form-control inputHeight"/>
                                </td>
                                <td>
                                    <!-- <input type="text" id="sief_tonnage_band{{$esrno}}" name="sief_tonnage_band[]" placeholder="Enter SIEF Tonnage Band" value="{{ $erow['sief_tonnage_band'] }}" class="form-control"/> -->

                                    <select class="form-control m-select2 m-select2-general" name="sief_tonnage_band[]" id="sief_tonnage_band{{$esrno}}">
                                      <option value="">Select SIEF Tonnage Band</option>
                                      
                                      <option value="Annex VI" {{ $erow['sief_tonnage_band'] == 'Annex VI' ? 'selected' : '' }}>Annex VI</option>
                                      <option value="Annex VII" {{ $erow['sief_tonnage_band'] == 'Annex VII' ? 'selected' : '' }}>Annex VII</option>
                                      <option value="Annex VIII" {{ $erow['sief_tonnage_band'] == 'Annex VIII' ? 'selected' : '' }}>Annex VIII</option>
                                      <option value="Annex VII PC" {{ $erow['sief_tonnage_band'] == 'Annex VII PC' ? 'selected' : '' }}>Annex VII PC</option>
                                      <option value="Annex IX" {{ $erow['sief_tonnage_band'] == 'Annex IX' ? 'selected' : '' }}>Annex IX</option>
                                      <option value="N/A" {{ $erow['sief_tonnage_band'] == 'N/A' ? 'selected' : '' }}>N/A</option>
                                      <option value="Annex X" {{ $erow['sief_tonnage_band'] == 'Annex X' ? 'selected' : '' }}>Annex X</option>
                                      <option value="0" {{ $erow['sief_tonnage_band'] == '0' ? 'selected' : '' }}>0</option>
                                      <option value="Tonnage not specified" {{ $erow['sief_tonnage_band'] == 'Tonnage not specified' ? 'selected' : '' }}>Tonnage not specified</option>
                                      <option value="> 1000 tpa" {{ $erow['sief_tonnage_band'] == 'Tonnage not specified' ? 'selected' : '' }}>> 1000 tpa</option>
                                      
                                    </select>
                                </td>
                                <td>
                                    
                                    <select class="form-control m-select2 m-select2-general" name="refrence_status[]" id="refrence_status{{$esrno}}">
                                      <option value="">Select Refrence Status</option>
                                      
                                      <option value="Active" {{ $erow['refrence_status'] == 'Active' ? 'selected' : '' }}>Active</option>
                                      <option value="Inactive" {{ $erow['refrence_status'] == 'Inactive' ? 'selected' : '' }}>Inactive</option>
                                      <option value="Revoked" {{ $erow['refrence_status'] == 'Revoked' ? 'selected' : '' }}>Revoked</option>
                                      <option value="N/A" {{ $erow['refrence_status'] == 'N/A' ? 'selected' : '' }}>N/A</option>
                                      <option value="Invalid" {{ $erow['refrence_status'] == 'Invalid' ? 'selected' : '' }}>Invalid</option>
                                      <option value="Invalid (GPC)" {{ $erow['refrence_status'] == 'Invalid (GPC)' ? 'selected' : '' }}>Invalid (GPC)</option>
                                      <option value="Invalid In a different JS" {{ $erow['refrence_status'] == 'Invalid In a different JS' ? 'selected' : '' }}>Invalid In a different JS</option>
                                      <option value="Inactive (GPC) Revoked" {{ $erow['refrence_status'] == 'Inactive (GPC) Revoked' ? 'selected' : '' }}>Inactive (GPC) Revoked</option>
                                      <option value="Invalid (GPC) Active" {{ $erow['refrence_status'] == 'Invalid (GPC) Active' ? 'selected' : '' }}>Invalid (GPC) Active</option>
                                      
                                    </select>
                                </td>
                                <td style="width: 10%;">
                                    @if($esrno == 1)
                                      <button type="button" name="add" id="sief_member_Data" class="btn btn-primary">Add More</button>
                                    @else
                                      <button type="button" name="remove_sief_member" id="{{ $esrno }}" class="btn btn-danger btn_sief_member_remove">X</button>
                                    @endif
                                </td>  
                            </tr>

                              @php $esrno++; @endphp
                            @endforeach
                        @endif

                      </tbody>
                    </table>
                  </div>
                  
                </div>  

              </div>

              <button type="submit" class="btn btn-primary">Submit</button>
              <a class="btn btn-secondary" href="/gpclrmainportal/upload-decision/list-of-js-cas">Back</a>
            </form>
          </div>
      </div>
   </div>
      
@endsection
@section('scripts')
<script>


function getRegionWiseCasNo(val){

    var regionID = val;
  
    $.ajaxSetup({
        headers: {
           'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax({
          url: "/gpclrmainportal/upload-decision/get-cas-no-list-against-region",
          type:'POST',
          dataType: "json",
          data:{'regionID':regionID},

          
          beforeSend: function() {
            console.log('start spinner');
            $("#exampleModal").modal("show");
          },
          success: function(data) {

            var data1 = JSON.parse(JSON.stringify(data));

            if (data1.response == 'error') {

              $('#errorItem').html("<p style='color:red'>"+ data1.message +"</p>");

            }else if(data1.response == 'success'){

              $('#cas_no').html('');

              var casNoArr = [];

              $('#cas_no').append("<option value=''>Select CAS No</option>");
              
              $.each(data1.casNo_data, function(k, getItem){
                
                casNoArr[k] = "<option value='" + getItem.cas_no + "'>" + getItem.cas_no + "</option>";

              });

              $('#cas_no').append(casNoArr.join(''));

            }

          },
          complete: function() {
              $("#exampleModal").modal("hide");
          },

    });

}

new window.JustValidate('.form', { 
      rules: 
        {
            cas_no:{required: true},
            chemical_name:{required: true},
            company_name:{required: true},
            registration_no:{required: true},
            current_reg_tonnage_gpc_lead:{required: true},
            sief_member_include_lead:{required: true},
        },
       messages:{
        cas_no:{
            remote: 'Field is required',
            
        },
        chemical_name:{
            remote: 'Field is required',
            
        },
        company_name:{
            remote: 'Field is required',
            
        },
        registration_no:{
            remote: 'Field is required',
            
        },
        current_reg_tonnage_gpc_lead:{
            remote: 'Field is required',
            
        },
        sief_member_include_lead:{
            remote: 'Field is required',
            
        }
    },
    submitHandler: function(form) { $("#exampleModalLoader").modal({backdrop: 'static', keyboard: false}); $('#myform').submit();},
   });
</script>

<script>
  $(document).ready(function(){

      //var cse_srno = 1;
      $("#sief_member_Data").click(function(){

        var cse_srno = $('#sief_member_table tbody tr').length+1;

        //console.log('getCnt',getCnt);
    
         //cse_srno++;
         $('#sief_member_table').append('<tr id="sief_member_row'+cse_srno+'">'+
                                        '<td>'+
                                            cse_srno+
                                            '<input type="hidden" value="'+cse_srno+'" name="siefmrowCount[]">'+
                                        '</td>'+
                                        '<td>'+
                                            '<input type="text" id="sief_member'+cse_srno+'" name="sief_member[]" placeholder="Enter SIEF Member" class="form-control inputHeight sief_member" onkeyup="siefMemberList('+cse_srno+')" autocomplete="off"/>'+
                                            '<div id="sm-suggestion-box'+cse_srno+'" class="suggestion-box"></div>'+
                                        '</td>'+
                                        '<td>'+
                                            '<input type="text" id="sief_email_id'+cse_srno+'" name="sief_email_id[]" placeholder="Enter SIEF Email Id" class="form-control inputHeight"/>'+
                                        '</td>'+
                                        '<td>'+
                                            '<select class="form-control m-select2 m-select2-general" name="sief_tonnage_band[]" id="sief_tonnage_band'+cse_srno+'">'+
                                              '<option value="">Select SIEF Tonnage Band</option>'+
                                              '<option value="Annex VI">Annex VI</option>'+
                                              '<option value="Annex VII">Annex VII</option>'+
                                              '<option value="Annex VIII">Annex VIII</option>'+
                                              '<option value="Annex VII PC">Annex VII PC</option>'+
                                              '<option value="Annex IX">Annex IX</option>'+
                                              '<option value="N/A">N/A</option>'+
                                              '<option value="Annex X">Annex X</option>'+
                                              '<option value="0">0</option>'+
                                              '<option value="Tonnage not specified">Tonnage not specified</option>'+
                                              '<option value="> 1000 tpa">> 1000 tpa</option>'+
                                            '</select>'+
                                        '</td>'+
                                        '<td>'+
                                            '<select class="form-control m-select2 m-select2-general" name="refrence_status[]" id="refrence_status'+cse_srno+'">'+
                                              '<option value="">Select Refrence Status</option>'+
                                              '<option value="Active">Active</option>'+
                                              '<option value="Inactive">Inactive</option>'+
                                              '<option value="Revoked">Revoked</option>'+
                                              '<option value="N/A">N/A</option>'+
                                              '<option value="Invalid">Invalid</option>'+
                                              '<option value="Invalid (GPC)">Invalid (GPC)</option>'+
                                              '<option value="Invalid In a different JS">Invalid In a different JS</option>'+
                                              '<option value="Inactive (GPC) Revoked">Inactive (GPC) Revoked</option>'+
                                              '<option value="Invalid (GPC) Active">Invalid (GPC) Active</option>'+
                                            '</select>'+
                                        '</td>'+
                                        '<td style="width: 10%;">'+
                                            '<button type="button" name="remove_sief_member" id="'+cse_srno+'" class="btn btn-danger btn_sief_member_remove">X</button>'+
                                        '</td>'+  
                                    '</tr>');  

          $(`#sief_tonnage_band${cse_srno}, #refrence_status${cse_srno}`).select2();

          $(`#sief_tonnage_band${cse_srno}, #refrence_status${cse_srno}`).css({
              
              "height": "27px",
              "padding":"0px"
          });
      });

      $(document).on('click', '.btn_sief_member_remove', function(){  

         var button_sief_member_id = $(this).attr("id");   

         $('#sief_member_row'+button_sief_member_id).remove();  
      });
  });

  function siefMemberList(id){

    var siefMinput = $('#sief_member'+id).val();
    var suggestionBox = $('#sm-suggestion-box'+id);
    if (siefMinput.length < 1) {
        suggestionBox.hide();
        return;
    }

    $.ajax({
        url: '/gpclrmainportal/get-sief-member-related-list', // Laravel route
        method: 'GET',
        data: { q: siefMinput },
        dataType: 'json',
        success: function (data) {

            suggestionBox.empty();

            if (data.length === 0) {
                suggestionBox.hide();
                return;
            }

            data.forEach(function (item) {
                const div = '<div class="suggestion-item" data-id="'+item.id+'" onclick="suggestionItem('+id+',\''+item.name+'\')">'+item.name+'</div>';
                suggestionBox.append(div);
            });

            suggestionBox.show();
        },
        error: function () {
            console.error('Error fetching suggestions');
        }
    });

  }

  function suggestionItem(id,selName){

    const value = $(this).text();
    $('#sief_member'+id).val(selName);
    $('#sm-suggestion-box'+id).hide();

  }

  $(document).ready(function(){

    // Hide suggestions when clicking outside
    $(document).on('click', function (e) {
        if (!$(e.target).closest('.suggestion-box, .sief_member').length) {
            $('.suggestion-box').hide();
        }
    });

  });

</script>

@endsection