@extends('layouts.master')
@section('data-sidebar')
<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: 5px 8px;
        margin-bottom: -1px;
        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: 35px;
        height: 35px;
        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 id="product-cl-sec">
    <a href="#" id="pl-close" class="close-btn-pl"></a>
    <div class="pro-header-text">Employee <span>Detail</span></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 class="col-12">
                                <div id="floating-label" class="card p-20 top_border mb-3">
                                    <div class="row">
                                        <div class="col-12 PB-20">
                                            <h2 class="_head03">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 ttl_execution_emp_booking"><small>Rs.</small>
                                                                    --</span>
                                                            </div>
                                                        </div>
                                                        <div class="col-6 pr-0">
                                                            <div class="col ex-avg-booking ">Total Sale
                                                                <span class="avg-val ttl_execution_emp_sale"><small>Rs.</small>
                                                                    --</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

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

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

                                            </div>

                                        </div>

                                        <div class="col-12">
                                            <h2 class="_head03">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 emp_booked_orders_rev"><small>Rs.</small> --</span>
                                                            </div>
                                                        </div>
                                                        <div class="col-6 pr-0">
                                                            <div class="col ex-avg-booking">Delivered Orders
                                                                <span class="avg-val emp_executed_orders_rev"><small>Rs.</small> --</span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>

                                                <div class="cancellation">
                                                    Cancelled Orders <span class="emp_cancel_orders">--</span>
                                                </div>
                                            </div>

                                            <h2 class="_head03">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 class='emp_cancel_units'>--</span>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="_cl-bottom">
        <button id="pl-close" type="submit" class="btn btn-cancel mr-2">Close</button>
    </div>
</div>
@endsection

@section('content')
<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 - Distributor 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_distributor_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-4">
                            <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 class="dist_detail_cancellation">--<small></small></span>
                                </div>
                            </div>
                        </div>

                        <div class="col-4">
                            <div class="row top-units-list pt-0 units_div_detail_dis">
                            </div>
                        </div>

                        <div class="col-4" style="border-left: solid 1px #f3f3f3;">
                            <h2 class="card-heading">Payment <span>Trends</span></h2>
                            <div class="row keytrend-lr">
                                <div class="col-12 pr-0"><strong>Total Cash Collected</strong>
                                    <span><small>Rs.</small> 25,000,000</span></div>
                                <div class="col-12 pr-0"><strong>Total Cheque Payments</strong>
                                    <span><small>Rs.</small> 25,000,000</span></div>
                                <div class="col-12 pr-0"><strong>Total Credit Given</strong>
                                    <span><small>Rs.</small> 25,000,000</span></div>
                                <div class="col-12 pr-0"><strong>AVG. Route Expense</strong>
                                    <span><small>Rs.</small> 25,000,000</span></div>
                                <div class="col-12 pr-0"><strong>Market Returns</strong>
                                    <span><small>Rs.</small> 25,000,000</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="col-md-12">
        <div class="card ts-overview PB-15 mh-100" style="min-height: 100%; margin-bottom:0">
            <h2 class="card-heading">Employees <span>List</span></h2>
            <div class="col-12 p-0">
                <div class="Product-row-title">
                    <div class="row">
                        <div class="col colStyle h-auto" style="max-width:400px">Employee Name</div>
                        <div class="col colStyle h-auto" style="max-width:160px"></div>
                        <div class="col colStyle h-auto" style="max-width:190px">Total Sales</div>
                        <div class="col colStyle h-auto" style="max-width:130px">Execution</div>
                        <div class="col colStyle h-auto" style="max-width:110px">Action</div>
                    </div>
                </div>

                <div class="dis_detail_emp_list">
                    {{-- <div class="Product-row set-h-progressRow">
                        <div class="row">
    
                            <div class="col _ITEMNAME" style="max-width:400px;font-size:14px;">
                                <div class="Product-IMG"><img src="images/employee.jpg" alt=""></div>
                                <div class="Product-Name PT-5">Usama Shahid Khan</div>
                                <img style="width:24px; height: 24px; position: absolute; right: 0; top:7px"
                                    src="images/badge-icon.svg" alt="">
                            </div>
                            <div class="col colStyle h-auto" style="max-width:160px">
                                <div class="col colStyle ser-text" style="max-width:125px">
                                    <div>01</div>
                                </div>
                            </div>
                            <div class="col colStyle font-no" style="max-width:190px">
                                <div class="pt-10"><small>Rs.</small>2,000,000</div>
                            </div>
                            <div class="col colStyle font-no" style="max-width:130px">
                                <div>
                                    <div class="total-progress sm-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></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col colStyle" style="max-width:140px">
                                <div class="pt-10">
                                    <button id="productlist01" class="btn btn-default btn-line smBTN">View
                                        Detail</button></div>
                            </div>
                        </div>
                    </div> --}}
                </div>
            </div>
        </div>
    </div>
</div>
@endsection