@extends('layouts.master')
@section('content')
<script src="/js/list.js"></script>
<link rel="stylesheet" href="/css/list-pagination.css">
    <style>
        .period-select {
            width: 125px;
            float: right;
            margin-top: -3px
        }

        .custom-select {
            box-shadow: none;
            line-height: 1;
            border-radius: 0;
            font-size: 13px;
            border-color: #dedede
        }

        .top1-employee {
            position: relative;
            font-size: 16px;
            overflow: hidden;
            z-index: 5;
        }

        .employee-bg {
            position: absolute;
            right: -140px;
            bottom: 0;
            filter: grayscale(1);
        }

        .employee-bg:before {
            background-image: radial-gradient(circle at center, rgba(0, 0, 0, 0) 25%, rgba(255, 255, 255, 0.2), #fff 60%);
            position: absolute;
            width: 101%;
            height: 101%;
            left: 0;
            top: 0;
            content: '';
            z-index: 2;
        }

        .employee-bg img {
            width: 100%;
            height: 100%;
            opacity: 0.1;
            z-index: -1
        }

        .emp-pic {
            width: 84px;
            height: 84px;
            border-radius: 50%;
            background-color: #fff;
            box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
            padding: 5px;
            margin: 15px auto 25px auto
        }

        .emp-pic .pic {
            width: 75px;
            height: 75px;
            border-radius: 50%;
            border: solid 2px #0038ba
        }

        .emp-pic .badge-icon {
            position: absolute;
            width: auto;
            height: 38px;
            top: 80px;
            left: 0;
            right: 0;
            margin: auto
        }

        .emp-sno {
            font-size: 70px;
            color: #f4f4f4;
            letter-spacing: normal;
            line-height: 1;
            font-family: 'Poppins', sans-serif;
            font-weight: 800;
            position: absolute;
            left: 0;
            top: 0;
        }

        .trophy-icon img {
            width: 80px;
            height: auto;
            margin: auto;
            display: block;
            filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.6));
            margin-top: 15px;
            margin-bottom: 5px;
        }

        .icon-first img {
            width: 110px
        }

        .trophy-icon::before {
            background-color: #0038ba;
            position: absolute;
            width: 70px;
            height: 60px;
            left: 0;
            right: 0;
            bottom: -33px;
            margin: auto;
            content: '';
            z-index: 0;
            border-radius: 50%;
        }

        .emp-sale-val {
            font-size: 24px;
            text-align: center;
            padding: 5px;
            line-height: 1;
            font-family: 'Rationale', sans-serif !important;
            background-color: #0038ba;
            color: #fff
        }

        .emp-st-val {
            border: solid 1px #ededed;
            border-top: none;
            margin: 0;
            line-height: 1;
            margin-bottom: 15px;
        }

        .emp-st-val .col-6 {
            padding: 8px;
            font-size: 15px;
        }

        .emp-st-val span {
            font-family: 'Rationale', sans-serif !important;
            font-size: 18px;
            color: #0038ba
        }

        .Product-row {
            padding: 8px;
            margin-bottom: 10px;
            box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.2);
        }

        .Product-row-title {
            padding: 8px;
            letter-spacing: 0.5px;
        }

        .Product-IMG img {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            border: solid 1px #333;
            margin-right: 10px;
        }

        .Product-Name {
            line-height: 1;
        }

        ._ITEMNAME {
            height: auto;
        }

        .font-no {
            font-size: 20px;
            line-height: 1;
            font-family: 'Rationale', sans-serif !important;
        }

        .ser-text {
            font-family: 'Poppins', sans-serif;
            line-height: 1;
            font-size: 30px;
            font-weight: 800;
            color: #ececec;
            margin-bottom: -5px;
        }

        .dashboard-date {
            width: 155px;
            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;
        }

        .sub-title-list {
            font-size: 13px;
            padding-left: 20px;
            position: relative;
            display: block;
        }

        .sub-title-list:before {
            display: inline-block;
            content: "";
            height: 1px;
            width: 10px;
            margin-right: 10px;
            background-color: rgba(40, 40, 40, 0.5);
            position: absolute;
            top: 6px;
            left: 0;
        }

        .main-title {
            font-size: 14px;
            letter-spacing: normal;
            margin-bottom: 0;
            line-height: 20px;
            height: 22px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

        .pt-8 {
            padding-top: 8px !important;
        }

        .Product-row-01 {
            background-image: url(/images/rankings-01.png);
            background-repeat: no-repeat;
            background-position: center right;
            background-color: #0038ba;
            padding: 16px 10px;
            font-size: 16px;
            -ms-transform: scale(0.97);
            -webkit-transform: scale(0.97);
            transform: scale(0.97);
            color: #fff;
        }

        .Product-row-01 .main-title {
            font-size: 15px;
        }

        .Product-row-01 .font-no {
            color: #fff !important;
        }

        .Product-row-01 .ser-text div {
            opacity: 0.2;
            font-size: 40px;
        }

        .Product-row-01 .font-no {
            font-size: 24px;
            letter-spacing: normal;
        }

        .Product-row-01 .sub-title-list:before {
            background-color: #fff;
        }

        .Product-row-01 .Product-IMG img {
            width: 40px;
            height: 40px;
        }

        .badge-icon {
            width: auto;
            margin: auto;
            position: absolute;
            top: 8px;
            right: 35px;
            height: 33px;
        }
    </style>
    <div class="row mt-1 mb-1">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">Leaderboard <span></span></h2>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6">

        </div>
    </div>


    <div class="header-tabs p-10">
        <div class="row">
            <div class="col-3">
                <div class="CL-Product"><i class="fa fa-search"></i>
                    <input type="text" class="form-control" id="filter-search" placeholder="Search">
                </div>
            </div>
            {{-- <div class="col-2">
                <select class="custom-select custom-select-sm">
                    <option value="0" selected=""> Sort By Any</option>
                    <option value="asc"> Name (ASC)</option>
                    <option value="desc"> Name (DESC)</option>
                    <option value="latest">Latest to Oldest</option>
                    <option value="oldest">Oldest to Latest</option>
                </select>
            </div> --}}
            <div class="col">
                <div class="dashboard-date mt-date" style="margin:0px">
                    <input style="display:none;height: 32px;" type="text" value="" id="monthSelector" class="form-control date_filter_dashboard" placeholder="">
                    <i class="fa fa-angle-down"></i>
                </div>
            </div>

        </div>
    </div>

    <div class="row">

        <div class="col-12">

            <div class="Product-row-title">
                <div class="row">
                    <div class="col colStyle h-auto header-row-first-title" style="max-width:350px">Name</div>
                    <div class="col colStyle h-auto" style="max-width:100px"></div>
                    <div class="col colStyle h-auto" style="max-width:125px"><!--  TTL. TGT --> </div>
                    <div class="col colStyle h-auto" style="max-width:125px"><!--  NET SALES --></div>
                    <div class="col colStyle h-auto" style="max-width:125px"><!--  TGT G. VALUE --></div>
                    <div class="col colStyle h-auto" style="max-width:125px"><!--  NET. G. Sales --></div>
                    <div class="col colStyle h-auto" style="max-width:120px; text-align:right">Achievement</div>
                </div>
            </div>

            <div class="loader-sell360 tblLoader">
                <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="trendingthumb">
                <div class="row list trending-all-records m-0">
                </div>
                <div class="ProductPageNav text-center">
                    <div class="ProductPageNav text-center">
                        <ul class="justify-content-center pagination"></ul>
                    </div>
                </div>
            </span>
        </div>
    </div>
@endsection
@push('js')
    <script src="{{ url('/js/custom/leaderboard/leaderboard-detail.js') }}"></script>
@endpush