@extends('layouts.master')
@section('content')
<style>
    .cancellation {
        font-size: 14px;
        line-height: 1;
        background-color: #f3f3f3;
        margin: 5px 15px 0px 15px;
        width: 100%;
        padding: 10px 10px 5px 10px;
    }

    .cancellation span {
        font-size: 20px;
        float: right;
        margin-top: -4px;
        font-family: 'Rationale', sans-serif !important;
    }

    .top-units-list {
        color: #5f5f5f;
        height: 100%;
        padding-top: 10px;
        padding-right: 15px;
    }

    .head-font {
        font-size: 16px
    }

    .top-units-list .font-digit {
        font-size: 16px;
        color: #282828
    }

    .keytrend-lr {
        font-size: 16px;
    }

    .keytrend-lr span {
        margin-top: 0;
    }

    .keytrend-lr .col-12 {
        border-bottom: solid 1px #eaeaea;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .divisional-reports h4 {
        font-size: 18px
    }

    .dis-vs-value span {
        font-size: 20px
    }

    .dis-vs-value2 {
        font-size: 14px;
        letter-spacing: normal;
        color: #747674;
        line-height: 1
    }

    .dis-vs-value2 span {
        color: #0038ba;
        font-size: 17px;
        font-family: 'Rationale', sans-serif !important;
    }

    .val-row {
        border-bottom: solid 1px #e6e6e6;
        margin-bottom: 5px;
        padding-bottom: 5px;
        margin-left: -10px;
        margin-right: -10px;
    }

    .val-row-list {
        border-bottom: solid 1px #e6e6e6;
        padding-bottom: 8px;
        padding-top: 8px
    }

    .pt-val {
        font-size: 13px;
        line-height: 1;
        color: #939393
    }

    .pt-val span {
        font-size: 16px;
        color: #282828;
        font-family: 'Rationale', sans-serif !important;
    }

    .top-pro-lr {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .top-pro-lr img {
        height: 49px;
        width: 49px;
        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    }

    .top-pro-lr .progressValue {
        font-size: 20px;
    }

    .divisional-reports .progress {
        margin-top: 7px;
    }

    ._report-Head {
        padding-top: 0;
        padding-bottom: 0;
        width: auto;
        background-color: #fff;
        height: 44px;
        margin: 0;
    }

    ._report-Head .nav-pills .nav-link {
        font-size: 16px;
        padding: 5px 25px;
    }

    .viewallbtn {
        font-size: 13px;
        letter-spacing: 1px;
        padding-left: 18px;
        padding-right: 18px;
        margin-top: 30px;
    }

    .top-pr-list .progress {
        margin-top: 4px;
    }

    .tab-content .val-row-list {
        padding: 15px 15px
    }

    .top-reg-info {
        background-color: #f3f3f3;
        padding: 10px 15px;
        margin-top: 5px;
        margin-bottom: 20px;
    }

    .top-reg-info .card-heading {
        text-transform: none;
        margin-bottom: 0;
        font-size: 14px;
    }

    .card-heading span {
        font-family: 'proximanova-light', sans-serif !important;
        font-weight: normal;
    }

    .top-reg-info .card-heading:before {
        display: none
    }

    .divisional-reports {
        padding: 20px;
        font-size: 13px;
        letter-spacing: 1px;
        margin-bottom: 20px;
    }

    .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: 40px;
        height: 40px;
        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;
    }

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

    .sm-progress {
        margin-bottom: -11px;
        margin-top: -2px;
        width: 50px;
        margin-left: -7px;
    }

    .sm-progress .progress {
        width: 38px;
        height: 38px;
    }

    .sm-progress .progress .progress-value .digitVal {
        font-size: 14px;
    }

    .sm-progress .progress .progress-bar {
        border-width: 3px;
    }

    .sm-progress .progress::after {
        border-width: 3px;
    }

    .ser-text {
        font-size: 38px
    }

    .top-units-list .progressValue {
        margin-top: 5px
    }

    .top-units-list .progress {
        margin-bottom: 5px;
    }

</style>

<div class="row mt-1 mb-0">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <h2 class="_head01">Daily <span>Execution Report - Employee Detail</span></h2>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6">
        <div class="dashboard-date" style="margin-top:-10px">
            <input type="text" id="" class="form-control execution_emp_detail_filter" placeholder="">
            <i class="fa fa-angle-down"></i>
        </div>
    </div>
</div>

<div class="row">

    <div class="col-12 PT-10">
        <div class="card divisional-reports pt-0">
            <div class="row">

                <div class="col-12 top-reg-info">
                    <div class="row">
                        <div class="col-4">
                            <h2 class="card-heading">Distributor: <span>Habib Traders</span></h2>
                        </div>
                        <div class="col-4 text-center">
                            <h2 class="card-heading">Region: <span>Karachi</span></h2>
                        </div>
                        <div class="col-4 text-right">
                            <h2 class="card-heading">ASM/TSM: <span> Syed Danish Hussain</span></h2>
                        </div>
                    </div>
                </div>

                <div class="col-12">

                    <div class="row mr-0">
                        <div class="col-6">
                            <h2 class="card-heading">BOOKING VS <span>EXECUTION</span></h2>
                            <div class="row">
                                <div class="col-12">
                                    <div class="row">
                                        <div class="col-6 pr-0">
                                            <div class="col ex-avg-booking">Total Booking
                                                <span class="avg-val"><small>Rs.</small> 2,472,888</span>
                                            </div>
                                        </div>
                                        <div class="col-6 pr-0">
                                            <div class="col ex-avg-booking">Total Sale
                                                <span class="avg-val"><small>Rs.</small> 2,472,888</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12 mt-20 PT-5">
                                    <div class="total-progress">
                                        <div class="progress mx-auto" data-value="70"><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">70<small>%</small><span>Execution</span></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="cancellation">
                                    Cancellation <span>30<small>%</small></span>
                                </div>

                            </div>

                        </div>

                        <div class="col-6" style="border-left: solid 1px #f3f3f3">
                            <h2 class="card-heading">Orders<span></span></h2>
                            <div class="row mb-30">
                                <div class="col-12">
                                    <div class="row">
                                        <div class="col-6 pr-0">
                                            <div class="col ex-avg-booking">Booked Orders
                                                <span class="avg-val"><small>Rs.</small> 64</span>
                                            </div>
                                        </div>
                                        <div class="col-6 pr-0">
                                            <div class="col ex-avg-booking">Delivered Orders
                                                <span class="avg-val"><small>Rs.</small> 5</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="cancellation">
                                    Cancelled Orders <span>5</span>
                                </div>
                            </div>

                            <h2 class="card-heading">Units<span></span></h2>
                            <div class="row">
                                <div class="col-12">
                                    <div class="row">
                                        <div class="col-6 pr-0">
                                            <div class="col ex-avg-booking">Booked Units
                                                <span class="avg-val">45000</span>
                                            </div>
                                        </div>
                                        <div class="col-6 pr-0">
                                            <div class="col ex-avg-booking">Delivered Units
                                                <span class="avg-val">41000</span>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="cancellation">
                                    Cancelled Units <span>460</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection