@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-6">
                        <h1 class="m-0">List Virtual Experience Survey and feedbacks </h1>
                    </div><!-- /.col -->
                    <div class="col-sm-6">
                        <ol class="breadcrumb float-sm-right">
                            <a class="btn btn-addbtn" href="{{ route('virtualExperienceProg.add') }}">Add VWEP</a>
                        </ol>
                    </div><!-- /.col -->
                </div><!-- /.row -->
            </div><!-- /.container-fluid -->
        </div>
        @if(Session::has('success'))
        <div id="successMessage" class="alert alert-success">{{ Session::get('success') }}</div>
        @endif
        <div class="card">
            <div class="card-body table table-responsive">

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

                        <!-- <div class="vwep-buttons">
                            <button onclick="exportData()" >Export <i
                                    class="far fa-arrow-to-bottom"></i></span></button>
                        </div> -->
                    </div>

                </div>
                <table id="datatable" class="display">
                    <thead>
                        <tr align="left">
                            <th>ID</th>
                            <!-- <th></th> -->
                            <th>VWEP Published</th>
                            <!-- <th>Title</th> -->
                            <th>Department</th>
                            <th>Enrolled</th>
                            <th>Completed</th>
                            <th>Certification Issued</th>
                            <th>Survey Summary</th>
                            <th>action</th>
                            <th>Last Update</th>
                            <th>active</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
</main>
@endsection

@section('script')
$(function () {
    var table = $('#datatable').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        order: [[0, 'desc']], // Correct order format, [column index, direction]
        ajax: "{{ route('view.virtualExpList') }}",
        columnDefs: [
            {
                targets: 0, // Index of the column you want to hide (first column)
                visible: false, // Hides the column
                searchable: false // If you want to exclude it from search as well
            },
            {
                targets: 6, // Assuming 'action' is at index 6; adjust index if necessary
                createdCell: function (td, cellData, rowData, row, col) {
                    $(td).addClass('nowrap-td'); // Adds your desired class to the 'action' column cells
                }
            }
        ],
        columns: [
            { data: 'id' },
            // { data: 'checkbox', name: 'VWEP_Published', orderable: false, searchable: false }, // Uncomment and adjust if needed
            { data: 'title' },
            { data: 'department' },
            { data: 'Enrolled', name: 'Enrolled', orderable: false, searchable: false },
            { data: 'Completed', name: 'Completed', orderable: false, searchable: false },
            { data: 'Certification-Issued', name: 'Certification-Issued', orderable: false, searchable: false },
            { data: 'Survey-Summary', name: 'Survey-Summary', orderable: false, searchable: false },
            { data: 'action', name: 'action', orderable: false, searchable: false },
            { data: 'updated_at' },
            { data: 'avtive', name: 'avtive', orderable: false, searchable: false },
            { data: 'viewbtn', name: 'viewbtn', orderable: false, searchable: false },
        ]
    });

    // Fade out success message
    setTimeout(function() {
        $('#successMessage').fadeOut('fast');
    }, 1000);
});
@endsection


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

        function exportData(){
    var checkboxes = document.querySelectorAll('input[name="vwep_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('data.export')}}",{
                        method:"POST",
                        headers:{
                            'Content-Type':'application/json',
                            'X-CSRF-Token':token
                        },
                        body:JSON.stringify({
                            'checked_vwep':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 updateVwepActivation(id){
            fetch("{{route('virtualExpActivation')}}",{
                method:"POST",
                headers:{
                    'Content-Type':'application/json',
                    'X-CSRF-Token':token
                },
                body:JSON.stringify({
                    'vwepId':id
                })
            }).then((response)=>reposne.json())
            .then((data)=>{
                console.log('data',data)
            })
            .catch((error)=>{
                console.log(error);
            })
        }


</script>