@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%;
    }
</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 JS Cas</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-cas">
              @csrf @method('POST')
              <div class="row">

                <div class="col-lg-3 col-md-3 col-sm-12">
                    <div  class="form-group">
                      <label>Region<span class="text-danger">*</span></label>

                      <select name="region_id" id="region_id"  class="form-control region_id" data-validate-field="region_id" value="{{old('region_id')}}">
                        
                        <option value="">Select</option>
                        @foreach($regionList as $key => $n)
                          <option value="{{$n->id}}">{{$n->name}}</option>
                        @endforeach
                      </select>

                      @error('region_id')
                        <div class="text-danger">
                          {{ $message }}
                        </div>
                      @enderror

                    </div>
                </div>
                  
                <div class="col-lg-3 col-md-3 col-sm-12">
                  <div class="form-group">
                    <label>Select CAS No<span class="text-danger">*</span></label>
                    
                    <input type="text" name="cas_no" id="cas_no" placeholder="Cas No" class="form-control" data-validate-field="cas_no" value="{{old('cas_no')}}">

                    @error('cas_no')
                      <div class="text-danger">
                        {{ $message }}
                      </div>
                    @enderror

                  </div>
                </div>  

                <div class="col-lg-3 col-md-3 col-sm-12">
                    <div  class="form-group">
                      <label>Chemical Name<span class="text-danger">*</span></label>

                      <input type="text" name="chemical_name" id="chemical_name" placeholder="Chemical Name" class="form-control" data-validate-field="chemical_name" value="{{old('chemical_name')}}">

                      @error('chemical_name')
                        <div class="text-danger">
                          {{ $message }}
                        </div>
                      @enderror
                      
                    </div>
                </div>

                <div class="col-lg-3 col-md-3 col-sm-12">
                    <div  class="form-group">
                      <label>EC No.<span class="text-danger">*</span></label>

                      <input type="text" name="ec_no" id="ec_no" placeholder="EC No" class="form-control" data-validate-field="ec_no" value="{{old('ec_no')}}">

                      @error('ec_no')
                        <div class="text-danger">
                          {{ $message }}
                        </div>
                      @enderror
                      
                    </div>
                </div>

              </div>

              <div class="row">

                <div class="col-lg-3 col-md-3 col-sm-12">
                    <div  class="form-group">
                      <label>Company Name<span class="text-danger">*</span></label>

                      <input type="text" name="company_name" id="company_name" placeholder="Company Name" class="form-control" data-validate-field="company_name" value="{{old('company_name')}}">

                      @error('company_name')
                        <div class="text-danger">
                          {{ $message }}
                        </div>
                      @enderror
                      
                    </div>
                </div>

                <div class="col-lg-3 col-md-3 col-sm-12">
                    <div  class="form-group">
                      <label>Registration No</label>

                      <input type="text" name="registration_no" id="registration_no" placeholder="Registration No" class="form-control" data-validate-field="registration_no" value="{{old('registration_no')}}">

                      @error('registration_no')
                        <div class="text-danger">
                          {{ $message }}
                        </div>
                      @enderror
                      
                    </div>
                </div>
                
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <div  class="form-group">
                      <label>Current Register Tonnage of GPC as lead<span class="text-danger">*</span></label>

                      <!-- <input type="text" name="current_reg_tonnage_gpc_lead" id="current_reg_tonnage_gpc_lead" placeholder="Current Register Tonnage of GPC as lead" class="form-control" data-validate-field="current_reg_tonnage_gpc_lead" value="{{old('current_reg_tonnage_gpc_lead')}}"> -->

                      <select name="current_reg_tonnage_gpc_lead" id="current_reg_tonnage_gpc_lead"  class="form-control region_id" data-validate-field="current_reg_tonnage_gpc_lead" value="{{old('current_reg_tonnage_gpc_lead')}}">
                        
                        <option value="">Select</option>
                        @foreach($tonnageList as $key => $n)
                          <option value="{{$n->id}}">{{$n->tonnage}}</option>
                        @endforeach
                      </select>

                      @error('current_reg_tonnage_gpc_lead')
                        <div class="text-danger">
                          {{ $message }}
                        </div>
                      @enderror
                      
                    </div>
                </div>

                <!-- <div class="col-lg-3 col-md-3 col-sm-12">
                    <div  class="form-group">
                      <label>Evaluation Decision<span class="text-danger">*</span></label>

                      <input id="evaluation_decision" type="text" placeholder="Enter Evaluation Decision" name="evaluation_decision" data-validate-field="evaluation_decision" class="form-control" required>

                      @error('evaluation_decision')
                        <div class="text-danger">
                          {{ $message }}
                        </div>
                      @enderror
                      
                    </div>
                </div> -->

              </div>

              <div class="row">
                
                <div class="col-lg-4 col-md-4 col-sm-12">
                    <div  class="form-group">
                      <label>No of SIEF members including the lead<span class="text-danger">*</span></label>

                      <input id="sief_member_include_lead" type="text" placeholder="No of SIEF members including the lead" name="sief_member_include_lead" data-validate-field="sief_member_include_lead" class="form-control" value="{{ old('sief_member_include_lead') }}" required>

                      @error('sief_member_include_lead')
                        <div class="text-danger">
                          {{ $message }}
                        </div>
                      @enderror
                      
                    </div>
                </div>

              </div>

              <!-- <div class="row">
                
                <div class="col-lg-2 col-md-2 col-sm-12">
                    <div  class="form-group">
                      <label>Type Of Decision</label>

                      <input id="type_of_decision" type="text" placeholder="Enter Type Of Decision" name="type_of_decision" data-validate-field="type_of_decision" class="form-control" required>

                      @error('type_of_decision')
                        <div class="text-danger">
                          {{ $message }}
                        </div>
                      @enderror
                      
                    </div>
                </div>

                <div class="col-lg-2 col-md-2 col-sm-12">
                    <div  class="form-group">
                      <label>Date Of Decision</label>

                      <input id="date_of_decision" type="date" placeholder="Enter Date Of Decision" name="date_of_decision" data-validate-field="date_of_decision" class="form-control" required>

                      @error('date_of_decision')
                        <div class="text-danger">
                          {{ $message }}
                        </div>
                      @enderror
                      
                    </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},
            current_reg_tonnage_gpc_lead:{required: true},
            sief_member_include_lead:{required: true},
            evaluation_decision:{required: true},
            region_id:{required:true}
            ec_no:{required:true}
        },
       messages:{
        region_id:{
            remote: 'Field is required',
            
        },
        cas_no:{
            remote: 'Field is required',
            
        },
        chemical_name:{
            remote: 'Field is required',
            
        },
        company_name:{
            remote: 'Field is required',
            
        },
        current_reg_tonnage_gpc_lead:{
            remote: 'Field is required',
            
        },
        sief_member_include_lead:{
            remote: 'Field is required',
            
        },
        evaluation_decision:{
            remote: 'Field is required',
            
        },
        ec_no:{
            remote: 'Field is required',
            
        }
    },
    submitHandler: function(form) { $("#exampleModalLoader").modal({backdrop: 'static', keyboard: false}); $('#myform').submit();},
   });
</script>

@endsection