@extends('layouts.master')
@section('content')
<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 !important;
        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-3">
    <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">
            <input type="text" style="display:none" id="datepicker" class="form-control date_filter_products_detail" placeholder="">
            <i class="fa fa-angle-down"></i>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-6 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 class="pic" id="trProdImg" src="" alt="">
                    </div>
                </div>
                <div class="col pl-0">
                    <h4 id="trProdName">--</h4>
                    <p id="trProdTp"><strong>Trade Price: </strong>--</p>
                    <p id="trProdBrand"><strong>Brand: </strong>--</p>
                    <p id="trProdSubCat"><strong>Sub Category: </strong>--</p>
                </div>
                <div class="col-12 PT-30">
                    <div class="row m-0">
                        <div class="col-6 total-val border-bottom"><span id="trProdUnitsBooked">--</span> Units Booked</div>
                        <div class="col-6 total-val border-left border-bottom"><span id="trProdRev">--</span> Revenue</div>
                        <div class="col-6 total-val"><span id="trProdAvgDropSize">--</span> AVG. Drop Size</div>
                        <div class="col-6 total-val border-left"><span id="trProdCont">--</span>
                            Contribution</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-6 mb-20">
        <div class="card mh-100 position-relative">
            <h2 class="card-heading">SEGMENTS <span>Type</span></h2>
            <canvas class="mt-15" id="segmentType" height="270"></canvas>
        </div>
    </div>
    <div class="col-6 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-6 mb-20">
        <div class="card mh-100 position-relative" id="topDistributorsProdDetailMonthly"> {{-- style="overflow: auto;height:700px" --}}
            <h2 class="card-heading">Top <span> Distributors</span></h2>
        </div>
    </div>
</div>
@endsection