@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: 7px;
            padding-bottom: 7px; border-bottom:none !important; border-top:solid 1px #ebebeb;
        }

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

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

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

        .lds-ring {
            display: inline-block;
            position: relative;
            width: 47px;
            height: 47px;
            animation: lds-ring 10s linear infinite;
        }

        .lds-ring div {
            box-sizing: border-box;
            display: block;
            position: absolute;
            width: 34px;
            height: 34px;
            margin: 6px;
            border: 6px solid #0038ba;
            border-radius: 50%;
            animation: lds-ring 1.5s cubic-bezier(.7, .1, .3, .9) infinite;
            border-color: transparent;
            border-top-color: #0038ba;
        }

        .lds-ring :nth-child(1) {
            animation-delay: -0.1s;
            opacity: 0.8;
        }

        .lds-ring :nth-child(2) {
            animation-delay: -0.2s;
            opacity: 0.6;
        }

        .lds-ring :nth-child(3) {
            animation-delay: -0.3s;
            opacity: 0.4;
        }

        .lds-ring :nth-child(4) {
            animation-delay: -0.4s;
            opacity: 0.2;
        }

        @keyframes lds-ring {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .loader-div {
            position: absolute;
            display: inline-block;
            width: 50px;
            height: 50px;
            margin: auto;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }

    </style>
    <div id="blureEffct" class="container">

        <input type="hidden" id="session" value="{{ $session }}">
        <input type="hidden" id="apiBaseURL" value="{{ $apiBaseUrl }}">

        <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 Overview</span></h2>
            </div>
            <div class="col-lg-6 col-md-6 col-sm-6">
                <!--<a href="#" id="productlist01"><img style="width:23px;height:23px;float:right;margin-top:-3px;cursor:pointer" src="images/report-filters.svg" alt=""></a>-->
                <div class="dashboard-date" 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-12 mb-20 PT-10">
                <div class="card divisional-reports" style="min-height: 287px">
                    <div id="bookinvsexecution" class="row">
                        <div class="loader-div">
                            <div class="lds-ring" aria-role="none">
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-12 mb-20">
                <div class="card divisional-reports mh-100">
                    <h2 class="card-heading">Divisional <span>Reports</span></h2>
                    <div class="row">
                        <div class="col-6 PB-15 text-right" style="border-right:solid 1px #e8e8e8">
                            <h4>{{env('DIVISION_2')?env('DIVISION_2'):'Zain'}} <span class="circle-b"></span></h4>
                        </div>
                        <div class="col-6 PB-15">
                            <h4><span class="circle-b circle-g"></span> {{env('DIVISION_1')?env('DIVISION_1'):'Shahi'}}</h4>
                        </div>


                        <div id="htmlzain" class="col-6" style="min-height: 300px">
                            <div class="loader-div">
                                <div class="lds-ring" aria-role="none">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>


                        </div>

                        <div id="htmlshahi" class="col-6" >

                            <div class="loader-div">
                                <div class="lds-ring" aria-role="none">
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                    <div></div>
                                </div>
                            </div>

                        </div>


                    </div>

                </div>

            </div>

            <div class="col-lg-6 col-md-12 mb-30-L800">
                <div class="card ts-overview" style="min-height:100%">
                    <h2 class="card-heading mb-0">Top <span>Performances </span></h2>

                    <div class="_report-Head">
                        <ul id="list_of_tabs_topPerformers" class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                            <li class="nav-item" id="first_tab_li"> </li>
                            <li class="nav-item" id="second_tab_li"> </li>
                            <li class="nav-item" id="third_tab_li"> </li>
                            <li class="nav-item" id="forth_tab_li"> </li>
                            

                        </ul>
                    </div>
                    <div class="tab-content" id="pills-tabContent">
                        <div class="tab-pane fade show active" id="distributors_tab" role="tabpanel" aria-labelledby="pills-contact-tab">
                            <div id="distributors_data" class="row" style="min-height: 400px">
                            
                                <div class="loader-div">
                                    <div class="lds-ring" aria-role="none">
                                      <div></div>
                                      <div></div>
                                      <div></div>
                                      <div></div>
                                      <div></div>
                                    </div>
                                  </div>

                            </div>
                            
                        </div>
                        <div id="regions_tab" class="tab-pane fade show "  role="tabpanel"
                            aria-labelledby="pills-home-tab"  style="min-height: 300px">
                            <div id="regionsdata" class="row">
                                
                               

                            </div>

                            <div class="col-12 text-right PT-20">
                                <a href="/daily-execution-region-list" class="view-all"><strong> Why view all VIEW ALL</strong> <i class="fa fa-angle-right"></i></a>
                            </div>

                        </div>

                        <div class="tab-pane fade" id="territories_tab"  role="tabpanel" aria-labelledby="pills-contact-tab">
                            <div id="territories_data" class="row" style="min-height: 400px">
                               

                            </div>
                            
                        </div>
                        <div class="tab-pane fade" id="areas_tab" role="tabpanel" aria-labelledby="pills-contact-tab">
                            <div id="areas_data" class="row" style="min-height: 400px">
                               

                            </div>
                            
                        </div>
                        

                    </div>





                </div>
            </div>







            <div class="col-lg-6 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> Products</span><a href="/daily-execution-product-list" class="view-all">View All <i
                                class="fa fa-angle-right"></i></a></h2>

                    <div id="topperformence" class="row">
                      
                       

                        <div class="loader-div">
                            <div class="lds-ring" aria-role="none">
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                                <div></div>
                            </div>
                        </div>
                        

                       

                        

                      
                    </div>

                </div>
            </div>

        </div>



    </div>
@endsection