@extends('layouts.master')
@section('content')
<style>
    .sell360report {
        padding-bottom: 15px
    }
    .sell360report .card {
        background-color: #fff;
        border: none;
        padding: 10px 15px;
        margin: 15px 0px;
        border-radius: 0px;
        position: relative;
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
        background-image: url(/images/bg-0123.jpg);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100%;
        height: 100px
    }
    .sell360report h2 {
        font-size: 18px;
        padding-top: 15px;
        margin-bottom: 15px;
        display: block
    }
    .sell360report h4 {
        font-size: 18px;
        padding: 0;
        margin: 0;
        color: #0038ba
    }
    .sell360report h4 span {
        color: #282828;
        font-family: 'proximanova-regular', sans-serif !important;
        position: relative;
    }
    .sell360report .digit {
        font-size: 30px;
        font-weight: normal;
        line-height: normal;
        color: #282828;
        margin-bottom: 0;
        padding-bottom: 0;
        line-height: 1;
        font-family: 'Rationale', sans-serif !important;
        position: absolute;
        bottom: 10px;
        left: 15px
    }
    .sell360report .head-font {
        font-size: 16px
    }
    .sell360report .card .cardicon {
        width: 60px;
        height: 60px;
        position: absolute;
        top: 20px;
        right: 15px;
        filter: drop-shadow(0px 0px 12px rgba(0, 0, 0, 0.2));
    }
    .action-btns {
        padding: 30px 30px 0px 30px
    }
    .action-btns .btn-primary {
        width: 100%;
        letter-spacing: 1px;
        font-size: 16px;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-bottom: 30px;
        background: linear-gradient(90deg, #fff 0%, #fff 100%);
        border-color: #e3e3e3;
        color: #282828;
    }
    .action-btns .btn-primary:hover,
    .action-btns .btn-primary:focus {
        background: linear-gradient(90deg, #1e54d3 0%, #0038ba 100%);
        color: #fff;
    }
    .action-btns .btn-primary i {
        position: absolute;
        right: 40px;
        top: 25px;
    }
    .add_button {
        letter-spacing: 1px;
        font-size: 14px;
        padding: 6px 12px;
        top: 48px;
        right: 15px;
    }
    #widget-meter {
        width: 90px;
        margin: 0 auto;
        position: absolute;
        top: -6px;
        right: 15px;
    }
    #widget-meter .needle,
    #widget-meter .needle-center {
        fill: #a6a6a6;
    }
    .label-percent {
        font-size: 22px;
        fill: #0038ba;
        padding-top: 25px;
        font-family: 'Rationale', sans-serif !important;
    }

    .sell360report {
        padding-bottom: 15px
    }
    .sell360report .card {
        background-color: #fff;
        border: none;
        padding: 10px 15px;
        margin: 15px 0px;
        border-radius: 0px;
        position: relative;
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
        background-image: url(/images/bg-0123.jpg);
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100%;
        height: 100px
    }
    .sell360report h2 {
        font-size: 18px;
        padding-top: 15px;
        margin-bottom: 15px;
        display: block
    }
    .sell360report h4 {
        font-size: 18px;
        padding: 0;
        margin: 0;
        color: #0038ba
    }
    .sell360report h4 span {
        color: #282828;
        font-family: 'proximanova-regular', sans-serif !important;
        position: relative;
    }
    .sell360report .digit {
        font-size: 30px;
        font-weight: normal;
        line-height: normal;
        color: #282828;
        margin-bottom: 0;
        padding-bottom: 0;
        line-height: 1;
        font-family: 'Rationale', sans-serif!important;
        position: absolute;
        bottom: 10px;
        left: 15px
    }
    .sell360report .head-font {
        font-size: 16px
    }
    .sell360report .card .cardicon {
        width: 60px; height: 60px;
        position: absolute;
        top: 20px;
        right: 15px; filter: drop-shadow(0px 0px 12px rgba(0,0,0,0.2));
    }
    .action-btns{padding: 30px 30px 0px 30px}
    .action-btns .btn-primary{width: 100%; letter-spacing: 1px; font-size: 16px;
        padding-top: 20px; padding-bottom: 20px; margin-bottom:30px;
        background: linear-gradient(90deg, #fff 0%, #fff 100%);
        border-color:#e3e3e3;  color: #282828;
    }
    .action-btns .btn-primary:hover, .action-btns .btn-primary:focus{
        background: linear-gradient(90deg, #1e54d3 0%, #0038ba 100%);
        color: #fff;
    }
    .action-btns .btn-primary i{ position: absolute;
        right: 40px;
        top: 25px;
    }
    .add_button{letter-spacing: 1px;
        font-size: 14px;
        padding: 6px 12px;
        top: 48px;
        right: 15px;
    }
    #widget-meter {width: 90px; margin: 0 auto; position: absolute; top: -6px; right:15px;}
    #widget-meter .needle, #widget-meter .needle-center {fill: #a6a6a6;}
    .label-percent{font-size:22px; fill:#0038ba; padding-top: 25px;font-family: 'Rationale', sans-serif!important;}

    .h_dash {
        position: relative; padding: 0;
    }

    .h_dash a {
        display: block;
        -webkit-box-shadow: 0px 0px 12px 0px rgba(79,79,79,0.3);
        -moz-box-shadow: 0px 0px 12px 0px rgba(79,79,79,0.3);
        box-shadow: 0px 0px 12px 0px rgba(79,79,79,0.3);
        border-radius: 0px;
        height: 150px; width: 100%;
        position: relative;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        background-image: url(images/dash-card-bg.png);
        background-position: left bottom; background-size: 30%; background-repeat: no-repeat;
        background-color: #fff;
        -webkit-transition: all 0.15s;
        -moz-transition: all 0.15s;
        transition: all 0.15s;s
    }
    .h_dash a::before{
        content: '';
        display: inline-block;
        width: 2px;
        height: 33px;
        background-color: #0038ba;
        position: absolute;
        bottom: 22px;
        left: 0;
    }
    .HD-title{
        color: #282828;
        font-size: 18px;
        text-decoration: none;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        text-align: left;
        position: absolute;
        bottom: 15px;
        left: 15px;
        margin: 0; font-weight: 600;
        padding: 0;padding-bottom:5px; letter-spacing: 1px
    }
    .f-light{
        font-weight: normal; font-size: 14px; display: block; font-family: 'proximanova-light', sans-serif !important; color: #787878
    }

    .h_dash a img {
        width: 50px;
        height: auto;
        display: inline-block;
        padding-top: 10px;
        padding-right: 10px;
        float: right;
    }
    .h_dash a:hover {
        -webkit-box-shadow: 0px 0px 15px 0px rgba(79,79,79,0.5);
        -moz-box-shadow: 0px 0px 15px 0px rgba(79,79,79,0.5);
        box-shadow: 0px 0px 15px 0px rgba(79,79,79,0.5);
        background-size: 150%;
        -webkit-transition: all 0.2s;
        -moz-transition: all 0.2s;
        transition: all 0.2s;
    }
    .h_dash a:hover .HD-title{ color: #0038ba;}

</style>

<style>
    .OrderLogo{ text-align: left; padding-left:0}
    .OrderLogo img{ width:auto; height: 46px}
    .OrderInfo{font-size: 14px}
    .OrderInfo span{width: 105px; float:left}
    .Order-Detail-table table td{border: solid 1px #333333; padding: 5px!important; font-size:12px}
    .Order-Detail-table table th{border: solid 1px #333333!important; background-color: #000!important; color:#fff; padding: 5px!important; font-size:12px}
    .button-list .btn-primary{font-size: 14px!important; letter-spacing: 1px}
    .button-list .btn-primary .fa{padding-right:3px}
    .ord-no{padding-top:17px; font-size:14px; text-align: right}

    ._cust_filter { width:215px; float: left; padding-right: 10px; margin-bottom: 15px;}
    .CL-Product{padding-right: 10px;}
    .btn-primary{box-shadow: none}
    .Product-Filter .form-s2 .select2-container .select2-selection--single{height: 32px !important;}
    .Product-Filter .form-s2 .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 30px;
    }
    .table ._cust_filter{width: 140px; margin: 0}
    .table ._cust_filter .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 24px; font-size: 12px;}
    .table ._cust_filter .form-s2 .select2-container .select2-selection--single{height: 25px !important;}
    .table ._cust_filter .form-s2 .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 25px;}
    .table td{padding: 5px 3px 5px 3px; line-height: 24px;}
    .table td .btn-default{padding-top: 6px; padding-bottom: 6px; margin: 0}
    .inputmonth{width: 150px;}
    .table thead th {background-color: #f6f6f6;}
    @media (max-width: 1280px){
        ._cust_filter{ width: 195px; float: left; padding-right: 10px; margin-bottom: 15px;}
    }
    @media (max-width: 1024px){
        ._cust_filter{ width: 172px; float: left; padding-right: 10px; margin-bottom: 15px;}
    }
</style>
<style>
    .card {
        box-shadow: 0px 0px 10px 0px rgb(82 63 105 / 20%);
        -webkit-box-shadow: 0px 0px 10px 0px rgb(82 63 105 / 20%);
        -moz-box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.2);
        -ms-box-shadow: 0px 0px 10px 0px rgba(82, 63, 105, 0.2);

    }
    .card-heading {
        font-size: 20px;
        text-transform: uppercase;
        letter-spacing: 1px;
        position: relative;
    }
    .card-heading span {
        font-family: 'proximanova-light', sans-serif !important;
        font-weight: normal;
    }
    .total-sale .total-amount {
        font-size: 38px; letter-spacing: normal; line-height: 1;
        color: #0038ba;
        padding: 5px 0 8px 0; font-family: 'Rationale', sans-serif!important;
    }
    .total-sale {
        padding:15px;
        font-size: 13px;
        letter-spacing: 1px;
        margin-bottom:30px;
    }
    .total-sale .total-amount span {
        color: #282828;
    }
    .unit-v {
        padding-top: 5px;
        color: #606060;
    }
    .unit-v span, .total-val span {
        font-size: 24px;
        display: block;
        line-height: 1;
        color: #282828; font-family: 'Rationale', sans-serif!important;
    }
    .card-heading:before {
        background: #0038ba;
        position: absolute;
        width: 2px;
        height: 18px;
        left: -15px;
        top: 2px;
        content: '';
    }
</style>

<div class="row _user-TS">
    <div class="col-md-12 _dashTOP">
        <img class="_user_Pimage" src="{{ Auth::user()->employee_picture ? Auth::user()->employee_picture : '/images/avatar.svg' }}" alt="">
        <h2 class="_head01">Good Afternoon, Mr. {{ (Auth::user()->employee_first_name." ".Auth::user()->employee_last_name) }}</h2>
        <p>Here’s what’s happening today.</p>
        <a href="{{route('primary-sale-reports')}}" class="btn add_button"><i class="fa fa-file-invoice"></i> View Reports</a>
    </div>
</div>
<div class="row">
    <div class="col-6">
        <div class="card total-sale">
            <div class="row">
                <div class="col-12">
                    <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 mb-20">Today's <span>Sales</span></h2>
                            <div class="row">
                                <div class="col-6 pr-0"><strong class="font14">Primary Sale</strong>
                                    <div class="total-amount" style="border-bottom:solid 1px #e1e1e1"  id="daily_executed_qty"></div>
                                </div>
                                <div class="col-6 pl-0"><strong class="font14">Sub Distribution</strong>
                                    <div class="total-amount" style="border-bottom:solid 1px #e1e1e1"  id="daily_sub_executed_qty"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col unit-v pr-0">Booked Sale<span id="daily_booked_qty"> </span></div>
                        {{--                            <div class="col unit-v pr-0"></div>--}}
                        <div class="col unit-v pr-0">Booked Sale<span id="daily_sub_booked_qty"></span></div>
                    </div>
                </div>

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

    <div class="col-6">
        <div class="card total-sale">
            <div class="row">
                <div class="col-12">
                    <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 mb-20">Monthly <span>Sale</span></h2>
                            <div class="row">
                                <div class="col-6 pr-0"><strong class="font14">Primary Sale</strong>
                                    <div class="total-amount" style="border-bottom:solid 1px #e1e1e1" id="monthly_executed_qty"></div>
                                </div>
                                <div class="col-6 pl-0"><strong class="font14">Sub Distribution</strong>
                                    <div class="total-amount" style="border-bottom:solid 1px #e1e1e1" id="monthly_sub_executed_qty"></div>
                                </div>
                            </div>
                        </div>
                        <div class="col unit-v pr-0">Booked Sale<span id="monthly_booked_qty"> </span></div>
                        {{--                            <div class="col unit-v pr-0"></div>--}}
                        <div class="col unit-v pr-0">Booked Sale<span id="monthly_sub_booked_qty"></span></div>
                    </div>
                </div>

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

{{--<div class="sell360report">--}}
    {{--    <div class="row">--}}
        {{--        <div class="col-md-4">--}}
            {{--            <div class="card mt-0">--}}
                {{--                <img class="cardicon" src="/images/today-order.svg" alt="">--}}
                {{--                <h4>Today's <span>Booking</span></h4>--}}
                {{--                <h2 class="digit"><small>Rs.</small> {{ number_format($stat->today_booking) }}</h2>--}}
                {{--            </div>--}}
            {{--        </div>--}}
        {{--        <div class="col-md-4">--}}
            {{--            <div class="card mt-0">--}}
                {{--                <div id="widget-meter" style="display: none"></div>--}}
                {{--                <h4>Yesterday's <span>Execution</span></h4>--}}
                {{--                <h2 class="digit"><small>Rs.</small> {{ number_format($stat->ytday_execution) }}</h2>--}}
                {{--                <input id="todaysExecution" type="text" value=" {{ $stat->ytday_booking ? ROUND($stat->ytday_execution/$stat->ytday_booking) : 0 }} " hidden>--}}
                {{--            </div>--}}
            {{--        </div>--}}
        {{--        <div class="col-md-4">--}}
            {{--            <div class="card mt-0">--}}
                {{--                <img class="cardicon" src="/images/target-monthly-icon.svg" alt="">--}}
                {{--                <h4>Monthly <span>Target</span></h4>--}}
                {{--                <h2 class="digit"><small>{{ $stat->kpi_type == 4 ? 'Rs.' : '' }}</small> {{ number_format($stat->target) }}</h2>--}}
                {{--            </div>--}}
            {{--        </div>--}}
        {{--    </div>--}}
    {{--</div>--}}
{{--

<div class="col-12 h_dash">
    <div class="row">
        <div class="col-3"><a href="live-report"><img src="images/live-icon-dash.svg"  alt=""/>
                <h2 class="HD-title">Live<span class="f-light">Report</span></h2>
            </a>
        </div>
        <div class="col-3"><a href="daily-execution-overview"><img src="images/daily-excution-dash.svg"  alt=""/>
                <h2 class="HD-title">Daily Execution<span class="f-light">Report</span></h2>
            </a>
        </div>
        <div class="col-3"><a href="#"><img src="images/distributor-st-icon-dash.svg"  alt=""/>
                <h2 class="HD-title">Distributor Stock<span class="f-light">Report</span></h2>
            </a>
        </div>
        <div class="col-3"><a href="#"><img src="images/monthly-sale-dash.svg"  alt=""/>
                <h2 class="HD-title">Monthly sales<span class="f-light">Report</span></h2>
            </a>
        </div>
        <div class="col-3"><a href="#"><img src="images/daily-booking-dash.svg"  alt=""/>
                <h2 class="HD-title">Daily Booking<span class="f-light">Report</span></h2>
            </a>
        </div>
        <div class="col-3"><a href="#"><img src="images/sales-target-icon-dash.svg"  alt=""/>
                <h2 class="HD-title">Sales Targert<span class="f-light">Report</span></h2>
            </a>
        </div>
        <div class="col-3"><a href="#"><img src="images/monthly-execution-dash.svg"  alt=""/>
                <h2 class="HD-title">Monthly Execution<span class="f-light">Report</span></h2>
            </a>
        </div>

    </div>
</div>
--}}

<!-- <div class="card">
    <div class="header">
        <h2>Shortcuts <span></span></h2>
    </div>
    <div class="action-btns">
        <div class="row">
            <div class="col-3"><a href="/register-ss" class="btn btn-primary">Sales Staff <i
                        class="fa fa-arrow-right"></i></a></div>
            <div class="col-3"><a href="/inventory" class="btn btn-primary">Products <i
                        class="fa fa-arrow-right"></i></a></div>
            <div class="col-3"><a href="/territoryRetailers" class="btn btn-primary">Retail Shops <i
                        class="fa fa-arrow-right"></i></a></div>
            <div class="col-3"><a href="/territoryDistributor" class="btn btn-primary">Distributors <i
                        class="fa fa-arrow-right"></i></a></div>
            <div class="col-3"><a href="/secondary_orders_list" class="btn btn-primary">Orders <i
                        class="fa fa-arrow-right"></i></a></div>
            <div class="col-3"><a href="/ListSchemes" class="btn btn-primary">Trade Offers <i
                        class="fa fa-arrow-right"></i></a></div>
            <div class="col-3"><a href="/ListKpi" class="btn btn-primary">KPI <i
                        class="fa fa-arrow-right"></i></a></div>
            <div class="col-3"><a href="/marked_visits" class="btn btn-primary">Reports <i
                        class="fa fa-arrow-right"></i></a></div>
        </div>
    </div>
</div> -->

@endsection

@push('scripts')
<script>
    function primaryCompletedOrderList() {

        $.ajax({
            type: 'POST',
            url: '/primary-report-data',
            data: {
                _token: $('input[name="_token"]').val(),
                date  : "{{date('Y-m-d')}}",//$('#reportdatepicker').val()
            },
            success: function (response) {
                document.getElementById('daily_executed_qty').innerHTML = addCommas(parseFloat(response.stats.daily_executed_qty))+` <span><small> CTNs</small></span>`;
                document.getElementById('daily_sub_executed_qty').innerHTML = addCommas(parseFloat(response.stats.daily_sub_executed_qty))+` <span><small> CTNs</small></span>`;
                document.getElementById('daily_booked_qty').innerHTML = addCommas(parseFloat(response.stats.daily_booked_qty))+ ' <small>CTNs</small>';
                document.getElementById('daily_sub_booked_qty').innerHTML = addCommas(parseFloat(response.stats.daily_sub_booked_qty))+ ' <small>CTNs</small>';
                document.getElementById('monthly_executed_qty').innerHTML = addCommas(parseFloat(response.stats.monthly_executed_qty))+ ` <span><small> CTNs</small></span>`;
                document.getElementById('monthly_sub_executed_qty').innerHTML = addCommas(parseFloat(response.stats.monthly_sub_executed_qty))+ ` <span><small> CTNs</small></span>`;
                document.getElementById('monthly_booked_qty').innerHTML = addCommas(parseFloat(response.stats.monthly_booked_qty))+ ' <small>CTNs</small>';
                document.getElementById('monthly_sub_booked_qty').innerHTML = addCommas(parseFloat(response.stats.monthly_sub_booked_qty).toFixed(2))+ ' <small>CTNs</small>';

            }
        });
    }
    $(document).ready(function () {
        $('#reportdatepicker').datepicker({
            autoclose: true,
            format: 'yyyy-mm-dd',
            todayHighlight: true,
            endDate: new Date()
        }).on('changeDate', function(selected){
            primaryCompletedOrderList();
        });
        primaryCompletedOrderList();
    });
</script>
@endpush