<div class="row">
    <!-- Dashboard Summery Card Start -->

    <!-- Single Dashboard Summery Card Start -->
    <div class="col-12 col-md-6 col-lg-3 col-xl-3 pb-24">
        <div class="card summery-card ot-card">
            <div class="card-heading d-flex align-items-center">
                <div class="card-icon icon-circle-1">
                    <img src="assets/images/icons/trend-up-color.svg" alt="">
                </div>
                <div class="card-content">
                    <h4>{{ _trans('dashboard.Total Company') }}</h4>
                    <h1>{{ _trans('dashboard.28k+') }}</h1>
                </div>
            </div>
            <div class="card-bottom mt-20">
                <div class="card-states">
                    <div class="card-badge up">
                        <img src="assets/images/icons/arrow-up.svg" alt="" >

                        <span class="count">{{ _trans('dashboard.28k+') }}</span>
                        <span class="status">{{ _trans('dashboard.Active') }}</span>
                    </div>

                    <div class="card-badge down">
                        <img src="assets/images/icons/arrow-donw.svg" alt="" >

                        <span class="count">{{ _trans('dashboard.28k+') }}</span>
                        <span class="status">{{ _trans('dashboard.Inactive') }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Single Dashboard Summery Card End -->

    <!-- Single Dashboard Summery Card Start -->
    <div class="col-12 col-md-6 col-lg-3 col-xl-3 pb-24">
        <div class="card summery-card ot-card">
            <div class="card-heading d-flex align-items-center">
                <div class="card-icon icon-circle-2">
                    <img src="assets/images/icons/people-group-color.svg" alt="" />
                </div>
                <div class="card-content">
                    <h4>{{ _trans('dashboard.Total User') }}</h4>
                    <h1>{{ _trans('dashboard.28k+') }}</h1>
                </div>
            </div>
            <div class="card-bottom mt-20">
                <div class="card-states">
                    <div class="card-badge up">
                        <img src="assets/images/icons/arrow-up.svg" alt="" />

                        <span class="count">{{ _trans('dashboard.28k+') }}</span>
                        <span class="status">{{ _trans('dashboard.Active') }}</span>
                    </div>

                    <div class="card-badge down">
                        <img src="assets/images/icons/arrow-donw.svg" alt="" />

                        <span class="count">{{ _trans('dashboard.28k+') }}</span>
                        <span class="status">{{ _trans('dashboard.Inactive') }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Single Dashboard Summery Card End -->

    <!-- Single Dashboard Summery Card Start -->
    <div class="col-12 col-md-6 col-lg-3 col-xl-3 pb-24">
        <div class="card summery-card ot-card">
            <div class="card-heading d-flex align-items-center">
                <div class="card-icon icon-circle-3">
                    <img src="assets/images/icons/invoices-color.svg" alt="" />
                </div>
                <div class="card-content">
                    <h4>{{ _trans('dashboard.Total Invoice') }}</h4>
                    <h1>{{ _trans('dashboard.28k+') }}</h1>
                </div>
            </div>
            <div class="card-bottom mt-20">
                <div class="card-states">
                    <div class="card-badge up">
                        <img src="assets/images/icons/arrow-up.svg" alt="" />

                        <span class="count">{{ _trans('dashboard.28k+') }}</span>
                        <span class="status">{{ _trans('dashboard.Active') }}</span>
                    </div>

                    <div class="card-badge down">
                        <img src="assets/images/icons/arrow-donw.svg" alt="" />

                        <span class="count">{{ _trans('dashboard.28k+') }}</span>
                        <span class="status">{{ _trans('dashboard.Inactive') }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Single Dashboard Summery Card End -->

    <!-- Single Dashboard Summery Card Start -->
    <div class="col-12 col-md-6 col-lg-3 col-xl-3 pb-24">
        <div class="card summery-card ot-card">
            <div class="card-heading d-flex align-items-center">
                <div class="card-icon icon-circle-4">
                    <img src="assets/images/icons/play-circle-color.svg" alt="" />
                </div>
                <div class="card-content">
                    <h4>{{ _trans('dashboard.Total Subscriber') }}</h4>
                    <h1>{{ _trans('dashboard.28k+') }}</h1>
                </div>
            </div>
            <div class="card-bottom mt-20">
                <div class="card-states">
                    <div class="card-badge up">
                        <img src="assets/images/icons/arrow-up.svg" alt="" />

                        <span class="count">{{ _trans('dashboard.28k+') }}</span>
                        <span class="status">{{ _trans('dashboard.Active') }}</span>
                    </div>

                    <div class="card-badge down">
                        <img src="assets/images/icons/arrow-donw.svg" alt="" />

                        <span class="count">{{ _trans('dashboard.28k+') }}</span>
                        <span class="status">{{ _trans('dashboard.Inactive') }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Single Dashboard Summery Card End -->

    <!-- Single Dashboard Summery Card Start -->
    <div class="col-12 col-md-6 col-lg-3 col-xl-3 pb-24">
        <div class="card summery-card ot-card">
            <div class="card-heading d-flex align-items-center">
                <div class="card-icon icon-circle-4">
                    <img src="assets/images/icons/play-circle-color.svg" alt="" />
                </div>
                <div class="card-content">
                    <h4>{{ _trans('dashboard.Total Subscriber') }}</h4>
                    <h1>{{ _trans('dashboard.28k+') }}</h1>
                </div>
            </div>
            <div class="card-bottom mt-20">
                <div class="card-states">
                    <div class="card-badge up">
                        <img src="assets/images/icons/arrow-up.svg" alt="" />

                        <span class="count">{{ _trans('dashboard.28k+') }}</span>
                        <span class="status">{{ _trans('dashboard.Active') }}</span>
                    </div>

                    <div class="card-badge down">
                        <img src="assets/images/icons/arrow-donw.svg" alt="" />

                        <span class="count">{{ _trans('dashboard.28k+') }}</span>
                        <span class="status">{{ _trans('dashboard.Inactive') }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Single Dashboard Summery Card End -->

    <!-- Single Dashboard Summery Card Start -->
    <div class="col-12 col-md-6 col-lg-3 col-xl-3 pb-24">
        <div class="card summery-card ot-card">
            <div class="card-heading d-flex align-items-center">
                <div class="card-icon icon-circle-3">
                    <img src="assets/images/icons/invoices-color.svg" alt="" />
                </div>
                <div class="card-content">
                    <h4>{{ _trans('dashboard.Total Invoice') }}</h4>
                    <h1>{{ _trans('dashboard.28k+') }}</h1>
                </div>
            </div>
            <div class="card-bottom mt-20">
                <div class="card-states">
                    <div class="card-badge up">
                        <img src="assets/images/icons/arrow-up.svg" alt="" />

                        <span class="count">{{ _trans('dashboard.28k+') }}</span>
                        <span class="status">{{ _trans('dashboard.Active') }}</span>
                    </div>

                    <div class="card-badge down">
                        <img src="assets/images/icons/arrow-donw.svg" alt="" />

                        <span class="count">{{ _trans('dashboard.28k+') }}</span>
                        <span class="status">{{ _trans('dashboard.Inactive') }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Single Dashboard Summery Card End -->

    <!-- Single Dashboard Summery Card Start -->
    <div class="col-12 col-md-6 col-lg-3 col-xl-3 pb-24">
        <div class="card summery-card ot-card">
            <div class="card-heading d-flex align-items-center">
                <div class="card-icon icon-circle-2">
                    <img src="assets/images/icons/people-group-color.svg" alt="" />
                </div>
                <div class="card-content">
                    <h4>{{ _trans('dashboard.Total User') }}</h4>
                    <h1>{{ _trans('dashboard.28k+') }}</h1>
                </div>
            </div>
            <div class="card-bottom mt-20">
                <div class="card-states">
                    <div class="card-badge up">
                        <img src="assets/images/icons/arrow-up.svg" alt="" />

                        <span class="count">{{ _trans('dashboard.28k+') }}</span>
                        <span class="status">{{ _trans('dashboard.Active') }}</span>
                    </div>

                    <div class="card-badge down">
                        <img src="assets/images/icons/arrow-donw.svg" alt="" />

                        <span class="count">{{ _trans('dashboard.28k+') }}</span>
                        <span class="status">{{ _trans('dashboard.Inactive') }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Single Dashboard Summery Card End -->

    <!-- Single Dashboard Summery Card Start -->
    <div class="col-12 col-md-6 col-lg-3 col-xl-3 pb-24">
        <div class="card summery-card ot-card theme-testing">
            <div class="card-heading d-flex align-items-center">
                <div class="card-icon icon-circle-1">
                    <img src="assets/images/icons/trend-up-color.svg" alt="" />
                </div>
                <div class="card-content">
                    <h4>{{ _trans('dashboard.Total Company') }}</h4>
                    <h1>{{ _trans('dashboard.28k+') }}</h1>
                </div>
            </div>
            <div class="card-bottom mt-20">
                <div class="card-states">
                    <div class="card-badge up">
                        <img src="assets/images/icons/arrow-up.svg" alt="" />

                        <span class="count">{{ _trans('dashboard.28k+') }}</span>
                        <span class="status">{{ _trans('dashboard.Active') }}</span>
                    </div>

                    <div class="card-badge down">
                        <img src="assets/images/icons/arrow-donw.svg" alt="" />

                        <span class="count">{{ _trans('dashboard.28k+') }}</span>
                        <span class="status">{{ _trans('dashboard.Inactive') }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Single Dashboard Summery Card End -->
    <div class="col-12 col-md-6 col-lg-8 col-xl-8 pb-30">
        <div class="card statistic-card ot-card">
            <div class="card-header d-flex flex-row justify-content-between align-items-baseline">
                <div class="card-title">
                    <h1>{{ _trans('common.Revenue') }}</h1>
                </div>
            </div>

            <div class="card-body pt-0">
                <div id="revenueChart" class="custom-chart"></div>
            </div>
        </div>
    </div>

    <div class="col-12 col-md-6 col-lg-4 col-xl-4">
        <div class="card ot-card">
            <div class="card-header d-flex flex-row justify-content-between align-items-baseline">
                <div class="card-title">
                    <h1>{{ _trans('dashboard.Department wise staff') }}</h1>
                </div>
            </div>
            <div class="card-body pt-0">
                <div id="visited_customer_chart" class="custom-chart"></div>
            </div>
        </div>
    </div>

    <div class="col-12 col-md-6 col-lg-8 col-xl-8 pb-30">
        <div class="card statistic-card ot-card">
            <div class="card-header d-flex flex-row justify-content-between align-items-baseline">
                <div class="card-title">
                    <h1>{{ _trans('common.Payroll') }}</h1>
                </div>
            </div>

            <div class="card-body pt-0">
                <div id="payrollChart" class="custom-chart"></div>
            </div>
        </div>
    </div>



    <div class="col-12 col-md-6 col-lg-4 col-xl-4">
        <div class="card ot-card">
            <div class="card-header d-flex flex-row justify-content-between align-items-baseline">
                <div class="card-title">
                    <h1>{{ _trans('dashboard.Today Attendance Summary') }}</h1>
                </div>
            </div>
            <div class="card-body pt-0">
                <div id="attendance_summary_chart" class="custom-chart"></div>
            </div>
        </div>
    </div>

    <div class="col-12 col-md-6 col-lg-4 col-xl-4">
        <div class="card ot-card">
            <div class="card-header d-flex flex-row justify-content-between align-items-baseline">
                <div class="card-title">
                    <h1>{{ _trans('dashboard.Appointment schedule') }}</h1>
                </div>
            </div>
            <div class="card-body pt-0">
                <div class="custom-chart table-content table-basic">
                    <div class="card-body">
                        <div class="table-responsive  min-height-500">
                            <table class="table table-bordered">
                                <thead class="thead">
                                    <tr>
                                        <th class="text-left">{{ _trans('common.Title') }}</th>
                                        <th>{{ _trans('common.With') }}</th>
                                        <th>{{ _trans('common.Location') }}</th>
                                        <th>{{ _trans('common.Date Time') }}</th>
                                    </tr>
                                </thead>
                                <tbody class="tbody" id="appointment_schedule">
                                </tbody>
                            </table>
                        </div>
                        <!--  table end -->
                    </div>
                </div>
            </div>
        </div>
    </div>



    <div class="col-12 col-md-6 col-lg-6 col-xl-4">
        <div class="card ot-card">
            <div class="card-header d-flex flex-row justify-content-between align-items-baseline">
                <div class="card-title">
                    <h1>{{ _trans('dashboard.Project Status') }}</h1>
                </div>
            </div>
            <div class="card-body pt-0">
                <div id="project_summary_chart" class="custom-chart"></div>
            </div>
        </div>
    </div>

    <div class="col-12 col-md-6 col-lg-6 col-xl-4">
        <div class="card ot-card">
            <div class="card-header d-flex flex-row justify-content-between align-items-baseline">
                <div class="card-title">
                    <h1>{{ _trans('dashboard.Task Status') }}</h1>
                </div>
            </div>
            <div class="card-body pt-0">
                <div id="task_summary_chart" class="custom-chart"></div>
            </div>
        </div>
    </div>


</div>
