@extends('layouts.master')
@section('content')
    <script src="/js/list.js"></script>
    <link rel="stylesheet" href="/css/list-pagination.css">
    <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" 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="/images/default-product.jpg" alt="" onerror="this.onerror=null;this.src='/images/default-product.jpg';">
                        </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="trProdUnitsSold">--</span> Units Sale</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="trProdTargetAchievement">--</span> Target Achievement
                            </div>
                            <div class="col-6 total-val border-left"><span id="trProdCoverage">--</span> Coverage</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-6 col-md-12 mb-20">
            <div class="card mh-100">
                <h2 class="card-heading">Segments <span>Sales</span></h2>
                <div class="loader-sell360 segmentDivLoader" style="height:285px!important">
                    <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>
                <div class="row top_segments_div" style="display: none">
                </div>
            </div>
        </div>
        <div class="col-6 mb-20">
            <div class="card ts-overview PB-15" style="min-height: 100%; margin-bottom:0">

                <div class="row PB-10">
                    <div class="col">
                        <h2 class="card-heading">Top <span> Employees</span></h2>
                    </div>
                    <div class="col-auto">
                        <div class="CL-Product pr-0"><i class="fa fa-search"></i>
                            <input type="text" class="form-control" id="top_emp_search" placeholder="Search Employee">
                        </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 id="Employeesthumb" style="display: none">
                    <div class="row list all_brands">
                    </div>
                    <div class="ProductPageNav text-right">
                        <div class="ProductPageNav text-right">
                            <ul class="justify-content-center pagination"></ul>
                        </div>
                    </div>
                </span>

            </div>
        </div>

        <div class="col-6 mb-20">
            <div class="card ts-overview PB-15" style="min-height: 100%; margin-bottom:0">

                <div class="row PB-10">
                    <div class="col">
                        <h2 class="card-heading">Top <span> Distributors</span></h2>
                    </div>
                    <div class="col-auto">
                        <div class="CL-Product pr-0"><i class="fa fa-search"></i>
                            <input type="text" class="form-control" id="top_dist_search"
                                placeholder="Search Distributor">
                        </div>
                    </div>
                </div>
                <div class="loader-sell360 tblLoaderDistributors">
                    <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 id="Distributorsthumb" style="display: none">
                    <div class="row list all_distributors">
                    </div>
                    <div class="ProductPageNav text-right">
                        <div class="ProductPageNav text-right">
                            <ul class="justify-content-center pagination"></ul>
                        </div>
                    </div>
                </span>

            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script src="{{ url('/js/custom/monthly-dashboard/monthly-dashboard-single-product.js') }}"></script>
@endpush