@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-dist {
	margin: 0;
}

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

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

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

#table-dist 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-dist .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">Booking vs Execution<span>  Report</span></h2>
    </div>
</div>
{{-- <div class="row" >
    <div class="col-lg-12">
        <div class="header-tabs">
            <div class="row">
                <div class="col">
                    <h2 class="heading-ht">Retail Sales</h2>
                    <!-- SD Sales -->
                </div>

                <div class="col-auto pl-0">
                    <div class="dashboard-date">
                        <input type="text" id="datepicker" class="form-control" placeholder="">
                        <i class="fa fa-angle-down"></i>
                    </div>
                </div>

            </div>

        </div>
    </div>
</div> --}}
<div class="row">
    <div class="col-lg-12">
        <div class="header-tabs">
            <div class="Product-Filter">
                <div class="row">
                    <div class="col-12">
                        <div class="CL-Product" ><i class="fa fa-calendar-alt"></i>
                            <input type="text" class="form-control" placeholder="Start Date" style="width: 100%; height: 35px" name="dateFrom" id="dateFrom">
                        </div>
                        <div class="CL-Product" ><i class="fa fa-calendar-alt"></i>
                            <input type="text" class="form-control" placeholder="End Date" style="width: 100%; height: 35px" name="dateTo" id="dateTo">
                        </div>
                        <button class="btn btn-primary m-0" style="padding: 5px 13px" id="posButton">Report</button>
                    </div>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>
    </div>
</div>
<div class="row stats-div" style="display: none">
    <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="ttl_net_sales_val" style="font-size: 36px;color: #0038ba;">00,000</span></div>
                        </div>
                        <div class="col unit-v">Cartons<span class="ttl_net_sales_ctn">00,000 <small>CTNS</small></span></div>
                    </div>
                </div>
                <div class="col-5">
                    <div class="row m-0">
                        <div class="col-6 total-val border-bottom"><span class="ttl_booking_val">00,000</span> TTL. Booking</div>
                        <div class="col-6 total-val border-left border-bottom"><span class="ttl_sp_co_val">00,000</span> TTL. Spot/Counter Sales</div>
                        <div class="col-6 total-val pb-0"><span class="ttl_pending_val">00,000</span>Pending Sales</div>
                        <div class="col-6 total-val  pb-0 border-left"><span class="ttl_execution">0%</span> Execution</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <h2 class="_head01 text-uppercase mb-20">Distributors <span>Sales Analysis</span></h2>
            </div>
        </div>
        <div class="card mb-30 table-body">
            
        </div>
    </div>
</div>
@endsection
@push('scripts')
<script>
    $('#dateFrom').datepicker({
            format: 'yyyy-mm-dd',
            viewMode: "days",
            minViewMode: "days"
        });

        $('#dateTo').datepicker({
            format: 'yyyy-mm-dd',
            viewMode: "days",
            minViewMode: "days"
        });
	
</script>
@endpush