@extends('layouts.admin.app')
@section('content')
  <div class="pd-30">
    <div class="col-sm-12 col-xl-12" style="display: flex;">
      <h4 class="tx-gray-800 mg-b-5 title" >
        Correction Request
      </h4>
    </div>
  </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">
        <div class="table-responsive" style="overflow-x:auto;">
        @if(count($data) > 0)
          <table id="example" class="table" role="grid" aria-describedby="datatable1_info">
            <thead class="thead-colored">
              <tr>
                  <th>Sr No</th>
                  <th>Status</th>
                  <th>Action</th>
                  <th>CAS No</th>
                  <th>Region</th>
                  <th>UUID</th>
                  <th>Company Name</th>
                  <th>Change Address</th>
                  <th>Change Tonnage</th>
                  <th>Other</th>
                 
              </tr>
            </thead>
            <tbody>
              @php $i = 1; @endphp
              @foreach($data as $key => $n)
                <tr>
                  <th scope="row">{{$i++}}</th>
                  <td>
                    @if($n->status == 0)
                    <span class="badge-danger">Deactive</span>
                    @else
                      <span class="badge-success">Active</span>
                    @endif
                  </td>
                  <td style="display: flex;"> 
                    <button data-id="{{$n->id}}" type="button" class="view border-radius btn btn-primary">View</button>
                  </td>
                  <td>{{$n->cas_no}}</td>
                  <td>{{$n->Company->Region->name}}</td>
                  <td>{{$n->uuid}}</td>
                  <td>{{$n->Company->company_name}}</td>
                  <td>{{$n->change_add}}</td>
                  <td>{{$n->change_tonnage}}</td>
                  <td>{{$n->other}}</td>
                 
                </tr>
              @endforeach
            </tbody>
          </table>
          @else
            <h4 class="text-center">No Correction Request Found</h4>
          @endif
        </div>
      </div>
    </div>
  </div>
 
@endsection
@section('scripts')
<!-- The Modal -->

<div class="modal fade" id="mymodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" style="width: 100%;">
    <div class="modal-content">
      <!-- Modal Header -->
      <div class="modal-header" style="background: #172e43;color: white;font-variant: all-petite-caps;">
        <h4 class="modal-title">Correction Request</h4>
        <button  type="button" class="close text-white border-radius" data-dismiss="modal">X</button>
      </div>
      <!-- Modal body -->
      <div class="modal-body">
        <form id="form" method="post">
        @csrf
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label>CAS No</label>
                <input id="cas_no" type="text" name="cas_no" readonly class="form-control">
                <input id="companyid" type="hidden" name="company_id">
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>Region</label>
                <input id="region_id_fetch" type="text" name="region_id" readonly class="form-control">
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>UUID</label>
                <input id="uuid" type="text" name="uuid"  readonly class="form-control">
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>Change Tonnage</label>
                <textarea id="change_tonnage" name="change_tonnage" readonly class="form-control"></textarea>
              </div>
            </div>
            <div class="col-md-6">
               <div class="form-group">
                <label>Other</label>
                <textarea id="other" name="other" readonly class="form-control"></textarea>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>Completion Date <span class="text-danger">*</span></label>
                <input id="completion_date" type="date" name="completion_date" class="form-control" required>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label>Change Address</label>
                <textarea id="change_add" name="change_add" readonly class="form-control"></textarea>
              </div>
            </div>
            <div class="col-md-12">
              <div class="form-group">
                <label>Completion Remark <span class="text-danger">*</span></label>
                <input id="completion_remark" type="text" name="completion_remark"  class="form-control" row="3" placeholder="Completion Remark" required>
              </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">Accept</button>
            </div>
          </div>
        </form>
      </div>
      <!-- Modal footer -->
    </div>
  </div>
</div>
<script>
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
  $(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)
            }
        });
    })
  })
  $(".view").on("click", function(){
    $('#mymodal').modal({backdrop: 'static', keyboard: false}) 
        var id= $(this).attr('data-id');
         $.ajax({
            type: "GET",
            dataType: "json",
            url: 'correction-fetch/'+btoa(id),
            success: function(data){
              console.log(data.company.region.name)
              $('#companyid').val(data.company_id);
              $('#prid').val(data.id);
              $('#cas_no').val(data.cas_no);
              $('#region_id_fetch').val(data.company.region.name);
              $('#uuid').val(data.uuid);
              $('#change_add').val(data.change_add);
              $('#change_tonnage').val(data.change_tonnage);
              $('#other').val(data.other);
              $('#mymodal').modal('show');
             
            },
            error: function(data){
              // console.log(data)
            }
        });
    });
    $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
});
  $("#form").on("submit", function(event){
    $("#exampleModalLoader").modal("show")
    event.preventDefault();
        var formValues= $('#form').serialize();
        var id = $('#prid').val();
        // alert(formValues);
        $.ajax({
            type: "PUT",
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')},
            url: 'correction-request/'+id,
            data:$('#form').serialize(),
            success: function(data){
              // console.log(data)
              swal('Success!', 'Correction Request Approved Succefully', 'success');
              location.reload()
            },
            error: function(data){
              // console.log(data)
              swal('Sorry!', 'Something went wrong. Please try again', 'error');
            }
        });
    });

    $('.close').on('click', function(){
      $("#mymodal").modal("hide")
    })
</script>
@endsection