@extends('superadmin::layouts.master')
@section('title', __('superadmin::NetPromoterScore.net_promoter_score'))
@section('breadcrumb')
    <div class="row breadcrumbs-top">
        <div class="breadcrumb-wrapper col-xs-12">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{{ route('dashboard-home') }}">@lang('Home')</a></li>
                <li class="breadcrumb-item"><a href="{{ route('nps.index') }}">@lang('superadmin::NetPromoterScore.ratings')</a></li>
            </ol>
        </div>
    </div>
@endsection
<style>
    .info_dev{
        display: flex;
        gap: 20px;
        margin: 20px;
    }
    .info_card{
        background-color: #C3EDE7;
        border-radius: 10px;
        padding:10px;
        overflow: hidden;
        font-size: 16px;
        flex: 1;
        text-align: center;
    }
    @media (max-width: 768px) {
    .info_dev {
        flex-direction: column;
    }
}
</style>
@section('content')
    <section id="configuration">
        <div class="info_dev">
            <div class="info_card" >
                <b>@lang('superadmin::NetPromoterScore.nps_score'): {{ $nps }}%</b></div>
            <div class="info_card" ><b>@lang('superadmin::NetPromoterScore.promoters'): {{ $promoters }}%</b></div>
            <div class="info_card"><b>@lang('superadmin::NetPromoterScore.detractors'): {{ $detractors }}%</b></div>
            <div class="info_card"><b>@lang('superadmin::NetPromoterScore.passives'): {{ $passives }}%</b></div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                <div class="card" style="overflow-x: auto;">
                    <div class="card-body collapse in">
                        <table id="nps_table" class="table table-striped table-column" style="width:100%;display: inline-table;">
                            <thead>
                                <tr>
                                    <th>@lang('superadmin::NetPromoterScore.company_ID')</th>
                                    <th>@lang('superadmin::NetPromoterScore.company_name')</th>
                                    <th>@lang('superadmin::NetPromoterScore.email')</th>
                                    <th>@lang('superadmin::NetPromoterScore.rate')</th>
                                    <th>@lang('superadmin::NetPromoterScore.reason')</th>
                                    <th>@lang('superadmin::NetPromoterScore.submission_date')</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection

@section('extra_scripts')
    <script src="{{ url('assets/js/vendors/js/pickers/dateTime/moment-with-locales.min.js') }}" defer></script>
    <script>
        window.addEventListener('DOMContentLoaded', function() {
            (function($) {
                $('#nps_table').DataTable({
                    processing: true,
                    serverSide: true,
                    responsive: true,
                    ajax: "{{ route('nps.index') }}",
                    columns: [{
                            "data": "company_id",
                            "fnCreatedCell": function(nTd, sData, oData, iRow, iCol) {
                                $(nTd).html(oData.company?.id ?? 'Deleted company');
                            }
                        },
                        {
                            "data": "company_name",
                            "fnCreatedCell": function(nTd, sData, oData, iRow, iCol) {
                                $(nTd).html(oData.company?.name ?? 'Deleted company');
                            }
                        },
                        {
                            "data": "email"
                        },
                        {
                            "data": "rate"
                        },
                        {
                            "data": "reason"
                        },
                        {
                            "data": "creation_at",
                            "fnCreatedCell": function(nTd, sData, oData, iRow, iCol) {
                                $(nTd).html("<label>" + moment(oData.creation_at).format(
                                    'YYYY-MM-DD') + "</label>");
                            }
                        },
                    ],
                    @if (App::isLocale('ar'))
                        language: {
                            "url": "https://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Arabic.json"
                        },
                    @endif
                });
                var table = $('.prevent-init-sort').DataTable();
                table.order([1, 'desc'])
            })(jQuery);
        });
    </script>
@endsection