@extends('admin.layout')
@section('content')
<style type="text/css">
   .modal-body {
   padding: 5rem 4rem;
   text-align: center;
   }
   .modal-footer .btn-primary:hover{
   background: transparent;
   border-color: transparent;
   }
   .dropdown-toggle::after{
   display: none;
   }
   .modal-body {
   font-size: 16px;
   }
   .modal-content {
   min-height: auto;
   }
   .modal-title {
   padding-left: 0;
   }
   .modal-body p {
   margin-bottom: 0;
   font-size: 24px;
   font-weight: 600;
   }
   .ecom-btn-border1{
   min-width: 125px;
   padding: 3px 9px;
   }
   .bg-beauty-green{
   background: #4CAF50 !important;
   }
   .container-custom01{
   max-width: 1900px;
   width: 100%;
   padding-left: 2%;
   padding-right: 2%;
   }
   .content-wrapper.close-wrapper {
   margin-left: 300px!important;
   }
   .content-wrapper {
   margin-left: 0px!important;
   }
   .sidenav {
   width: 0px;
   }
   table#example1 thead tr th{
   color: #fff !important;
   }
   table#example1 thead tr {
   background-color: #33077c;
   }
   img.gene {
    width: 30px;
}
.summytable{
  white-space: nowrap;
}
.table thead th {
    vertical-align: middle;
    }

.form-inline .form-group .form-control {
    width: 78%;
}

.form-inline {
    margin-bottom: 30px;
        justify-content: center;
}

select.form-control:not([size]):not([multiple]) {
    height: calc(2.25rem + 2px);
}
#salesSummaryList h1 {
    font-size: 22px;
}
@media (min-width: 576px){
.form-inline .form-group {
    width: 33%;
}

}


#divLoading
{
display : none;
}
#divLoading.show
{
	display : block;
	position : fixed;
	z-index: 100;
	background-image : url('http://loadinggif.com/images/image-selection/3.gif');
	background-color:#666;
	opacity : 0.4;
	background-repeat : no-repeat;
	background-position : center;
	left : 0;
	bottom : 0;
	right : 0;
	top : 0;
}
#loadinggif.show
{
	left : 50%;
	top : 50%;
	position : absolute;
	z-index : 101;
	width : 32px;
	height : 32px;
	margin-left : -16px;
	margin-top : -16px;
}
div.content {
	width : 1000px;
	height : 1000px;
}
th.tbl-header, td.tbl-first-col {
    font-size: 12px;
    padding: 10px 4px 10px 4px;
    text-align: center;
    background-color: #33077c;
    color: #F9F9FF;
}
.x_title h2 {
    margin: 5px 11px 0px;
    float: left;
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 18px;
}
</style>
<div class="content-wrapper">
   <!-- Main content -->
   <section class="content">
<div class="x_panel">
    <div class="x_title">
        <h2>Sales Summary Details 业绩查询: <small>Shop</small>  <small>Staff ID</small> </h2>
        <div class="clearfix"></div>
    </div>
    <br>
</div>
<div class="x_panel">
    <div class="x_title">
        <h2>Total</h2>
        <div class="clearfix"></div>
    </div>
    <div class="x_content">
        <br />
        <div class="col-md-12 col-sm-12 col-xs-12">
            <table id="example" class="table table-striped responsive-utilities jambo_table">
                <thead>
                <tr class="headings">
                    <th>Title</th>
                    <th></th>
                    <th class="tbl-num-col">This Month<br>Amount</th>
                                    </tr>
                </thead>
                <tbody>
                                    <tr><td colspan="3">No Product Sales Found</td></tr>
                                </tbody>
            </table>
        </div>

    </div>
</div>
<div class="x_panel">
    <div class="x_title">
        <h2>Service Sales (100%)<small>list</small></h2>
        <div class="clearfix"></div>
    </div>
    <div class="x_content">
        <br />
        <div class="col-md-12 col-sm-12 col-xs-12">
            <table id="example" class="table table-striped responsive-utilities jambo_table">
                <thead>
                <tr class="headings">
                    <th>Date</th>
                    <th>Title</th>
                    <th class="tbl-num-col">Amount</th>
                    <th class="tbl-num-col">Sales</th>
                </tr>
                </thead>

                <tbody>
                                    <tr><td colspan="4">No Service Sales Found</td></tr>
                                </tbody>
            </table>
        </div>
            </div>
</div>
<div class="x_panel">
    <div class="x_title">
        <h2>Buy Ecoins (50%)<small>list</small></h2>
        <div class="clearfix"></div>
    </div>
    <div class="x_content">
        <br />
        <div class="col-md-12 col-sm-12 col-xs-12">
            <table id="example" class="table table-striped responsive-utilities jambo_table">
                <thead>
                <tr class="headings">
                    <th>Date</th>
                    <th>Member</th>
                    <th>Title</th>
                    <th class="tbl-num-col">Amount</th>
                    <th class="tbl-num-col">Sales</th>
                </tr>
                </thead>

                <tbody>
                                    <tr><td colspan="5">No Buy Ecoins Found</td></tr>
                                </tbody>
            </table>
        </div>
            </div>
</div>
<div class="x_panel">
    <div class="x_title">
        <h2>Use Ecoins (70%)<small>list</small></h2>
        <div class="clearfix"></div>
    </div>
    <div class="x_content">
        <br />
        <div class="col-md-12 col-sm-12 col-xs-12">
            <table id="example" class="table table-striped responsive-utilities jambo_table">
                <thead>
                <tr class="headings">
                    <th>Date</th>
                    <th>Member</th>
                    <th>Title</th>
                    <th class="tbl-num-col">Amount</th>
                    <th class="tbl-num-col">Sales</th>
                </tr>
                </thead>

                <tbody>
                                    <tr><td colspan="5">No Use Ecoins Found</td></tr>
                                </tbody>
            </table>
        </div>
            </div>
</div>
<div class="x_panel">
    <div class="x_title">
        <h2>Product Sales (10%)<small>list</small></h2>
        <div class="clearfix"></div>
    </div>
    <div class="x_content">
        <br />
        <div class="col-md-12 col-sm-12 col-xs-12">
            <table id="example" class="table table-striped responsive-utilities jambo_table">
                <thead>
                <tr class="headings">
                    <th>Date</th>
                    <th>Member</th>
                    <th>Title</th>
                    <th class="tbl-num-col">Amount</th>
                    <th class="tbl-num-col">Sales</th>
                </tr>
                </thead>

                <tbody>
                                    <tr><td colspan="5">No Product Sales Found</td></tr>
                                </tbody>
            </table>
        </div>
            </div>
</div>
<section>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="application/javascript">
    var serviceDays = [];
    var serviceDaysCount = 0;
    var serviceDaySeq = 0;
    var saleDays = [];
    var saleDaysCount = 0;
    var saleDaySeq = 0;
    var useDays = [];
    var useDaysCount = 0;
    var useDaySeq = 0;
    var productDays = [];
    var productDaysCount = 0;
    var productDaySeq = 0;

    function init(){
        serviceDaysCount = serviceDays.length;
        saleDaysCount = saleDays.length;
        useDaysCount = useDays.length;
        productDaysCount = productDays.length;
    }

    function showMore(table){
        switch(table) {
            case 'service':
                $('.service_'+serviceDays[serviceDaySeq]).removeAttr('hidden');
                serviceDaySeq++;
                if(serviceDaysCount==serviceDaySeq){
                    $("#more_service").remove();
                }
                break;
            case 'sale':
                $('.sale_'+saleDays[saleDaySeq]).removeAttr('hidden');
                saleDaySeq++;
                if(saleDaysCount==saleDaySeq){
                    $("#more_sale").remove();
                }
                break;
            case 'use':
                $('.use_'+useDays[useDaySeq]).removeAttr('hidden');
                useDaySeq++;
                if(useDaysCount==useDaySeq){
                    $("#more_use").remove();
                }
                break;
            case 'product':
                $('.product_'+productDays[productDaySeq]).removeAttr('hidden');
                productDaySeq++;
                if(productDaysCount==productDaySeq){
                    $("#more_product").remove();
                }
                break;
            default:
                break;
        }
    }

    init();
</script>
@endsection