@extends('dashboard.partials.master')

@section('title')
    Admin Artica Dashboard
@endsection

@section('content')
    <!-- start home content -->
    <main class="home home-section">
        <!-- start cards  -->
        <article class="container-fluid pt-4">
            <h1 class="brain-title ">Dashboard </h1>
            <!-- cards -->
            <div class="container">
                <div class="row mt-4">
                    <div class="col-lg-3 col-md-6 mt-1 mb-1">
                        <div class="card pt-3 pb-3" style="border: 1px solid #cccccc6d !important;">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-baseline flex-wrap">
                                    <div class="data">
                                        <h2 style="font-size: 16px; font-weight: 600;">90%</h2>
                                        <small class="pt-3 mb-0 text-secondary">Accuracy of response</small>
                                    </div>
                                    <div class="card-icons">
                                        <i class="fa-solid fa-microchip icon-home-dashboard"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 mt-1 mb-1">
                        <div class="card pt-3 pb-3" style="border: 1px solid #cccccc6d !important;">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-baseline flex-wrap">
                                    <div class="data">
                                        <h2 style="font-size: 16px; font-weight: 600;">200</h2>
                                        <small class="pt-3 mb-0 text-secondary">User</small>
                                    </div>
                                    <div class="card-icons">
                                        <i class="fa-regular fa-user icon-home-dashboard"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 mt-1 mb-1">
                        <div class="card pt-3 pb-3" style="border: 1px solid #cccccc6d !important;">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-baseline flex-wrap">
                                    <div class="data">
                                        <h2 style="font-size: 16px; font-weight: 600;">120</h2>
                                        <small class="pt-3 mb-0 text-secondary">Questions</small>
                                    </div>
                                    <div class="card-icons">
                                        <i class="fa-solid fa-question icon-home-dashboard"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 mt-1 mb-1">
                        <div class="card pt-3 pb-3" style="border: 1px solid #cccccc6d !important;">
                            <div class="card-body">
                                <div class="d-flex justify-content-between align-baseline flex-wrap">
                                    <div class="data">
                                        <h2 style="font-size: 16px; font-weight: 600;">250</h2>
                                        <small class="pt-3 mb-0 text-secondary">Issues Found</small>
                                    </div>
                                    <div class="card-icons">
                                        <i class="fa-solid fa-exclamation icon-home-dashboard"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- charts -->
            <div class="container">
                <div class="row mt-4">
                    <div class="col-lg-6 col-md-6 mt-2 mb-2">
                        <div class="card pt-3 pb-3" style="border: 1px solid #cccccc6d !important;">
                            <div class="card-body">
                                <h1 style="font-size: 20px;">Customers</h1>
                                <div id="chart"></div>
                            </div>
                        </div>
                    </div>

                    <!-- left section -->
                    <div class="col-lg-6 col-md-6">
                        <div class="col-md-12 mt-2 mb-2">
                            <div class="card pt-2 pb-2" style="border: 1px solid #cccccc6d !important;">
                                <div class="card-body">
                                    <h1 style="font-size: 20px;">Questions</h1>
                                    <div id="question"></div>
                                </div>
                            </div>
                        </div>
                        <!-- copy link script -->
                        <div class="col-md-12 mt-2 mb-2">
                            <div class="card pt-2 pb-2" style="border: 1px solid #cccccc6d !important;">
                                <div class="card-body">
                                    <p class="fw-semibold" style="font-size: 14px;">Copy the script and put it on your
                                        website to display
                                        the chat screen</p>
                                    <div class="col-12 mb-2" style="position: relative;">
                                        <input type="text" class="form-control" value='<script src="{{ url('bot/iframe.js') }}"></script>' readonly>
                                        <i class="fa-regular fa-copy copy-link"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </article>
        <!-- end slider  -->
    </main>
    <!-- end home content -->
@endsection