@extends('layouts.admin.app')
@section('content')

<style>
  .tdborder{
      border-top: 1px solid #fff;
  } 
  .tblHead{
      font-weight: 600;
  }
  .dicisionTable tr td{
      border:1px solid #ffff;
  }
  @media (min-width: 992px) {
    .modal-lg {
        max-width: 1000px;
    }
  }
  .sirf-member-table, th, td {
    border: 1px solid #dee2e6;
    border-collapse: collapse;
  }
  .thead-colored-sirfm th{
    color: #000 !important;
  }
  /* Loader overlay inside modal */
  .modal-loader-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 0.7); /* Light overlay */
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 10;
  }

  /* Loader animation */
  .modal-loader {
      width: 40px;
      height: 40px;
      border: 4px solid #3498db;
      border-top: 4px solid transparent;
      border-radius: 50%;
      animation: spin 1s linear infinite;
  }

  @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
  }

  /* Disable interactions inside modal */
  .modal-content.loading {
      pointer-events: none;
      opacity: 0.5;
  }
</style>
    <div class="pd-30">
        <div class="col-sm-12 col-xl-12" style="display: flex;">
          <h4 class="col-sm-8 col-xl-8 tx-gray-800 mg-b-5 title" style="">JS Cas List</h4>
          <div class="col-sm-4 col-xl-4" style="text-align:end">
            <!-- <a href="/gpclrmainportal/upload-decision/view-all-send-mail" class="btn btn-primary" style="border-radius: 0px;">View All Send Mail</a> -->&nbsp;<a href="/gpclrmainportal/upload-decision/create-js-cas" class="btn btn-primary" style="border-radius: 0px;">Add</a>
            <button type="button" name="add" id="import_siefMemberbtn" class="btn btn-primary">Import</button>
          </div>
        </div>
    </div>
    <div class=" br-pagebody mg-t-5 pd-x-30">
      <div class="br-section-wrapper row row-sm p-20">       
        <div class="col-sm-12 col-xl-12" style="padding-bottom: 20px">
          <div class="table-responsive" style="overflow-x:auto;">

            <table id="example" class="table responsive  dataTable no-footer dtr-inline">
            
              <thead class="thead-colored">
                <tr>
                  <th>Sr. No</th>
                  <th>CAS No</th>
                  <th>Chemical Name</th>
                  <th>Registration No</th>
                  <th>Action</th>
                </tr>
              </thead>

              <tbody>
                @php $i = 1; 
                @endphp
                @foreach($jsMemberList as $key => $n)
                <tr>
                  <td scope="row">{{$i}}</td>
                  <td scope="row">{{$n->cas_no}}</td>
                  <td scope="row">{{$n->chemical_name}}</td>
                  <td scope="row">{{$n->registration_no}}</td>
                  <td scope="row">
                    
                    <a href="/gpclrmainportal/upload-decision/edit-js-cas/{{base64_encode($n->id) }}" class="btn btn-action-edit border-r-0" style="padding:5px;margin-top:2px"><i class="fas fa-pen-square action-icon"></i></a> | <a href="/gpclrmainportal/upload-decision/add-js-sief-member/{{base64_encode($i)}}/{{base64_encode($n->id)}}/{{base64_encode($n->cas_no)}}" class="btn btn-action-edit border-r-0" style="padding:5px;margin-top:2px"><i class="fa fa-plus-circle"></i> SIEF Member</a>

                  </td>
                </tr>
                @php $i++; 
                @endphp
                @endforeach
              </tbody>
            </table>

          </div>
        </div>
        
      </div>
    </div>  

<!-- import -->

  <div class="modal-loader-overlay">
      <div class="modal-loader"></div>
  </div>

  <div class="modal fade" id="import_siefm_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-md" style="width: 100%;">
      <div class="modal-content">
        <div id="import_file_errors"></div>
        <!-- Modal Header -->
        <div class="modal-header" style="background: #172e43;color: white;font-variant: all-petite-caps;">
          <h4 class="modal-title">Import File</h4>
          <button  type="button" class="close text-white border-radius" data-dismiss="modal">X</button>
        </div>
        <!-- Modal body -->
        <div class="modal-body">

          <form id="import_formSiefMember" method="post" action="javascript:void(0)" accept-charset="utf-8" enctype="multipart/form-data">
          @csrf
            <div class="row">

              <div class="col-sm-12">

                <div class="input-block mb-3">
                  <label class="col-form-label">Excel File Template For Upload - </label>
                  
                  <a href="{{asset('excel_formats/cas_sief_member_format.xlsx')}}" class="btn btn-primary float-right">Download Format</a>

                </div>

              </div>
            </div>

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

                <div class="input-block mb-3">
                  <label class="col-form-label">Upload Files (EXCEL)</label>
                  <input class="form-control" id="siefMemberFile" type="file" name="siefMemberFile" required="">

                  <small id="selectCompOfFileMsg" style="color: red;font-size: 14px;"></small>
                </div>
              </div>
            </div>

            <div class="col-md-12 text-center">
              <input id="prid" type="hidden" name="id" value="">
              <button id="submit" type="submit" class="border-radius btn btn-success" onclick="submitBulkSIFMember()">Submit</button>
            </div>
          </form>
        </div>
        <!-- Modal footer -->
      </div>
    </div>
  </div>


<!-- import -->

@endsection
@section('scripts')
<script src="{{ asset('admin/js/select2.js') }}" type="text/javascript" defer></script>
<script src="{{ asset('admin/js/select2.min.js') }}" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.8/js/select2.min.js" defer></script>

<script>

  function addMulSiefMember(srNo,tblID,cas_no){
    $('#sief_cas_no'+srNo).val(cas_no);
    $('#addSiefMemberModal'+srNo).modal({backdrop: 'static', keyboard: false}) 
    $('#addSiefMemberModal'+srNo).modal('show');
  }

  $(document).ready(function(){

    $('#import_siefMemberbtn').on('click',function(){
      $('#import_siefm_modal').modal({backdrop: 'static', keyboard: false}) 
      $('#import_siefm_modal').modal('show');
    })

    $.ajaxSetup({
        headers: {

            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

        }
    });

    $('#import_formSiefMember').submit(function(e) {

        e.preventDefault();

        //var selExcelFormat = $('input[name="membershipCategory"]:checked').val();

        var fd = new FormData();
    
        fd.append('importfile', $('#siefMemberFile')[0].files[0]);
        
        //fd.append('selExcelFormat', selExcelFormat);

        $("#exampleModal").modal("show");
        $('.modal-loader-overlay').fadeIn();
        $('.modal-content').addClass('loading');

        $.ajax({

            type: 'POST',
            url: "{{ url('/gpclrmainportal/import-bulk-sief-member-data') }}",
            dataType: "JSON",
            contentType: false,
            cache: false,
            processData: false,
            data: fd,
            beforeSend: function() {
                //console.log('start spinner');
                $('.modalspinner').removeClass('hideloaderOnModl');
                 $('#import_file_errors').html('');
            },
            success: function(response) {

                if (response.status === 'success') {
                    $('#import_success').html('<div class="alert alert-success">' + response.message + '</div>');
                    setTimeout(function() {
                        window.location.reload();
                    }, 2000); // Reload after 2 seconds

                } else if (response.status === 'error') {
                    var errorList = '<div class="alert alert-danger" style="margin: 0px;"><ul>';
                    if (response.errors) {
                        $.each(response.errors, function(field, messages) {
                            $.each(messages, function(index, message) {
                                errorList += '<li>' + message + '</li>';
                            });
                        });
                        errorList += '</ul></div>';
                    } else {
                        errorList += '<li>' + response.message + '</li></ul></div>';
                    }
                    $('#import_file_errors').html(errorList);
                }

            },
            complete: function() {
                //console.log('end spinner');
                $('.modalspinner').addClass('hideloaderOnModl');
            },
        }); /* /. ajax*/

       // }

    }); /* /. function*/

  });


</script>
@endsection