@extends('layouts.master')
@section('content')
<link rel="stylesheet" href="/css/monthly-dashboard/single-distributor-detail.css">
<style>
    .net-sale .ns-head span,
    .ts-overview .total-amount,
    .tar-tgt-val span,
    .tar-sa-val span,
    .targettil span,
    .drr-value span,
    .tv-div span,
    .unit-bs .digit-v,
    .ad-kpi span,
    .progressValue,
    .pt-val span {
        font-family: 'Rationale', sans-serif !important;
    }

    .net-sale {
        padding-top: 20px;
        position: relative;
        background-image: url(/images/garph-bg-lines.jpg);
        background-position: top right;
        background-repeat: no-repeat
    }

    .net-sale .ns-head {
        font-size: 18px;
        margin-bottom: 5px;
        line-height: 1;
        color: #747474
    }

    .tar-tgt-val {
        font-size: 16px;
        line-height: 1;
        padding-top: 15px;
        float: left;
        color: #747474
    }

    .tar-tgt-val span {
        font-size: 28px;
        color: #282828;
        display: block;
        padding-top: 5px
    }

    .tar-tgt-val span small {
        color: #747474
    }

    .tar-sa-val {
        font-size: 16px;
        padding-top: 10px;
        padding-bottom: 10px;
        line-height: 1;
        background-color: #f3f3f3
    }

    .tar-sa-val span {
        font-size: 25px;
        color: #282828;
        display: block;
        padding-top: 5px
    }


    .dashboard-date {
        width: 200px;
        float: right;
        margin-top: 4px;
        margin-right: 15px;
        position: relative;
    }

    .dashboard-date .fa {
        position: absolute;
        top: 10px;
        right: 0;
        font-size: 16px;
        color: #888888
    }

    .dashboard-date .form-control {
        border: 0;
        box-shadow: none;
        font-size: 20px;
        text-align: right;
        z-index: 3;
        background-color: transparent !important;
        padding-right: 20px;
        font-family: 'Rationale', sans-serif !important;
    }

    .card-heading {
        font-size: 20px;
        text-transform: uppercase;
        letter-spacing: 1px;
        position: relative;
    }

    .card-heading:before {
        background: #0038ba;
        position: absolute;
        width: 2px;
        height: 18px;
        left: -20px;
        top: 2px;
        content: '';
    }

    .ts-overview {
        padding: 20px;
        font-size: 13px;
        letter-spacing: 1px;
        margin-bottom: 20px;
    }

    .card-heading span {
        font-family: 'proximanova-light', sans-serif !important;
        font-weight: normal;
    }

    .ts-overview .total-amount {
        font-size: 38px;
        color: #0038ba;
        padding: 0;
        line-height: 1;
        border-bottom: solid 1px #f2f2f2;
        padding-bottom: 10px;
    }

    .ts-overview .total-amount small,
    .targettil span small {
        color: #282828
    }

    .ts-overview .total-amount .per-v {
        color: #24b314;
        font-size: 25px;
        margin-left: 0px;
    }

    .targettil {
        font-size: 16px;
        line-height: 1;
        padding: 15px;
        letter-spacing: normal;
        border: solid 1px #f3f3f3
    }

    .targettil span {
        font-size: 25px;
        display: block;
        padding-top: 5px;
        color: #0038ba
    }

    .targettil .date-sh {
        display: block;
        padding-top: 10px;
        color: #747474
    }

    .drr-value {
        font-size: 14px;
        padding-top: 10px;
        padding-bottom: 5px;
        line-height: 1;
        background-color: #f3f3f3;
    }

    .drr-value span {
        font-size: 20px;
        float: right;
        margin-top: -4px;
    }

    .div-name {
        background-color: #f3f3f3;
        font-size: 14px;
        text-align: center;
        padding: 2px 5px 1px 5px
    }

    .tv-div {
        background-color: #f3f3f3;
        padding: 5px 10px;
        margin-right: 1px;
    }

    .tv-div span {
        line-height: 1
    }

    .tv-div .tvaluse {
        display: block;
        font-size: 24px;
        padding-bottom: 3px;
    }

    .tv-div .tr-val {
        font-size: 14px;
    }

    .tv-div .tr-val span {
        font-size: 18px;
    }

    .unit-bs {
        letter-spacing: normal;
        width: 100%;
    }

    .unit-bs .digit-v {
        font-size: 20px;
        margin-top: -2px
    }

    .unit-bs .col {
        padding: 8px 10px 5px 10px;
        border-bottom: solid 1px #eeeeee;
        line-height: 40px;
    }

    #widget-meter {
        width: 140px;
        margin: 0 auto;
    }

    #widget-meter .needle,
    #widget-meter .needle-center {
        fill: #a6a6a6;
    }

    .label-percent {
        font-size: 22px;
        fill: #0038ba;
        padding-top: 25px;
        font-family: 'Rationale', sans-serif !important;
    }

    .title-ach {
        font-size: 13px;
        letter-spacing: 1px;
        display: block;
        margin: auto;
        text-align: center;
        margin-top: 5px;
    }

    .font20 {
        font-size: 20px !important;
    }

    .p-5 {
        padding: 5px !important;
    }
    .pt-val {
        font-size: 13px;
        line-height: 1;
        color: #939393;
    }
    .month-show {
        font-size: 20px;
        text-align: right;
        line-height: 1;
        font-family: 'Rationale', sans-serif !important;
    }


    .Product-row {
        padding: 8px;
        margin-bottom: 0px;
        box-shadow: 0px 0px 2px 0px rgb(0, 0, 0, 0.2);
        border-radius: 0px;
        position: relative;
        font-size: 13px;
        width: 100%;
        background-color: #fff;
        border: none;
        border-bottom: solid 2px #fff;
        transition: all 0.2s;
        transform: scale(0.97);
    }
    .Product-row:HOVER {
        border-bottom: solid 2px #0038ba;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        transition: all 0.3s ease;
        -ms-transform: scale(1);
        -webkit-transform: scale(1);
        transform: scale(1);
        box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.3);
        z-index: 5;
    }
    .Product-row-title {
        padding: 8px;
        letter-spacing: 0.5px;
        position: relative;
        text-transform: uppercase;
        color: #0038ba;
        font-family: proximanova-semibold, sans-serif;
        transform: scale(0.97);
        font-size: 13px;
    }

    .font-no,
    .dataTable .font-no {
        color: #282828;
        font-size: 20px;
        line-height: 1;
        font-family: Rationale, sans-serif!important;
    }

    .smBTN {
        margin: 0 !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 <span> Sales Analysis</span></h2>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 text-right">
        <a href="#" class="expand-btn"><i class="fa fa-expand"></i></a>
    </div>
</div>


<div class="row">
    <div class="col-lg-12">
        <div class="header-tabs">
            <div class="row">
                <div class="col">
                    <h2 class="heading-ht">{{$distributor_name}}</h2>
                    <!-- SD Sales -->
                </div>

                <div class="col-auto pl-0">
                    <div class="dashboard-date">
                        <input type="text" id="datepicker" class="form-control date_filter_trending_products_daily" placeholder="">
                        <i class="fa fa-angle-down"></i>
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>


<div class="row">
    <div class="col-12">
        <div class="card total-sale mb-30 p-20">
            <div class="row">

                <div class="col-7">
                    <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">
                            <!--<div class="timechart-div"><canvas  id="timechart" width="310" height="110"></canvas></div>-->

                            <h2 class="card-heading">Net <span>Sales</span></h2>
                            <div class="total-amount ttl_sale" style="border-bottom:solid 1px #e1e1e1; line-height: 1;">
                                <span>Rs. </span>Loading...<span class="per-v growth"><i class="fa fa-long-arrow-alt-up"></i>0%</span>
                            </div>
                        </div>
                        <div class="col unit-v">Master Pack Sales<span class="ttl_ctns">Loading...</span></div>
                        <div class="col unit-v">Unit Sales<span class="ttl_units">Loading...</span></div>
                        <div class="col unit-v">Gross Sale Value<span class="gross_sale">Loading...</span></div>
                    </div>
                </div>
                <div class="col-5">
                    <div class="row m-0">
                        <div class="col-6 total-val border-bottom"><span class="ttl_booked_unit_qty">Loading...</span> Booked Units
                        </div>
                        <div class="col-6 total-val border-left border-bottom"><span class="ttl_executed_unit_qty">Loading...</span>
                            Executed Units</div>
                        <div class="col-6 total-val pb-0"><span class="ttl_cancelled_unit_qty">Loading...</span>Cancelled Units</div>
                        <div class="col-6 total-val  pb-0 border-left"><span class="execution_percentage">0%</span> Execution</div>
                    </div>
                </div>
            </div>
        </div>

        

            <div class="card ts-overview mb-30">

                <div class="row">

                    <div class="col-5">
                        <h2 class="card-heading">Target <span> Sales Overview</span></h2>
                        <div class="net-sale">
                            <h2 class="ns-head">NET Sales Units</h2>
                            <div class="total-amount ttl_net_sales_units">Loading... </div>
                            <div class="row">
                                <div class="col-6">
                                    <div class="tar-tgt-val">TGT: <span class="ttl_targets">Loading... </span>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="tar-tgt-val">Remaining: <span class="target_left">Loading...
                                        </span> </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="col-2 pl-0">
                        <div id="widget-meter"></div>
                        <span class="title-ach"><strong>Achievement</strong></span>
                    </div>

                    <div class="col-5 pl-0 target-section">
                        <div class="row m-0">
                            <div class="col-6 tar-sa-val" style="border-right:solid 1px #fff">Target Value:
                                <span class="ttl_targets_value">Loading...</span></div>
                            <div class="col-6 tar-sa-val">Gross Sales: <span class="ttl_gross_sales">Loading...</span></div>
                        </div>

                        <div class="row m-0">
                            <div class="col-6 targettil">
                                Target Till <span class="target_till_date">Loading... <small>Units</small></span>
                            </div>
                            <div class="col-6 targettil">ACH. Till <span class="ach_till_date" style="float:right;padding: 0; display: inline-block; margin-top: -3px;">0%</span>

                                <span class="ttl_current_month_unit_qty" style="width:100%">Loading... <small>Units</small></span>
                            </div>
                        </div>
                        <div class="row m-0">
                            <div class="col-6 drr-value" style="border-right:solid 1px #fff">D.R.R.<span class="daily_run_rate">Loading...</span></div>
                            <div class="col-6 drr-value">R.R.R. <span class="required_run_rate">Loading...</span></div>
                        </div>

                    </div>

                </div>

            </div>
        

        <!-- <div class="card pb-0 mb-30">
            <div class="body p-0">

                <div class="row total-sale">
                    <div class="col-8 graph-bg">
                        <h2 class="card-heading">Total Production <span>Hours</span></h2>
                        <div class="net-sale">
                            <div class="total-amount p-0">22 <small>Hrs</small> 53 <small>Mints</small>
                                <span class="per-v"><i class="fa fa-long-arrow-alt-up"></i> 32%</span>
                            </div>
                        </div>

                        <div class="avg-booking-day m-0">
                            <h2>Total Downtime Hrs </h2>
                            <h2> <span style="display:inline-block">22 <small>Hrs</small> 53
                                    <small>Mints</small></span><span class="down-time"
                                    style="display:inline-block"><i
                                        class="fa fa-long-arrow-alt-down"></i> 25%</span></h2>

                        </div>
                    </div>

                    <div class="col-4 pl-0">
                        <div id="widget-meter">
                            <div class="st-val">0%</div>
                            <div class="en-val">100%</div>
                        </div>
                        <span class="title-ach">Productivity</span>
                    </div>


                </div>

            </div>
        </div> -->

        <div class="card p-20 mb-30">
            <h2 class="card-heading">Daily <span>Sales Trends</span></h2>

            <div class="row">
                <div class="col-12">
                    <div class="avg-booking-day">
                        <h2>AVG. Sales/Day <span class="avg_sale_per_day">Loading...</span></h2>
                    </div>
                </div>

            </div>
            <div class="loader-sell360 tblLoaderDailySalesTrend">
                <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>
            <canvas id="BookingTrends" height="200"></canvas>

        </div>


        <!-- <div class="card mb-30">
            <div class="row">
                <div class="col-8" style="border-right: solid 1px #e5e5e5">
                    <h2 class="card-heading mb-15">Overall <span>Production</span></h2>
                    <canvas id="BookingTrends" height="130"></canvas>
                </div>

                <div class="col-4">
                    <div class="row">
                        <div class="col-12 PT-15">
                            <div class="total-pc mb-0">
                                <span class="avg-val font35">31,350,000 <small>Units</small> </span>
                                <span class="up-v" style="color: #f12300"><i
                                        class="fa fa-long-arrow-alt-down"></i> 25%</span>
                                <span class="up-v"><i class="fa fa-long-arrow-alt-up"></i> 25%</span>
                                <h3 class="mt-5 mb-0">Total Production</h3>
                            </div>
                        </div>
                        <div class="col-12">
                            <hr>
                        </div>

                        <div class="col-12">
                            <div class="row">
                                <div class="col-7 pr-0">
                                    <div class="total-pc mb-0">
                                        <span class="avg-val">16,280,000</span>
                                        <span class="up-v" style="color: #f12300"><i
                                                class="fa fa-long-arrow-alt-down"></i> 25%</span>
                                        <div class="font16">Category A</div>
                                    </div>
                                </div>

                                <div class="col-5">
                                    <div class="total-progress total-progress-sm ml-10">
                                        <div class="progress mx-auto" data-value="70"><span
                                                class="progress-left"> <span
                                                    class="progress-bar progress-barColor"> </span>
                                            </span> <span class="progress-right"> <span
                                                    class="progress-bar progress-barColor"></span>
                                            </span>
                                            <div
                                                class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center">
                                                <div class="digitVal">70<small>%</small></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="col-12">
                            <hr class="mt-10">
                        </div>


                        <div class="col-12">
                            <div class="row">
                                <div class="col-7 pr-0">
                                    <div class="total-pc mb-0">
                                        <span class="avg-val cb-color">15,280,000</span>
                                        <span class="up-v"><i class="fa fa-long-arrow-alt-up"></i>
                                            25%</span>
                                        <div class="font16 cb-color">Category B</div>
                                    </div>
                                </div>

                                <div class="col-5">
                                    <div class="total-progress total-progress-sm cb-color-pr ml-10">
                                        <div class="progress mx-auto" data-value="70"><span
                                                class="progress-left"> <span
                                                    class="progress-bar progress-barColor"> </span>
                                            </span> <span class="progress-right"> <span
                                                    class="progress-bar progress-barColor"></span>
                                            </span>
                                            <div
                                                class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center">
                                                <div class="digitVal">70<small>%</small></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="col-12">
                            <hr class="mt-10">
                        </div>

                        <div class="col-12">
                            <div class="row">
                                <div class="col-7 pr-0">
                                    <div class="total-pc mb-0">
                                        <span class="avg-val Rejections">15,280,000</span>
                                        <span class="up-v"><i class="fa fa-long-arrow-alt-up"></i>
                                            25%</span>
                                        <div class="font16 Rejections">Rejections</div>
                                    </div>
                                </div>

                                <div class="col-5">
                                    <div class="total-progress total-progress-sm rejections-pr ml-10">
                                        <div class="progress mx-auto" data-value="70"><span
                                                class="progress-left"> <span
                                                    class="progress-bar progress-barColor"> </span>
                                            </span> <span class="progress-right"> <span
                                                    class="progress-bar progress-barColor"></span>
                                            </span>
                                            <div
                                                class="progress-value w-100 h-100 rounded-circle d-flex align-items-center justify-content-center">
                                                <div class="digitVal">70<small>%</small></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </div>



                    </div>



                </div>

            </div>
        </div> -->

        <div class="row">
            <div class="col-md-6 mb-30">
                <div class="card p-20 mh-100">
                    <h2 class="card-heading font20">Retail <span> Market Analysis</span></h2>
                    <div class="col-12 key-trend">
                        <div class="row">
                            <div class="col-6 key-lab pr-0"><strong>TTL Retail Outlets</strong></div>
                            <div class="col-6 key-val pl-0 total_retailers">Loading...</div>
                        </div>
                    </div>
                    <div class="col-12 key-trend">
                        <div class="row">
                            <div class="col-6 key-lab pr-0"><strong>Productive Outlets</strong></div>
                            <div class="col-6 key-val pl-0 ttl_productive_retailer">Loading...</div>
                        </div>
                    </div>
                    <div class="col-12 key-trend">
                        <div class="row">
                            <div class="col-6 key-lab pr-0"><strong>Un Productive Outlets</strong></div>
                            <div class="col-6 key-val pl-0 ttl_unproductive_outlets">Loading...</div>
                        </div>
                    </div>
                    <div class="col-12 key-trend">
                        <div class="row">
                            <div class="col-6 key-lab pr-0"><strong>Unique Productivity</strong></div>
                            <div class="col-6 key-val pl-0 unique_productivity">Loading...</div>
                        </div>
                    </div>
                    <div class="col-12 key-trend mb-0">
                        <div class="row">
                            <div class="col-6 key-lab pr-0"><strong>AVG. Sales/Outlet</strong>
                            </div>
                            <div class="col-6 key-val pl-0 avg_sales_per_outlet">Loading...</div>
                        </div>
                    </div>
                </div>

            </div>

            <div class="col-md-6 mb-30">
                <div class="card p-20 mh-100">
                    <h2 class="card-heading font20">Key <span>Trends</span></h2>
                    <a href="#" class="key-trend">
                        <div class="row">
                            <div class="col key-lab pr-0"><strong>AVG. Order Value</strong></div>
{{--                            <div class="col-3 key-growth text-success"><i--}}
{{--                                    class="fa fa-long-arrow-alt-up"></i>+32% Growth</div>--}}
                            <div class="col key-val pl-0 avg_order_value">Loading...</div>
                        </div>
                    </a> <a href="#" class="key-trend">
                        <div class="row">
                            <div class="col key-lab pr-0"><strong>Avg. SKUs/Order</strong></div>
{{--                            <div class="col-3 key-growth text-warning">--}}
{{--                                <!--<i class="fa fa-long-arrow-alt-up"></i>-->- No Change--}}
{{--                            </div>--}}
                            <div class="col key-val pl-0 avg_sku_per_order">Loading..</div>
                        </div>
                    </a>
                    <a href="#" class="key-trend">
                        <div class="row">
                            <div class="col key-lab pr-0"><strong>AVG. Drop Size</strong></div>
{{--                            <div class="col-3 key-growth text-danger"><i--}}
{{--                                    class="fa fa-long-arrow-alt-down"></i>+32% Growth</div>--}}
                            <div class="col key-val pl-0 avg_drop_size">Loading...</div>
                        </div>
                    </a>
                    <a href="#" class="key-trend">
                        <div class="row">
                            <div class="col key-lab pr-0"><strong>Spot Sale</strong></div>
{{--                            <div class="col-3 key-growth text-success"><i--}}
{{--                                    class="fa fa-long-arrow-alt-up"></i>+32% Growth</div>--}}
                            <div class="col key-val pl-0 ttl_spot_grs_value">Loading...</div>
                        </div>
                    </a>
                    <a href="#" class="key-trend mb-0">
                        <div class="row">
                            <div class="col key-lab pr-0"><strong>Counter Sale</strong></div>
{{--                            <div class="col-3 key-growth text-success"><i--}}
{{--                                    class="fa fa-long-arrow-alt-up"></i>+32% Growth</div>--}}
                            <div class="col key-val pl-0 ttl_counter_grs_value">Loading...</div>
                        </div>
                    </a>
                </div>

            </div>
        </div>


{{--        <div class="row">--}}
{{--            <div class="col-12">--}}
{{--                <h2 class="_head01 text-uppercase mb-20">Market <span>Credit Analysis</span></h2>--}}
{{--            </div>--}}
{{--        </div>--}}

{{--        <div class="card mb-30">--}}
{{--            <div class="row">--}}

{{--                <div class="col-12">--}}

{{--                    <div class="row">--}}

{{--                        <div class="col-4">--}}
{{--                            <div class="total-pc border-right mb-0">--}}
{{--                                <h3>Opening <span>Credit AMNT</span></h3>--}}
{{--                                <span class="avg-val"><small>Rs.</small> Loading... </span>--}}
{{--                            </div>--}}
{{--                            <img class="tp-img-icon" src="/images/Credit-Icon.svg" alt="">--}}
{{--                        </div>--}}

{{--                        <div class="col-4">--}}
{{--                            <div class="total-pc border-right mb-0">--}}
{{--                                <h3>Recovery <span></span></h3>--}}
{{--                                <span class="avg-val"><small>Rs.</small> Loading... </span>--}}
{{--                            </div>--}}
{{--                            <img class="tp-img-icon" src="/images/Recovery-Icon.svg" alt="">--}}
{{--                        </div>--}}

{{--                        <div class="col-4">--}}
{{--                            <div class="total-pc mb-0">--}}
{{--                                <h3>Net <span>Credit AMNT</span></h3>--}}
{{--                                <span class="avg-val"><small>Rs.</small> Loading... </span>--}}
{{--                            </div>--}}
{{--                            <img class="tp-img-icon" src="/images/Net-Credit.svg" alt="">--}}
{{--                        </div>--}}

{{--                    </div>--}}

{{--                </div>--}}

{{--            </div>--}}
{{--        </div>--}}

{{--        <div class="row">--}}
{{--            <div class="col-12">--}}
{{--                <h2 class="_head01 text-uppercase mb-20">Stock <span> Analysis</span></h2>--}}
{{--            </div>--}}
{{--        </div>--}}

{{--        <div class="card mb-30">--}}
{{--            <div class="row">--}}

{{--                <div class="col-12">--}}

{{--                    <div class="row">--}}

{{--                        <div class="col">--}}
{{--                            <div class="total-pc border-right mb-0">--}}
{{--                                <h3>Opening <span>Stock</span></h3>--}}
{{--                                <b class="stock_op_balance_qty">Unit: Cartons</b>--}}
{{--                                <span class="avg-val stock_op_balance_val"><small>Rs.</small> 222,323,123 </span>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="col">--}}
{{--                            <div class="total-pc border-right mb-0">--}}
{{--                                <h3>Net <span> Purchase</span></h3>--}}
{{--                                <b class="stock_purchase_qty">Unit: Cartons</b>--}}
{{--                                <span class="avg-val stock_purchase_val"><small>Rs.</small> 222,323,123 </span>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="col">--}}
{{--                            <div class="total-pc border-right mb-0">--}}
{{--                                <h3>Sold <span>Stock</span></h3>--}}
{{--                                <b class="stock_sold_qty">Unit: Cartons</b>--}}
{{--                                <span class="avg-val stock_sold_val"><small>Rs.</small> 222,323,123 </span>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="col">--}}
{{--                            <div class="total-pc border-right mb-0">--}}
{{--                                <h3>Available <span>Stock</span></h3>--}}
{{--                                <b  class="stock_available_qty">Unit: Cartons</b>--}}
{{--                                <span class="avg-val stock_available_val"><small>Rs.</small> 222,323,123 </span>--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                        <div class="col">--}}
{{--                            <div class="total-pc mb-0">--}}
{{--                                <h3>Damage <span>Stock</span></h3>--}}
{{--                                <b class="stock_demaged_qty">Unit: 124</b>--}}
{{--                                <span class="avg-val stock_demaged_val"><small>Rs.</small> 222,323,123 </span>--}}
{{--                            </div>--}}
{{--                        </div>--}}




{{--                    </div>--}}

{{--                </div>--}}

{{--                <!-- <div class="col-12 p-0">--}}

{{--                    <div class="Product-row-title">--}}
{{--                        <div class="row">--}}
{{--                            <div class="col colStyle h-auto" style="max-width:210px">Product Size</div>--}}
{{--                            <div class="col colStyle h-auto" style="max-width:222px">Total Production--}}
{{--                                Unit</div>--}}
{{--                            <div class="col colStyle h-auto" style="max-width:170px">Total Cost</div>--}}
{{--                            <div class="col colStyle h-auto" style="max-width:190px">Raw Material Cost--}}
{{--                            </div>--}}
{{--                            <div class="col colStyle h-auto" style="max-width:170px">Packing Cost</div>--}}
{{--                            <div class="col colStyle h-auto" style="max-width:170px">Avg. Cost/Unit--}}
{{--                            </div>--}}
{{--                        </div>--}}
{{--                    </div>--}}

{{--                    <div class="Product-row">--}}
{{--                        <div class="row">--}}
{{--                            <div class="col colStyle" style="max-width:210px">--}}
{{--                                <div class="pt-5">Small <div class="ser-text">01</div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                            <div class="col colStyle font-no" style="max-width:222px">--}}
{{--                                <div class="pt-5">100,000,000 <small>Pcs</small></div>--}}
{{--                            </div>--}}
{{--                            <div class="col colStyle font-no" style="max-width:170px">--}}
{{--                                <div class="pt-5"><small>Rs.</small> Loading...</div>--}}
{{--                            </div>--}}
{{--                            <div class="col colStyle font-no" style="max-width:190px">--}}
{{--                                <div class="pt-5"><small>Rs.</small> Loading...</div>--}}
{{--                            </div>--}}
{{--                            <div class="col colStyle font-no" style="max-width:170px">--}}
{{--                                <div class="pt-5"><small>Rs.</small> Loading...</div>--}}
{{--                            </div>--}}
{{--                            <div class="col colStyle font-no" style="max-width:170px">--}}
{{--                                <div class="pt-5"><small>Rs.</small> 100</div>--}}
{{--                            </div>--}}

{{--                        </div>--}}
{{--                    </div>--}}

{{--                    <div class="Product-row">--}}
{{--                        <div class="row">--}}
{{--                            <div class="col colStyle" style="max-width:210px">--}}
{{--                                <div class="pt-5">Small <div class="ser-text">02</div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                            <div class="col colStyle font-no" style="max-width:222px">--}}
{{--                                <div class="pt-5">100,000,000 <small>Pcs</small></div>--}}
{{--                            </div>--}}
{{--                            <div class="col colStyle font-no" style="max-width:170px">--}}
{{--                                <div class="pt-5"><small>Rs.</small> Loading...</div>--}}
{{--                            </div>--}}
{{--                            <div class="col colStyle font-no" style="max-width:190px">--}}
{{--                                <div class="pt-5"><small>Rs.</small> Loading...</div>--}}
{{--                            </div>--}}
{{--                            <div class="col colStyle font-no" style="max-width:170px">--}}
{{--                                <div class="pt-5"><small>Rs.</small> Loading...</div>--}}
{{--                            </div>--}}
{{--                            <div class="col colStyle font-no" style="max-width:170px">--}}
{{--                                <div class="pt-5"><small>Rs.</small> 100</div>--}}
{{--                            </div>--}}

{{--                        </div>--}}
{{--                    </div>--}}

{{--                    <div class="Product-row">--}}
{{--                        <div class="row">--}}
{{--                            <div class="col colStyle" style="max-width:210px">--}}
{{--                                <div class="pt-5">Small <div class="ser-text">03</div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                            <div class="col colStyle font-no" style="max-width:222px">--}}
{{--                                <div class="pt-5">100,000,000 <small>Pcs</small></div>--}}
{{--                            </div>--}}
{{--                            <div class="col colStyle font-no" style="max-width:170px">--}}
{{--                                <div class="pt-5"><small>Rs.</small> Loading...</div>--}}
{{--                            </div>--}}
{{--                            <div class="col colStyle font-no" style="max-width:190px">--}}
{{--                                <div class="pt-5"><small>Rs.</small> Loading...</div>--}}
{{--                            </div>--}}
{{--                            <div class="col colStyle font-no" style="max-width:170px">--}}
{{--                                <div class="pt-5"><small>Rs.</small> Loading...</div>--}}
{{--                            </div>--}}
{{--                            <div class="col colStyle font-no" style="max-width:170px">--}}
{{--                                <div class="pt-5"><small>Rs.</small> 100</div>--}}
{{--                            </div>--}}

{{--                        </div>--}}
{{--                    </div>--}}

{{--                    <div class="Product-row">--}}
{{--                        <div class="row">--}}
{{--                            <div class="col colStyle" style="max-width:210px">--}}
{{--                                <div class="pt-5">Small <div class="ser-text">04</div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                            <div class="col colStyle font-no" style="max-width:222px">--}}
{{--                                <div class="pt-5">100,000,000 <small>Pcs</small></div>--}}
{{--                            </div>--}}
{{--                            <div class="col colStyle font-no" style="max-width:170px">--}}
{{--                                <div class="pt-5"><small>Rs.</small> Loading...</div>--}}
{{--                            </div>--}}
{{--                            <div class="col colStyle font-no" style="max-width:190px">--}}
{{--                                <div class="pt-5"><small>Rs.</small> Loading...</div>--}}
{{--                            </div>--}}
{{--                            <div class="col colStyle font-no" style="max-width:170px">--}}
{{--                                <div class="pt-5"><small>Rs.</small> Loading...</div>--}}
{{--                            </div>--}}
{{--                            <div class="col colStyle font-no" style="max-width:170px">--}}
{{--                                <div class="pt-5"><small>Rs.</small> 100</div>--}}
{{--                            </div>--}}

{{--                        </div>--}}
{{--                    </div>--}}

{{--                    <div class="Product-row">--}}
{{--                        <div class="row">--}}
{{--                            <div class="col colStyle" style="max-width:210px">--}}
{{--                                <div class="pt-5">Small <div class="ser-text">05</div>--}}
{{--                                </div>--}}
{{--                            </div>--}}
{{--                            <div class="col colStyle font-no" style="max-width:222px">--}}
{{--                                <div class="pt-5">100,000,000 <small>Pcs</small></div>--}}
{{--                            </div>--}}
{{--                            <div class="col colStyle font-no" style="max-width:170px">--}}
{{--                                <div class="pt-5"><small>Rs.</small> Loading...</div>--}}
{{--                            </div>--}}
{{--                            <div class="col colStyle font-no" style="max-width:190px">--}}
{{--                                <div class="pt-5"><small>Rs.</small> Loading...</div>--}}
{{--                            </div>--}}
{{--                            <div class="col colStyle font-no" style="max-width:170px">--}}
{{--                                <div class="pt-5"><small>Rs.</small> Loading...</div>--}}
{{--                            </div>--}}
{{--                            <div class="col colStyle font-no" style="max-width:170px">--}}
{{--                                <div class="pt-5"><small>Rs.</small> 100</div>--}}
{{--                            </div>--}}

{{--                        </div>--}}
{{--                    </div>--}}

{{--                </div> -->--}}
{{--            </div>--}}
{{--        </div>--}}


        <div class="row">
            <div class="col-12">
                <h2 class="_head01 text-uppercase mb-20">SR <span>List</span></h2>
            </div>
        </div>
        <div class="card mb-30">
            <div class="row">
                <div class="col-12 p-0">
                    <div class="Product-row-title">
                        <div class="row">
                            <div class="col colStyle h-auto" style="max-width:290px">Employee Name</div>
                            <div class="col colStyle h-auto" style="max-width:200px">Gross Sales Value</div>
                            <div class="col colStyle h-auto" style="max-width:150px">TTL.Unit Sales</div>
                            <div class="col colStyle h-auto" style="max-width:135px">TARGET</div>
                            <div class="col colStyle h-auto" style="max-width:135px">TGT. ACH%</div>
                            <div class="col colStyle h-auto" style="max-width:200px;text-align:center">Action</div>
                        </div>
                    </div>
                    <div class="loader-sell360 tblLoaderEmployees">
                        <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>
                    <span class="sr_employee_records">

                    </span>
                </div>
            </div>
        </div>
    </div>

</div>
@endsection
@push('js')
<style>
    #wrapper #content-wrapper {
        background-color: #fff;
        padding-top: 0
    }

    .fullscreen-body #wrapper #content-wrapper {
        padding-top: 0
    }

    .fullscreen-body .sidebarblue {
        display: none
    }

    .fullscreen-body .container {
        max-width: 100%;
    }

    @media (max-width: 1440px) {
        .fullscreen-body #wrapper #content-wrapper {
            padding-left: 15px;
        }
    }
</style>
<script src="{{url('/js/custom/monthly-dashboard/monthly-dashboard-distributor-detail.js')}}"></script>
@endpush