@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>
                        
                    </ol>
                </div>
            </div>
            <div class="col-sm-6">

            </div>
        </div>

<div class="row mt-2">
    <div class="col-lg-3 col-sm-6">
        <div class="card" style="background-color:#f2f9ff ;">
            <div class="card-body d-flex align-items-center justify-content-between">
                <div>
                    <h3 class="fw-bolder mb-75">21,459</h3>
                    <span>Total chats/day</span>
                </div>
                <div class="">
                    <span class="">
                        <img src="{{asset('images/chat.jpg')}}" style="height: 50px; width:50px;" alt="">
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card" style="background-color:#f2f9ff ;">
            <div class="card-body d-flex align-items-center justify-content-between">
                <div>
                    <h3 class="fw-bolder mb-75">4,567</h3>
                    <span>Offline messages</span>
                </div>
                <div class="">
                    <span class="">
                        <img src="{{asset('images/offline.png')}}" style="height: 50px; width:50px;" alt="">
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card" style="background-color:#f2f9ff ;">
            <div class="card-body d-flex align-items-center justify-content-between">
                <div>
                    <h3 class="fw-bolder mb-75">19,860</h3>
                    <span>Avg response</span>
                </div>
                <div class="">
                    <span class="">
                        <img src="{{asset('images/avg1.png')}}" style="height: 50px; width:50px;" alt="">
                    </span>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-3 col-sm-6">
        <div class="card" style="background-color:#f2f9ff ;">
            <div class="card-body d-flex align-items-center justify-content-between">
                <div>
                    <h3 class="fw-bolder mb-75">237</h3>
                    <span>Avg chats/day</span>
                </div>
                <div class="">
                    <span class="">
                        <img src="{{asset('images/avg2.png')}}" style="height: 50px; width:50px;" alt="">
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="card">
        <div class="card-header">
            <h4>Recent transcript</h4>
        </div>
        <div class="card-body">
            <div class="row" style="background-color: #edfbe7;">
                <div class="col-lg-6 text-success mt-2">
                    <p> <i class="fa fa-envelope"> Ollie from sabai-customer</i></p>
                </div>
                <div class="col-lg-2 mt-2"></div>
                <div class="col-lg-4 mt-2">
                    <p class="badge badge-success text-white">sample transcript </p>&nbsp; &nbsp; <i
                        class="fa fa-star text-success"></i><i class="fa fa-star text-success"></i><i
                        class="fa fa-star text-success"></i><i class="fa fa-star text-success"></i>
                </div>
            </div>
        </div>
    </div>
</div>



<div class="row">
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">Chat feedback</div>
            <div class="card-body" style="background-color:#ecfbe5 ;">
                <div class="row">
                    <div class="col-lg-6 text-center text-success" style="background-color:#ecfbe5 ;">
                        <img src="{{asset('images/happy.png')}}" alt=""
                            style="height: 40px; width: 40px; margin-top:4px;">
                        <p><b>4 <i class="fa fa-star"></i> or better</b></p>
                        <a href="">
                            <p>View transcript</p>
                        </a>
                    </div>
                    <div class="col-lg-6 text-center text-success" style="background-color: #ecfbe5;">
                        <img src="{{asset('images/sad.jpg')}}" alt=""
                            style="height: 40px; width: 40px;  margin-top:4px;">
                        <p><b>Less than 4 </b><i class="fa fa-star"></i></p>
                        <a href="">
                            <p>View transcript</p>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card">
            <div class="card-header">Tags</div>
            <div class="card-body" style="background-color: #f7f7f7;">
                <p>Attach all kind of info</p>
                <div class="row">
                    <div class="col-lg-3">
                        <h5>spring sale</h5>
                    </div>
                    <div class="col-lg-9">
                        <div class="progress">

                            <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0"
                                aria-valuemax="100" style="background-color: #009EE2;">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mb-3">
                    <div class="col-lg-3">
                        <h5>Refund</h5>
                    </div>
                    <div class="col-lg-9">
                        <div class="progress">

                            <div class="progress-bar w-75" role="progressbar" aria-valuenow="75" aria-valuemin="0"
                                aria-valuemax="100" style="background-color: #009EE2;">
                            </div>
                        </div>
                    </div>
                </div>


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

<style>
    .car {
        background-color: #fff;
        border-radius: 10px;
        border: 2px solid #e9ebec;
        position: relative;
        margin-bottom: 30px;
    }

</style>
@endsection