@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" >
        Complete 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>CAS No</th>
                  <th>UUID</th>
                  <th>Complete Remark</th>
                  <th>Complete Date</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>{{$n->cas_no}}</td>
                  <td>{{$n->uuid}}</td>
                  <td> 
                  {{$n->completion_remark	}}
                  </td>
                  <td>{{$n->completion_date}} </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">
  <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;text-align: center;justify-content: center;">
        <h4 class="modal-title">Correction Request</h4>
      </div>
      <!-- Modal body -->
      <div class="modal-body">
        <form id="form" method="post">
          <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>UUID</label>
                <input id="uuid" type="text" name="uuid"  readonly class="form-control">
              </div>
            </div>
            <div class="col-md-12">
              <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>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</label>
                <input id="completion_date" type="date" name="completion_date" class="form-control">
              </div>
            </div>
            <div class="col-md-12">
              <div class="form-group">
                <label>Completion Remark</label>
                <input id="completion_remark" type="text" name="completion_remark"  class="form-control" row="3" placeholder="Completion Remark">
              </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>
              <button type="button" class="btn btn-danger border-radius" data-dismiss="modal">Close</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(e){
        e.preventDefault();
        var id= $(this).attr('data-id');
       
         $.ajax({
            type: "GET",
            dataType: "json",
            url: 'correction-fetch/'+id,
            error: function(data){
              // console.log(data)
            },
            success: function(data){
              // console.log(data)
              $('#companyid').val(data.company_id);
              $('#prid').val(data.id);
              $('#cas_no').val(data.cas_no)
              $('#uuid').val(data.uuid)
              $('#change_add').val(data.change_add)
              $('#change_tonnage').val(data.change_tonnage)
              $('#other').val(data.other)
              $('#mymodal').modal('show')
            }
        });
    });
  $("#form").on("submit", function(event){
        event.preventDefault();
        var formValues= $(this).serialize();
        var id = $('#prid').val();
        $.post("correction-request/"+id, formValues, function(data){
            // Display the returned data in browser
            $('#mymodal').modal('hide')
            location.reload();
             // alert('success');
        });
    });
</script>
@endsection