@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">Edit </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/addestimatedloacost/{{base64_encode($addEstimatedLoaCost->id)}}/update">
              @csrf @method('PUT')
              <div class="row">
              <div class="col-lg-6 col-md-6 col-sm-12">
                  <div  class="form-group">
                    <label>Cas No<span class="text-danger">*</span></label>
                     <input type="text" name="cas_no" placeholder="Cas Name" class="form-control" data-validate-field="cas_no" value="{{$addEstimatedLoaCost->cas_no}}">
                     @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>1-10 tpa (In Euros):<span class="text-danger">*</span></label>
                    <input type="number" name="tonnage_cost_1" placeholder="Cost For 1-10 tpa" class="form-control" data-validate-field="tonnage_cost_1" value="{{$addEstimatedLoaCost->tonnage_cost_1}}">
                    @error('tonnage_cost_1')
                    <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>10-100 tpa (In Euros):<span class="text-danger">*</span></label>
                    <input type="number" name="tonnage_cost_2" placeholder="Cost For 10-100 tpa" class="form-control" data-validate-field="tonnage_cost_2" value="{{$addEstimatedLoaCost->tonnage_cost_2}}" >
                    @error('tonnage_cost_2')
                    <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>100-1000 tpa (In Euros):<span class="text-danger">*</span></label>
                    <input type="number" name="tonnage_cost_100_1000" placeholder="Cost For 100-1000 tpa" class="form-control" data-validate-field="tonnage_cost_100_1000" value="{{$addEstimatedLoaCost->tonnage_cost_100_1000}}">
                    @error('tonnage_cost_100_1000')
                    <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>Intermediate less than 1000 tpa (In Euros):<span class="text-danger">*</span></label>
                    <input type="number" name="tonnage_cost_3" placeholder="Cost For Intermediate less than 1000 tpa" class="form-control" data-validate-field="tonnage_cost_3" value="{{$addEstimatedLoaCost->tonnage_cost_3}}">
                    @error('tonnage_cost_3')
                    <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>Intermediate with 1000+tpa (In Euros):<span class="text-danger">*</span></label>
                    <input type="number" name="tonnage_cost_4" placeholder="Cost For Intermediate with 1000+tpa" class="form-control" data-validate-field="tonnage_cost_4" value="{{$addEstimatedLoaCost->tonnage_cost_4}}">
                    @error('tonnage_cost_4')
                    <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 name="region_id" class="form-control" data-validate-field="region_id">
                      <option value="">Select</option>
                      @foreach($regions as $key => $n)
                        @if($n->id == $addEstimatedLoaCost->region_id)
                        <option value="{{$n->id}}" selected>{{$n->name}}</option>
                        @endif
                      @endforeach
                    </select>
                    @error('region_id')
                    <div class=" text-danger">
                      {{ $message }}
                    </div>
                  @enderror
                  </div>
                </div>
              </div>
              <button type="submit" class="btn btn-primary">Update</button>
              <a class="btn btn-secondary" href="/gpclrmainportal/addestimatedloacost">Back</a>
            </form>
          </div>
      </div>
   </div>
      

@endsection
@section('scripts')
<script>
//   $(document).ready(function(){
//   $("#myform").on("submit", function(){
//     $("#exampleModal").modal("show");
    
//   });//submit
// });//document ready


  new window.JustValidate('.form');
  $(function() {
    $('.toggle-class').change(function() {
        var status = $(this).prop('checked') == true ? 1 : 0; 
        var user_id = $(this).data('id'); 
         alert(user_id);
        $.ajax({
            type: "GET",
            dataType: "json",
            url: '/changeStatus',
            data: {'status': status, 'user_id': user_id},
            success: function(data){
              // console.log(data.success)
            }
        });
    })
  })

new window.JustValidate('.form', { 
      rules: 
        {
            region_id:{required: true},
            cas_no:{required: true},
            pr_no:{required: true},
            tonnage:{required: true},
        },
       messages:{
        region_id:{
            remote: 'Field is required',
            
        },
        cas_no:{
            remote: 'Field is required',
            
        },
        tonnage_cost_1:{
            remote: 'Field is required',
            
        },
        tonnage_cost_2:{
            remote: 'Field is required',
            
        },
        tonnage_cost_3:{
            remote: 'Field is required',
            
        },
        tonnage_cost_4:{
            remote: 'Field is required',
            
        }
        tonnage_cost_100_1000:{
            remote: 'Field is required',
        }
       
    },
    submitHandler: function(form) { $("#exampleModalLoader").modal({backdrop: 'static', keyboard: false}); $('#myform').submit();},
   });
</script>


@endsection