{% extends 'pos_system/base.html' %}
{% load static %}

{% block content %}

<div class="main-content">

    <div class="page-content">
        <div class="container-fluid">

            <!-- start page title -->
            <div class="row">
                <div class="col-12">
                    <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                        <h4 class="mb-sm-0 font-size-18">DashBoard</h4>

                        <!-- <div class="page-title-right">
                           right
                        </div> -->

                    </div>
                </div>
            </div>
            <!-- end page title -->




            <div class="row">
                <div class="col-xl-4">
                    <div class="card overflow-hidden">
                        <div class="bg-primary bg-soft">
                            <div class="row">
                                <div class="col-7">
                                    <div class="text-primary p-3">
                                        <h5 class="text-primary">Welcome Back !</h5>
                                        <p>Admin POS Dashboard</p>
                                    </div>
                                </div>
                                <div class="col-5 align-self-end">
                                    <img src="{% static 'images/profile-img.png' %}" alt="" class="img-fluid">
                                </div>
                            </div>
                        </div>
                        <div class="card-body pt-0">
                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="avatar-md profile-user-wid mb-4">
                                        <img src="{% static 'images/users/avatar-2.jpg' %}" alt="" class="img-thumbnail rounded-circle">
                                    </div>
                                    <h5 class="font-size-15 text-truncate">Admin</h5>
                                    <!-- <p class="text-muted mb-0 text-truncate">UI/UX Designer</p> -->
                                </div>

                                <!-- <div class="col-sm-8">
                                    <div class="pt-4">

                                        <div class="row">
                                            <div class="col-6">
                                                <h5 class="font-size-15">125</h5>
                                                <p class="text-muted mb-0">Projects</p>
                                            </div>
                                            <div class="col-6">
                                                <h5 class="font-size-15">$1245</h5>
                                                <p class="text-muted mb-0">Revenue</p>
                                            </div>
                                        </div>
                                        <div class="mt-4">
                                            <a href="javascript: void(0);" class="btn btn-primary waves-effect waves-light btn-sm">View Profile <i class="mdi mdi-arrow-right ms-1"></i></a>
                                        </div>
                                    </div>
                                </div> -->
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-body">
                            <h4 class="card-title mb-4">Monthly Earning</h4>
                            <div class="row">
                                <div class="col-sm-6">
                                    <p class="text-muted">This month</p>
                                    <h3>${{monthly}}</h3>
                                    <!-- <p class="text-muted"><span class="text-success me-2"> 12% <i class="mdi mdi-arrow-up"></i> </span> From previous period</p> -->

                                    <!-- <div class="mt-4">
                                        <a href="javascript: void(0);" class="btn btn-primary waves-effect waves-light btn-sm">View More <i class="mdi mdi-arrow-right ms-1"></i></a>
                                    </div> -->
                                </div>
                                <!-- <div class="col-sm-6">
                                    <div class="mt-4 mt-sm-0" style="position: relative;">
                                        <div id="radialBar-chart" data-colors="[&quot;--bs-primary&quot;]" class="apex-charts" style="min-height: 168.525px;"><div id="apexchartsac4nxpvtj" class="apexcharts-canvas apexchartsac4nxpvtj apexcharts-theme-light" style="width: 135px; height: 168.525px;"><svg id="SvgjsSvg1962" width="135" height="168.52499999999998" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" class="apexcharts-svg" xmlns:data="ApexChartsNS" transform="translate(0, -10)" style="background: transparent;"><g id="SvgjsG1964" class="apexcharts-inner apexcharts-graphical" transform="translate(-19.5, 0)"><defs id="SvgjsDefs1963"><clipPath id="gridRectMaskac4nxpvtj"><rect id="SvgjsRect1966" width="182" height="200" x="-3" y="-1" rx="0" ry="0" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fff"></rect></clipPath><clipPath id="gridRectMarkerMaskac4nxpvtj"><rect id="SvgjsRect1967" width="180" height="202" x="-2" y="-2" rx="0" ry="0" opacity="1" stroke-width="0" stroke="none" stroke-dasharray="0" fill="#fff"></rect></clipPath><linearGradient id="SvgjsLinearGradient1972" x1="1" y1="0" x2="0" y2="1"><stop id="SvgjsStop1973" stop-opacity="1" stop-color="rgba(242,242,242,1)" offset="0"></stop><stop id="SvgjsStop1974" stop-opacity="1" stop-color="rgba(206,206,206,1)" offset="0.5"></stop><stop id="SvgjsStop1975" stop-opacity="1" stop-color="rgba(206,206,206,1)" offset="0.65"></stop><stop id="SvgjsStop1976" stop-opacity="1" stop-color="rgba(242,242,242,1)" offset="0.91"></stop></linearGradient><linearGradient id="SvgjsLinearGradient1984" x1="1" y1="0" x2="0" y2="1"><stop id="SvgjsStop1985" stop-opacity="1" stop-color="rgba(85,110,230,1)" offset="0"></stop><stop id="SvgjsStop1986" stop-opacity="1" stop-color="rgba(72,94,196,1)" offset="0.5"></stop><stop id="SvgjsStop1987" stop-opacity="1" stop-color="rgba(72,94,196,1)" offset="0.65"></stop><stop id="SvgjsStop1988" stop-opacity="1" stop-color="rgba(85,110,230,1)" offset="0.91"></stop></linearGradient></defs><g id="SvgjsG1968" class="apexcharts-radialbar"><g id="SvgjsG1969"><g id="SvgjsG1970" class="apexcharts-tracks"><g id="SvgjsG1971" class="apexcharts-radialbar-track apexcharts-track" rel="1"><path id="apexcharts-radialbarTrack-0" d="M 50.94156838842453 125.05843161157546 A 52.40853658536585 52.40853658536585 0 1 1 125.05843161157546 125.05843161157546" fill="none" fill-opacity="1" stroke="rgba(242,242,242,0.85)" stroke-opacity="1" stroke-linecap="butt" stroke-width="14.514512195121952" stroke-dasharray="0" class="apexcharts-radialbar-area" data:pathOrig="M 50.94156838842453 125.05843161157546 A 52.40853658536585 52.40853658536585 0 1 1 125.05843161157546 125.05843161157546"></path></g></g><g id="SvgjsG1978"><g id="SvgjsG1983" class="apexcharts-series apexcharts-radial-series" seriesName="SeriesxA" rel="1" data:realIndex="0"><path id="SvgjsPath1989" d="M 50.94156838842453 125.05843161157546 A 52.40853658536585 52.40853658536585 0 1 1 125.69954624335796 51.59397137746902" fill="none" fill-opacity="0.85" stroke="url(#SvgjsLinearGradient1984)" stroke-opacity="1" stroke-linecap="butt" stroke-width="14.963414634146343" stroke-dasharray="4" class="apexcharts-radialbar-area apexcharts-radialbar-slice-0" data:angle="181" data:value="67" index="0" j="0" data:pathOrig="M 50.94156838842453 125.05843161157546 A 52.40853658536585 52.40853658536585 0 1 1 125.69954624335796 51.59397137746902"></path></g><circle id="SvgjsCircle1979" r="40.151280487804875" cx="88" cy="88" class="apexcharts-radialbar-hollow" fill="transparent"></circle><g id="SvgjsG1980" class="apexcharts-datalabels-group" transform="translate(0, 0) scale(1)" style="opacity: 1;"><text id="SvgjsText1981" font-family="Helvetica, Arial, sans-serif" x="88" y="148" text-anchor="middle" dominant-baseline="auto" font-size="13px" font-weight="400" fill="#556ee6" class="apexcharts-text apexcharts-datalabel-label" style="font-family: Helvetica, Arial, sans-serif;">Series A</text><text id="SvgjsText1982" font-family="Helvetica, Arial, sans-serif" x="88" y="126" text-anchor="middle" dominant-baseline="auto" font-size="16px" font-weight="400" fill="#373d3f" class="apexcharts-text apexcharts-datalabel-value" style="font-family: Helvetica, Arial, sans-serif;">67%</text></g></g></g></g><line id="SvgjsLine1990" x1="0" y1="0" x2="176" y2="0" stroke="#b6b6b6" stroke-dasharray="0" stroke-width="1" class="apexcharts-ycrosshairs"></line><line id="SvgjsLine1991" x1="0" y1="0" x2="176" y2="0" stroke-dasharray="0" stroke-width="0" class="apexcharts-ycrosshairs-hidden"></line></g><g id="SvgjsG1965" class="apexcharts-annotations"></g></svg><div class="apexcharts-legend"></div></div></div>
                                    <div class="resize-triggers"><div class="expand-trigger"><div style="width: 136px; height: 170px;"></div></div><div class="contract-trigger"></div></div></div>
                                </div> -->
                            </div>
                            <!-- <p class="text-muted mb-0">We craft digital, graphic and dimensional thinking.</p> -->
                        </div>
                    </div>
                </div>
                <div class="col-xl-8">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card mini-stats-wid">
                                <div class="card-body">
                                    <a href="{% url 'invoice' %}" style="text-decoration: none; color: inherit;">
                                        <div class="d-flex">
                                                <div class="flex-grow-1">
                                                    <p class="text-muted fw-medium">Monthly Invoices</p>
                                                    <h4 class="mb-0">{{invoice}}</h4>
                                                </div>
                                                
                                                <div class="flex-shrink-0 align-self-center">
                                                <div class="mini-stat-icon avatar-sm rounded-circle bg-primary">
                                                    <span class="avatar-title">
                                                        <i class="bx bx-copy-alt font-size-24"></i>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card mini-stats-wid">
                                <div class="card-body">
                                    <div class="d-flex">
                                        <div class="flex-grow-1">
                                            <p class="text-muted fw-medium">Monthly Revenue</p>
                                            <h4 class="mb-0">${{amountsale}}</h4>
                                        </div>

                                        <div class="flex-shrink-0 align-self-center ">
                                            <div class="avatar-sm rounded-circle bg-primary mini-stat-icon">
                                                <span class="avatar-title rounded-circle bg-primary">
                                                    <i class="bx bx-archive-in font-size-24"></i>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card mini-stats-wid">
                                <div class="card-body">
                                    <a href="{% url 'product' %}" style="text-decoration: none; color: inherit;">
                                        <div class="d-flex">
                                                <div class="flex-grow-1">
                                                    <p class="text-muted fw-medium">Monthly Products Sale</p>
                                                    <h4 class="mb-0">{{productsale}}</h4>
                                                </div>
                                                <div class="flex-shrink-0 align-self-center">
                                                    <div class="avatar-sm rounded-circle bg-primary mini-stat-icon">
                                                        <span class="avatar-title rounded-circle bg-primary">
                                                            <i class="bx bx-purchase-tag-alt font-size-24"></i>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="card mini-stats-wid">
                                <div class="card-body">
                                    <a href="{% url 'customer' %}" style="text-decoration: none; color: inherit;">
                                    <div class="d-flex">
                                            <div class="flex-grow-1">
                                                <p class="text-muted fw-medium">Total Customers</p>
                                                <h4 class="mb-0">{{customer}}</h4>
                                            </div>
                                            <div class="flex-shrink-0 align-self-center">
                                                <div class="mini-stat-icon avatar-sm rounded-circle bg-primary">
                                                    <span class="avatar-title">
                                                        <i class="bx bx-user font-size-24"></i>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card mini-stats-wid">
                                <div class="card-body">
                                    <a href="{% url 'work_sites' %}" style="text-decoration: none; color: inherit;">
                                        <div class="d-flex">
                                                <div class="flex-grow-1">
                                                    <p class="text-muted fw-medium">Total Work Sites</p>
                                                    <h4 class="mb-0">{{work_site}}</h4>
                                                </div>
                                                <div class="flex-shrink-0 align-self-center ">
                                                    <div class="avatar-sm rounded-circle bg-primary mini-stat-icon">
                                                        <span class="avatar-title rounded-circle bg-primary">
                                                            <i class="bx bx-home-circle font-size-24"></i>
                                                        </span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="card mini-stats-wid">
                                <div class="card-body">
                                    <a href="{% url 'product' %}" style="text-decoration: none; color: inherit;">
                                        <div class="d-flex">
                                                <div class="flex-grow-1">
                                                    <p class="text-muted fw-medium">Total Products</p>
                                                    <h4 class="mb-0">{{product}}</h4>
                                                </div>
                                                <div class="flex-shrink-0 align-self-center">
                                                    <div class="avatar-sm rounded-circle bg-primary mini-stat-icon">
                                                    <span class="avatar-title rounded-circle bg-primary">
                                                        <i class="bx bxl-product-hunt font-size-24"></i>
                                                    </span>
                                                </div>
                                            </div>
                                        </div>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- end row -->

                    <div class="card">
                        <div class="card-body" style="position: relative;">
                            <div class="d-sm-flex flex-wrap">
                                <!-- <h4 class="card-title mb-4">Email Sent</h4> -->
                                <div class="ms-auto">
                                    <ul class="nav nav-pills">
                                        <!-- <li class="nav-item">
                                            <a class="nav-link" href="#">Week</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link" href="#">Month</a>
                                        </li>
                                        <li class="nav-item">
                                            <a class="nav-link active" href="#">Year</a>
                                        </li> -->
                                    </ul>
                                </div>
                            </div>
                        </div>
                </div>
            </div>

           
        </div> <!-- container-fluid -->
    </div>
    <!-- End Page-content -->

    
    <footer class="footer">
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-6">
                    <script>document.write(new Date().getFullYear())</script> © Skote.
                </div>
                <div class="col-sm-6">
                    <div class="text-sm-end d-none d-sm-block">
                        Design & Develop by Themesbrand
                    </div>
                </div>
            </div>
        </div>
    </footer>
</div>

{% endblock %}