@extends('layouts.admin.app')
@section('content')
<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">Upload Invoice</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/manual-invoice/store" enctype="multipart/form-data">
              @csrf @method('POST')
              <div class="row">
              <div class="col-lg-6 col-md-6 col-sm-12">
                  <div class="form-group">
                    <label>Company Name<span class="text-danger">*</span></label>
                    <select class="form-control m-select2 m-select2-general" name="company_id" id="company_id" data-validate-field="company_id">
                      <option value="">Select Company Name</option>
                      @foreach($companies as $key => $n)
                      <option value="{{$n->id}}">{{$n->uuid}}[{{$n->company_name}}]</option>
                      @endforeach
                    </select>
                     @error('company_name')
                      <div class="text-danger">
                        {{ $message }}
                      </div>
                    @enderror
                  </div>
              </div>   
              <div class="col-lg-6 col-md-6 col-sm-12">
                <div class="form-group">
                  <label>Region<span class="text-danger">*</span></label>
                    <select id="ComregionId" class="form-control m-select2 m-select2-general" name="region_id"  data-validate-field="region_id">
                      <option value="">Select Region</option>
                    </select>
                     @error('region_id')
                      <div class="text-danger">
                        {{ $message }}
                      </div>
                    @enderror
                </div>
              </div>
              <div class="col-lg-6 col-md-6 col-sm-12">
                <div  class="form-group">
                    <label>Cas Number<span class="text-danger">*</span></label>
                      <select class="form-control m-select2 m-select2-general" name="cas_no" id="ComCasNo" data-validate-field="cas_no">
                        <option value="">Select Cas Number</option>
                      </select>
                      @error('cas_no')
                        <div class="text-danger">
                          {{ $message }}
                        </div>
                      @enderror
                  </div>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                  <div  class="form-group">
                    <label>Upload<span class="text-danger">*</span></label>
                     <input type="file" name="file" id="file" class="form-control" data-validate-field="file" value="{{old('file')}}" >
                     @error('file')
                    <div class="text-danger">
                      {{ $message }}
                    </div>
                  @enderror
                  </div>
                </div>
                
                <div class="col-lg-12 col-md-12 col-sm-12">
                  <div class="form-group">
                    <label>Remark</label>
                    <textarea name="remark" class="form-control"  placeholder="Remark"></textarea>
                  </div>
                </div>
              </div>
              <button type="submit" class="btn btn-primary">Submit</button>
              <a class="btn btn-secondary" href="/gpclrmainportal/manual-invoice">Back</a>
            </form>
          </div>
      </div>
   </div>
@endsection
@section('scripts')
<script>
new window.JustValidate('.form', { 
      rules: 
        {
            company_id:{required: true},
            region_id:{required: true},
            cas_no:{required: true},
            file:{required: true},
           
        },
       messages:{
        company_id:{
            remote: 'Field is required',
        },
        region_id:{
            remote: 'Field is required', 
        },
        cas_no:{
            remote: 'Field is required',  
        },
        file:{
            remote: 'Field is required',   
        },
       
       
    },
    submitHandler: function(form) { $("#exampleModalLoader").modal({backdrop: 'static', keyboard: false}); $('#myform').submit();},
   });


   
    $('#company_id').on('change', function () {
        var companyID = $(this).val();
        if (companyID) {
        $.ajax({
            url: "/gpclrmainportal/manual-invoice/getDataByID/"+btoa(companyID),
            type: "GET",
            dataType: "json",
            success: function (data) {
              console.log(data);
                $('#ComregionId').empty();
                $('#ComregionId').append('<option value=" ">Select</option>');
                $.each(data, function (key, value) {
                    $('#ComregionId').append('<option value=" ' + value.id + '">' + value.name + '</option>');
                })
            },
            error:function(data) {
              console.log(data);
            }

        })
    } else {
        $('#ComregionId').empty();
    }
  });

  $('#ComregionId').on('change', function () {
        var regionID = $(this).val();
        var company_id = $('#company_id').val();
        if (regionID) {
        $.ajax({
            url: "/gpclrmainportal/manual-invoice/getCasDataByID/"+btoa(regionID)+"/"+btoa(company_id),
            type: "GET",
            dataType: "json",
            success: function (data) {
              console.log(data);
                $('#ComCasNo').empty();
                $('#ComCasNo').append('<option value=" ">Select</option>');
                $.each(data, function (key, value) {
                    $('#ComCasNo').append('<option value=" ' + value + '">' + value + '</option>');
                })
            },
            error:function(data) {
              console.log(data);
            }

        })
    } else {
        $('#ComCasNo').empty();
    }
  });
    
    
</script>

@endsection