@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 Upload Decision</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-upload-list-decision" enctype="multipart/form-data">
              @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" onchange="getRegionWiseCasNo(this.value)">
                        
                        <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>
                    
                    <select class="form-control m-select2 m-select2-general" name="cas_no" id="cas_no" data-validate-field="cas_no">
                      <option value="">Select CAS No</option>
                    </select>

                    @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>Decision Type<span class="text-danger">*</span></label>

                      <select name="desicion_type" class="form-control" id="desicion_type" data-validate-field="desicion_type">
                        <option value="">Select</option>
                        <option value="DRAFT">DRAFT</option>
                        <option value="FINAL">FINAL</option>
                        <option value="FUP">FUP</option>
                      
                      </select>

                      @error('desicion_type')
                        <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>Decision Sub Type</label>

                      <select name="desicion_sub_type" class="form-control" id="desicion_sub_type" data-validate-field="desicion_sub_type">
                        <option value="">Select</option>
                        <option value="SEV">SEV</option>
                        <option value="CCH">CCH</option>
                      
                      </select>

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


              </div>

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

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

                      @error('description')
                        <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>Date Of Decision<span class="text-danger">*</span></label>

                      <input id="date_of_decision" type="date" 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 class="col-lg-3 col-md-3 col-sm-12">
                    <div  class="form-group">
                      <label>Upload File<span class="text-danger">*</span></label>

                      <input type="file" name="files[]" class="form-control" id="files" data-validate-field="files" placeholder="Select File" multiple autocomplete="off">

                      @error('files')
                        <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-decision">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},
          cache: false,
          
          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() {
            //console.log('stop');
            setTimeout(function () {
              $("#exampleModal").modal("hide");   // Add 300ms delay
            }, 300);
          },

    });

}

new window.JustValidate('.form', { 
      rules: 
        {
            region_id:{required: true},
            cas_no:{required: true},
            desicion_type:{required: true},
            description:{required: true},
            files:{required: true},
            date_of_decision:{required: true},
        },
       messages:{
        region_id:{
            remote: 'Field is required',
            
        },
        cas_no:{
            remote: 'Field is required',
            
        },
        desicion_type:{
            remote: 'Field is required',
            
        },
        description:{
            remote: 'Field is required',
            
        },
        files:{
            remote: 'Field is required',
            
        },
        date_of_decision:{
            remote: 'Field is required',
            
        }
    },
    submitHandler: function(form) { $("#exampleModalLoader").modal({backdrop: 'static', keyboard: false}); $('#myform').submit();},
   });
</script>

@endsection