@extends('layouts.master')
@section('content')
    <style>
        .Product-Filter {
            padding: 10px 12px;
            font-size: 13px;
            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
            border: none;
            background-color: #fff;
            margin-bottom: 30px;
        }

        .Product-Filter .btn-primary {
            box-shadow: none !important;
        }

        ._cust_filter {
            width: 160px;
            padding-right: 0;
            margin: 0;
        }

        .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;
        }

        .ranking-card {
            position: relative;
            box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.05);
            height: 100%;
        }

        .ranking-card-header {
            color: #fff;
            font-size: 14px;
            background: linear-gradient(0deg, #0038ba 0%, #1e54d3 100%);
        }

        .ranking-card-header .top-text {
            font-size: 14px;
            background-color: rgba(0, 0, 0, 0.1);
            padding: 8px;
            display: block;
            min-height: 30px;
            background-image: url(/images/rankings-01.png);
            background-repeat: no-repeat;
            background-position: center right;
            background-size: contain;
        }

        .ranking-card-header .card-header-info {
            font-size: 13px;
            background-image: url(/images/rankings-01.png);
            background-repeat: no-repeat;
            background-position: center right;
            background-size: auto;
            padding: 10px 15px;
            min-height: 92px;
            display: grid;
        }

        .ranking-card-header .card-header-info h2 {
            font-size: 17px;
            letter-spacing: normal;
            margin-bottom: 0;
            line-height: 22px;
            height: 23px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }

        .ranking-card-header .card-header-info .sub-title {
            font-size: 14px;
            padding-left: 30px;
            position: relative;
            opacity: 0.85;
        }

        .ranking-card-header .card-header-info .sub-title:before {
            display: inline-block;
            content: "";
            height: 1px;
            width: 17px;
            margin-right: 10px;
            background-color: rgba(255, 225, 255, 1);
            position: absolute;
            top: 6px;
            left: 0;
        }

        .sub-title-list {
            font-size: 13px;
            padding-left: 30px;
            position: relative;
            opacity: 0.90;
        }

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

        .ranking-card-header .achievement {
            font-size: 14px;
            padding: 10px;
            background-color: rgba(0, 0, 0, 0.1);
        }

        .ranking-card-header .achievement-val {
            font-size: 32px;
            line-height: 1;
            font-family: 'Rationale', sans-serif !important;
            text-align: right;
            margin-top: auto;
            margin-bottom: auto;
        }

        .ranking-card-header .achievement .line {
            width: 35%;
            border-bottom: solid 1px #fff;
            display: inline-block;
            margin: 2px 11%;
            opacity: 0.5;
        }

        .emp-pic {
            position: absolute;
            right: 15px;
            top: 10px;
        }

        .emp-pic .pic {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: #fff;
        }

        .emp-pic .product-pic {
            width: 50px;
            height: 50px;
            border-radius: 0;
            background-color: #fff;
        }

        .ranking-card-no {
            font-size: 55px;
            color: rgba(255, 255, 255, 0.10);
            letter-spacing: normal;
            line-height: 1;
            font-family: 'Poppins', sans-serif;
            font-weight: 800;
            position: absolute;
            right: 5px;
            top: 0;
        }

        .ranking-card-detail {
            border: none;
            background-color: #fff;
            padding: 0 15px;
            border-top: none;
            margin: 0;
            line-height: 1;
            margin-bottom: 0px;
            font-size: 14px;
            padding-bottom: 57px;
        }

        .ranking-card-detail .row {
            border-bottom: solid 1px #ededed;
            padding: 10px 0;
        }

        .ranking-card-detail .row .col-auto {
            text-align: right;
            font-size: 24px;
            line-height: 1;
            font-family: 'Rationale', sans-serif !important;
        }

        .form-s2 .select2-container--default .select2-selection--single .select2-selection__rendered {
            line-height: 32px;
            font-size: 13px;
        }

        .form-s2 .select2-container .select2-selection--single {
            height: 32px !important;
        }

        .form-s2 .select2-container--default .select2-selection--single .select2-selection__arrow {
            height: 32px;
            width: 25px;
        }

        .btn-outline-primary {
            border: solid 1px #dcdcdc;
            color: #282828;
            border-radius: 0;
            width: 100%;
            width: 100%;
            font-size: 14px;
        }

        .btn-outline-primary:hover,
        .btn-outline-primary:focus {
            border: solid 1px #0038ba;
            color: #fff;
            background-color: #0038ba !important;
        }

        .single-line {
            line-height: 20px;
            height: 22px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
        }
        .loader-sell360 {
            height: 268px;
        }
        .PB-25{
            padding-bottom: 25px;
        }
    </style>
    <div class="row mt-2 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 class="dashboard-date mr-0" style="margin-top:-10px">
                <input type="text" id="datepicker" class="form-control" placeholder="">
                <i class="fa fa-angle-down"></i>
            </div>
        </div> -->
    </div>

    <div class="row">

        <div class="col-lg-12">
            <div class="Product-Filter">
                <div class="row">

                    <div class="col-auto mt-auto mb-auto pr-0">View By:</div>
                    <div class="col-auto">
                        <div class="_cust_filter">
                            <div class="form-s2">
                                <select class="form-control formselect view-by" placeholder="Month Wise">
                                    <option value="1">Month Wise</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    {{-- <div class="col-auto mt-auto mb-auto p-0">View By Area:</div>
                    <div class="col-auto">
                        <div class="_cust_filter">
                            <div class="form-s2">
                                <select class="form-control formselect" placeholder="Select Region">
                                    <option>Select Area</option>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="col-auto mt-auto mb-auto p-0">View By Distributor:</div>
                    <div class="col-auto">
                        <div class="_cust_filter">
                            <div class="form-s2">
                                <select class="form-control formselect" placeholder="Select Region">
                                    <option>Select Distributor</option>
                                </select>
                            </div>
                        </div>
                    </div> --}}
                    {{-- <div class="col pl-0">
                        <button class="btn btn-primary m-0"> Search</button>
                    </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 class="clearfix"></div>
            </div>
        </div>
    </div>

    <div class="row">

        <div class="col-md-4 PB-25 RegionsAchievement">
            <div class="ranking-card">
                <div class="ranking-card-header">
                    <div class="emp-pic">
                    </div>
                    <span class="top-text">Regional Ranking</span>
                    <div class="col-12 card-header-info">
                        <div class="row">
                            <div class="col mt-auto mb-auto">
                                <h2 class="top-record-name">Loading...</h2>
                                <span class="sub-title top-record-subtitle">Loading...</span>
                            </div>
                            <div class="col-auto achievement-val top-record-achievement">
                                0<small>%</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 achievement">
                        <div class="row">
                            <div class="col-7"><strong>Region</strong></div>
                            <div class="col-5 text-right"><strong>Achievement</strong></div>
                        </div>
                    </div>
                </div>
                <div class="loader-sell360 tblLoader tblLoaderRegionsAchievement">
                    <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="ranking-card-detail all-record-without-top-rows">
                    
                </div>
            </div>
        </div>

        <div class="col-md-4 PB-25 AreasAchievement">
            <div class="ranking-card">
                <div class="ranking-card-header">
                    <div class="emp-pic">
                    </div>
                    <span class="top-text">Area/Zone Ranking</span>
                    <div class="col-12 card-header-info">
                        <div class="row">
                            <div class="col mt-auto mb-auto">
                                <h2 class="top-record-name">Loading...</h2>
                                <span class="sub-title top-record-subtitle">Loading...</span>
                            </div>
                            <div class="col-auto achievement-val top-record-achievement">
                                0<small>%</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 achievement">
                        <div class="row">
                            <div class="col-7"><strong>Area/Zone</strong></div>
                            <div class="col-5 text-right"><strong>Achievement</strong></div>
                        </div>
                    </div>
                </div>
                <div class="loader-sell360 tblLoader tblLoader tblLoaderAreasAchievement">
                    <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="ranking-card-detail all-record-without-top-rows">
                    
                </div>
            </div>
        </div>

        <div class="col-md-4 PB-25 TerritoryAchievement">
            <div class="ranking-card">
                <div class="ranking-card-header">
                    <div class="emp-pic">
                    </div>
                    <span class="top-text">Territory Ranking</span>
                    <div class="col-12 card-header-info">
                        <div class="row">
                            <div class="col mt-auto mb-auto">
                                <h2 class="top-record-name">Loading...</h2>
                                <span class="sub-title top-record-subtitle">Loading...</span>
                            </div>
                            <div class="col-auto achievement-val top-record-achievement">
                                0<small>%</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 achievement">
                        <div class="row">
                            <div class="col-7"><strong>Territory</strong></div>
                            <div class="col-5 text-right"><strong>Achievement</strong></div>
                        </div>
                    </div>
                </div>
                <div class="loader-sell360 tblLoader tblLoaderTerritoryAchievement">
                    <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="ranking-card-detail all-record-without-top-rows">
                    
                </div>
            </div>
        </div>

        <div class="col-md-4 PB-25 DistributorsAchievement">
            <div class="ranking-card">
                <div class="ranking-card-header">
                    <div class="emp-pic">
                    </div>
                    <span class="top-text">Distributor Ranking</span>
                    <div class="col-12 card-header-info">
                        <div class="row">
                            <div class="col mt-auto mb-auto">
                                <h2 class="top-record-name">Loading...</h2>
                                <span class="sub-title top-record-subtitle">Loading...</span>
                            </div>
                            <div class="col-auto achievement-val top-record-achievement">
                                0<small>%</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 achievement">
                        <div class="row">
                            <div class="col-7"><strong>Distributor</strong></div>
                            <div class="col-5 text-right"><strong>Achievement</strong></div>
                        </div>
                    </div>
                </div>

                <div class="loader-sell360 tblLoader tblLoaderDistributorsAchievement">
                    <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="ranking-card-detail all-record-without-top-rows">
                    
                </div>
            </div>
        </div>

        <div class="col-md-4 PB-25 SRSAchievement">
            <div class="ranking-card">
                <div class="ranking-card-header">
                    <div class="emp-pic"><img class="pic sr-image" src="/images/avatar.svg" alt="">
                    </div>
                    <span class="top-text">
                        <!-- Ranking text -->SR Ranking
                    </span>
                    <div class="col-12 card-header-info">
                        <div class="row">
                            <div class="col mt-auto mb-auto">
                                <h2 class="top-record-name">Loading...</h2>
                                <span class="sub-title top-record-subtitle">Loading...</span>
                            </div>
                            <div class="col-auto achievement-val top-record-achievement">
                                0<small>%</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 achievement">
                        <div class="row">
                            <div class="col-7"><strong>SR</strong></div>
                            <div class="col-5 text-right"><strong>Achievement</strong></div>
                        </div>
                    </div>
                </div>
                
                <div class="loader-sell360 tblLoader tblLoaderSRSAchievement">
                    <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="ranking-card-detail all-record-without-top-rows">
                    
                </div>
            </div>
        </div>

        <div class="col-md-4 PB-25 ProductsAchievement">
            <div class="ranking-card">
                <div class="ranking-card-header">
                    <div class="emp-pic"><img class="pic product-image" src="images/DefaultProduct.jpg" alt="">
                    </div>
                    <span class="top-text">
                        Product Ranking
                    </span>
                    <div class="col-12 card-header-info">
                        <div class="row">
                            <div class="col mt-auto mb-auto">
                                <h2 class="top-record-name">Loading...</h2>
                                <span class="sub-title top-record-subtitle">Loading...</span>
                            </div>
                            <div class="col-auto achievement-val top-record-achievement">
                                0<small>%</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 achievement">
                        <div class="row">
                            <div class="col-7"><strong>Product</strong></div>
                            <div class="col-5 text-right"><strong>Achievement</strong></div>
                        </div>
                    </div>
                </div>

                <div class="loader-sell360 tblLoader tblLoaderProductsAchievement">
                    <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="ranking-card-detail all-record-without-top-rows">
                    
                </div>
            </div>
        </div>

        <div class="col-md-4 PB-25 BrandsAchievement">
            <div class="ranking-card">
                <div class="ranking-card-header">
                    <div class="emp-pic">
                    </div>
                    <span class="top-text">
                        Brand Ranking
                    </span>
                    <div class="col-12 card-header-info">
                        <div class="row">
                            <div class="col mt-auto mb-auto">
                                <h2 class="top-record-name">Loading...</h2>
                                {{-- <span class="sub-title top-record-subtitle">Loading...</span> --}}
                            </div>
                            <div class="col-auto achievement-val top-record-achievement">
                                0<small>%</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 achievement">
                        <div class="row">
                            <div class="col-7"><strong>Brand</strong></div>
                            <div class="col-5 text-right"><strong>Achievement</strong></div>
                        </div>
                    </div>
                </div>

                <div class="loader-sell360 tblLoader tblLoaderBrandsAchievement">
                    <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="ranking-card-detail all-record-without-top-rows">
                    
                </div>
            </div>
        </div>

        <div class="col-md-4 PB-25 MainCatAchievement">
            <div class="ranking-card">
                <div class="ranking-card-header">
                    <div class="emp-pic">
                    </div>
                    <span class="top-text">
                        Main Category Ranking
                    </span>
                    <div class="col-12 card-header-info">
                        <div class="row">
                            <div class="col mt-auto mb-auto">
                                <h2 class="top-record-name">Loading...</h2>
                                {{-- <span class="sub-title top-record-subtitle">Loading...</span> --}}
                            </div>
                            <div class="col-auto achievement-val top-record-achievement">
                                0<small>%</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 achievement">
                        <div class="row">
                            <div class="col-7"><strong>Main Category</strong></div>
                            <div class="col-5 text-right"><strong>Achievement</strong></div>
                        </div>
                    </div>
                </div>

                <div class="loader-sell360 tblLoader tblLoaderMainCatAchievement">
                    <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="ranking-card-detail all-record-without-top-rows">
                    
                </div>
            </div>
        </div>

        <div class="col-md-4 PB-25 SubCatAchievement">
            <div class="ranking-card">
                <div class="ranking-card-header">
                    <div class="emp-pic">
                    </div>
                    <span class="top-text">
                        Sub Category Ranking
                    </span>
                    <div class="col-12 card-header-info">
                        <div class="row">
                            <div class="col mt-auto mb-auto">
                                <h2 class="top-record-name">Loading...</h2>
                                {{-- <span class="sub-title top-record-subtitle">Loading...</span> --}}
                            </div>
                            <div class="col-auto achievement-val top-record-achievement">
                                0<small>%</small>
                            </div>
                        </div>
                    </div>
                    <div class="col-12 achievement">
                        <div class="row">
                            <div class="col-7"><strong>Sub Category</strong></div>
                            <div class="col-5 text-right"><strong>Achievement</strong></div>
                        </div>
                    </div>
                </div>

                <div class="loader-sell360 tblLoader tblLoaderSubCatAchievement">
                    <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="ranking-card-detail all-record-without-top-rows">
                    
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script src="{{ url('/js/custom/leaderboard/leaderboard.js') }}"></script>
@endpush