@php
$page_name = 'Profit & Loss';
@endphp
@include('partial.header')
<style>
    .highlighted{
        background-color:rgba(51, 175, 101, 0.4) !important;
    }
</style>
<div class="container-fluid">

    @include('partial.navigation')
        <!--************ Main container start ************* -->
                
        <div class="main-container">
            <!-- Content wrapper start -->
            <div class="content-wrapper">

                <div class="table-container">
                    <table class="table" style="margin-bottom: 0px !important;">
                        <tbody>
                            <tr>
                                <td style="width:25px;">
                                    <a onclick="window.history.back()" href="rpt_all_shift_short#"
                                        data-toggle="dropdown" aria-haspopup="true">
                                        <i style="font-size:24px;" class="icon-keyboard_backspace"></i>
                                    </a>
                                </td>
                                <td style="width:180px;">
                                    <h5 class="table-title">Profit & Loss</h5>
                                </td>
                                <td style="width:50px;"><b>Date</b></td>
                                <td style="width:145px;" id="FromDatePanel">
                                    <table style="width:100%;">
                                        <tbody>
                                            <tr class="form-control form-control-sm" style="padding:0px !important;">
                                                <td style="width:32px; padding:0px !important;"><input
                                                        onfocus="this.select();" onmouseup="return false;"
                                                        onkeypress="return isNumberKeyOnly(event)"
                                                        class="form-control form-control-sm"
                                                        style="border:none !important; height:28px !important;"
                                                        type="text" id="Day_FromDate" name="Day_FromDate" value="{{date('d')}}"
                                                        maxlength="2" data-listener-added_e381efce="true"></td>
                                                <td style="width:3px; padding:0px !important;">/</td>
                                                <td style="width:32px; padding:0px !important;"><input
                                                        onfocus="this.select();" onmouseup="return false;"
                                                        onkeypress="return isNumberKeyOnly(event)"
                                                        class="form-control form-control-sm"
                                                        style="border:none !important; height:28px !important;"
                                                        type="text" id="Month_FromDate" name="Month_FromDate" value="{{date('m')}}"
                                                        maxlength="2" data-listener-added_e381efce="true"></td>
                                                <td style="width:3px; padding:0px !important;">/</td>
                                                <td style="width:50px; padding:0px !important;"><input
                                                        onfocus="this.select();" onmouseup="return false;"
                                                        onkeypress="return isNumberKeyOnly(event)"
                                                        class="form-control form-control-sm"
                                                        style="border:none !important; height:28px !important;"
                                                        type="text" id="Year_FromDate" name="Year_FromDate" value="{{date('Y')}}"
                                                        maxlength="4"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                                <td style="width:145px;" id="ToDatePanel">
                                    <table style="width:100%;">
                                        <tbody>
                                            <tr class="form-control form-control-sm" style="padding:0px !important;">
                                                <td style="width:32px; padding:0px !important;"><input
                                                        onfocus="this.select();" onmouseup="return false;"
                                                        onkeypress="return isNumberKeyOnly(event)"
                                                        class="form-control form-control-sm"
                                                        style="border:none !important; height:28px !important;"
                                                        type="text" id="Day_ToDate" name="Day_ToDate" value="{{date('d')}}"
                                                        maxlength="2" data-listener-added_e381efce="true"></td>
                                                <td style="width:3px; padding:0px !important;">/</td>
                                                <td style="width:32px; padding:0px !important;"><input
                                                        onfocus="this.select();" onmouseup="return false;"
                                                        onkeypress="return isNumberKeyOnly(event)"
                                                        class="form-control form-control-sm"
                                                        style="border:none !important; height:28px !important;"
                                                        type="text" id="Month_ToDate" name="Month_ToDate" value="{{date('m')}}"
                                                        maxlength="2" data-listener-added_e381efce="true"></td>
                                                <td style="width:3px; padding:0px !important;">/</td>
                                                <td style="width:50px; padding:0px !important;"><input
                                                        onfocus="this.select();" onmouseup="return false;"
                                                        onkeypress="return isNumberKeyOnly(event)"
                                                        class="form-control form-control-sm"
                                                        style="border:none !important; height:28px !important;"
                                                        type="text" id="Year_ToDate" name="Year_ToDate" value="{{date('Y')}}"
                                                        maxlength="4"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                                <td style="width:150px;">
                                    <button id="SearchBtn" class="btn btn-success btn-block"
                                        onclick="getProfitLoss()">Search <span id="ajax_loader"></span></button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="table-container">
                        <div class="table-responsive table2excel CustomFixedTbl CustomFreezTable"
                            style="min-height: 79vh; max-height: 79vh; overflow-x: scroll;">
                            <table class="table table-bordered">
                            <thead>
                                    <tr style="border-top:1px solid #DDD;">
                                        <th>Sr.</th>
                                        
                                        <th class="text-center" style="width:280px;">
                                            Shift Name
                                        </th>
                                        <th class="text-center">Total Sale</th>
                                        <th class="text-center">Dara Open</th>
                                        <!-- <th class="text-center">Profit/Loss</th> -->
                                        <th class="text-center">Actual Profit/Loss</th>
                                    </tr>
                                </thead>
                                <tbody id="ListBodyPanel">
                                </tbody>
                                <tfoot id="ListFooterPanel"></tfoot>
                            </table>
                        </div>
                    </div>


                </div>
                <!-- Content wrapper end -->


            </div>
            <!-- *************
                    ************ Main container end *************
                ************* -->

            <div class="modal fade" id="ProcessVapsiModal" tabindex="-1" role="dialog" aria-labelledby="basicModalLabel"
                aria-hidden="true">
                <div class="modal-dialog modal-l" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">Select Date</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body" style="padding:3px !important;">
                            <div id="ProcessDatePanel" style="width:30%;margin:auto;margin-top: 30px;">
                                <table>
                                    <tbody>
                                        <tr class="form-control form-control-sm" style="padding:0px !important;">
                                            <td style="width:32px; padding:0px !important;"><input
                                                    onfocus="this.select();" onmouseup="return false;"
                                                    onkeypress="return isNumberKeyOnly(event)"
                                                    class="form-control form-control-sm"
                                                    style="border:none !important; height:28px !important;"
                                                    type="text" id="Day_ProcessDate" name="Day_ProcessDate" value="{{date('d')}}"
                                                    maxlength="2" data-listener-added_e381efce="true"></td>
                                            <td style="width:3px; padding:0px !important;">/</td>
                                            <td style="width:32px; padding:0px !important;"><input
                                                    onfocus="this.select();" onmouseup="return false;"
                                                    onkeypress="return isNumberKeyOnly(event)"
                                                    class="form-control form-control-sm"
                                                    style="border:none !important; height:28px !important;"
                                                    type="text" id="Month_ProcessDate" name="Month_ProcessDate" value="{{date('m')}}"
                                                    maxlength="2" data-listener-added_e381efce="true"></td>
                                            <td style="width:3px; padding:0px !important;">/</td>
                                            <td style="width:50px; padding:0px !important;"><input
                                                    onfocus="this.select();" onmouseup="return false;"
                                                    onkeypress="return isNumberKeyOnly(event)"
                                                    class="form-control form-control-sm"
                                                    style="border:none !important; height:28px !important;"
                                                    type="text" id="Year_ProcessDate" name="Year_ProcessDate" value="{{date('Y')}}"
                                                    maxlength="4"></td>
                                        </tr>
                                    </tbody>
                                    
                                </table>
                            </div>
                            
                            
                        </div>
                    </div>
                </div>
            </div>


        </div>

        <script>
            var BaseUrl = "/";
            var nav = "rpt_all_shift_short";
            var LoginRoleId = "2";
         </script>                           

        @include('partial.footer')
        
        <script>
            var LayerLedgerId = "0";
            var LayerFromDate = "{{date('Y-m-d')}}";



            $(document).ready(function () {
                $("#FromDatePanel").html(CustomDatePicker("FromDate", LayerFromDate));
            });

            function getProfitLoss() {
                var FromDate = getCustomDatePicker("FromDate", 'D');
                var ToDate = getCustomDatePicker("ToDate", 'D');

                var JsonData = {
                    'FromDate': FromDate,
                    'ToDate': ToDate
                };

                JsonData['nav'] = nav;
                JsonData['Method'] = "ajax_get_profit_loss_data";
                
                AjaxLoader("show");

                AjaxCall("/get_profit_loss_data", JsonData, function (response) {
                    $("#ListBodyPanel").html('');
                    AjaxLoader("hide");
                    
                    var i = 1;
                    var totalSale = 0;
                    var totalOpenDara = 0;
                    var totalProfit = 0;
                    var totalNetProfit = 0;

                    $.each(response.data, function (index, obj) {
                        var color = this.profit > 0 ? "#10a11a" : "#c21708";
                        var colort = this.total_profit > 0 ? "#10a11a" : "#c21708";
                        var html = `<tr>
                                        <td>${parseInt(i)}</td>
                                        <td>${this.shiftName} {${this.declareNumber}}</td>
                                        <td>${customRound(this.totalSale)}</td>
                                        <td>${customRound(this.openDara)}</td>
                                        <td style="color:${color}">${customRound(this.profit)}</td>
                                    </tr>`;
                        
                        $("#ListBodyPanel").append(html);
                        
                        totalSale += parseFloat(this.totalSale);
                        totalOpenDara += parseFloat(this.openDara);
                        totalProfit += parseFloat(this.total_profit);
                        totalNetProfit += parseFloat(this.profit);
                        
                        i++;
                    });

                    // Append the total row

                    var totalHtml = `<tr style="font-weight:bold">
                                        <th colspan="2">Total</th>
                                        <th>${customRound(totalSale)}</th>
                                        <th>${customRound(totalOpenDara)}</th>
    
                                        <th >${customRound(totalNetProfit)}</th>
                                    </tr>`;
                    
                    $("#ListBodyPanel").append(totalHtml);
                })
            }



            function ExportToExl() {
                ExportToExcel_custom("HVS_Detail_FromAllShiftReport", "HPMaintable2excel");
            }
            $(function () {
                $("body").keydown(function (e) {
                    var keyCode = e.keyCode || e.which;
                    if (keyCode == 113) // F2 - Save Transaction
                    {
                        e.preventDefault();
                        AddBtn();
                    }
                    if (keyCode == 116) // F5 - Random
                    {
                        e.preventDefault();
                    }
                });
            });
            
            
            ko.bindingHandlers.nextFieldOnEnter = {
                init: function(element, valueAccessor, allBindingsAccessor) {
                    $(element).on('keydown', 'input, select', function (e) {
                        var self = $(this)
                        , form = $(element)
                          , focusable
                          , next
                        ;
                        //LastFocusedControl_Id = $(":focus").attr("id");
                        if (e.keyCode == 13) {
                            focusable = form.find('input,select,button,textarea').filter(':visible');
                            var nextIndex = focusable.index(this) == focusable.length -1 ? 0 : focusable.index(this) + 1;
                            next = focusable.eq(nextIndex);
                                
                                
                            next.focus().select();
                            return false;
                        }
                    });
                }
            };
            ko.applyBindings({});
        </script>