@extends('layout/master')
@section('content')
<div class="row">
            <div class="col-sm-6">
                <div class="page-title-box">
                    
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="/dashboard">{{__('Dashboard')}}</a></li>
                        <li class="breadcrumb-item active">{{__('Analytics reports')}}</li>
                    </ol>
                </div>
            </div>
            <div class="col-sm-6">

            </div>
        </div>


<div class="row mb-5 bordered mt-4" style="background-color: #ffffff;">
    <div>
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#chats" type="button"
                    role="tab" aria-controls="home" aria-selected="true">Chats Reports</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#agent" type="button"
                    role="tab" aria-controls="profile" aria-selected="false">Agent Reports</button>
            </li>
        </ul>
        <div class="mt-4 mb-4 text-center">
            <h4>Mon, jan 11 2021-fri, jan 25 2021</h4>
            <form action="" class="col-lg-12">
                <div class="row">
                    <div class="col-lg-2">
                        <select name="" id="" class="form-control col-md-3">
                            <option value="">Last 7 days</option>
                            <option value="">Last 15 days</option>
                            <option value="">Last 28 days</option>
                        </select>
                    </div>
                    <div class="col-lg-2">
                        <select name="" id="" class="form-control col-md-3">
                            <option value="">Daily</option>
                            <option value="">Monthly</option>
                            <option value="">Weekly</option>
                        </select>
                    </div>


                </div>

            </form>
        </div>
        <div class="tab-content  text-center mt-4" id="myTabContent">
            <div class="tab-pane fade show active" id="chats" role="tabpanel" aria-labelledby="home-tab">



                <ul class="nav nav-tabs " id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#total"
                            type="button" role="tab" aria-controls="home" aria-selected="true">Total chats</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#missed"
                            type="button" role="tab" aria-controls="profile" aria-selected="false">Chats missed</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#served"
                            type="button" role="tab" aria-controls="contact" aria-selected="false">Chats served</button>
                    </li>
                </ul>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active mt-4" id="total" role="tabpanel" aria-labelledby="home-tab">0
                        chats</div>
                    <div class="tab-pane fade mt-4" id="missed" role="tabpanel" aria-labelledby="profile-tab">0 chats
                    </div>
                    <div class="tab-pane fade mt-4" id="served" role="tabpanel" aria-labelledby="contact-tab">0 chats
                    </div>
                </div>



            </div>
            <div class="tab-pane fade" id="agent" role="tabpanel" aria-labelledby="profile-tab">


                <ul class="nav nav-tabs " id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#all"
                            type="button" role="tab" aria-controls="home" aria-selected="true">All agents</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#individual"
                            type="button" role="tab" aria-controls="profile" aria-selected="false">Individual
                            Agent</button>
                    </li>

                </ul>
                <div class="tab-content" id="myTabContent">
                    <div class="tab-pane fade show active mt-4" id="all" role="tabpanel" aria-labelledby="home-tab">


                        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>





                        <canvas id="myChart" style="width:100%;max-width:600px"></canvas>

                        <script>
                            var xValues = ["jan", "feb", "mar", "april", "may", "jun", "jul", "aug", "sep", "oct",
                                "nov", "dec"
                            ];
                            var yValues = [5, 3, 7, 3, 4, 9, 6, 7, 8, 9, 4, 5, 0];
                            var barColors = ["#6993ff", "#6993ff", "#6993ff", "#6993ff", "#6993ff", "#6993ff",
                                "#6993ff", "#6993ff", "#6993ff", "#6993ff", "#6993ff", "#6993ff",
                            ];

                            new Chart("myChart", {
                                type: "bar",
                                data: {
                                    labels: xValues,
                                    datasets: [{
                                        backgroundColor: barColors,
                                        data: yValues
                                    }]
                                },
                                options: {
                                    legend: {
                                        display: false
                                    },
                                    title: {
                                        display: true,
                                        text: ""
                                    }
                                }
                            });

                        </script>





                    </div>
                    <div class="tab-pane fade" id="individual" role="tabpanel" aria-labelledby="profile-tab">

                        <div class="card mt-4">



                            <div class="box">

                                <!-- /.box-header -->
                                <div class="box-body">
                                    <div class="table-responsive">
                                        <table id="example5" class="table table-bordered table-striped"
                                            style="width:100%">
                                            <thead>
                                                <tr>
                                                    <th>Name</th>
                                                    <th>Email</th>
                                                    <th>Online</th>
                                                    <th>Signed in</th>
                                                    <th>Last seen</th>

                                                </tr>
                                            </thead>
                                            <tbody>

                                                <tr>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>
                                                    <td></td>

                                                </tr>

                                            </tbody>

                                        </table>
                                    </div>
                                </div>
                                <!-- /.box-body -->
                            </div>
                            <!-- /.box -->
                        </div>

                    </div>
                </div>
            </div>


        </div>
    </div>
</div>
</div>
@endsection