@extends('layouts.admin.app')
@section('content')
<style>
  .buttons-excel {background: #0f733d;
    border: 1px solid #0f733d;
    color: white;
    float: right;
    padding: 6px;}
</style>
    <div class="pd-30">
        <div class="col-sm-12 col-xl-12 " style="display: flex;">
          <h4 class="col-sm-8 col-xl-8 tx-gray-800 mg-b-5 title" style="">SIEF Survey Submitted</h4>
          <div class="col-sm-4 col-xl-4" style="text-align:end">
          <a href="/gpclrmainportal/survey-excel" class="btn btn-primary" style="border-radius: 0px;">Excel</a>
        </div>
        </div>
    </div>
    <div class=" br-pagebody mg-t-5 pd-x-30">
        <div class="br-section-wrapper row row-sm p-20">       
        <div class="col-sm-12 col-xl-12" style="padding-bottom: 20px">
          <form method="post" action="/gpclrmainportal/search-company-survey">
            @csrf @method('post')
            <div class="row">
              <div class="col-md-4">
                <label>Select UUID(Company Name)</label>
                <select class="form-control m-select2 m-select2-general" name="company_id" id="uuid">
                  <option value="">Select UUID</option>
                  @foreach($uniquekeys as $key => $n)
                  <option value="{{$n->company_id}}" >{{$n->uuid}}({{$n->company_name}})</option>
                  @endforeach
                </select>
              </div>
              <div class="col-md-4">
                <label>Select CAS</label>
                <select class="form-control m-select2 m-select2-general" name="casno" id="casno">
                  <option value="">Select CAS</option>
                  @foreach($cases as $key => $n)
                  <option value="{{$n->cas_no}}" >{{$n->cas_no}}</option>
                  @endforeach
                </select>
              </div>
              <div class="col-md-4">
                <a href="/gpclrmainportal/survey" class="btn btn-style2 text-white" style="margin-top: 29px;">Clear</a>
                <button class="btn btn-style1 text-white" type="submit" style="margin-top: 29px;">Search</button>
              </div>
            </div>
          </form>
        </div>
        <hr>
          <div class="col-sm-12 col-xl-12">
            <div class="table-responsive" style="overflow-x:auto;">
            @if(count($data) > 0)
             <table id="surveytable" class="table responsive  dataTable no-footer dtr-inline" >
              <thead class="thead-colored">
                <tr>
                  <th>Sr No</th>
                  <th>Region</th>
                  <th>Company Name</th>
                  <th>UUID</th>
                  <th>Preregistration Number</th>
                  <th>CAS No</th>
                  <th>Survey Submitted</th>
                  <th class="noExport">Action</th>
                </tr>
              </thead>
              <tbody>
                @php $i = 1; @endphp
                @foreach($data as $key => $n)
                <tr>
                    <td scope="row">{{$i++}}</td>
                    <td>{{$n->Region->name ?? ''}} </td>
                    <td>{{$n->Company->company_name ?? ''}}</td>
                    <td>{{$n->uuid}}</td>
                    <td>{{$n->preregistration_no}}</td>
                    <td>{{$n->cas_no}}</td>
                    <td><a href="/gpclrmainportal/surveyviewform/{{base64_encode($n->id)}}/{{ base64_encode($n->cas_id) }}" class="btn btn-success border-r-0 " style="padding:5px;margin-top:2px">View</a></td>
                    <td style="display: flex;">  
                    <a href="/gpclrmainportal/deletesurvey/{{base64_encode($n->id) }}" onclick="return confirm('Are you sure to delete this survey? The chenges can not be undone.')" class="btn btn-danger border-r-0" style="padding:5px;margin-top:2px">Delete</a> 
                    </td>
                </tr>
               @endforeach
              </tbody>
            </table>
             @else
                <h4 class="text-center">No Survey Found</h4>
            @endif
            <br>
          </div>
        </div>
      </div>
    </div>  
@endsection
@section('scripts')
<script src="{{asset('admin/js/dataTables.buttons.min.js')}}"></script>
<script src="{{asset('admin/js/jszip.min.js')}}"></script>
<script src="{{asset('admin/js/pdfmake.min.js')}}"></script>
<script src="{{asset('admin/js/buttons.html5.min.js')}}"></script>
<script>
  $(document).ready(function() {
    $('#surveytable').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            {
                bPaginate:"false",
                extend: 'excel',
               // messageTop: 'PDF created by PDFMake with Buttons for DataTables.',
                orientation: 'landscape',
                pageSize: 'LEGAL',
                exportOptions: {
                columns: "thead th:not(.noExport)",
               
                }
            }
            ]

        
    } );
} );
  $('#uuid').on('change', function () {
    var companyid = $(this).val();
    if (companyid) {
        $.ajax({
            url: '/gpclrmainportal/get-uniquekey/' + companyid,
            type: "GET",
            dataType: "json",
            success: function (data) {
              // console.log(data);
                $('select[name="casno"]').empty();
                $('select[name="casno"]').append('<option value=" ">Select</option>');
                $.each(data, function (key, value) {
                  // console.log(value);
                    $('select[name="casno"]').append('<option value=" ' + value.cas_no + '">' + value.cas_no + '</option>');
                })
            },
            error:function(data) {
              // console.log(data);
            }

        })
    } else {
        $('select[name="casno"]').empty();
    }
  });
  $(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)
            }
        });
    })
  })
  
</script>



 
@endsection