@extends('web.layouts.app')

@push('styles')
    <style>
        .main-chat-container {
            background-color: transparent;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .main-chat-container::-webkit-scrollbar-track {-webkit-box-shadow:inset 0 0 8px rgba(0,0,0,0.2);background-color:#F5F5F5}
        .main-chat-container::-webkit-scrollbar {width:8px;background-color:#F5F5F5}
        .main-chat-container::-webkit-scrollbar-thumb {background-color:#b8b8b8}
        .table tbody tr td { background: #fff; }
    </style>
@endpush

@section('content')
    <div class="main-chat-container w-100 ml-md-5 overflow-y-scroll">
        <div class="pe-3 pb-3 mb-0">
            @if (env('APP_PROJECT') != 'Rouaa')
                @include('web.analytics.menu')
            @endif
            <div class="row">
                <div class="col-md-12">
                    <div class="table-responsive">
                        <table class="table table-responsive-md ">
                            <thead class="table-info">
                                <tr>
                                    <th>@lang('user.agent')</th>
                                    <th>@lang('user.assigned')</th>
                                    <th>@lang('user.open')</th>
                                    <th>@lang('user.closed')</th>
                                    <th>@lang('user.completion_rate')</th>
                                    <th>@lang('user.response_time')</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($analytics as $analytic)
                                <tr>
                                    <td><img src="{{ $analytic['agent_image'] }}" width="32" height="32" class="rounded-circle" />&nbsp;&nbsp;{{ $analytic['agent_name'] }}</td>
                                    <td>{{ $analytic['assigned'] }}</td>
                                    <td>{{ $analytic['open'] }}</td>
                                    <td>{{ $analytic['closed'] }}</td>
                                    <td>{{ $analytic['completion_rate'] }} %</td>
                                    <td>{{ $analytic['response_time'] ? str_replace([' week', ' days', ' hours', ' minutes', ' seconds'], ['w', 'd', 'h', 'm', 's'], \Carbon\CarbonInterval::seconds($analytic['response_time'])->cascade()->forHumans()) : '' }}</td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="tab-form-pane main-chat-note fade show active" id="pills-note" role="tabpanel" aria-labelledby="pills-note-tab">
        <div class="px-4 ">
            <div class="note-sidebar">
                <div class="note-title">
                    <h4>@lang('user.note')</h4>
                </div>
                <div class="note-content">
                    <p>@lang('notes.analytics_for_agents_note')</p>
                </div>
            </div>
        </div>
    </div>
@endsection