@extends('layouts.master')
@section('content')
<style>
    .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;
    }

    ._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: 10px;
    }

    .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;
    }
    .holder > li {
        padding: 5px;
        margin: 2px;
        display: inline-block;
    }
    .holder > li[data-page] {
        border: solid #dee2e6 1px;
        border-radius: 5px;
        border-radius: 0px; 
        font-size: 13px;
        padding: 8px 10px;
        line-height: 1;
        
    }
    .holder > li.separator:before {
        content: '...';
    }
    .holder > li.active {
        background: linear-gradient(90deg, #1e54d3 0%, #0038ba 100%);
        border-color: #0038ba;
        color: #fff;
    }
    .holder > li[data-page]:hover {
        cursor: pointer;
    }
</style>

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

    <div class="col-lg-6 col-md-6 col-sm-6">
        <div class="dashboard-date" style="display:none">
            <input type="text" style="display:none" id="datepicker"  class="form-control date_filter_products_detail" placeholder="">
            <input type="text" style="display:none" id="datepicker"  class="form-control date_filter_products_detail_daily" placeholder="">
            <i class="fa fa-angle-down"></i>
        </div>
        <a class="back-btn back_btn_detail"><i class="fa fa-long-arrow-alt-left"></i> Back</a>
    </div>
</div>

<div class="row">
    <div class="col-5 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 product_image" src="/images/avatar.svg" alt="">
                    </div>
                </div>
                <div class="col pl-0">
                    <h4 class="product_name">---</h4>
                    <p><strong>Trade Price: </strong><span class="product_tp">-- </span></p>
                    <p><strong>Brand: </strong><span class="product_brand">--</span></p>
                    <p><strong>Sub Category: </strong><span class="product_sub_cat">--</span></p>
                </div>
            </div>

            <div class="row">
                <div class="col-6 pt-35">
                    <div class="total-progress">
                        <div class="progress mx-auto" data-value="0"><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">
                                    NA<small>%</small><span><strong>Achivement</strong></span></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-6">
                    <div id="widget-meter"></div>
                    <span class="title-ach"><strong>Contribution</strong></span>
                </div>
            </div>

            <div class="row">
                <div class="col-6">
                    <div class="row total-VO">
                        <div class="col-auto p-0">
                            <div class="icon-emp-vo"><img src="/images/target-month-icon.svg" alt="">
                            </div>
                        </div>
                        <div class="col pr-0"><span>0 <small>CTNS</small></span>Monthly Target</div>
                    </div>
                </div>
                <div class="col-6">
                    <div class="row total-VO">
                        <div class="col-auto p-0">
                            <div class="icon-emp-vo"><img src="/images/order-icon-emp.svg" alt=""></div>
                        </div>
                        <div class="col pr-0"><span><span class="product_units"></span></span>Total Sales</div>
                    </div>
                </div>
            </div>


        </div>

    </div>

    <div class="col-7 mb-20">
        <div class="card mh-100">
            <div class="period-select"><select class="form-control form-control-sm form-control-faded product_detail_graph">
                    <option value="1" selected>This Week</option>
                    <option value="2">This Month</option>
                    <option value="3">Last Month</option> 
                </select>
            </div>

            <h2 class="card-heading">product <span> Sale Trend</span></h2>
            <div class="avg-booking-day">
                <h2>Avg. product Sale<span class="avg_product_sale">---</span></h2>
            </div>
            <canvas class="mt-15" id="ProductSaleTrend" height="200"></canvas>
        </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">
                    <div class="search-tabs">
                        <div class="CL-Product pr-0"><i class="fa fa-search"></i>
                            <input type="text" class="form-control search_detail" id="" placeholder="Search">
                        </div>
                    </div>

                    <ul class="nav nav-pills mb-3 mt-0" id="pills-tab2" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active product_detail_links" name="emp_wise" id="pills-product-tab2" data-toggle="pill"
                                href="#pills-product2" role="tab" aria-controls="pills-product2"
                                aria-selected="true">Employee Wise <span class="_cus-val count_emp_wise"> 0
                                </span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link product_detail_links" name="channel_wise" id="pills-brands2-tab" data-toggle="pill"
                                href="#pills-brands2" role="tab" aria-controls="pills-brands2"
                                aria-selected="false">Channel Wise <span class="_cus-val count_channel_wise"> 0
                                </span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link product_detail_links" name="area_wise" id="pills-channels2-tab" data-toggle="pill"
                                href="#pills-channels2" role="tab" aria-controls="pills-channels2"
                                aria-selected="false">Area Wise <span class="_cus-val count_area_wise"> 0 </span></a>
                        </li>
                    </ul>
                </div>

                <div class="tab-content" id="pills-tabContent2">
                    <div class="tab-pane fade show active" id="pills-product2" role="tabpanel"
                        aria-labelledby="pills-product2-tab">
                        <div class="PT-10">
                            <div class="Product-row-title">
                                <div class="row">
                                    <div class="col colStyle h-auto" style="max-width:350px">Employee
                                        Name</div>
                                    <div class="col colStyle h-auto" style="max-width:120px"></div>
                                    <div class="col colStyle h-auto" style="max-width:150px">Sales in
                                        Rs.</div>
                                    <div class="col colStyle h-auto" style="max-width:150px">Sales in
                                        Unit</div>
                                    <div class="col colStyle h-auto" style="max-width:150px">Retail
                                        Visit</div>
                                    <div class="col colStyle h-auto" style="max-width:150px">Total
                                        Orders</div>
                                </div>
                            </div>

                            <div class="emp_wise_div"> </div>
                        </div>
                    </div>

                    <div class="tab-pane fade" id="pills-brands2" role="tabpanel"
                        aria-labelledby="pills-brands2-tab">
                        <div class="PT-10">
                            <div class="Product-row-title">
                                <div class="row">
                                    <div class="col colStyle h-auto" style="max-width:470px">Channels
                                    </div>
                                    <div class="col colStyle h-auto" style="max-width:125px"></div>
                                    <div class="col colStyle h-auto" style="max-width:170px">Sales in
                                        Rs.</div>
                                    <div class="col colStyle h-auto" style="max-width:170px">CTN's
                                        Booked</div>
                                    <div class="col colStyle h-auto" style="max-width:170px">
                                        Contribution</div>
                                </div>
                            </div>

                            <div class="channel_wise_div"> </div> 
                        </div>
                    </div>

                    <div class="tab-pane fade" id="pills-channels2" role="tabpanel"
                        aria-labelledby="pills-channels-tab2">
                        <div class="PT-10">
                            <div class="Product-row-title">
                                <div class="row">
                                    <div class="col colStyle h-auto" style="max-width:470px">Areas</div>
                                    <div class="col colStyle h-auto" style="max-width:125px"></div>
                                    <div class="col colStyle h-auto" style="max-width:170px">Sales in
                                        Rs.</div>
                                    <div class="col colStyle h-auto" style="max-width:170px">CTN's
                                        Booked</div>
                                    <div class="col colStyle h-auto" style="max-width:170px">
                                        Contribution</div>
                                </div>
                            </div>

                            <div class="area_wise_div"> </div>
                        </div>
                    </div>


                    <div class="ProductPageNav text-center">
                        <div id="holder" class="holder" style="position: relative; "></div>
                    </div>

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

@endsection