@extends('layouts.master')
@section('content')
<input type="hidden" id="session"  value="{{$session}}">
<input type="hidden" id="apiBaseURL"  value="{{$apiBaseUrl}}">
<input type="hidden" id="product_id"  value="{{$product_id}}">
<input type="hidden" id="month"  value="{{$month}}">
<input type="hidden" id="year"  value="{{$year}}">


<style>
    .dashboard-date .form-control, .font-no, .avg-booking-day h2 span, .total-VO span, .label-percent, .month-show{font-family: 'Rationale', sans-serif!important;}
    .dashboard-date {
        width: 260px;
        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;
    }
    ._report-Head .nav-pills .nav-link {
        padding: 10px 25px; font-size: 15px}
    .nav-pills .nav-link.active ._cus-val, .nav-tabs .nav-link.active ._cus-val {
        color: #fff;
        background-color: #0038ba;
    }
    .nav-pills .nav-link ._cus-val, .nav-tabs .nav-link ._cus-val {
        background-color: #e2e9fb;
        color: #7f8998;
        font-size: 10px;
        padding: 3px 4px 2px 4px;
        height: 16px;
        margin-top: 3px;
        margin-left: 5px;
        font-family: proximanova-light, sans-serif;
        border-radius: 5px;
        display: inline-block;
        line-height: 1;
    }
    .target-tab{
        height: 50px; margin-top: 20px; padding-top: 5px; background-color: #fff; position:relative;
    }
    .Product-row{padding: 8px; margin-bottom: 10px; box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
    }
    .Product-row-title{padding: 8px;}
    .Product-IMG{margin-bottom: -5px}
    .Product-IMG img {width: 32px; height: 32px; border-radius:50%; border: solid 1px #333;}
    .Product-Name{color: #808080; line-height: 1}
    .Product-Name strong{color: #282828; padding-bottom: 3px; display: block}
    ._ITEMNAME{height: auto;}
    .font-no{font-size: 20px; line-height:1}
    .ser-text{font-family:'Poppins', sans-serif; line-height: 1; font-size: 30px; font-weight: 800; color: #ececec; margin-bottom: -5px;}
    .card-heading {
        font-size: 20px;
        text-transform: uppercase;
        letter-spacing: 1px;
        position: relative;
    }
    .card-heading span {
        font-family: 'proximanova-light', sans-serif !important;
        font-weight: normal;
    }
    .card-heading:before {
        background: #0038ba;
        position: absolute;
        width: 2px;
        height: 18px;
        left: -20px;
        top: 2px;
        content: '';
    }
    .avg-booking-day{margin-top: 0px; margin-bottom: 5px;}
    .avg-booking-day h2{font-size: 18px; color: #606060; line-height:1; margin: 0}
    .avg-booking-day h2 span{font-size: 30px; display: block; color: #0038ba; padding-top: 2px;}
    .card {
        box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.2);
        -webkit-box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.2);
        -moz-box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.2);
        -ms-box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.2);
        padding: 20px;
    }
    .search-tabs{position: absolute; right:0; top: 0px;}
    .mh-100 {min-height: 100%;}
    .period-select{ width: 125px; position: absolute; top:15px; right:15px;z-index: 5; box-shadow: none}
    .period-select select{ box-shadow: none}
    .back-btn {float: right; font-size: 13px; color: #fff;  background-color: #0038ba; line-height:1; padding: 5px 11px}
    .back-btn:hover {background-color: #0038ba;color: #fff;text-decoration:none}
    .pro-info{font-size:14px}
    .pro-info p{margin:0; line-height: 18px; color: #606060}
    .pro-info p strong{min-width:105px; display: inline-block}
    .pro-img {
        width: 85px;
        height: 85px;
        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    }
    .pro-img img {width: 85px; height: 85px;}
    .pro-info h4 {font-size: 16px; margin-bottom: 5px;}
    .total-VO .icon-emp-vo{background-color: #fff; border: solid 1px #e1e1e1; width: 50px; height: 50px; padding: 9px;}
    .total-VO .icon-emp-vo img{width: 30px; height: 30px}
    .total-VO{font-size:15px; line-height: 1; margin: 25px 0 0 0}
    .total-VO span{font-size:22px; display: block; color: #282828; padding-bottom: 8px;}

    .total-progress {
        padding: 0px; margin-top: -8px;
    }
    .total-progress .progress {
        width: 110px;
        height: 110px;
        background: 0 0;
        position: relative
    }
    .total-progress .progress::after {
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 50%;
        border: 8px solid #eee;
        position: absolute;
        top: 0;
        left: 0
    }
    .total-progress .progress>span {
        width: 50%;
        height: 100%;
        overflow: hidden;
        position: absolute;
        top: 0;
        z-index: 1
    }
    .total-progress .progress .progress-left {
        left: 0
    }
    .total-progress .progress .progress-bar {
        width: 100%;
        height: 100%;
        background: 0 0;
        border-width: 8px;
        border-style: solid;
        position: absolute;
        top: 0
    }
    .total-progress .progress .progress-left .progress-bar {
        left: 100%;
        border-top-right-radius: 80px;
        border-bottom-right-radius: 80px;
        border-left: 0;
        -webkit-transform-origin: center left;
        transform-origin: center left
    }
    .total-progress .progress .progress-right {
        right: 0
    }
    .total-progress .progress .progress-right .progress-bar {
        left: -100%;
        border-top-left-radius: 80px;
        border-bottom-left-radius: 80px;
        border-right: 0;
        -webkit-transform-origin: center right;
        transform-origin: center right
    }
    .total-progress .progress .progress-value {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 5
    }
    .total-progress .progress .progress-value .digitVal {
        font-family: Rationale, sans-serif!important;
        font-size: 32px;
        font-weight: normal;
        letter-spacing: normal;
        color: #0038ba; line-height:1; text-align: center
    }
    .total-progress .progress .progress-value .digitVal span {
        font-family: 'proximanova-semibold;', sans-serif !important;
        font-size: 13px;
        color: #282828; display: block;
    }
    .total-progress .progress-bar {
        background: linear-gradient(90deg, #fff 0, #fff 100%)!important
    }
    .total-progress .progress-barColor {
        border-color: #0038ba
    }
    .pt-35{padding-top: 35px}
    #widget-meter {
        width: 115px;
        margin: 0 auto;
    }
    #widget-meter .needle,
    #widget-meter .needle-center {
        fill: #a6a6a6;
    }
    .label-percent{font-size:22px; padding-top: 25px;fill:#0038ba;}
    .title-ach{font-size: 13px;
        letter-spacing: 1px;
        display: block;
        margin: auto;
        text-align: center; margin-top: 5px;}
    .month-show{
        font-size: 20px;
        text-align: right;  line-height: 1;
    }
</style>

<div class="row mt-2 mb-2">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">Product <span> Monthly Sales</span></h2>
        </div>

        <div class="col-lg-6 col-md-6 col-sm-6">
            {{--<div class="dashboard-date" style="margin-top:-6px;margin-right:0">
                <input type="text" id="datepicker" class="form-control" placeholder="">
                <i class="fa fa-angle-down"></i>
            </div>--}}
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6 col-md-12 mb-20">
            <div class="card mh-100">

                <div class="row pro-info"><img style="position:absolute; width:auto; height:30px; right:15px; top:15px;"
                        class="badge-icon" src="/images/badge-icon.svg" alt="">
                    <div class="col-auto">
                        <div class="pro-img">
                            <img id="productthumbnail" class="pic" src="" alt="">
                        </div>
                    </div>
                    <div class="col pl-0">
                        <h4 id="productname"></h4>
                        <p><strong>Trade Price: </strong><span id="tradeprice"></span></p>
                        <p><strong>Brand: </strong><span id="brand"></span></p>
                        <p><strong>Sub Category: </strong><span id="category"></span></p>
                    </div>

                    <div class="col-12 PT-30">
                        <div class="row m-0">
                            <div class="col-6 total-val border-bottom"><span><div id="unitsbooked" style="display:inline"></div> </span> Target
                            </div>
                            <div class="col-6 total-val border-left border-bottom"><span><small>Rs.</small> <div id="revenue" style="display:inline"></div></span>  
                                 Revenue</div>
                            <div class="col-6 total-val"><span id ="avg_drop_size"><small>CTNs</small></span>Quantity</div>
                            <div class="col-6 total-val border-left"><span><div id="contribution" style="display:inline"></div> <small>%</small></span> Ach</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-lg-6 col-md-12 mb-20">
            <div class="card mh-100 position-relative">
                <h2 class="card-heading">Sales <span>by Distributor Types</span></h2>
                <div class="segmentType-value"> <span> <div id="segmentssales" style="float: right"></div></span></div>
                <canvas class="mt-15" id="segmentType" height="270"></canvas>

            </div>
        </div>

        <div class="col-lg-12 col-md-12 mb-20">
            <div class="card mh-100 position-relative">
                <h2 class="card-heading">Month Wise <span> Sales</span></h2>
                <canvas class="mt-15" id="topChannels" height="314"></canvas>
            </div>
        </div>

        {{--<div class="col-lg-6 col-md-12 mb-20">
            <div class="card mh-100 position-relative">
                <h2 class="card-heading">Top <span> Regions</span></h2>
                <div id="topregions">
                </div>
            </div> 
        </div>--}}


    </div>


<div class="row">
    <div class="col-md-12 mb-30">
        <div class="card p-15 PT-10">

            <div class="col-12 p-0">
                <div class="_report-Head target-tab mt-0">

                    <ul class="nav nav-pills mb-3 mt-0" id="pills-tab2" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="pills-product-tab2" data-toggle="pill" href="#pills-product2" role="tab" aria-controls="pills-product2" aria-selected="true">Region Wise {{--<span class="_cus-val"> 18 </span>--}}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="pills-brands2-tab" data-toggle="pill" href="#pills-brands2" role="tab" aria-controls="pills-brands2" aria-selected="false">Area Wise {{--<span class="_cus-val"> 18 </span>--}}</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="pills-channels2-tab" data-toggle="pill" href="#pills-channels2" role="tab" aria-controls="pills-channels2" aria-selected="false">Territory Wise {{--<span class="_cus-val"> 18 </span>--}}</a>
                        </li>
                    </ul>
                </div>

                <div class="tab-content" id="pills-tabContent2">
                    <div class="tab-pane fade show active PT-15" id="pills-product2" role="tabpanel" aria-labelledby="pills-product2-tab">
                        <div class="col-12 p-0">

                            <table class="table table-hover " style="width:100%;" id="region_wise" >
                                <thead>
                                <tr>
                                    <th>Region</th>
                                    <th>RSM</th>
                                    <th>Target</th>
                                    <th>Sales</th>
                                    <th>Revenue</th>
                                    <th>Achievement</th>
                                </tr>
                                </thead>
                                <tbody id="region_wise_tbody">
                                </tbody>
                            </table>
                        </div>



                    </div>

                    <div class="tab-pane fade w-100  PT-15" id="pills-brands2" role="tabpanel" aria-labelledby="pills-brands2-tab">
                        <div class="col-12 p-0">
                        <table class="table table-hover " style="width:100% !important;" id="area_wise" >
                            <thead>
                            <tr>
                                <th>Area</th>
                                <th>ASM</th>
                                <th>Target</th>
                                <th>Sales</th>
                                <th>Revenue</th>
                                <th>Achievement</th>
                            </tr>
                            </thead>
                            <tbody id="area_wise_tbody">
                            </tbody>
                        </table>
                            </div>
                    </div>

                    <div class="tab-pane fade  PT-15" id="pills-channels2" role="tabpanel" aria-labelledby="pills-channels-tab2">
                        <div class="col-12 p-0">
                        <table class="table table-hover " style="width:100% !important;" id="territory_wise" >
                            <thead>
                            <tr>
                                <th>Territory</th>
                                <th>TSM</th>
                                <th>Target</th>
                                <th>Sales</th>
                                <th>Revenue</th>
                                <th>Achievement</th>
                            </tr>
                            </thead>
                            <tbody id="territory_wise_tbody">
                            </tbody>
                        </table>
                        </div>
                    </div>
                </div>
            </div>


        </div>

    </div>
</div>


</div>

    

    </div>


    </div>
    
@endsection
@push('scripts')
    <script src="js/Chart.min.js"></script>
    <script src="js/Chart.bundle.min.js"></script>
    <script src="js/chartjs-plugin-labels.js"></script>
    <script>
        // $('#region_wise').dataTable({"scrollX": true });
        // $('#area_wise').dataTable({"scrollX": true });
        // $('#territory_wise').dataTable({"scrollX": true });
    </script>
    <script src="js/segmentstype-detail.js"></script>
    <script src="js/salesbyChannels.js"></script>
@endpush