@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: 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: 32px;
        height: 32px;
        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 - Region 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_region_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-6">
                            <h2 class="card-heading">Region: <span> Lahore Region</span></h2>
                        </div>
                        <div class="col-6 text-right">
                            <h2 class="card-heading">RSM: <span> Utba Aziz Khan</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="region_detail_cancellation">--</span>
                                </div>

                            </div>

                        </div>

                        <div class="col-4">

                            <div class="row top-units-list pt-0 units_div_detail">

                                {{-- <div class="col-12">
                                    <span class="head-font"><strong>Cartons</strong><span
                                            class="progressValue">83.84%</span></span>
                                    <div class="progress">
                                        <div class="progress-bar" aria-valuenow="45" aria-valuemin="0"
                                            aria-valuemax="100" style="width: 45%" role="progressbar">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6 pr-0 font14">Booked: <span class="font-digit">42,540
                                                <small>CTNS</small></span>
                                        </div>
                                        <div class="col-6 pl-0 font14 text-right">Executed: <span
                                                class="font-digit">42,540 <small>CTNS</small></span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <span class="head-font"><strong>Dozens</strong><span
                                            class="progressValue">83.84%</span></span>
                                    <div class="progress">
                                        <div class="progress-bar" aria-valuenow="45" aria-valuemin="0"
                                            aria-valuemax="100" style="width: 45%" role="progressbar">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6 pr-0 font14">Booked: <span class="font-digit">42,540
                                                <small>CTNS</small></span>
                                        </div>
                                        <div class="col-6 pl-0 font14 text-right">Executed: <span
                                                class="font-digit">42,540 <small>CTNS</small></span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <span class="head-font"><strong>Half Dozens</strong><span
                                            class="progressValue">83.84%</span></span>
                                    <div class="progress">
                                        <div class="progress-bar" aria-valuenow="45" aria-valuemin="0"
                                            aria-valuemax="100" style="width: 45%" role="progressbar">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6 pr-0 font14">Booked: <span class="font-digit">42,540
                                                <small>CTNS</small></span>
                                        </div>
                                        <div class="col-6 pl-0 font14 text-right">Executed: <span
                                                class="font-digit">42,540 <small>CTNS</small></span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-12">
                                    <span class="head-font"><strong>Orders</strong><span
                                            class="progressValue">83.84%</span></span>
                                    <div class="progress">
                                        <div class="progress-bar" aria-valuenow="45" aria-valuemin="0"
                                            aria-valuemax="100" style="width: 45%" role="progressbar">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-6 pr-0 font14">Booked: <span class="font-digit">42,540
                                                <small>CTNS</small></span>
                                        </div>
                                        <div class="col-6 pl-0 font14 text-right">Executed: <span
                                                class="font-digit">42,540 <small>CTNS</small></span>
                                        </div>
                                    </div>
                                </div> --}}

                            </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">Top 10 <span> Distributors</span><a href="#" class="view-all">View
                    All <i class="fa fa-angle-right"></i></a></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">Distributors 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:140px">Action</div>
                    </div>
                </div>

                <div class='region_detail_distributor_list'>
                    
                </div>
            </div>
        </div>
    </div>
</div>
@endsection