@extends('layouts.website.website')
@section('content')
    <!--main content start-->
<script type="text/javascript" src="common/js/google-loader.js"></script>
<section id="main-content">
    <section class="wrapper site-min-height">

        <div class="modal fade" tabindex="-1" role="dialog" id="cmodal">
            <div class="modal-dialog modal-lg" role="document" style="width: 80%;">
                <div class="modal-content">
                    <div id="medical_history">
                        <div class="col-md-12"></div>
                    </div>
                    <div class="modal-footer">
                        <div class="col-md-12">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="state-overview col-md-12" style="padding: 12px 0px;">
            <div class="clearfix">
                <div class="col-lg-3 col-sm-6">
                    <section class="panel home_sec_green">
                        <div class="symbol green">
                            <i class="fa fa-user-md"></i>
                        </div>
                        <div class="value">
                            <h3 class="">
                                4
                            </h3>
                            <p>Doctor</p>
                        </div>
                    </section>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <section class="panel home_sec_blue">
                        <div class="symbol blue">
                            <i class="fa fa-users-medical"></i>
                        </div>
                        <div class="value">
                            <h3 class="">
                                4
                            </h3>
                            <p>Patient</p>
                        </div>
                    </section>
                </div>

                <div class="col-lg-3 col-sm-6">
                    <section class="panel home_sec_yellow">
                        <div class="symbol yellow">
                            <i class="fa fa-calendar"></i>
                        </div>
                        <div class="value">
                            <h3 class="">
                                4
                            </h3>
                            <p>Appointment</p>
                        </div>
                    </section>
                </div>

                <div class="col-lg-3 col-sm-6">
                    <section class="panel home_sec_green">
                        <div class="symbol blue">
                            <i class="fa fa-file-medical"></i>
                        </div>
                        <div class="value">
                            <h3 class="">
                                3
                            </h3>
                            <p>Prescription</p>
                        </div>
                    </section>
                </div>

                <div class="col-lg-3 col-sm-6">
                    <section class="panel home_sec_blue">
                        <div class="symbol blue">
                            <i class="fa fa-medkit"></i>
                        </div>
                        <div class="value">
                            <h3 class="">
                                2
                            </h3>
                            <p>Case History</p>
                        </div>
                    </section>
                </div>

                <div class="col-lg-3 col-sm-6">
                    <section class="panel home_sec_green">
                        <div class="symbol green">
                            <i class="fa fa-flask"></i>
                        </div>
                        <div class="value">
                            <h3 class="">
                                6
                            </h3>
                            <p>Lab Report</p>
                        </div>
                    </section>
                </div>

                <div class="col-lg-3 col-sm-6">
                    <section class="panel home_sec_blue">
                        <div class="symbol blue">
                            <i class="fa fa-file"></i>
                        </div>
                        <div class="value">
                            <h3 class="">
                                0
                            </h3>
                            <p>Documents</p>
                        </div>
                    </section>
                </div>
                <div class="col-lg-3 col-sm-6">
                    <section class="panel home_sec_yellow">
                        <div class="symbol yellow">
                            <i class="fa fa-money-check"></i>
                        </div>
                        <div class="value">
                            <h3 class="">
                                4
                            </h3>
                            <p>Payment Invoice</p>
                        </div>
                    </section>
                </div>
            </div>
        </div>

        <style>
            table {
                box-shadow: none;
            }

            .fc-head {
                box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
            }

            .panel-body {
                background: #fff;
            }

            thead {
                background: #fff;
            }

            .panel-body {
                background: #fff;
            }

            .state-overview .panel-heading {
                border-radius: 0px;
                background: #fff !important;
                color: #000;
                padding-left: 10px;
                font-size: 13px !important;
                margin-top: 3px;
                text-align: center;
            }

            .add_patient {
                background: #009988;
            }

            .add_appointment {
                background: #f8d347;
            }

            .add_prescription {
                background: blue;
            }

            .add_lab_report {
            }

            .y-axis li span {
                display: block;
                margin: -20px 0 0 -25px;
                padding: 0 20px;
                width: 40px;
            }

            .sale_color {
                background: #69d2e7 !important;
                padding: 10px !important;
                font-size: 5px;
                margin-right: 10px;
            }

            .expense_color {
                background: #f38630 !important;
                padding: 10px !important;
                font-size: 5px;
                margin-right: 10px;
            }

            audio,
            canvas,
            progress,
            video {
                display: inline-block;
                vertical-align: baseline;
                width: 100% !important;
                height: 101% !important;
                margin-bottom: 18%;
            }

            .panel-heading {
                margin-top: 0px;
            }

            .wrapper {
                margin-top: 50px;
                padding: 0px 10px 0px 0px !important;
                padding: 11px 20px 0px 10px !important;
            }
        </style>

        <!--state overview end-->
    </section>
</section>
<!--main content end-->

@endsection