@extends('layouts.admin')

@section('style')
    @parent
    <style>
        .row-stat .stat-title {
            text-transform: uppercase;
        }

        .row-stat .stat-val {
            font-weight: 600;
            font-size: 28px;
        }
    </style>
@endSection

@php
$prefix = 'headings.txt_stats.';
$stats = [
    'num_user_initialized' => __($prefix . 'user_initiated_convos'),
    'num_system_initialized' => __($prefix . 'sys_initiated_convos'),
    'num_completed' => __($prefix . 'complete_onboarding_flows'),
    'num_active' => __($prefix . 'uncompleted_onboarding_flows'),
];
$headings = [
    'txt_name', 'txt_mobile', 'txt_email', 'txt_num_workflows', 'txt_last_user_message',
    'txt_last_user_interaction'
];

$langs = [];
foreach ($headings as $heading) {
    $langs[$heading] = __('headings.' . $heading);
}
unset($headings);
@endphp

@section('content')
    <div class="container-fluid">
        <div class="row row-stat px-2">

            @foreach ($stats as $stat_id => $stat_title)
                <div class="col-md-3 col-6  {{ $stat_id }}">
                    <div class="info-box">
                        <span class="info-box-icon bg-info d-none d-sm-flex flex-center align-items-center"><i class="fas fa-user-plus"></i></span>
                        <div class="info-box-content">
                            <span class="info-box-number stat-val">0</span>
                            <span class="info-box-text text-wrap" style="line-height:1.2 !important;">{{$stat_title}}</span>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>

    </div>
    @component('admin.components.tabs')
        {{-- date filter--}}
        <template class="d-none" id="tpl_search_interaction_date">
            <div class="input-group mb-2 mr-2" style="width:210px">
                <div class="input-group-prepend">
                    <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                </div>
                <input type="text" class="form-control form-control-sm"
                       style="max-width: 160px;"
                       title="{{ __('headings.txt_filter_interaction_date_range') }}"
                       placeholder="{{ __('headings.txt_filter_interaction_date_range') }}">
            </div>
        </template>

        @component('admin.components.datatable_card', ['id' => 'chat_table', 'with_delete' => true])
        @endcomponent
    </div>
    @endcomponent
@endsection

@section('script')
    @parent
    <script src="{{ mix('js/admin/chat_history/index.js') }}" defer></script>
    <script>
        var LANGS = @json($langs);
        $(() => sKaleChatView.index());
    </script>
@endSection