@extends('layouts.master')
@section('content')
<style>
    .Product-Filter .btn-primary {
        margin: 0px;
        letter-spacing: 1px;
        float: left;
        box-shadow: none
    }
    .Product-Filter {
        background-color: #f3f2f2;
        padding: 10px 15px 9px 15px;
        box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 20%);
        margin-bottom: 15px;
        border-bottom: solid 2px #0038ba;
    }
    .CL-Product {
        width: 230px;
        position: relative;
        float: left;
        padding-right: 15px;
        padding-top: 0px;
        margin-left:0px
    }
    .CL-Product .fa {
        top: 9px;
    }
.heading-ht {
    font-size: 18px;
    padding-left: 20px;
    padding-top: 13px;
    padding-bottom: 11px;
    margin-bottom: 0;
    position: relative;
}
.card-heading:before, .heading-ht::before {
    background: #0038ba;
    position: absolute;
    width: 2px;
    height: 18px;
    content: '';
    left: 0;
    top: 12px;
}
.total-sale .total-amount {
    font-size: 36px;
    color: #0038ba;
    padding: 8px 0 8px 0;
}
.total-val span {
    color: #282828;
    margin-bottom: 5px;
}
#table-ob {
	margin: 0;
}

#table-ob th {
	font-size: 12px;
	text-align: left !important;
	font-family: proximanova-semibold, sans-serif !important; color: #282828;
    background-color: #f6f6f6;
    line-height: 1;
}

#table-ob td {
	padding: 8px 8px;
    color: #282828;
    font-size: 13px;
    line-height: 1;
}
table.dataTable.nowrap td {
    white-space: nowrap;
}

#table-ob .font-no {
	text-align: left;
	font-size: 11px;
	font-weight: normal;
    letter-spacing: normal;
}

#table-ob tfoot th {
	border-top: solid 1px #282828; background-color: #f6f6f6;
}
.retailerTable .table td, .table th {
    padding: 6px 8px;
}
.dt-buttons .dt-button , .dt-buttons .dt-button:hover{
    background: linear-gradient(90deg, #1e54d3 0%, #0038ba 100%) !important;
    border: none !important;
    color: #fff !important;
    outline: none !important;
    padding: 5px 10px !important;
    line-height: 1 !important;
    font-size: 12px !important;
    letter-spacing: 1px
}
#table-ob .d-font{
    font-family: 'Rationale', sans-serif !important;
    font-size: 16px;
    letter-spacing: normal;
}
.cancellation {
    font-size: 14px; line-height: 1; background-color: #f3f3f3; 
	margin: 4px 0px 4px 0px; width: 100%; padding: 10px 10px 5px 10px;
}
.cancellation span {font-size: 20px; float: right; margin-top:-4px;font-family: 'Rationale', sans-serif!important;}
.font13 {
    letter-spacing: 0.5px;
}
.font-digit {
    font-size: 17px;
}
.col-border-left{
    border-left: 2px solid #dee2e6 !important;
}
.col-border-left-right{
    border-left: 2px solid #dee2e6 !important;
    border-right: 2px solid #dee2e6 !important;
}
</style>
<div class="row mt-1 mb-10">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <h2 class="_head01 text-uppercase dist_name">Loading...</h2>
    </div>
</div>

<div class="row stats-div">
    <div class="col-12">
        <div class="card total-sale mb-30 p-20">
            <div class="row">
                <div class="col-6">
                    <div class="row">
                        <div class="col-12 position-relative"
                            style="background-image: url(images/kpi-achive-img.jpg); background-position:bottom right; background-repeat:no-repeat">
                            <h2 class="card-heading">Net <span>Sales</span></h2>
                            <div class="total-amount" style="border-bottom:solid 1px #e1e1e1; line-height: 1;padding: 15px 0 8px 0;">
                                <span class="dist_ttl_net_sales_val" style="font-size: 36px;color: #0038ba;">Loading...</span><span><small> CTNs</small></span></div>
                        </div>
                        <div class="col-12">
                            <div class="cancellation">
                                Gross Sales <span class="dist_grs_sales"><small>Rs. </small>Loading...</span>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="cancellation">
                                Net Revenue <span class="dist_net_revenue"><small>Rs. </small>Loading...</span>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="cancellation">
                                TTL.Productive Retailers <span class="dist_ttl_productive_retailers">Loading...</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="row top-units-list" >
						
                        <div class="col-12 PB-10">				
                            <span class="head-font"><strong>Top 50%</strong><span class="progressValue dist_ttl_percent_50">Loading...</span></span>
                            <div class="progress">
                            <div class="progress-bar dist_ttl_progress_bar_50" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%" role="progressbar">  </div>
                        </div>	
                        <div class="row">
                            <div class="col-4 pr-0 font13">TTL.Retailers: <span class="font-digit dist_ttl_retailer_50">0</span></div> 
                            <div class="col-4 pr-0 font13">TTL.Net Sales: <span class="font-digit dist_ttl_net_sales_50">0</span></div> 
                            <div class="col-4 pl-0 font13 text-right">AVG.Drop Size: <span class="font-digit dist_ttl_avg_dropsize_50">0.00 <small>CTNS</small></span></div> 
                        </div>
                        </div>	
                            
                        <div class="col-12 PB-10">				
                            <span class="head-font"><strong>Top 30%</strong><span class="progressValue dist_ttl_percent_30">Loading...</span></span>
                            <div class="progress">
                            <div class="progress-bar dist_ttl_progress_bar_30" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%" role="progressbar">  </div>
                        </div>	
                        <div class="row">
                            <div class="col-4 pr-0 font13">TTL.Retailers: <span class="font-digit dist_ttl_retailer_30">0</span></div> 
                            <div class="col-4 pr-0 font13">TTL.Net Sales: <span class="font-digit dist_ttl_net_sales_30">0</span></div> 
                            <div class="col-4 pl-0 font13 text-right">AVG.Drop Size: <span class="font-digit dist_ttl_avg_dropsize_30">0.00 <small>CTNS</small></span></div> 
                        </div>
                        </div>
                            
                        <div class="col-12">				
                            <span class="head-font"><strong>Top 20%</strong><span class="progressValue dist_ttl_percent_20">Loading...</span></span>
                            <div class="progress">
                            <div class="progress-bar dist_ttl_progress_bar_20" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 0%" role="progressbar">  </div>
                        </div>	
                        <div class="row">
                                <div class="col-4 pr-0 font13">TTL.Retailers: <span class="font-digit dist_ttl_retailer_20">0</span></div> 
                            <div class="col-4 pr-0 font13">TTL.Net Sales: <span class="font-digit dist_ttl_net_sales_20">0</span></div> 
                            <div class="col-4 pl-0 font13 text-right">AVG.Drop Size: <span class="font-digit dist_ttl_avg_dropsize_20">0.00 <small>CTNS</small></span></div> 
                        </div>
                        </div>
                            
                        </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <h2 class="_head01 text-uppercase mb-20">Order Booker <span>Analysis</span></h2>
            </div>
        </div>
        <div class="card mb-30 table-ob-body">
            <div class="loader-sell360 tblLoader" style="height:300px !important;z-index:950">
            <div class="loader"> <span class="box-icon"></span> <span class="box-icon"></span>
                <div class="loader-img"> <img src="/images/sell-360-logo.svg" alt=""> </div>
                <span class="txt"><span></span> LOADING...</span> </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script src="/js/custom/monthly-dropsize-evaluation.js"></script>
@endpush