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

    .Product-IMG {
        margin-bottom: -5px
    }

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

    .Product-Name {
        line-height: 1;
        padding-top: 5px
    }

    ._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;
    }
    .CL-Product{margin:0; padding-top:0;}
    .CL-Product .fa {top: 9px;}
</style>
<div class="row mt-1 mb-0">
    <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 monthPickerLbDiv dn" style="margin-top:-6px">
        <input type="text" id="monthPickerLeaderboard" value="{{ date('m/Y') }}" class="form-control" placeholder="">
            <i class="fa fa-angle-down"></i>
        </div>
        <div class="period-select">
            <select class="custom-select custom-select-sm" id="tenureFilterDD">
                <option value="today">Today</option>
                <option value="last_day">Last Day</option>
                <option value="monthly">Monthly</option>
            </select>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-12 PT-10">
        <div class="row m-0" id="topEmployeesLeaderboard">
        </div>
    </div>
    <div class="col-12 leaderboardEmployees dn">
        <div class="header-tabs p-10">
            <div class="row">
                <div class="col">
                    <div class="CL-Product"><i class="fa fa-search"></i>
                        <input type="text" class="form-control" id="" placeholder="Search">
                    </div>
                </div>
                <div class="col-auto">
                    <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>
        </div>
    </div>
    <div class="col-12 leaderboardEmployees leaderboardEmpList dn">
        <div class="Product-row-title">
            <div class="row">
                <div class="col colStyle h-auto" style="max-width:320px">Employee Name</div>
                <div class="col colStyle h-auto" style="max-width:150px"></div>
                <div class="col colStyle h-auto" style="max-width:200px">Visits</div>
                <div class="col colStyle h-auto" style="max-width:200px">Orders</div>
                <div class="col colStyle h-auto" style="max-width:240px">Orders Value</div>
            </div>
        </div>
    </div>
</div>
@endsection