@extends('layouts.website.website')
@section('content')
<section id="main-content">

    <section class="wrapper site-min-height">
        <style>
            .panel-heading{
                margin-bottom: 20px;
            }
            .state-overview .value h1 {
                font-weight: bold;
                font-size: 18px;
                margin-top: 5px;
            }
        </style>


        <!--state overview start-->
        <div class="col-md-12">
            <header class="panel-heading">
                <i class="fa fa-home"></i>  Pharmacy Dashboard            </header>
            <div class="row state-overview">
                <div class="col-lg-3 col-sm-6">
                                            <a href="finance/pharmacy/todaySales">
                                                <section class="panel panel-moree">
                            <div class="symbol terques">
                                <i class="fa fa-plus"></i>
                            </div>
                            <div class="value">
                                <p>  Today Sales </p>
                                <h1 class="">
                                    $ 0.00                                </h1>
                            </div>
                        </section>
                                                </a>
                                    </div>

                <div class="col-lg-3 col-sm-6">
                                            <a href="finance/pharmacy/todayExpense">
                                                <section class="panel panel-moree">
                            <div class="symbol blue">
                                <i class="fa fa-minus"></i>
                            </div>
                            <div class="value">
                                <p> Today Expense </p>
                                <h1 class="">
                                    $ 0.00                                </h1>

                            </div>
                        </section>
                                                </a>
                                    </div>

                <div class="col-lg-3 col-sm-6">
                                            <a href="medicine">
                                                <section class="panel panel-moree">
                            <div class="symbol blue">
                                <i class="fa fa-medkit"></i>
                            </div>
                            <div class="value">
                                <p> Medicine </p>
                                <h1 class="">
                                    2                                </h1>

                            </div>
                        </section>
                                                </a>
                                    </div>

                <div class="col-lg-3 col-sm-6">
                                            <a href="accountant">
                                                <section class="panel panel-moree">
                            <div class="symbol blue">
                                <i class="fa fa-user"></i>
                            </div>
                            <div class="value">
                                <p> Staff </p>
                                <h1 class="">
                                    1                                </h1>
                            </div>
                        </section>
                                                </a>
                                    </div>






                    <div class="col-lg-6 col-sm-12">
                        <div id="chart_div" class="panel" style=""><div style="position: relative;"><div dir="ltr" style="position: relative; width: 483px; height: 200px;"><div style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;" aria-label="A chart."><svg width="483" height="200" aria-label="A chart." style="overflow: hidden;"><defs id="_ABSTRACT_RENDERER_ID_0"><clipPath id="_ABSTRACT_RENDERER_ID_1"><rect x="72" y="38" width="339" height="124"></rect></clipPath><filter id="_ABSTRACT_RENDERER_ID_2"><feGaussianBlur in="SourceAlpha" stdDeviation="2"></feGaussianBlur><feOffset dx="1" dy="1"></feOffset><feComponentTransfer><feFuncA type="linear" slope="0.1"></feFuncA></feComponentTransfer><feMerge><feMergeNode></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs><rect x="0" y="0" width="483" height="200" stroke="none" stroke-width="0" fill="#ffffff"></rect><g><text text-anchor="start" x="72" y="22.85" font-family="Arial" font-size="11" font-weight="bold" stroke="none" stroke-width="0" fill="#000000">2020 Per Month Income / Expense</text><rect x="72" y="13.5" width="339" height="11" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect></g><g><rect x="422" y="38" width="50" height="29" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><rect x="422" y="38" width="50" height="11" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="448" y="47.35" font-family="Arial" font-size="11" stroke="none" stroke-width="0" fill="#222222">In…</text><rect x="448" y="38" width="24" height="11" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect></g><rect x="422" y="38" width="22" height="11" stroke="none" stroke-width="0" fill="#3366cc"></rect></g><g><rect x="422" y="56" width="50" height="11" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g><text text-anchor="start" x="448" y="65.35" font-family="Arial" font-size="11" stroke="none" stroke-width="0" fill="#222222">Ex…</text><rect x="448" y="56" width="24" height="11" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect></g><rect x="422" y="56" width="22" height="11" stroke="none" stroke-width="0" fill="#dc3912"></rect></g></g><g><rect x="72" y="38" width="339" height="124" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect><g clip-path="url(https://codearistos.net/demo/hms/finance/pharmacy/home#_ABSTRACT_RENDERER_ID_1)"><g><rect x="72" y="161" width="339" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="72" y="100" width="339" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="72" y="38" width="339" height="1" stroke="none" stroke-width="0" fill="#cccccc"></rect><rect x="72" y="130" width="339" height="1" stroke="none" stroke-width="0" fill="#ebebeb"></rect><rect x="72" y="69" width="339" height="1" stroke="none" stroke-width="0" fill="#ebebeb"></rect></g><g><rect x="78" y="161" width="8" height="0.5" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="106" y="161" width="8" height="0.5" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="134" y="161" width="8" height="0.5" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="162" y="161" width="9" height="0.5" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="191" y="161" width="8" height="0.5" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="219" y="161" width="8" height="0.5" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="247" y="161" width="8" height="0.5" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="275" y="161" width="8" height="0.5" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="303" y="54" width="8" height="107" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="331" y="161" width="9" height="0.5" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="360" y="161" width="8" height="0.5" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="388" y="161" width="8" height="0.5" stroke="none" stroke-width="0" fill="#3366cc"></rect><rect x="87" y="161" width="8" height="0.5" stroke="none" stroke-width="0" fill="#dc3912"></rect><rect x="115" y="161" width="8" height="0.5" stroke="none" stroke-width="0" fill="#dc3912"></rect><rect x="143" y="161" width="9" height="0.5" stroke="none" stroke-width="0" fill="#dc3912"></rect><rect x="172" y="161" width="8" height="0.5" stroke="none" stroke-width="0" fill="#dc3912"></rect><rect x="200" y="161" width="8" height="0.5" stroke="none" stroke-width="0" fill="#dc3912"></rect><rect x="228" y="161" width="8" height="0.5" stroke="none" stroke-width="0" fill="#dc3912"></rect><rect x="256" y="161" width="8" height="0.5" stroke="none" stroke-width="0" fill="#dc3912"></rect><rect x="284" y="161" width="8" height="0.5" stroke="none" stroke-width="0" fill="#dc3912"></rect><rect x="312" y="161" width="9" height="0.5" stroke="none" stroke-width="0" fill="#dc3912"></rect><rect x="341" y="161" width="8" height="0.5" stroke="none" stroke-width="0" fill="#dc3912"></rect><rect x="369" y="161" width="8" height="0.5" stroke="none" stroke-width="0" fill="#dc3912"></rect><rect x="397" y="161" width="8" height="0.5" stroke="none" stroke-width="0" fill="#dc3912"></rect></g><g><rect x="72" y="161" width="339" height="1" stroke="none" stroke-width="0" fill="#333333"></rect></g></g><g></g><g><g><text text-anchor="end" x="88.50833333333333" y="172.8341978045701" font-family="Arial" font-size="11" transform="rotate(-30 88.50833333333333 172.8341978045701)" stroke="none" stroke-width="0" fill="#222222">Jan</text></g><g><text text-anchor="end" x="116.675" y="172.8341978045701" font-family="Arial" font-size="11" transform="rotate(-30 116.675 172.8341978045701)" stroke="none" stroke-width="0" fill="#222222">Feb</text></g><g><text text-anchor="end" x="144.8416666666667" y="172.8341978045701" font-family="Arial" font-size="11" transform="rotate(-30 144.8416666666667 172.8341978045701)" stroke="none" stroke-width="0" fill="#222222">Mar</text></g><g><text text-anchor="end" x="173.00833333333335" y="172.8341978045701" font-family="Arial" font-size="11" transform="rotate(-30 173.00833333333335 172.8341978045701)" stroke="none" stroke-width="0" fill="#222222">Apr</text></g><g><text text-anchor="end" x="201.175" y="172.8341978045701" font-family="Arial" font-size="11" transform="rotate(-30 201.175 172.8341978045701)" stroke="none" stroke-width="0" fill="#222222">May</text></g><g><text text-anchor="end" x="229.3416666666667" y="172.8341978045701" font-family="Arial" font-size="11" transform="rotate(-30 229.3416666666667 172.8341978045701)" stroke="none" stroke-width="0" fill="#222222">J…</text><path d="M205.61410778340905,175.7368602791856L224.66666666666669,164.7368602791856L230.16666666666669,174.26313972081442L211.11410778340905,185.26313972081442Z" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></path></g><g><text text-anchor="end" x="257.5083333333333" y="172.8341978045701" font-family="Arial" font-size="11" transform="rotate(-30 257.5083333333333 172.8341978045701)" stroke="none" stroke-width="0" fill="#222222">July</text></g><g><text text-anchor="end" x="285.675" y="172.8341978045701" font-family="Arial" font-size="11" transform="rotate(-30 285.675 172.8341978045701)" stroke="none" stroke-width="0" fill="#222222">Aug</text></g><g><text text-anchor="end" x="313.8416666666667" y="172.8341978045701" font-family="Arial" font-size="11" transform="rotate(-30 313.8416666666667 172.8341978045701)" stroke="none" stroke-width="0" fill="#222222">Sep</text></g><g><text text-anchor="end" x="342.0083333333334" y="172.8341978045701" font-family="Arial" font-size="11" transform="rotate(-30 342.0083333333334 172.8341978045701)" stroke="none" stroke-width="0" fill="#222222">Oct</text></g><g><text text-anchor="end" x="370.175" y="172.8341978045701" font-family="Arial" font-size="11" transform="rotate(-30 370.175 172.8341978045701)" stroke="none" stroke-width="0" fill="#222222">Nov</text></g><g><text text-anchor="end" x="398.3416666666667" y="172.8341978045701" font-family="Arial" font-size="11" transform="rotate(-30 398.3416666666667 172.8341978045701)" stroke="none" stroke-width="0" fill="#222222">Dec</text></g><g><text text-anchor="end" x="61" y="165.35" font-family="Arial" font-size="11" stroke="none" stroke-width="0" fill="#444444">0</text></g><g><text text-anchor="end" x="61" y="103.85" font-family="Arial" font-size="11" stroke="none" stroke-width="0" fill="#444444">200</text></g><g><text text-anchor="end" x="61" y="42.35" font-family="Arial" font-size="11" stroke="none" stroke-width="0" fill="#444444">400</text></g></g></g><g><g><text text-anchor="middle" x="241.5" y="199.68333333333334" font-family="Arial" font-size="11" font-style="italic" stroke="none" stroke-width="0" fill="#222222">Months</text><rect x="72" y="190.33333333333334" width="339" height="11" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></rect></g><g><text text-anchor="middle" x="25.35" y="100" font-family="Arial" font-size="11" font-style="italic" transform="rotate(-90 25.35 100)" stroke="none" stroke-width="0" fill="#222222">$</text><path d="M15.999999999999996,162L16.000000000000004,38L27.000000000000004,38L26.999999999999996,162Z" stroke="none" stroke-width="0" fill-opacity="0" fill="#ffffff"></path></g></g><g></g></svg><div aria-label="A tabular representation of the data in the chart." style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;"><table><thead><tr><th>Month</th><th>Income</th><th>Expense</th></tr></thead><tbody><tr><td>Jan</td><td>0</td><td>0</td></tr><tr><td>Feb</td><td>0</td><td>0</td></tr><tr><td>Mar</td><td>0</td><td>0</td></tr><tr><td>Apr</td><td>0</td><td>0</td></tr><tr><td>May</td><td>0</td><td>0</td></tr><tr><td>June</td><td>0</td><td>0</td></tr><tr><td>July</td><td>0</td><td>0</td></tr><tr><td>Aug</td><td>0</td><td>0</td></tr><tr><td>Sep</td><td>350</td><td>0</td></tr><tr><td>Oct</td><td>0</td><td>0</td></tr><tr><td>Nov</td><td>0</td><td>0</td></tr><tr><td>Dec</td><td>0</td><td>0</td></tr></tbody></table></div></div></div><div aria-hidden="true" style="display: none; position: absolute; top: 210px; left: 493px; white-space: nowrap; font-family: Arial; font-size: 11px; font-weight: bold;">350</div><div></div></div></div>
                        <div class="panel">
                            <div class="panel-heading"> Latest Sales</div>
                            <table class="table table-striped table-hover table-bordered" id="">
                                <thead>
                                    <tr>
                                        <th> Date </th>
                                        <th> Grand Total </th>
                                    </tr>
                                </thead>
                                <tbody>
                                <style>

                                    .img_url{
                                        height:20px;
                                        width:20px;
                                        background-size: contain;
                                        max-height:20px;
                                        border-radius: 100px;
                                    }
                                    .option_th{
                                        width:18%;
                                    }

                                </style>
                                                                                                        <tr class="">
                                        <td>13/09/20</td>
                                        <td>$ 350.00</td>
                                    </tr>
                                                                    </tbody>
                            </table>
                        </div>

                        <div class="panel">
                            <div class="panel-heading"> Latest Expense</div>
                            <table class="table table-striped table-hover table-bordered" id="">
                                <thead>
                                    <tr>
                                        <th> Category </th>
                                        <th> Date </th>
                                        <th> Amount </th>
                                    </tr>
                                </thead>
                                <tbody>
                                <style>

                                    .img_url{
                                        height:20px;
                                        width:20px;
                                        background-size: contain;
                                        max-height:20px;
                                        border-radius: 100px;
                                    }

                                </style>
                                                                </tbody>
                            </table>
                        </div>




                    </div>





                <div class="col-md-6">
                    <!--work progress start-->
                    <section class="panel" style="padding-top: 10px;">
                        <div class="panel-body progress-panel">
                            <div class="task-progress">
                                <h1>Statistics</h1>
                                <p>This Moonth</p>
                            </div>
                        </div>
                        <table class="table table-hover personal-task">
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>
                                        Number of Sales                                    </td>
                                    <td>
                                        <span class="badge bg-important">
                                            1                                        </span>
                                    </td>
                                    <td>
                                        <div id="work-progress1"><canvas width="47" height="20" style="display: inline-block; width: 47px; height: 20px; vertical-align: top;"></canvas></div>
                                    </td>
                                </tr>

                                <tr>
                                    <td>2</td>
                                    <td>
                                        Total Sales                                    </td>
                                    <td>
                                        <span class="badge bg-important">
                                            $                                            350.00                                        </span>
                                    </td>
                                    <td>
                                        <div id="work-progress1"><canvas width="47" height="20" style="display: inline-block; width: 47px; height: 20px; vertical-align: top;"></canvas></div>
                                    </td>
                                </tr>

                                <tr>
                                    <td>3</td>
                                    <td>
                                        Number Of Expenses                                    </td>
                                    <td>
                                        <span class="badge bg-success">
                                            0                                        </span>
                                    </td>
                                    <td>
                                        <div id="work-progress2"><canvas width="47" height="22" style="display: inline-block; width: 47px; height: 22px; vertical-align: top;"></canvas></div>
                                    </td>
                                </tr>

                                <tr>
                                    <td>4</td>
                                    <td>
                                        Total Expense                                    </td>
                                    <td>
                                        <span class="badge bg-success">
                                            $                                                                                    </span>
                                    </td>
                                    <td>
                                        <div id="work-progress2"><canvas width="47" height="22" style="display: inline-block; width: 47px; height: 22px; vertical-align: top;"></canvas></div>
                                    </td>
                                </tr>

                                <tr>
                                    <td>5</td>
                                    <td>
                                        Medicine Number
                                    </td>
                                    <td>
                                        <span class="badge bg-info">
                                            2                                        </span>
                                    </td>
                                    <td>
                                        <div id="work-progress3"><canvas width="47" height="22" style="display: inline-block; width: 47px; height: 22px; vertical-align: top;"></canvas></div>
                                    </td>
                                </tr>

                                <tr>
                                    <td>6</td>
                                    <td>
                                        Medicine Quantity
                                    </td>
                                    <td>
                                        <span class="badge bg-info">
                                            222.00                                        </span>
                                    </td>
                                    <td>
                                        <div id="work-progress3"><canvas width="47" height="22" style="display: inline-block; width: 47px; height: 22px; vertical-align: top;"></canvas></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>7</td>
                                    <td>
                                        Medicine out of stock                                    </td>
                                    <td>
                                        <span class="badge bg-warning">
                                            1                                        </span>
                                    </td>
                                    <td>
                                        <div id="work-progress4"><canvas width="47" height="22" style="display: inline-block; width: 47px; height: 22px; vertical-align: top;"></canvas></div>
                                    </td>
                                </tr>

                            </tbody>
                        </table>
                    </section>
                    <!--work progress end-->


                    <div class="panel">
                        <div class="panel-heading"> Latest Medicines</div>
                        <table class="table table-striped table-hover table-bordered" id="">
                            <thead>
                                <tr>
                                    <th> Name</th>
                                    <th> Category</th>
                                    <th> Price</th>
                                </tr>
                            </thead>
                            <tbody>
                            <style>

                                .img_url{
                                    height:20px;
                                    width:20px;
                                    background-size: contain;
                                    max-height:20px;
                                    border-radius: 100px;
                                }

                                .load{
                                    float: right !important;
                                }

                            </style>
                                                            <tr class="">
                                    <td>Fati</td>
                                    <td> paracetamol</td>
                                    <td>$ 350.00</td>
                                </tr>
                                                                <tr class="">
                                    <td>sadas</td>
                                    <td> paracetamol</td>
                                    <td>$ 33.00</td>
                                </tr>
                                                            </tbody>
                        </table>

                    </div>



                </div>










            </div>


        </div>
        <!--state overview end-->
    </section>
</section>
@endsection