@extends('layouts.app')
@section('title', 'Customer Satisfaction')
@section('content')
<section class="content-header"><h1>Customer Satisfaction</h1></section>
<section class="content">
    {{-- Summary cards --}}
    <div class="row">
        <div class="col-md-4">
            <div class="info-box bg-aqua">
                <span class="info-box-icon"><i class="fa fa-star"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Average CSAT</span>
                    <span class="info-box-number">{{ number_format($avgScore, 2) }} / 5</span>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="info-box bg-green">
                <span class="info-box-icon"><i class="fa fa-line-chart"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">NPS</span>
                    <span class="info-box-number">{{ number_format($nps, 1) }}</span>
                </div>
            </div>
        </div>
        <div class="col-md-4">
            <div class="info-box bg-yellow">
                <span class="info-box-icon"><i class="fa fa-comments"></i></span>
                <div class="info-box-content">
                    <span class="info-box-text">Responses</span>
                    <span class="info-box-number">{{ $count }}</span>
                </div>
            </div>
        </div>
    </div>

    @component('components.widget', ['class' => 'box-primary', 'title' => 'Survey Responses'])
        <div class="table-responsive">
            <table class="table table-bordered table-striped" id="vrc_surveys_table">
                <thead><tr>
                    <th>Submitted</th>
                    <th>Score</th>
                    <th>NPS</th>
                    <th>Comments</th>
                </tr></thead>
            </table>
        </div>
    @endcomponent
</section>
@endsection
@section('javascript')
<script>
$(function () {
    $('#vrc_surveys_table').DataTable({
        processing: true, serverSide: true, ajax: '{{ route('vrc.satisfaction.index') }}',
        order: [[0, 'desc']],
        columns: [
            { data: 'submitted_at', name: 'submitted_at' },
            { data: 'score', name: 'score' },
            { data: 'nps', name: 'nps' },
            { data: 'comments', name: 'comments' },
        ],
    });
});
</script>
@endsection
