@extends('admin.layout')

@section('content')


<style type="text/css">
body{
  font-family: 'Nunito', sans-serif!important;
}
.my-account-section {
    background: #f1f1f1;
    font-family: 'Nunito', sans-serif!important;
}

h1, h2, h3, h4, h5, h6{
  font-family: 'Nunito', sans-serif!important;
}



.content-wrapper {
    background:#ffffff !important;
        padding-top: 65px!important;
}


.page-breadcrumb li{
  font-family: 'Nunito', sans-serif!important;
}

.myaccount-content h3 {
    border-bottom: none;
    padding-bottom: 0px;
    text-align: center;

}
.info-section {
    display: inline-block;
    width: 100%;
    margin: 50px 0px;
        margin-top: 0;
}

.panel-widget {
    background: #cea679 none repeat scroll 0 0;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    -webkit-box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.1);
    float: left;
    margin-right: 10px;
       width: 24%;
}

.info-section .panel-widget:last-child {
    margin-right: 0;
}
.mini-stats {
    background: rgba(0, 0, 0, 0) linear-gradient(-135deg, #1de9b6 0%, #1dc4e9 100%) repeat scroll 0 0;
    float: left;
    min-height: 100px;
    padding: 30px;
    width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    position: relative;
    -webkit-box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.1);
    -ms-box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.1);
    -o-box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.1);
}

.mini-stats > p {
    color: #fff;
    float: left;
    font-size: 12px;
    font-weight: 600;
    line-height: initial;
    margin: 0;
    text-transform: uppercase;
}

.mini-stats > span {
    background: rgba(255, 255, 255, 0.4) none repeat scroll 0 0;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: inline-block;
    float: right;
    font-size: 14px;
    line-height: 32px;
    text-align: center;
    width: 32px;
    margin-top: -5px;
}

.mini-stats > h3 {
    color: #fff;
    display: inline-block;
    font-size: 32px;
    line-height: 20px;
    margin-bottom: 20px;
    margin-top: 8px;
    position: relative;
    width: 100%;
}


.mini-stats > em {
    color: #fff;
    font-size: 13px;
}


.mini-stats > i {
    bottom: 30px;
    color: #fff;
    font-size: 65px;
    -webkit-opacity: 0.4;
    -moz-opacity: 0.4;
    -ms-opacity: 0.4;
    -o-opacity: 0.4;
    opacity: 0.4;
    position: absolute;
    right: 12px;
}


.info-section .mini-stats.purpal-grdnt {
    background: rgba(0, 0, 0, 0) linear-gradient(-135deg, #899fd4 0%, #a389d4 100%) repeat scroll 0 0;
}


.info-section .mini-stats.blue-grdnt {
    background: #04a9f5 none repeat scroll 0 0;
}

.info-section .mini-stats.red-grdnt {
    background: rgba(0, 0, 0, 0) linear-gradient(to right, #f77062 0%, #fe5196 100%) repeat scroll 0 0;
}

.myaccount-tab-menu {
    min-height: 875px;
    -webkit-box-shadow: 7px 0 15px 0 rgba(69, 90, 100, 0.2);
    -moz-box-shadow: 7px 0 15px 0 rgba(69, 90, 100, 0.2);
    -ms-box-shadow: 7px 0 15px 0 rgba(69, 90, 100, 0.2);
    -o-box-shadow: 7px 0 15px 0 rgba(69, 90, 100, 0.2);
    box-shadow: 7px 0 15px 0 rgba(69, 90, 100, 0.2);
}

.dataTable tr{
    background-color: #fff;
    box-shadow: 0 0 3px #e5e5e5;

}
.dataTable thead {
    background-color: #fff;
    box-shadow: 0 0 3px #e5e5e5;
}

.table-bordered {
    border: none;
}
.dataTable tbody tr:nth-of-type(odd) {
    background-color: #ffffff;
}


.dataTables_length label {
    font-size: 14px!important;
}


.dataTables_wrapper div.dataTables_info {
    font-size: 14px;
    padding-top: 20px!important;
}

.dataTables_wrapper div.dataTables_paginate {
    padding-top: 20px;
}


.dataTables_length {
    text-align: left;
}

.btn {
    background-color: #cea679;
    color: #ffffff;
    font-size: 14px;
    height: auto;
    font-weight: 400;
    padding: 6px 30px;
    text-transform: capitalize;
    border-radius: 30px;
}

.btn:hover{
  color: #fff;
}


div.dataTables_wrapper div.dataTables_info {
    text-align: left;
}

div.dataTables_wrapper div.dataTables_length select {
    height: 40px!important;
}

.nice-select{
  line-height: 30px;
}

.nice-select:after{
  display: none;
}

.table-bordered td, .table-bordered th {
    border: none!important;
}

.table td {
    font-size: 14px;
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus, .page-item.active .page-link {
    color: white;
    background: #2962ff;
    border-color: white;
}

.table .thead-light th {
    background-color: #fff;
}

.label-success {
    background: #F62D55 !important;
  }

.btn-white i{
  color: #444;
}

.table td, .table th {
    text-align: left!important;
}


td.togle:first-child {
  background: url('https://datatables.net/examples/resources/details_open.png') no-repeat center center;
  cursor: pointer;
}

tr.shown td.togle:first-child {
  background: url('https://datatables.net/examples/resources/details_close.png') no-repeat center center;
}


.table > thead > tr > th {
    font-size: 14px !important;
} 

.table > tbody > tr > td {
    font-size: 13px;
    line-height: 1.7;
}

select.form-control.cancel {
    color: #b53a3b;
    border: #f1baba;
    background: #f1baba;
    border-radius: 30px; 
}

select.form-control.cancel {
    background: #f1baba url(/resources/views/outlets/common/images/arrow-red.png);
    background-repeat: no-repeat;
    background-position: right 10px;
    border-radius: 30px; 
}


select.form-control.pending {
    background: #dde1ff;
    border: 1px solid #dde1ff;
    color: #4744a9;
    border-radius: 30px; 
}

select.form-control.pending {
    background: #dde1ff url(/resources/views/outlets/common/images/arrow-purple.png);
    background-repeat: no-repeat;
    background-position: right 10px;
    border-radius: 30px; 
}



select.form-control.confirm {
    background: #cbffe4;
    border: 1px solid #cbffe4;
    color: #258653;
    border-radius: 30px; 
}


select.form-control.confirm {
    background: #cbffe4 url(/resources/views/outlets/common/images/arrow-green.png);
    background-repeat: no-repeat;
    background-position: right 10px;
    border-radius: 30px; 
}

.form-control{
  font-size: 14px;

}

select {
    background: url(/resources/views/outlets/common/images/arrow-grey.png);
    background-repeat: no-repeat;
    background-position: right 10px;
}

.la.la-ellipsis-v {
    font-size: 24px;
    color: #33077c;
    font-weight: 600;
}
.dropdown-toggle::after{
    display: none;
}






/*************** Stats Box*************************/


.stats-box-wrapper {
    display: flex;
    justify-content: space-between;
}
.total_sale h3, .stats-box h3 {
    margin-bottom: 5px;
    font-size: 18px;
	font-weight: 500;
}
.stats-box {
    margin: 5px 10px;
    background: #fff;
    width: 31.5% !important;
    padding: 10px 15px;
    -webkit-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.03);
    -moz-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.03);
    box-shadow: 0 0 0 0 rgba(90, 113, 208, 0.11), 0 4px 16px 0 rgba(167, 175, 183, 0.33);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 0;
	display: inline-block;
    border: solid 1px #dde4eb;
}
.top-staff {
    padding: 10px;
}
.stats-box-container {
    margin-bottom: 15px;
}

.stats-box ul {
    padding: 0;
    list-style-type: none;
    padding-top: 5px;
	margin-bottom: 5px;
}

.stats-box ul li {
    padding: 2px 0px;
    clear: both;
    border-bottom: 20px solid #333;
    width: 40%;
    display: inline-block;
    margin: 0px 10px;
    margin-bottom: 5px;
}

.stats-box ul li.b-orange{
    border-color: #da8472!important;
}

.stats-box ul li.b-yellow{
    border-color: #e4c458!important;
}


.stats-box ul li.b-blue{
    border-color: #7fc2d0!important;
}


.stats-box ul li.b-green{
    border-color: #72af78!important;
}

.w-88 {
    width: 88% !important;
}

.stats-box ul li span {
    font-size: 16px;
    font-weight: 600;
    display: block;
}
.st-count {
    position: relative;
    width: 180px;
    height: 180px;
        margin: 0px auto;
    display: block;
}

.st-count span {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
        font-size: 20px;
    font-weight: 600;
}


.most-popular-container {
    display: flex;
    justify-content: left;
}

.tota-member-box {
    background: #fff;
    width: 31.5%;
    -webkit-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.03);
    -moz-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.03);
    box-shadow: 0 0 0 0 rgba(90, 113, 208, 0.11), 0 4px 16px 0 rgba(167, 175, 183, 0.33);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 0;
    margin: 0px;
	border: solid 1px #dde4eb;
}

.top-staff-box {
    background: #fff;
    width: 32%;
    -webkit-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.03);
    -moz-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.03);
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.03);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.popular-item-box {
    width: 31.5%;
    background: #fff;
    -webkit-box-shadow: box-shadow: 0 0 0 0 rgba(90, 113, 208, 0.11), 0 4px 16px 0 rgba(167, 175, 183, 0.33);
    -moz-box-shadow: box-shadow: 0 0 0 0 rgba(90, 113, 208, 0.11), 0 4px 16px 0 rgba(167, 175, 183, 0.33);
    box-shadow: 0 0 0 0 rgba(90, 113, 208, 0.11), 0 4px 16px 0 rgba(167, 175, 183, 0.33);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 0px;
	border: solid 1px #dde4eb;
	margin-left:20px;
}

.popular-item-box .productORder img {
    border: 1px solid #d6d6d696;
  }



.most-popular-container h3 {
    padding-bottom: 20px;
    text-align: center;
}

table thead tr {
    white-space: nowrap;
}

.table > thead > tr > th {
    color: #2f4554!important;
}

table thead tr {
    background-color: transparent!important;
}

.table .thead-light th {
    background-color: whitesmoke!important;
    text-align: center!important;
        color: #000!important;
    font-size: 16px!important;
}

ul.pagination {
    margin-top: 30px;
}

.table > tbody > tr > td {
    text-transform: capitalize;
        text-align: center!important;
           color: #000!important;
    font-size: 16px!important;
}


.popular-item-box .media-body h5 {
    font-size: 15px;
    font-weight: 600;
}

.popular-item-box .inStock {
    margin-top: 10px;
}

.popular-item-box .inStock p {
    line-height: 1.3;
}
.popular-item-box .productORder {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px dashed #ececec;
}

.popular-item-box .productORder:hover h5, .popular-item-box .productORder:hover p {
    color: #3e5569;
}

.popular-item-box .productORder:hover img {
    border: 1px solid #b5b5b596;
}

.popular-item-box .productORder:hover {
    background-color: transparent;
}

.popular-item-box .inStock p.text-right {
    font-weight: 600;
}

.space-70 {
    height: 70px;
    border-bottom: 20px solid #f4f4f4;
}
#charts_vinny {
    margin-top: 40px;
}


.popular-item-box h3 {
    padding: 10px 15px;
    background: #7fc2d0;
    color: #fff;
    margin-bottom: 15px;
	 font-weight: 500;
	font-size: 20px;
	border-radius: 0;
}
.tota-member-box h3 {
    padding: 10px 20px;
    background: #72af78;
    color: #fff;
    margin-bottom: 15px;
    font-size: 20px;
    text-align: center;
    font-weight: 500;
    border-radius: 0px;
}
.top-staff-box h3 {
    padding: 15px 20px;
    background: #e4c458;
    color: #fff;
    margin-bottom: 30px;
}



.tota-member-box .space-70 + h3 {
    background: #da8472;
}


.d-filter {
    display: flex;
    justify-content: space-between;
        padding-top: 10px;
}

.d-filter .form-group .form-control {
    width: 100%;
    font-size: 14px;
    text-transform: uppercase;
}

.form-group {
    width: 100% !important;
	margin-bottom: 5px;
}
.daterangepicker.ltr.show-calendar.opensleft {
    z-index: 999999999;
}
.m2Inner {
    position: relative;
    height: 150px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.productORder img {
    width: 75px;
    border: 1px solid #b5b5b596;
    height: 75px;
    object-fit: contain;
    padding: 5px;
    border-radius: 5px;
    border-radius: 50%;
}
.popular-item-box .media-body h5 {
    font-size: 15px;
    font-weight: 600;
    margin-top: 10px !important;
}
.m2Inner label {
    font-size: 32px;
    font-weight: 600;
    border-bottom: 0px solid #3e5569;
    padding-bottom: 0px;
}
@media only screen  and (min-width: 320px) and (max-width: 480px){
.stats-box {
    margin: 5px;
    background: #fff;
    width: 100% !important;
    padding: 20px;
    -webkit-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.03);
    -moz-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.03);
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.03);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.popular-item-box {
    width: 100%!important;
    margin-left: 0 !important;
    margin-top: 20px;
}
}
@media only screen  and (min-width: 480px) and (max-width: 768px){
.stats-box {
    margin: 5px;
    background: #fff;
    width: 48% !important;
    padding: 20px;
    -webkit-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.03);
    -moz-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.03);
    box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.03);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.chartcum2 {
    position: relative;
    height: 200px;
    width: 200px;
    display: table;
    border: 15px solid #37BC9B;
    border-radius: 50%;
    margin: 13px auto;
    -webkit-filter: drop-shadow(0px 10px 4px rgba(133, 3, 168, .2));
    filter: drop-shadow(0px 10px 4px rgba(133, 3, 168, .2));
}
.popular-item-box {
    width: 100%!important;
    margin-left: 0 !important;
    margin-top: 20px;
}

}
#loader11{
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 9999;
  background: url('//upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Phi_fenomeni.gif/50px-Phi_fenomeni.gif') 
              50% 50% no-repeat rgb(249,249,249);
}

.chartcum2 {
    position: relative;
    height: 200px;
    width: 200px;
    display: table;
    border: 25px solid #37BC9B;
    border-radius: 50%;
    margin: 25px auto;
    -webkit-filter: drop-shadow(0px 10px 4px rgba(133, 3, 168, .2));
    filter: drop-shadow(0px 10px 4px rgba(133, 3, 168, .2));
}

.progress {
    height: 30px;
    margin-bottom: 5px;
    display: inherit;
    margin-top: 5px;
    border-radius: 3px;
}
.custominvlosst {
    margin-top: 15px;
}
.custominvlosst p {
    margin: 0;
}
.b-green{background: #22BAA0;}
.b-orange{background-color: #f25656;}
.b-yellow{background-color: #f6d433;}
.b-blue{    background: #12AFCB;}

.canvas-con-inner {
    height: 100%;
}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- <link href="https://fonts.googleapis.com/css?family=Poppins:300,500,600" rel="stylesheet"> -->
<!-- <link href="https://fonts.googleapis.com/css?family=Nunito:400,700&display=swap" rel="stylesheet"> -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.18/css/dataTables.bootstrap4.min.css" >
<link rel="stylesheet" type="text/css" href="/resources/views/admin/dist/css/line-awesome.min.css">
<div id="loader11" style="display:none"></div>
<div class="content-wrapper"> 
  <section class="content"> 
        <div class="container-fluid">
                <div class="stats-box-container">
							
					<div class="stats-box-wrapper">
						<div class="row" style="width:100%">
							<div class="stats-box total_sale">
								<h3>Total Sale</h3>
								<div class="form-group" id="main">
								  <label for="tso">Select Outlet</label>
								  <select class="form-control outlet_filter" id="tso">
									@foreach($manufacturers as $id=>$mf)
										<option value="{{ $id }}">{{ $mf}}</option>
									@endforeach
								  </select>
								   
								</div>
								<div class="d-filter">
									<div class="form-group">
										<input type="text"  value="" name="Sale_datefrom" class="form-control rangeDate" id="Sale_datefrom" data-columntype="total_sale">
									</div>
									  
								</div>
								<div class="row">
									<div class="col-md-6">
										<div class="custominvlosst">
											<p>POS</p>
											<p><span class="amt_txt" id="POS">$