@extends('layouts.master')
@section('content')
    <link rel="stylesheet" href="/css/product.css">
    <style>
        .emp-tr strong {
            width: 130px;
        }

        .total-vals {
            margin-top: 15px
        }

        .total-vals .col {
            padding: 15px 6px 8px 8px;
        }

        .total-sale .total-amount {
            line-height: 1;
            padding: 0
        }

        .total-vals span {
            font-size: 22px;
            padding-bottom: 6px;
            padding-top: 3px
        }

        .total-progress {
            padding: 0px;
            margin-top: -25px;
        }

        .top-product-sc {
            height: 370px
        }

        .top-product-search {
            position: absolute;
            float: none;
            margin: 0;
            top: 3px;
            right: 15px;
        }

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

        .month-show {
            font-size: 20px;
            text-align: right;
            line-height: 1;
            font-family: 'Rationale', sans-serif !important;
        }


        .Product-row {
            padding: 8px;
            margin-bottom: 0px;
            box-shadow: 0px 0px 2px 0px rgb(0, 0, 0, 0.2);
        }

        .Product-row-title {
            padding: 8px;
            letter-spacing: 0.5px;
        }

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

        .smBTN {
            margin: 0 !important;
        }

        .CL-Product .fa {
            top: 16px;
        }
    </style>
    <div class="row mt-1 mb-0">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">Distributor <span>Sales Detail</span></h2>
        </div>

        <div class="col-lg-6 col-md-6 col-sm-6">
            <div class="dashboard-date mr-0" style="margin-top:-10px">
                <input type="text" id="datepicker" class="form-control date_filter_trending_dist_daily" placeholder="" autocomplete="off">
                <i class="fa fa-angle-down"></i>
            </div>
        </div>

    </div>

    <div class="row">
        <div class="col-md-12 PT-10">
            <div class="row">
                <div class="col-5">
                    <div class="card top1-employee pb-0 mb-30">
                        <h2 class="card-heading distributor_name">Loading...</h2>
                        <div class="row emp-info">
                            <div class="col-12 pt-5">
                                <p><strong style="width:130px;">Distributor ID: </strong><span class="distributor_id">Loading...</span></p>
                                <p><strong style="width:130px;">Distributor Type: </strong><span class="distributor_type">Loading...</span></p>
                                <p><strong style="width:130px;">Parent Distributor:</strong><span class="parent_distributor">Loading...</span></p>
                            </div>
                            <div class="col-12">
                                <hr style="margin-top:16px; margin-bottom: 16px;">
                            </div>
                            <style>
                                .emp-tr span {
                                    display: inline-block;
                                }
                            </style>
                            <div class="col-12 emp-tr mb-0 pt-0 pb-15"> 
                                <p><strong style="width:130px;">Region: </strong><span class="region">Loading...</span></span>
                                <p><strong style="width:130px;">Area/Zone: </strong><span class="area">Loading...</span></p>
                                <p><strong style="width:130px;">Territory: </strong><span class="territory">Loading...</span></p>
                                <p><strong style="width:130px;">Town/City: </strong><span class="town_city">Loading...</span></p>
                            </div>
                        </div>
                        <!--
    <div class="total-stime p-0"><img class="time-icon" src="images/clock-icon.svg" alt="">
    <h2 class="card-heading font18">AVG. Shift <span> Duration/Day</span></h2>
    <div class="total-time mb-10">6 <small>HRS</small> 40 <small>MINS</small></div>
     
    <div class="row time-s" style="margin-left:-15px; margin-right:-15px; letter-spacing: normal">
    <div class="col" style="padding-top:14px;padding-bottom:14px; font-size:12px">Active Days<span>22</span></div>
    <div class="col bggray" style="padding-top:14px;padding-bottom:14px; font-size:12px">AVG. Market Time <span>05.11.32 PM</span></div>
    <div class="col" style="padding-top:14px;padding-bottom:14px; font-size:12px">AVG. Time/Shop<span>11.22.12 AM</span></div>
    <div class="col bggray" style="padding-top:14px;padding-bottom:14px; font-size:12px">AVG. Time Travel<span>11.22.12 AM</span></div>
    </div>
     
    </div>
    -->


                    </div>
                </div>


                <div class="col-7">
                    <div class="card total-sale p-15">
                        <h2 class="card-heading mb-5 ml-5">TTL. <span>Booking</span></h2>
                        <div class="row m-0">
                            <div class="col-8 position-relative pl-5">
                                <div class="total-amount mb-10 total_booking" style="font-size:32px">Loading...</div>
                                <strong class="font18">TTL. Units</strong>
                                <div class="total-amount total_units" style="font-size:28px">Loading...
                                </div>
                            </div>

                            <div class="col-4">
                                <div class="total-progress">
                                    <div class="progress mx-auto bookingExecProgress" 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">
                                                </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!--
        <div class="col-4 unit-v pl-0 PT-15">Cartons<span>999,999 <small>CTNS</small></span></div>
        <div class="col-4 unit-v pl-0 PT-15">Dozens<span>999,999 <small>DZNS</small></span></div>
        <div class="col-4 unit-v pl-0 PT-15">Half Dozens<span>999,999 <small>HDZNS</small></span></div>
        
    -->
                        </div>

                        <div class="row total-vals border-right-0">
                            <div class="col font13"><span class="planned_outlets">Loading...</span>Planned Outlets</div>
                            <div class="col bg-shade font13"><span class="visited_outlets">Loading...</span>Visited Outlets</div>
                            <div class="col font13"><span class="productive_outlets">Loading...</span>Productive Outlets</div>
                            <div class="col bg-shade font13"><span class="total_orders">Loading...</span>Total Orders</div>
                        </div>
                    </div>
                </div>



                <div class="col-5 mb-30">
                    <div class="card mh-100 pb-0">
                        <h2 class="card-heading">Key <span>Trends</span></h2>
                        <div class="row keytrend-lr">
                            <div class="col-12"><strong>AVG. SKU/Order</strong> <span class="avg_sku_per_order">Loading...</span></div>
                            <div class="col-12"><strong>AVG. Drop Size</strong> <span class="avg_drop_size">Loading...</span></div>
                            <div class="col-12"><strong>AVG. Order Value</strong> <span class="avg_order_value">Loading...</span>
                            </div>
                            <div class="col-12"><strong>Active SRs</strong>
                                <span class="total_active_srs">Loading...</span>
                            </div>
                            <div class="col-12"><strong>AVG. Time/Shop</strong> <span class="avg-time-shop"> Loading...</span></div>
                            <div class="col-12"><strong>AVG. Market Hours</strong> <span class="avg-market-hrs">Loading...</span></div>
                            <div class="col-12 border-0"><strong>Deviation</strong>
                                <span class="deviation">Loading...</span>
                            </div>

                        </div>
                    </div>
                </div>

                <div class="col-7 mb-30">
                    <div class="card mh-100">
                        <h2 class="card-heading">Top <span>Products</span></h2>
                        <div class="CL-Product top-product-search"><i class="fa fa-search"></i>
                            <input type="text" class="form-control top-product-search-input" id="" placeholder="Search">
                        </div>
                        <div class="top-product-sc">
                            <div class="loader-sell360 tblLoaderProducts">
                                <div class="loader"> <span class="box-icon"></span> <span class="box-icon"></span>
                                    <div class="loader-img"> <img src="/images/sell-360-logo.svg" alt=""> </div>
                                    <span class="txt"><span></span> LOADING...</span> 
                                </div>
                            </div>
                            <div class="row top-products-row">
                                
                            </div>
                        </div>
                    </div>
                </div>


                <div class="col-12">
                    <div class="card mb-30">
                        <div class="row">
                            <div class="col-12">
                                <h2 class="card-heading">SR <span>List</span></h2>
                            </div>
                            <div class="col-12 p-0">
                                <div class="Product-row-title">
                                    <div class="row">
                                        <div class="col colStyle h-auto" style="max-width:290px">Employee Name</div>
                                        <div class="col colStyle h-auto" style="max-width:145px">Planned Shops</div>
                                        <div class="col colStyle h-auto" style="max-width:135px">Unique Visits</div>
                                        <div class="col colStyle h-auto" style="max-width:167px">Productive Shops</div>
                                        <div class="col colStyle h-auto" style="max-width:150px">TTL. Booking</div>
                                        <div class="col colStyle h-auto" style="max-width:135px">Productivity</div>
                                        <div class="col colStyle h-auto" style="max-width:115px">Action</div>
                                    </div>
                                </div>
                                <div class="loader-sell360 tblLoaderEmployees">
                                    <div class="loader"> <span class="box-icon"></span> <span class="box-icon"></span>
                                        <div class="loader-img"> <img src="/images/sell-360-logo.svg" alt=""> </div>
                                        <span class="txt"><span></span> LOADING...</span> 
                                    </div>
                                </div>
                                <span class="employee_records">

                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@push('js')
    <script src="{{url('/js/custom/daily-dashboard/daily-trending-distributor-detail.js')}}"></script>
@endpush