@php
$page_name = 'Settlement Agent';
@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">Settlement Agent</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"></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"></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;">
                                    <select name="SearchGroupAgentId" id="SearchGroupAgentId"
                                        class="form-control form-control-sm">
                                        <option value="0">Select Agent</option>
                                    </select>
                                </td>
                                <td style="width:150px;">
                                    <button id="SearchBtn" class="btn btn-success btn-block"
                                        onclick="getAgentData()">Search <span id="ajax_loader"></span></button>
                                </td>
                                 <td style="width:100px;"><b>Settle Party</b></td>
                                <td style="width:200px;">
                                    <input id="OppositeParty" class="form-control form-control-sm" type="text" placeholder="">
                                </td>
                                
                                <!-- <td style="width:150px;">
                                    <button id="ProcessBtn" class="btn btn-danger btn-block"
                                       onclick="OpenSelectDateModal()">Process Selected <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:230px;">
                                            Party
                                        </th>
                                        <th class="text-center">Credit</th>
                                        <th class="text-center">Debit</th>
                                        <th class="text-center">Balance</th>
                                        <th class="text-center">
                                            <input type="checkbox" name="check_all" value="1" class="check_all" />
                                        </th>
                                    </tr>
                                </thead>
                                <tbody id="ListBodyPanel">
                                </tbody>
                                <tfoot id="ListFooterPanel"></tfoot>
                            </table>
                        </div>
                        <div class="table-container" style="position: relative;">
                            <table class="table" style="margin-bottom: 0px !important;">
                                <tr>
                                    <td style="width:145px;"><small>Date</small><span id="VoucherDatePanel"></span></td>
                                    
                                    <td style="width:150px;"><small>&nbsp;</small>
                                        <button type="button" onclick="processSelected()"  class="btn btn-info btn-block" >Go Settle</button>
                                    </td>
                                    <td></td>
                                </tr>
                            </table>
                        </div>
                    </div>


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


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

        </div>

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

        @include('partial.footer')
        
        <script>
            var OppositeLedgerId = '';
            var OppositeLedgerName = '';
            $(document).ready(function() {
                // Get the current month (0-11, so add 1 to match the select options)
                var currentMonth = new Date().getMonth() + 1;

                // Add a leading zero if needed (e.g., 01 for January)
                currentMonth = currentMonth < 10 ? '0' + currentMonth : currentMonth;

                // Set the value of the drop-down to the current month
                $('#month').val(currentMonth);
            });
            var LayerLedgerId = "0";
            var LayerFromDate = "{{date('Y-m-d')}}";
            var LayerToDate = "{{date('Y-m-d')}}";
            function setFormValuesAndSubmit(format) {

                var JsonData = {
                    'FromDate': getCustomDatePicker("FromDate", 'D'),
                    'ToDate': getCustomDatePicker("ToDate", 'D'),
                    'GroupAgentId'	: $('#SearchGroupAgentId').val(),
                    'format': format,
                    'type' : 'autoVapsiReport'
                };

                // Set form values
                $('#FromDateExport').val(JsonData.FromDate);
                $('#ToDateExport').val(JsonData.ToDate);
                $('#GroupAgentIdExport').val(JsonData.GroupAgentId);
                $('#formatExport').val(JsonData.format);
                $('#typeExport').val(JsonData.type);

                // Submit the form
                $('#exportForm').submit();
            }
            function exportExternal(format) {
                event.preventDefault();
                setFormValuesAndSubmit(format);
            }


            $(document).ready(function () {
                    
                getAgentsGroup();
            });

            function getAgentData() {
                // var month = $("#month").val()
                // var year = $("#year").val()

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

                var JsonData = {
                    'FromDate': FromDate,
                    'ToDate': ToDate,
                    'GroupAgentId': $('#SearchGroupAgentId').val(),
                };
                 JsonData['nav'] = nav;
                JsonData['Method'] = "ajax_get_auto_vapsi";
                AjaxLoader("show");
                AjaxCall("/get_settlement_agent", JsonData, function (response) {
                    $("#ListBodyPanel").html('');
                    AjaxLoader("hide");
                    var total_debit = 0;
                    var total_credit = 0;
                    var total_amount = 0;


                        $.each(response.data, function (index, obj) {
                            total_debit += this.Debit;
                            total_credit += this.Credit;
                            total_amount += this.Amount;

                            var html = `<tr class="auto_vapsi_row_${this.LedgerId}">
                                    <td>${parseInt(index) + parseInt(1)}</td>
                                    <td>${this.LedgerName}</td>
                                    <td>${customRound(this.Credit)}</td>
                                    <td>${customRound(this.Debit)}</td>
                                    <td>${customRound(total_amount)}</td>
                                    <td style="min-width: 80px;text-align: center !important;"> <input data-party="${this.LedgerName}" data-amount="${(this.Amount).toFixed(2)}" type="checkbox" id="auto_vapsi_check_${this.LedgerId}" name="check_${this.LedgerId}" value="${this.LedgerId}" class="auto_vapis_single check_all" /></td>
                                    </tr>`;
                            
                            $("#ListBodyPanel").append(html);
                        });

                        var finalRow = `<tr>
                                            <td colspan = 2>Total</td>
                                            <td>${customRound(total_credit)}</td>
                                            <td>${customRound(total_debit)}</td>
                                            <td></td>
                                            <td class="text-center" id="selected_vapsi_amount"></td>
                                        </tr>`;
                        $("#ListBodyPanel").append(finalRow);
                });
            }
            

            function processSelected() {
                let selectedData = [];
                if(OppositeLedgerId != ""){
                    $('.auto_vapis_single:checked').each(function() {
                        if(parseInt($(this).val()) > 0){
                            let dataObject = {
                                id: parseInt($(this).val()),
                                amount: parseFloat($(this).data('amount')),
                                party : $(this).data('party')
                            };

                            selectedData.push(dataObject);
                        }
                        
                    });

                    var JsonData = {
                        'items': selectedData,
                        'processDate':getCustomDatePicker("VoucherDate",'D'),
                        'oppositeLedgerId':OppositeLedgerId,
                        'OppositeLedgerName':OppositeLedgerName
                    };

                    AjaxCall("/process_agent_settlement", JsonData, function (response) {
                        if(response.status == true){
                            $("#ProcessVapsiModal").modal("hide");
                            Notify("Success ",response.message,"success");
                            setTimeout(function(){ location.reload(); }, 2000);
                            $("#OppositeParty").val("");
                            OppositeLedgerId = "";
                            OppositeLedgerName = "";
                        }
                        else{
                            Notify("Error ",response.message,"danger");
                        }
                    });
                }
                else{
                    Notify("Error ","please select settlement party","danger");
                }
                
            }

            function getAgentsGroup() {
                $('#SearchGroupAgentId').html('<option value="0"> -- ALL -- </option>');
                var JsonData = { 'AgentLedgerId': 0 };
                JsonData['nav'] = nav;
                JsonData['Method'] = "ajax_agent_groups";
                AjaxCallSync("/ajax_agents", JsonData, function (response) {
                    if (response.status == true) {
                        var Row = '';
                        Row += '<option value="0">--Select Agent--</option>';
                        $.each(response.data, function (index, obj) {
                            Row += '<option value="' + this.id + '">' + this.name + '</option>';
                        });
                        $('#SearchGroupAgentId').html(Row);

                    } else if (response.status == false) {
                        //Notify("Message ",response.message,"danger");
                    }
                });
            }
            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();
                    }
                });
            });
            
            
            $(document).ready(function() {
                function calculateSum() {
                    let sum = 0;

                    $('.auto_vapis_single:checked').each(function() {
                        sum += parseFloat($(this).data('amount'));
                    });

                    return customRound(sum);
                }

                $('.check_all').change(function() {
                    $('.auto_vapis_single').prop('checked', $(this).prop('checked')).trigger('change');
                });

                $(document).on('change', '.auto_vapis_single', function() {
                    if(parseInt($(this).val()) > 0){
                        var isChecked = $(this).is(':checked');
                        var total_selected = calculateSum();
                        
                        var row = $(this).closest('tr');
                        if (isChecked) {
                            row.addClass('highlighted');
                        } else {
                            row.removeClass('highlighted');
                        }

                        if(total_selected >= 0){
                            $("#selected_vapsi_amount").text(total_selected);
                        }
                    }
                    
                });
            });
            $( function() {
                 $("#VoucherDatePanel").html(CustomDatePicker("VoucherDate", "{{date('Y-m-d')}}"));

                $("#OppositeParty").autocomplete({
                    source: '/searchLedgers',
                    cache: true,
                    autoSelect: true,
                    autoFocus: true,
                    minLength: 1
                }).focus(function(){
                    $(this).autocomplete("search", $(this).val());
                }).blur(function(){
                    if($(this).val().length > 0){
                        getLedgerInfo("/ajax_ledger_info", $(this).val(), $(this).attr("id"), function(response) {
                            OppositeLedgerId = response.data.LedgerId;
                            OppositeLedgerName = response.data.LedgerName;
                        });
                    }else{
                        OppositeLedgerId = "";
                        OppositeLedgerName = "";
                    }
                });
            })

            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>