@extends('company.layouts.main')
@section('content')
<main>
  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <div class="content-header">
      <div class="container-fluid">
        <div class="row mb-2">
        <div class="col-sm-2">
          <a class="btn btn-outline-info mr-2" href="{{ route('virtualExpList.view') }}">Back</a>

          </div>
          <div class="col-sm-8">
            <h1 class="m-0 vwep-head">View Virtual Experience Task Response Users</h1>
          </div><!-- /.col -->
         <!-- /.col -->
        </div><!-- /.row -->



      </div><!-- /.container-fluid -->
    </div>
    @if(Session::has('success'))
    <div id="successMessage" class="alert alert-success">{{ Session::get('success') }}</div>
    @endif
    <div id="certificate_message" style="display:none;" class="alert alert-success">Certificate Approved</div>
    <div id="reject_message" style="display:none;" class="alert alert-success">Certificate Rejected</div>
    <div id="reject_message_issued" style="display:none;" class="alert alert-warning">Sorry Certificate can't be rejected as it is already been issued</div>
    <div id="reject_message_error" style="display:none;" class="alert alert-warning">Certificate Rejection failed</div>

    <div class="card">

      <div class="row mb-2 ml-2 mt-4">
        <div class="col-md-5">

          <div class="vwep-buttons">
            <button class="btn btn-addbtn" onclick="handleIssueCertificate()" type="button">Issue certificate</button>
            <button class="btn btn-addbtn" type="button" onclick="exportData()">Export <i class="far fa-arrow-to-bottom"></i></span></button>
            <button class="btn btn-addbtn" onclick="handleRejectCertificate()" type="button">Reject certificate</button>
         
          </div>
        </div>
        <div class="col-md-7">
          <div class="serach-parent mr-4">
            <div class="vwep-calender">
              <label >Filter:
              <input type="date" id="dateFilter" placeholder="date" class="ml-2"></label>
              <select name="cars" id="degreeFilter">
                <option value="">By Degree</option>
                @foreach($degrees as $degree)
                <option value="{{$degree->id}}">{{$degree->name}}</option>
                @endforeach
              
              </select>

              <!-- <select name="cars" id="cars">
                <option value="volvo">By Location</option>
                <option value="saab">Saab</option>
                <option value="mercedes">Mercedes</option>
                <option value="audi">Audi</option>
              </select> -->
            </div>
            <!-- <div class="vwep-seerch">
              <label>Search:<input type="search"  placeholder="" aria-controls="datatable" class="ml-2"></label>
            </div> -->
          </div>
        </div>
      </div>
      <div class="card-body table-responsive">

        <table id="datatable" class="display table table-responsive">
          <thead>
            <tr align="left">
              <th>ID</th>
              <th></th>
              <th> Pictures</th>
              <th> First Name</th>
              <th> Last Name</th>
              <!-- <th> Start Date</th> -->
              <th> End Date</th>
              <th> Location</th>
              <th> Resume</th>
              <th> Profile</th>
              <!-- <th> LinkedIn</th> -->
              <th>Survey</th>
              <th>Submission</th>
              <th>Feedback</th>
              <th>Certificate</th>
              <th>
                Email- ID
              </th>
              <th>Phone Number</th>

            </tr>
          </thead>
          <tbody>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</main>

@endsection

@section('script')
$(function () {
var table = $('#datatable').DataTable({
processing: true,
serverSide: true,
responsive:true,
order:['0','desc'],
ajax: {
            url: "{{ route('getTaskResponses', $virtualExpId) }}",
            type: "GET",
            data: function (d) {
                d.degreeFilter = $('#degreeFilter').val();
                d.dateFilter = $('#dateFilter').val();
            }
        },
"columnDefs": [
{
"targets": [ 0 ],
"visible": false,
"searchable": true
},
],
"columns": [

{ data: 'id' },
{data:'icon', name: 'icon', orderable: false, searchable: false},
{ data: 'Pictures' },
{ data: 'first_name',name: 'first_name', orderable: false, searchable: false },
{data: 'last_name', name: 'last_name', orderable: false, searchable: false},
<!-- {data: 'first_date', name: 'first_date', orderable: false, searchable: false}, -->
{data: 'last_date', name: 'last_date', orderable: false, searchable: false},
{data: 'city', name: 'location', orderable: false, searchable: false},
{data: 'resume', name: 'resume', orderable: false, searchable: false},
{data: 'profile', name: 'profile', orderable: false, searchable: false},
<!-- {data: 'linked_in', name: 'linked_in', orderable: false, searchable: false}, -->
{data: 'survey', name: 'survey', orderable: false, searchable: false},
{data: 'submission', name: 'submission', orderable: false, searchable: false},
{data: 'feedback', name: 'feedback', orderable: false, searchable: false},
{data: 'certificate', name: 'certificate', orderable: false, searchable: false},
{data: 'email', name: 'mail', orderable: false, searchable: false},
{data: 'phone_number', name: 'phone_number', orderable: false, searchable: false},



]
});

$('#degreeFilter').on('change', function () {
        table.ajax.reload();
    });

    $('#dateFilter').on('change', function () {
        table.ajax.reload();
    });


});

  

   
@endsection

<script>
  const token='{{csrf_token()}}';

  

  function exportData(){
    var checkboxes = document.querySelectorAll('input[name="user_id"]');

    // Array to store checked values
    var checkedValues = [];

    checkboxes.forEach(function(checkbox) {
        // If checkbox is checked, add its value to the array
        if (checkbox.checked) {
            checkedValues.push(checkbox.value);
        }
    });

       fetch("{{route('vwepTaskResponse.export', ['vwepId' => $virtualExpId])}}",{
                        method:"POST",
                        headers:{
                            'Content-Type':'application/json',
                            'X-CSRF-Token':token
                        },
                        body:JSON.stringify({
                            'checked_users':checkedValues
                        })
                    }).then(response => {
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.blob();
})
.then(blob => {
    // Create a temporary URL to the blob
    const url = window.URL.createObjectURL(blob);

    // Create a temporary <a> element to trigger the download
    const a = document.createElement('a');
    a.style.display = 'none';
    a.href = url;
    a.download = 'vwep_task_responses.xlsx'; // Set the file name here

    // Append the <a> element to the document body
    document.body.appendChild(a);

    // Trigger the click event to download the file
    a.click();

    // Clean up: remove the <a> element and revoke the URL object
    window.URL.revokeObjectURL(url);
    document.body.removeChild(a);
                    }).catch((error)=>{
                        console.log(error);
                    })
  }


  function handleIssueCertificate() {
    // Select all checkboxes with the name 'user_id'
    var checkboxes = document.querySelectorAll('input[name="user_id"]');
    
    // Array to store checked values
    var checkedValues = [];

    // Collect the values of all checked checkboxes
    checkboxes.forEach(function(checkbox) {
        if (checkbox.checked) {
            checkedValues.push(checkbox.value);
        }
    });

    // Ensure at least one user is selected
    if (checkedValues.length === 0) {
        alert('Please select at least one user.');
        return;
    }

    // Fetch the CSRF token from the page's meta tag or a hidden input field
    var token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    // Send a POST request to issue certificates
    fetch("{{ route('approveVwepCertificate') }}", {
        method: "POST",
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': token // Include CSRF token in the header
        },
        body: JSON.stringify({
            'virtual_experience_program_id': {{$virtualExpId}}, // Pass the virtual experience program ID
            'users': checkedValues // Send selected user IDs
        })
    })
    .then(response => response.json()) // Parse the JSON response
    .then(data => {
        if (data.status === 200) {
            // Display a success message
            var toaster = document.getElementById("certificate_message");
            toaster.style.display = 'block';

            // Hide the success message after 3 seconds
            setTimeout(function() {
                toaster.style.display = 'none';
            }, 3000);

            // Optionally, reload the DataTable or update the UI
            $('#datatable').DataTable().ajax.reload();
        }
    })
    .catch(error => {
        console.log('Error:', error); // Log any errors to the console
    });
}

  function handleRejectCertificate() {
    // Select all checkboxes with the name 'user_id'
    var checkboxes = document.querySelectorAll('input[name="user_id"]');
    var checkedValues = [];

    // Collect the values of all checked checkboxes
    checkboxes.forEach(function(checkbox) {
        if (checkbox.checked) {
            checkedValues.push(checkbox.value);
        }
    });

    // Ensure at least one user is selected
    if (checkedValues.length === 0) {
        alert('Please select at least one user.');
        return;
    }

    // Fetch the CSRF token from the page's meta tag or a hidden input field
    var token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

    // Send a POST request to reject the certificates
    fetch("{{ route('rejectCertificate') }}", {
        method: "POST",
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-Token': token // Include CSRF token in the header
        },
        body: JSON.stringify({
          'virtual_experience_program_id': {{$virtualExpId}}, // Pass the virtual experience program ID
            'users': checkedValues // Send selected user IDs
        })
    })
    .then(response => response.json()) // Parse the JSON response
    .then(data => {
      if (data.status === 200) {
            // Display a success message
            var toaster = document.getElementById("reject_message");
            toaster.style.display = 'block';

            // Hide the success message after 3 seconds
            setTimeout(function() {
                toaster.style.display = 'none';
            }, 3000);

            // Optionally, reload the DataTable or update the UI
            $('#datatable').DataTable().ajax.reload();
        }
        if (data.status === 404) {
            // Display a success message
            var toaster = document.getElementById("reject_message_issued");
            toaster.style.display = 'block';

            // Hide the success message after 3 seconds
            setTimeout(function() {
                toaster.style.display = 'none';
            }, 3000);

            // Optionally, reload the DataTable or update the UI
            $('#datatable').DataTable().ajax.reload();
        }
    })
    .catch(error => {
      var toaster = document.getElementById("reject_message_error");
            toaster.style.display = 'block';

            // Hide the success message after 3 seconds
            setTimeout(function() {
                toaster.style.display = 'none';
            }, 3000);

            // Optionally, reload the DataTable or update the UI
            $('#datatable').DataTable().ajax.reload();
        console.log('Error:', error); // Log any errors to the console
    });
}

</script>