@extends('layouts.master')
@section('content')
<style>
    .Product-Filter .btn-primary {
        margin: 0px;
        letter-spacing: 1px;
        float: left;
        box-shadow: none
    }
    .Product-Filter {
        background-color: #f3f2f2;
        padding: 10px 15px 9px 15px;
        box-shadow: 0px 0px 20px 0px rgb(0 0 0 / 20%);
        margin-bottom: 15px;
        border-bottom: solid 2px #0038ba;
    }
    .CL-Product {
        width: 230px;
        position: relative;
        float: left;
        padding-right: 15px;
        padding-top: 0px;
        margin-left:0px
    }
    .CL-Product .fa {
        top: 9px;
    }
.heading-ht {
    font-size: 18px;
    padding-left: 20px;
    padding-top: 13px;
    padding-bottom: 11px;
    margin-bottom: 0;
    position: relative;
}
.card-heading:before, .heading-ht::before {
    background: #0038ba;
    position: absolute;
    width: 2px;
    height: 18px;
    content: '';
    left: 0;
    top: 12px;
}
.total-sale .total-amount {
    font-size: 36px;
    color: #0038ba;
    padding: 8px 0 8px 0;
}
.total-val span {
    color: #282828;
    margin-bottom: 5px;
}
#table-ob {
	margin: 0;
}

#table-ob th {
	font-size: 12px;
	text-align: left !important;
	font-family: proximanova-semibold, sans-serif !important; color: #282828;
    background-color: #f6f6f6;
    line-height: 1;
}

#table-ob td {
	padding: 8px 8px;
    color: #282828;
    font-size: 13px;
    line-height: 1;
}
table.dataTable.nowrap td {
    white-space: nowrap;
}

#table-ob .font-no {
	text-align: left;
	font-size: 11px;
	font-weight: normal;
    letter-spacing: normal;
}

#table-ob tfoot th {
	border-top: solid 1px #282828; background-color: #f6f6f6;
}
.retailerTable .table td, .table th {
    padding: 6px 8px;
}
.dt-buttons .dt-button , .dt-buttons .dt-button:hover{
    background: linear-gradient(90deg, #1e54d3 0%, #0038ba 100%) !important;
    border: none !important;
    color: #fff !important;
    outline: none !important;
    padding: 5px 10px !important;
    line-height: 1 !important;
    font-size: 12px !important;
    letter-spacing: 1px
}
#table-ob .d-font{
    font-family: 'Rationale', sans-serif !important;
    font-size: 16px;
    letter-spacing: normal;
}
</style>
<div class="row mt-1 mb-10">
    <div class="col-lg-6 col-md-6 col-sm-6">
        <h2 class="_head01 text-uppercase dist_name">Loading...</h2>
    </div>
</div>
<div class="row">
    <div class="col-12">
        <div class="card total-sale mb-30 p-20">
            <div class="row">
                <div class="col-7">
                    <div class="row">
                        <div class="col-12 position-relative"
                            style="background-image: url(/images/kpi-achive-img.jpg); background-position:bottom right; background-repeat:no-repeat">
                            <h2 class="card-heading">Net <span>Sales</span></h2>
                            <div class="total-amount" style="border-bottom:solid 1px #e1e1e1; line-height: 1;"><span>Rs.</span>
                                <span class="dist_ttl_net_sales_val" style="font-size: 36px;color: #0038ba;">Loading...</span></div>
                        </div>
                        <div class="col unit-v">Cartons<span class="dist_ttl_net_sales_ctn">Loading...</span></div>
                    </div>
                </div>
                <div class="col-5">
                    <div class="row m-0">
                        <div class="col-6 total-val border-bottom"><span class="dist_ttl_booking_val">Loading...</span> TTL. Booking</div>
                        <div class="col-6 total-val border-left border-bottom"><span class="dist_ttl_sp_co_val">Loading...</span> TTL. Spot/Counter Sales</div>
                        <div class="col-6 total-val pb-0"><span class="dist_ttl_pending_val">Loading...</span>Pending Sales</div>
                        <div class="col-6 total-val  pb-0 border-left"><span class="dist_ttl_execution">Loading...</span> Execution</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <h2 class="_head01 text-uppercase mb-20">Order Bookers <span>Sales Analysis</span></h2>
            </div>
        </div>
        <div class="card mb-30 ob-table-div">
            <div class="loader-sell360 tblLoader" style="height:300px !important;z-index:950">
            <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>
    </div>
</div>
@endsection
{{-- @push('scripts')
    <script>
    $(document).ready(function(){
        $('#table-ob').DataTable({
            "bSort"     : false,
            "bPaginate" : false,
            scrollX     : true,
            scrollY     : '400px',
            scrollCollapse: true,
        })
    })
    </script>
@endpush --}}