@extends('layouts.master')
@section('data-sidebar')
    <div id="product-cl-sec"> <a href="#" id="pl-close" class="close-btn-pl"></a>
        <div class="pro-header-text">Select <span> Filters</span>
        </div>

        <div class="se_cus-type form-wrap p-10">
            <div class="row">
                <div class="col-12 filter-refine pt-0">
                    <div class="row">
                        <div class="col-auto mt-auto mb-auto font14 pr-0">
                            Select Date
                        </div>
                        <div class="col"> <input type="text" id="datepicker" class="form-control" placeholder="">
                        </div>
                    </div>
                    <!-- <strong>Refine By:</strong>
                    <div class="alert fade show alert-color _add-secon" role="alert">Lahore Area
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                                aria-hidden="true">×</span></button>
                    </div>
                    <div class="alert fade show alert-color _add-secon" role="alert">Lahore Area
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                                aria-hidden="true">×</span></button>
                    </div>
                    <div class="alert fade show alert-color _add-secon" role="alert">Lahore Area 2
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                                aria-hidden="true">×</span></button>
                    </div>
                    <div class="alert fade show alert-color _add-secon" role="alert">Lahore Area 2
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                                aria-hidden="true">×</span></button>
                    </div>
                    <div class="alert fade show alert-color _add-secon" role="alert">Lahore Area 2
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
                                aria-hidden="true">×</span></button>
                    </div> -->
                </div>
            </div>
        </div>


        <div class="pc-cartlist">
            <div class="overflow-plist">
                <div class="plist-content">
                    <div class="_left-filter pt-0">
                        <div class="container">
                            <div class="row">
                                <div id="floating-label" class="col-12">
                                    <div class="card top_border p-15">
                                        <h2 class="_head03">Filters <span></span></h2>
                                        <div class="form-wrap p-0">
                                            <div class="row">
                                                <div class="col-md-12 PB-5">
                                                    <label class="font12 mb-5">Select Region</label>
                                                    <div class="form-s2">
                                                        <select class="form-control formselect" placeholder="select Region">
                                                            <option selected>Select Region</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-md-12 PB-5">
                                                    <label class="font12 mb-5">Select Area</label>
                                                    <div class="form-s2">
                                                        <select class="form-control formselect" placeholder="select Area">
                                                            <option selected>Select Area</option>
                                                        </select>
                                                    </div>
                                                </div>


                                                <div class="col-md-12 PB-5">
                                                    <label class="font12 mb-5">Select Territory</label>
                                                    <div class="form-s2">
                                                        <select class="form-control formselect"
                                                            placeholder="select Territory">
                                                            <option selected>Select Territory</option>
                                                        </select>
                                                    </div>
                                                </div>

                                                <div class="col-md-12 PB-5">
                                                    <label class="font12 mb-5">Select Distributor</label>
                                                    <div class="form-s2">
                                                        <select class="form-control formselect"
                                                            placeholder="select Distributor">
                                                            <option selected>Select Distributor</option>
                                                        </select>
                                                    </div>
                                                </div>

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="_cl-bottom">
            <button type="submit" class="btn btn-primary mr-2">Filter</button>
            <button type="submit" class="btn btn-primary btn-line mr-2">Reset</button>
            <button id="pl-close" type="submit" class="btn btn-cancel mr-2">Cancel</button>
        </div>
    </div>
@endsection
@section('content')
    <style>
        #product-cl-sec {
            width: 390px;
        }

        .mtd-sale {
            background: linear-gradient(0deg, #0038ba 0%, #1e54d3 100%);
            padding: 15px;
            border-radius: 12px;
            color: #fff;
        }

        .mtd-sale .btn {
            padding: 0;
            background: transparent;
            color: #fff;
        }

        .mtd-sale .btn svg {
            margin-top: -3px;
        }

        .mtd-sale .dropdown-menu {
            padding: 5px 0 0px 0 !important;
            border: none;
            box-shadow: 0px 0px 15px 0px rgba(82, 63, 105, 0.2);
            -webkit-box-shadow: 0px 0px 15px 0px rgba(82, 63, 105, 0.4);
            -moz-box-shadow: 0px 0px 15px 0px rgba(82, 63, 105, 0.4);
            -ms-box-shadow: 0px 0px 15px 0px rgba(82, 63, 105, 0.4);
            margin-top: 6px;
            min-width: 130px;
        }

        .mtd-sale .dropdown-item {
            padding: 3px 10px;
            color: #282828;
            font-size: 13px;
        }

        .mtd-sale .dropdown-item:HOVER {
            background-color: #f4f5fa;
            color: #0038ba
        }

        .mtd-sale .bi-bar-chart-line {
            width: 22px;
            height: 22px;
            opacity: 0.75;
            margin-top: -3px;
        }

        .mtd-sale-val {
            padding-top: 30px;
            font-size: 15px;
            color: #c1caee;
            line-height: 1;
            margin-bottom: 0px;
        }

        .mtd-sale-val .divVal {
            font-size: 32px;
            color: #fff;
            display: block;
            font-family: 'Rationale', sans-serif !important;
            padding-top: 8px;
            line-height: 1;
        }

        .mtd-sale-val .divVal svg {
            width: 24px;
            height: 24px;
            margin-top: -5px;
            color: #32d376;
        }

        .mtd-Gross-val {
            padding-top: 10px;
            font-size: 13px;
            color: #aeb8e3;
        }

        .mtd-Gross-val span {
            font-size: 28px;
            color: #fff;
            display: block;
            font-family: 'Rationale', sans-serif !important;
            padding-top: 5px;
            line-height: 1;
        }

        .since-month {
            font-size: 13px;
            padding: 3px 8px;
            background-color: rgba(0, 0, 0, 0.3);
            margin-top: 10px;
            border-radius: 3px;
            display: inline-block;
        }

        .Target {
            background-color: #fff;
            box-shadow: 0px 4px 25px 0px rgba(0, 0, 0, 0.05);
            padding: 15px;
            border-radius: 12px;
            height: 100%;
            font-size: 14px;
        }

        .Target h2 {
            font-size: 18px;
        }

        .tabheading {
            font-size: 20px;
            margin-bottom: 10px;
        }

        .tabheading svg {
            width: 18px;
            height: 18px;
            margin-top: -3px;
            color: #000;
            margin-right: 5px;
            opacity: 0.45;
        }

        .Target .Target-val {
            font-size: 18px;
            font-family: 'Rationale', sans-serif !important;
            line-height: 1;
            text-align: right;
        }

        .Target .bi-bullseye,
        .bi-graph-up-arrow,
        .bi-speedometer2,
        .small-card .bi,
        .bi-symmetry-vertical {
            margin-right: 10px;
            color: #0038ba;
            width: 20px;
            height: 20px;
            margin-top: -3px;
        }

        .kpi-div {
            font-size: 13px;
        }

        .kpi-val {
            font-size: 17px;
            font-family: 'Rationale', sans-serif !important;
            line-height: 1;
            color: #0038ba;
        }

        .kpi-row {
            background-color: #f4f5fa;
            border-radius: 8px;
            margin: 0;
            padding: 6px 0;
            line-height: 1;
            margin-bottom: 7px;
        }

        .kpi-row .col {
            padding-left: 10px;
        }

        .top-performer {
            background-color: #f4f5fa;
            border-radius: 12px;
            font-size: 14px;
            padding: 0;
        }

        .top-performer .nav-tabs {
            background-color: #eaecf4;
            border: none;
            border-radius: 10px;
            padding: 10px;
        }

        .top-performer .nav-tabs .nav-link {
            border: none;
            border-radius: 8px;
            padding: 12px 25px;
            color: #979797;
            height: auto;
            line-height: 1;
        }

        .top-performer .nav-tabs .nav-link svg {
            width: 16px;
            height: 16px;
            margin-right: 5px;
            opacity: 0.65;
        }

        .top-performer .nav-tabs .nav-item.show,
        .top-performer .nav-tabs .nav-link:HOVER,
        .top-performer .nav-tabs .nav-link.active {
            border: none;
            color: #282828;
        }

        .top-performer .nav-tabs .nav-link.active svg {
            color: #0038ba;
        }

        .top-performer .tab-pane {
            padding: 0 10px 10px 10px;
        }

        .list-row {
            padding-top: 10px;
            padding-bottom: 10px;
            margin: 0;
            font-size: 13px;
        }

        .info-list-row {
            background-color: #fff;
            border-radius: 8px;
            margin: 0;
            padding: 8px 0;
            line-height: 1;
            margin-bottom: 7px;
        }

        .list-row .col,
        .info-list-row .col {
            padding-left: 0;
            margin-top: auto;
            margin-bottom: auto;
        }

        .listIMG {
            background: #fff;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            margin-right: 10px;
            border: solid 1px #0038ba;
        }

        .list-pr-name {
            height: 19px;
            line-height: 18px;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            margin-top: auto;
            margin-bottom: auto;
        }

        .ReportList {
            border: solid 1px #dddeea;
            background-color: #fff;
            border-radius: 12px;
            font-size: 14px;
            padding: 30px 15px 15px 15px
        }

        .filter-List {
            border: solid 1px #dddeea;
            background-color: #fff;
            border-radius: 12px;
            font-size: 14px;
            padding: 5px 15px;
            margin-bottom: 30px;
        }

        .report-name-l {
            display: flex;
            padding-bottom: 7px;
            padding-top: 7px;
            border-bottom: none;
            text-decoration: none;
            color: #282828;
            width: 100%;
        }

        .report-name-l+.report-name-l {
            border-top: solid 1px #dddeea;
        }

        .report-name-l:hover {
            text-decoration: underline;
            color: #0038ba;
        }

        .report-name-l .report-icon {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            margin-right: 10px;
            background-color: #f4f5fa;
            padding: 5px;
            text-align: center;
        }

        .report-name-l .report-icon img {
            width: 22px;
            height: 22px;
            margin: auto;
        }

        .report-name-l span {
            margin-top: auto;
            margin-bottom: auto;
        }

        :root {
            --tlt-br-cnt: 50;
            --i: 0;
        }

        .progress-1 {
            width: 90px;
            height: 90px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            margin: 20px auto;
        }

        .progress-1 i {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            transform: rotate(calc(45deg + calc(calc(360deg / var(--tlt-br-cnt)) * var(--i))));
        }

        .progress-1 i::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            background: #c4c4c4;
            width: 2px;
            height: 18px;
            border-radius: 999rem;
            transform: rotate(-45deg);
            transform-origin: top;
            opacity: 0;
            animation: barCreationAnimation 100ms ease forwards;
            animation-delay: calc(var(--i) * 15ms);
        }

        .progress-1 .selected1::after {
            background: #0038ba;
        }

        .progress-1 .selected2::after {
            background: #0038ba;
        }

        .percent-text {
            font-size: 32px;
            margin: 0;
            color: #0038ba;
            font-family: 'Rationale', sans-serif !important;
            line-height: 1;
            animation: barCreationAnimation 500ms ease forwards;
            animation-delay: calc(var(--tlt-br-cnt) * 15ms / 2);
        }

        .percent-text span {
            display: block;
            font-size: 13px;
            text-align: center;
            color: #282828;
            font-family: 'proximanova-light', sans-serif !important
        }

        .Target .st-Val {
            font-size: 32px;
            display: block;
            font-family: 'Rationale', sans-serif !important;
            line-height: 1;
            margin-top: 53px;
            margin-bottom: 54px;
        }

        @keyframes barCreationAnimation {
            from {
                opacity: 0
            }

            to {
                opacity: 1
            }
        }

        .small-card {
            max-width: 217px;
            width: 217px;
            padding-right: 0;
        }

        .small-card-col-3 {
            max-width: 320px;
            width: 320px;
            padding-right: 0;
        }

        .dataTables_filter .form-control {
            box-shadow: none !important;
        }

        .download-btn {
            font-size: 13px;
            background-color: #0038ba;
            border: none;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -khtml-border-radius: 5px;
            padding: 7px 20px;
            color: #fff !important;
            margin-left: 10px;
            line-height: 1;
            margin-top: -3px;
            margin-bottom: 8px;
            letter-spacing: 1px;
        }

        .download-btn .fa {
            margin-right: 5px;
            font-size: 12px;
        }

        .overflow-x {
            overflow-x: auto;
            position: relative;
            padding-top: 0;
            padding-bottom: 0;
        }

        .overflow-x .ep-overflow {
            float: left;
            width: max-content;
            padding: 0 0 20px 0;
            min-width: 100%;
            display: inline-block;
            flex-wrap: unset;
            margin-right: 0;
            margin-left: 0;
        }

        .mCSB_horizontal.mCSB_inside>.mCSB_container {
            margin-bottom: 5px;
        }

        .btn-filter {
            background-color: transparent;
            float: right;
            color: #979797;
            padding: 4px 0;
        }

        .btn-filter img {
            width: 20px;
            height: 20px;
            float: right;
            margin-left: 8px;
            cursor: pointer
        }

        .Target .progress {
            height: 9px;
        }

        .light-blue .Target {
            background-color: #14a4ff;
            color: #fff;
        }

        .light-blue .Target .st-Val {
            margin-top: 0;
            margin-bottom: 33px;
        }

        .light-blue .Target .progress-bar {
            background: linear-gradient(90deg, #032b85 0%, #0038ba 100%) !important;
        }

        .light-blue .Target .progress {
            background-color: rgba(255, 255, 255, 0.7);
        }

        .light-blue .Target small {
            display: block;
            font-size: 20px;
        }

        .light-blue .Target .bi {
            color: #fff !important;
        }

        .mt-69 {
            margin-top: 69px;
        }
    </style>
    <div class="row mt-2 mb-3">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">Distirubutor <span> Report</span></h2>
        </div>

        <div class="col-lg-6 col-md-6 col-sm-6">
            <button class="btn btn-filter" href="#" id="productlist01">Filters <img src="images/report-filters.svg"
                    alt=""></button>
        </div>
    </div>



    <div class="overflow-x scroll-X">
        <div class="ep-overflow">
            <div class="row mr-0">

                <div class="col-md-3 small-card-col-3">
                    <div class="mtd-sale">
                        <div class="row">
                            <div class="col-6">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                    fill="currentColor" class="bi bi-bar-chart-line" viewBox="0 0 16 16">
                                    <path
                                        d="M11 2a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v12h.5a.5.5 0 0 1 0 1H.5a.5.5 0 0 1 0-1H1v-3a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v3h1V7a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v7h1V2zm1 12h2V2h-2v12zm-3 0V7H7v7h2zm-5 0v-3H2v3h2z" />
                                </svg>
                            </div>
                            <div class="col-6 text-right">
                                <div class="btn-group" role="group">
                                    <button id="btnGroupDrop1" type="button" class="btn dropdown-toggle"
                                        data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                            fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
                                            <path
                                                d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492zM5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0z" />
                                            <path
                                                d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52l-.094-.319zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115l.094-.319z" />
                                        </svg>
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                        <a class="dropdown-item" href="#">Last Month</a>
                                        <a class="dropdown-item" href="#">3 Months</a>
                                    </div>
                                </div>


                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 mtd-sale-val">
                                <strong>MTD Sales</strong>
                                <div class="divVal"><small>Rs.</small> <span> 80,00,00,000 </span>
                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                        fill="currentColor" class="bi bi-arrow-up-short" viewBox="0 0 16 16">
                                        <path fill-rule="evenodd"
                                            d="M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z" />
                                    </svg>
                                </div>

                            </div>
                            <div class="col-12 mtd-Gross-val">
                                Gross Value
                                <span>Rs. 80,00,00</span>
                            </div>
                            <div class="col-12">
                                <div class="since-month">+ 10% since last month</div>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="col-md-3 small-card light-blue">
                    <div class="Target">
                        <h2 class="st-Val"><small style="display: block;">RS. </small> 952,214.24</h2>
                        <strong class="font15">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                class="bi bi-graph-up-arrow" viewBox="0 0 16 16">
                                <path fill-rule="evenodd"
                                    d="M0 0h1v15h15v1H0V0Zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5Z">
                                </path>
                            </svg> Productivity</strong>

                        <div class="font14 mt-69">
                            Gross Value <span>65%</span>
                            <div class="progress mb-0">
                                <div class="progress-bar bg-success" role="progressbar" style="width: 65%"
                                    aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>

                    </div>
                </div>



                <div class="col-md-3 small-card">
                    <div class="Target">
                        <strong class="font15"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                fill="currentColor" class="bi bi-bullseye" viewBox="0 0 16 16">
                                <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z">
                                </path>
                                <path d="M8 13A5 5 0 1 1 8 3a5 5 0 0 1 0 10zm0 1A6 6 0 1 0 8 2a6 6 0 0 0 0 12z">
                                </path>
                                <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8z">
                                </path>
                                <path d="M9.5 8a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0z"></path>
                            </svg> Productivity</strong>
                        <h2 class="st-Val">
                            952,214.24
                        </h2>

                        <div class="font14 PT-15">
                            Gross Value <span>65%</span>
                            <div class="progress mb-0">
                                <div class="progress-bar bg-success" role="progressbar" style="width: 65%"
                                    aria-valuenow="65" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 small-card">
                    <div class="Target">
                        <strong class="font15"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                fill="currentColor" class="bi bi-graph-up-arrow" viewBox="0 0 16 16">
                                <path fill-rule="evenodd"
                                    d="M0 0h1v15h15v1H0V0Zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5Z" />
                            </svg> Productivity</strong>
                        <h2 class="st-Val">
                            952,214.24
                        </h2>

                        <div class="row PB-5">
                            <div class="col-auto">TGT:</div>
                            <div class="col Target-val">199,299 <small>CTNs</small></div>
                        </div>
                        <div class="row">
                            <div class="col-auto">SALEs:</div>
                            <div class="col Target-val">199,299 <small>CTNs</small></div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 small-card">
                    <div class="Target">
                        <strong class="font15"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                fill="currentColor" class="bi bi-speedometer2" viewBox="0 0 16 16">
                                <path
                                    d="M8 4a.5.5 0 0 1 .5.5V6a.5.5 0 0 1-1 0V4.5A.5.5 0 0 1 8 4zM3.732 5.732a.5.5 0 0 1 .707 0l.915.914a.5.5 0 1 1-.708.708l-.914-.915a.5.5 0 0 1 0-.707zM2 10a.5.5 0 0 1 .5-.5h1.586a.5.5 0 0 1 0 1H2.5A.5.5 0 0 1 2 10zm9.5 0a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 0 1H12a.5.5 0 0 1-.5-.5zm.754-4.246a.389.389 0 0 0-.527-.02L7.547 9.31a.91.91 0 1 0 1.302 1.258l3.434-4.297a.389.389 0 0 0-.029-.518z">
                                </path>
                                <path fill-rule="evenodd"
                                    d="M0 10a8 8 0 1 1 15.547 2.661c-.442 1.253-1.845 1.602-2.932 1.25C11.309 13.488 9.475 13 8 13c-1.474 0-3.31.488-4.615.911-1.087.352-2.49.003-2.932-1.25A7.988 7.988 0 0 1 0 10zm8-7a7 7 0 0 0-6.603 9.329c.203.575.923.876 1.68.63C4.397 12.533 6.358 12 8 12s3.604.532 4.923.96c.757.245 1.477-.056 1.68-.631A7 7 0 0 0 8 3z">
                                </path>
                            </svg> Productivity</strong>
                        <div class="row">
                            <div class="col-12" style="padding-top:33px;">
                                <div class="progress-1"></div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 small-card">
                    <div class="Target">
                        <strong class="font15"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                                fill="currentColor" class="bi bi-graph-up" viewBox="0 0 16 16">
                                <path fill-rule="evenodd"
                                    d="M0 0h1v15h15v1H0V0Zm14.817 3.113a.5.5 0 0 1 .07.704l-4.5 5.5a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61 4.15-5.073a.5.5 0 0 1 .704-.07Z" />
                            </svg> Productivity</strong>
                        <div class="row">
                            <div class="col-12" style="padding-top:14px; padding-bottom: 14px;">
                                <div class="progress-1"></div>
                            </div>
                        </div>
                        <div class="row kpi-row mb-0">
                            <div class="col pr-0 mt-auto mb-auto">AVG. Bill Value</div>
                            <div class="col-auto kpi-val">67%</div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 small-card-col-3">
                    <div class="Target kpi-div">
                        <h2>
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
                                class="bi bi-symmetry-vertical" viewBox="0 0 16 16">
                                <path
                                    d="M7 2.5a.5.5 0 0 0-.939-.24l-6 11A.5.5 0 0 0 .5 14h6a.5.5 0 0 0 .5-.5v-11zm2.376-.484a.5.5 0 0 1 .563.245l6 11A.5.5 0 0 1 15.5 14h-6a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .376-.484zM10 4.46V13h4.658L10 4.46z" />
                            </svg>
                            KPIs
                        </h2>

                        <div class="row kpi-row">
                            <div class="col pr-0 mt-auto mb-auto">AVG. SKUs/Order</div>
                            <div class="col-auto kpi-val">67%</div>
                        </div>
                        <div class="row kpi-row">
                            <div class="col pr-0 mt-auto mb-auto">AVG. Bill Value</div>
                            <div class="col-auto kpi-val">67%</div>
                        </div>
                        <div class="row kpi-row">
                            <div class="col pr-0 mt-auto mb-auto">AVG. Drop Size</div>
                            <div class="col-auto kpi-val">67%</div>
                        </div>
                        <div class="row kpi-row">
                            <div class="col pr-0 mt-auto mb-auto">AVG. Drop Size</div>
                            <div class="col-auto kpi-val">67%</div>
                        </div>
                        <div class="row kpi-row">
                            <div class="col pr-0 mt-auto mb-auto">AVG. Drop Size</div>
                            <div class="col-auto kpi-val">67%</div>
                        </div>
                    </div>
                </div>

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



    <div class="row PT-20">

        <div class="col-md-12">
            <div class="row">
                <div class="col-6">
                    <h2 class="tabheading"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                            fill="currentColor" class="bi bi-clipboard-data" viewBox="0 0 16 16">
                            <path
                                d="M4 11a1 1 0 1 1 2 0v1a1 1 0 1 1-2 0v-1zm6-4a1 1 0 1 1 2 0v5a1 1 0 1 1-2 0V7zM7 9a1 1 0 0 1 2 0v3a1 1 0 1 1-2 0V9z" />
                            <path
                                d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z" />
                            <path
                                d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z" />
                        </svg> Report List</h2>
                </div>
                <div class="col-6 text-right">
                    <button class="btn download-btn"><i class="fa fa-download"></i> Excel</button>
                    <button class="btn download-btn"><i class="fa fa-download"></i> PDF</button>
                </div>
            </div>



            <div class="ReportList">

                <table class="table table-hover dt-responsive nowrap" id="example" style="width:100%">
                    <thead>
                        <tr>
                            <th>Emp ID:</th>
                            <th>Name</th>
                            <th>Designation</th>
                            <th>Area</th>
                            <th>Territory</th>
                            <th>Reporting to</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>62</td>
                            <td>Arif Butt</td>
                            <td>Order Booker</td>
                            <td>Lahore</td>
                            <td>Johar Town</td>
                            <td>Muhammad Khalid</td>
                            <td>
                                <button class="btn btn-default btn-line">Edit</button>
                                <button class="btn btn-default">View Profile</button>


                            </td>
                        </tr>
                        <tr>
                            <td>62</td>
                            <td>Arif Butt</td>
                            <td>Order Booker</td>
                            <td>Lahore</td>
                            <td>Johar Town</td>
                            <td>Muhammad Khalid</td>
                            <td>
                                <button class="btn btn-default btn-line">Edit</button>
                                <button class="btn btn-default">View Profile</button>


                            </td>
                        </tr>
                        <tr>
                            <td>62</td>
                            <td>Arif Butt</td>
                            <td>Order Booker</td>
                            <td>Lahore</td>
                            <td>Johar Town</td>
                            <td>Muhammad Khalid</td>
                            <td>
                                <button class="btn btn-default btn-line">Edit</button>
                                <button class="btn btn-default">View Profile</button>


                            </td>
                        </tr>
                        <tr>
                            <td>62</td>
                            <td>Arif Butt</td>
                            <td>Order Booker</td>
                            <td>Lahore</td>
                            <td>Johar Town</td>
                            <td>Muhammad Khalid</td>
                            <td>
                                <button class="btn btn-default btn-line">Edit</button>
                                <button class="btn btn-default">View Profile</button>


                            </td>
                        </tr>
                        <tr>
                            <td>62</td>
                            <td>Arif Butt</td>
                            <td>Order Booker</td>
                            <td>Lahore</td>
                            <td>Johar Town</td>
                            <td>Muhammad Khalid</td>
                            <td>
                                <button class="btn btn-default btn-line">Edit</button>
                                <button class="btn btn-default">View Profile</button>


                            </td>
                        </tr>
                        <tr>
                            <td>62</td>
                            <td>Arif Butt</td>
                            <td>Order Booker</td>
                            <td>Lahore</td>
                            <td>Johar Town</td>
                            <td>Muhammad Khalid</td>
                            <td>
                                <button class="btn btn-default btn-line">Edit</button>
                                <button class="btn btn-default">View Profile</button>


                            </td>
                        </tr>

                    </tbody>
                </table>

            </div>
        </div>
    </div>
@endsection
@push('js')
    <script>
        $('#datepicker').datepicker({
            autoclose: true,
            todayHighlight: true,
            toggleActive: true,
            format: 'DD dd MM yyyy',
            "orientation": 'right',
        }).on('changeDate', function(ev) {
            $(this).datepicker('hide');
        });

        $("#datepicker").datepicker().datepicker("setDate", new Date());
        $('#checkDate').click(function() {
            this.checked ? $('#Date-Show').show(50) : $('#Date-Show').hide(50);
        });
        (function($) {
            $(window).on("load", function() {
                // $.mCustomScrollbar.defaults.theme="light-2"; //set "light-2" as the default theme			
                $(".scroll-X").mCustomScrollbar({
                    axis: "x",
                    theme: "inset-dark",
                    advanced: {
                        autoExpandHorizontalScroll: true
                    }
                });
            });
        })(jQuery);

        const Target = document.querySelectorAll('.progress-1');

        const barCount = 50;
        const percent1 = 50 * 75 / 100;
        const percent2 = 50 * 60 / 100;

        for (let index = 0; index < barCount; index++) {
            const className = index < percent1 ? 'selected1' : '';
            Target[0].innerHTML += `<i style="--i: ${index};" class="${className}"></i>`;
        }

        Target[0].innerHTML += `<p class="selected percent-text text1">75<small>%</small><span>ACH.</span></p>`

        for (let index = 0; index < barCount; index++) {
            const className = index < percent2 ? 'selected2' : '';
            Target[1].innerHTML += `<i style="--i: ${index};" class="${className}"></i>`;
        }

        Target[1].innerHTML += `<p class="selected percent-text text2">60<small>%</small><span>PROD.</span></p>`
    </script>
@endpush