@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}}">

    <style>
        .total-val span,
        .segmentType-value,
        .topreg-row .reg-totalsale span {
            font-family: 'Rationale', sans-serif !important;
        }

        .total-val {
            color: #606060;
            text-align: center;
            padding: 20px 8px;
        }

        .total-val span {
            color: #0038ba;
            margin-bottom: 5px;
            font-size: 30px;
            display: block;
            line-height: 1;
        }

        .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;
        }

        .dashboard-date .form-control,
        .font-no,
        .avg-booking-day h2 span,
        .total-VO span,
        .label-percent {
            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;
        }

        .segmentType-value {
            font-size: 20px;
            line-height: 1;
            position: absolute;
            top: 43px;
            left: 20px;
        }

        .segmentType-value span {
            font-size: 32px;
            color: #0038ba;
            display: block
        }


        .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;
        }


        .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: 94px;
            height: 94px;
            box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
        }

        .pro-img img {
            width: 94px;
            height: 94px;
        }

        .pro-info h4 {
            font-size: 16px;
            margin-bottom: 10px;
        }

        .topreg-row {
            font-size: 14px;
            border-bottom: solid 1px #ececec;
            margin-top: 15px;
            padding-bottom: 15px;
        }

        .topreg-row h2 {
            font-size: 17px;
            margin: 0;
            line-height: 1
        }

        .topreg-row .reg-totalsale {
            text-align: right;
            line-height: 1
        }

        .topreg-row .reg-totalsale span {
            font-size: 24px;
            display: block;
            color: #0038ba
        }

        .topreg-row .reg-totalsale span small {
            color: #282828
        }

        .topreg-row .topreg-no {
            font-family: 'Poppins', sans-serif;
            font-weight: 800;
            font-size: 38px;
            text-align: right;
            line-height: 1;
            color: #f2f5fb
        }

    </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> <small>CTNS</small></span> Units Booked
                            </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"></span>AVG. Drop Size</div>
                            <div class="col-6 total-val border-left"><span><div id="contribution" style="display:inline"></div> <small>%</small></span> Contribution</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 Segments</span></h2>
                <div class="segmentType-value">10<small>%</small> <span>Rs. <div id="segmentssales" style="float: right"></div></span></div>
                <canvas class="mt-15" id="segmentType" height="270"></canvas>

            </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 Channels</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>

    

    </div>


    </div>
    
<script src="js/Chart.min.js"></script>
<script src="js/Chart.bundle.min.js"></script>
<script src="js/chartjs-plugin-labels.js"></script>	
 
<script src="js/segmentstype-detail.js"></script>
<script src="js/salesbyChannels.js"></script>
@endsection