@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-distributors {
	margin: 0;
}

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

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

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

#table-distributors tfoot th {
	border-top: solid 1px #282828; background-color: #f6f6f6;
}
.retailerTable .table td, .table th {
    padding: 6px 8px;
}
.dt-buttons, .dt-buttons: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-distributors .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">Monthly Dropsize Evaluation<span>  Report</span></h2>
    </div>
</div>
<div class="row">
    <div class="col-lg-12">
        <div class="header-tabs">
            <div class="Product-Filter">
                <div class="row">
                    <div class="col-12">
                        <div class="CL-Product" ><i class="fa fa-calendar-alt"></i>
                            <input type="text" class="form-control" autocomplete="off" placeholder="Select Month" style="width: 100%; height: 35px" name="month" id="month">
                        </div>
                        <button class="btn btn-primary m-0" style="padding: 5px 13px" id="posButton">Report</button>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>
<div class="row stats-div" style="display: none">
    <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="ttl_net_sales_val" style="font-size: 36px;color: #0038ba;">00,000</span><span><small> CTNs</small></span></div>
                        </div>
                        <div class="col-12">
                            <div class="cancellation">
                                Gross Sales <span class="grs_sales"><small>Rs. </small>00,000</span>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="cancellation">
                                Net Revenue <span class="net_revenue"><small>Rs. </small>00,000</span>
                            </div>
                        </div>
                        <div class="col-12">
                            <div class="cancellation">
                                TTL.Productive Retailers <span class="ttl_productive_retailers">00,000</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    {{-- <div class="row m-0">
                        <div class="col-6 total-val border-bottom"><span class="ttl_booking_val">00,000</span> TTL. Booking</div>
                        <div class="col-6 total-val border-left border-bottom"><span class="ttl_sp_co_val">00,000</span> TTL. Spot/Counter Sales</div>
                        <div class="col-6 total-val pb-0"><span class="ttl_pending_val">00,000</span>Pending Sales</div>
                        <div class="col-6 total-val  pb-0 border-left"><span class="ttl_execution">0%</span> Execution</div>
                    </div> --}}
                    <div class="row top-units-list" >
						
                        <div class="col-12 PB-10">				
                            <span class="head-font"><strong>Top 50%</strong><span class="progressValue ttl_percent_50">83.84%</span></span>
                            <div class="progress">
                                <div class="progress-bar ttl_progress_bar_50" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%" role="progressbar">  </div>
                            </div>	
                            <div class="row">
                                <div class="col-4 pr-0 font13">TTL.Retailers: <span class="font-digit ttl_retailer_50">0</span></div> 
                                <div class="col-4 pr-0 font13">TTL.Net Sales: <span class="font-digit ttl_net_sales_50">0</span></div> 
                                <div class="col-4 pl-0 font13 text-right">AVG.Drop Size: <span class="font-digit 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 ttl_percent_30">83.84%</span></span>
                            <div class="progress">
                            <div class="progress-bar ttl_progress_bar_30" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%" role="progressbar">  </div>
                        </div>	
                        <div class="row">
                            <div class="col-4 pr-0 font13">TTL.Retailers: <span class="font-digit ttl_retailer_30">0</span></div> 
                            <div class="col-4 pr-0 font13">TTL.Net Sales: <span class="font-digit ttl_net_sales_30">0</span></div> 
                            <div class="col-4 pl-0 font13 text-right">AVG.Drop Size: <span class="font-digit 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 ttl_percent_20">83.84%</span></span>
                            <div class="progress">
                            <div class="progress-bar ttl_progress_bar_20" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%" role="progressbar">  </div>
                        </div>	
                        <div class="row">
                                <div class="col-4 pr-0 font13">TTL.Retailers: <span class="font-digit ttl_retailer_20">0</span></div> 
                            <div class="col-4 pr-0 font13">TTL.Net Sales: <span class="font-digit ttl_net_sales_20">0</span></div> 
                            <div class="col-4 pl-0 font13 text-right">AVG.Drop Size: <span class="font-digit 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">Distribution <span>Analysis</span></h2>
            </div>
        </div>
        <div class="card mb-30 table-body">
            
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>
    $('#month').datepicker({
            minViewMode: 1,
            format: 'yyyy-mm'
        });
	
</script>
<script src="/js/custom/monthly-dropsize-evaluation.js"></script>
@endpush