@extends('layouts.master')
@section('content')
    <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 mt-2 mb-3">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">Order <span>Management</span></h2>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-6">
            <ol class="breadcrumb">
                <li><a href="#"><span>Completed </span></a></li>
                <li><span>Orders</span></li>
            </ol>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="Product-Filter">
                <div class="row">
                    <div class="col-auto pl-0">
                        <div class="CL-Product inputmonth"><i class="fa fa-calendar-alt"></i>
                            <input type="text" autocomplete="off" id="reportdatepicker" class="form-control" placeholder="Chose Date" value="{{date('Y-m-d')}}">
                        </div>
                    </div>
{{--                    <div class="col-auto pl-0">--}}
{{--                        <button type="button" onclick="primaryCompletedOrderList()" class="btn btn-primary m-0"> Search</button>--}}
{{--                    </div>--}}

                </div>
                <div class="clearfix"></div>
            </div>
        </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>Execution</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="row">
        <div class="col-md-12">
            <div class="card">
                <div class="header"><h2>Completed Orders <span> List</span></h2></div>
                <div class="body">
                    <table class="table table-hover dt-responsive nowrap primary_order" id="example" style="width:100%">
                        <thead>
                        <tr>
                            <th>Order ID</th>
                            <th>Distributor</th>
                            <th>Type</th>
                            <th>Parent Dist</th>
                            <th>Employee</th>
                            <th>Territory</th>
                            <th>QTY</th>
                            <th>Order Total</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody class="primary_order_list">
                        </tbody>
                    </table>


                </div>
            </div>

        </div>


    </div>
@endsection

@push('scripts')
    <script>
        function primaryCompletedOrderList() {
            $('.primary_order_list').empty();
            var table   =   $('.primary_order').DataTable();
            table.destroy();
            $.ajax({
                type: 'POST',
                url: '/primary-report-data',
                data: {
                    _token: $('input[name="_token"]').val(),
                    date  : $('#reportdatepicker').val()
                },
                success: function (response) {
                    $('.primary_order_list').empty();
                    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>';
                    if(response.orders.length>0) {
                        response.orders.forEach(element => {
                            var action = `<button data-toggle="modal" id="${element['id']}" data-target="#order_detail_modal" class="btn btn-edit view_order_detail">Detail</button>`;
                            $('.primary_order_list').append(`
                                                    <tr>
                                                        <td>${element['id']}</td>
                                                        <td>${element['distributor_name']}</td>
                                                        <td>${element['distributor_type_name']}</td>
                                                        <td>${element['parent_distributor_name']}</td>
                                                        <td>${element['employee_name']}</td>
                                                        <td>${element['territory_name']}</td>
                                                        <td>${element['ttl_qty']}</td>
                                                        <td>${addCommas(element['order_total'].toFixed(2))}</td>
                                                        <td>${action}</td>
                                                    </tr>
                                                `);
                        });
                    }

                    $('.primary_order').DataTable();
                }
            });
        }
        $(document).ready(function () {
            $('#reportdatepicker').datepicker({
                autoclose: true,
                format: 'yyyy-mm-dd',
                todayHighlight: true,
                endDate: new Date()
            }).on('changeDate', function(selected){
                primaryCompletedOrderList();
            });
            primaryCompletedOrderList();
            $(document).on('click', '.view_order_detail', function () {
                $('.order_num').text('Loading...');
                $('.retailer_name').text('Loading...');
                $('.retailer_phone').text('Loading...');
                $('.retailer_location').text('Loading...');
                $('.status').text('Loading...');
                $('.booking_date').text('Loading...');
                $('.employee_name').text('Loading...');
                $('.order_items_body').empty();
                var thisRef = $(this);
                $.ajax({
                    type: 'POST',
                    url: '/order_detail/' + thisRef.attr('id'),
                    data: {
                        _token: $('input[name="_token"]').val(),
                        type: 'primary'
                    },
                    success: function (response) {
                        var response = JSON.parse(response);
                        $('.order_num').text(response.core.id)
                        $('.retailer_name').text(response.core.retailer_name);
                        $('.retailer_phone').text(response.core.retailer_phone);
                        $('.retailer_location').text(response.core.retailer_address);
                        $('.status').text(response.core.status);
                        $('.booking_date').text(response.core.order_date);
                        $('.employee_name').text(response.core.employee_name);

                        var total_qty           =   0;
                        var total_to_disc       =   0;
                        var total_distr_disc    =   0;
                        var total_spc_disc      =   0;
                        var total_booker_disc   =   0;
                        var total_discount      =   0;
                        var total_gross_amount  =   0;
                        var total_tax           =   0;
                        var total_net_amount    =   0;
                        response.content.forEach(element => {
                            total_discount      =   total_discount+parseFloat(element['total_discount']) ;
                            var grossAmount     =   element['tp'] * element['quantity'] ;
                            var tradeDiscount   =   parseFloat(element["scheme_discount"]?element["scheme_discount"]:0);
                            var distDiscount    =   parseFloat(element['distributor_discount']?element["distributor_discount"]:0);
                            var specialDiscount =   parseFloat(element['special_discount_pkr']?element["special_discount_pkr"]:0);
                            var bookerDiscount  =   parseFloat(element['booker_discount_pkr'] ?element["booker_discount_pkr"]:0);
                            var netAmount       =   parseFloat(element['final_price'] ?element["final_price"]:0);
                            //debugger
                            total_qty           =   total_qty+element['quantity'];
                            total_to_disc       =   total_to_disc+tradeDiscount;
                            total_distr_disc    =   total_distr_disc+(parseFloat(element['distributor_discount_pkr']?element["distributor_discount_pkr"]:0));
                            total_spc_disc      =   total_spc_disc+specialDiscount;
                            total_net_amount    =   total_net_amount+(element['final_price'] ?element["final_price"]:0);
                            total_tax           =   total_tax+element['total_tax_amount'];
                            total_booker_disc    =   total_booker_disc+bookerDiscount;
                            total_gross_amount  =   total_gross_amount+netAmount;

                            $('.order_items_body').append(`<tr>
                        <td>${element['item_sku']}</td>
                        <td>${element['item_name']}</td>
                        <td>${addCommas(element['tp'].toFixed(2))}</td>
                        <td>${addCommas(element['quantity'])}</td>
                        <td>${addCommas(grossAmount.toFixed(2))}</td>
                        <td>${addCommas(tradeDiscount.toFixed(2))}</td>
                        <td>${addCommas(distDiscount.toFixed(2))}</td>
                        <td>${addCommas(specialDiscount.toFixed(2))}</td>
                        <td>${addCommas(bookerDiscount.toFixed(2))}</td>
                        <td>${addCommas(element['total_tax_amount'].toFixed(2))}</td>
                        <td>${addCommas(netAmount.toFixed(2))}</td>
                    </tr>`);

                        })
                        var frieght_price   =   parseFloat(response.core.frieght_price == null ? 0:response.core.frieght_price);
                        $('.order_items_body').append(`<tr style="background-color: #eaeaea">
                <td colspan="3"><strong>Total.</strong></td>
                <td><strong>${addCommas(total_qty)}</strong></td>
                <td><strong>${addCommas(total_gross_amount.toFixed(2))}</strong></td>
                <td><strong>${addCommas(total_to_disc.toFixed(2))}</strong></td>
                <td><strong>${addCommas(total_distr_disc.toFixed(2))}</strong></td>
                <td><strong>${addCommas(total_spc_disc.toFixed(2))}</strong></td>
                <td><strong>${addCommas(total_booker_disc.toFixed(2))}</strong></td>
                <td><strong>${addCommas(total_tax.toFixed(2))}</strong></td>
                <td><strong>${addCommas(total_net_amount.toFixed(2))}</strong></td>
                </tr>
                <tr>
                <td class="border-0"></td>
                <td class="border-0"></td>
                <td class="border-0"></td>
                <td class="border-0"></td>
                <td class="border-0"></td>
                <td class="border-0"></td>
                <td class="border-0"></td>
                <td class="border-0"></td>
                <td class="border-0"></td>
                    <td><strong>Frieght Price PKR.</strong></td>
                    <td><strong>${addCommas(frieght_price.toFixed(2))}</strong></td>
                </tr>
                <tr>
                <td class="border-0"></td>
                <td class="border-0"></td>
                <td class="border-0"></td>
                <td class="border-0"></td>
                <td class="border-0"></td>
                <td class="border-0"></td>
                <td class="border-0"></td>
                <td class="border-0"></td>
                <td class="border-0"></td>
                    <td style="background-color:#555 ; color:#fff">
                        <strong>Total PKR.</strong></td>
                    <td style="background-color:#555; color:#fff">
                        <strong>${addCommas((total_gross_amount+parseFloat(frieght_price)).toFixed(2))}</strong></td>
                </tr>`);
                        //debugger
                    }
                });
            });
        });
    </script>
@endpush