@php
$page_name = 'Collection';
@endphp
@include('partial.header')

<div class="container-fluid">

    @include('partial.navigation')
    <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:180px;">
                                    <h5 class="table-title"> Collection</h5>
                                </td>
                                <td style="width:50px;"><b>Shift</b></td>
                                <td style="width:180px;" id="ShiftCombo"><select id="Shifts" name="Shifts"
                                        onchange="loadDate(this.value)" class="form-control form-control-sm">
                                    </select></td>
                                <td style="width:50px;"><b>Date</b></td>
                                <td style="width:145px;" id="ShiftDatePanel">
                                    <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_ShiftDate" name="Day_ShiftDate" value="01"
                                                        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_ShiftDate" name="Month_ShiftDate"
                                                        value="01" 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_ShiftDate" name="Year_ShiftDate"
                                                        value="1970" maxlength="4"></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </td>
                                <td></td>
                                <td style="width:100px;">
                                    <button class="btn btn-success btn-block exportToExcel"
                                        onclick="ExportToExcel('ok')">Excel</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <!--****************** Vertical Scroll table start ************************-->
                    <div class="table-container">
                        <div class="table-responsive JantriView table2excel">
                            
                        </div>
                    </div>


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


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

            <footer class="main-footer" style="padding:0px; ">
                <div class="table-responsive">
                    <table class="table" style="margin-bottom: 0px !important; background:none;">
                        <tbody>
                            <tr>
                                <td style="width:150px;">
                                    &nbsp;
                                </td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </footer>
        </div>

        <script>
            var BaseUrl = "/";
            var nav = "jantri";
        </script>
        @include('partial.footer')
        <script>
            var Shift_ArrayList = [];
            var SelectedShift = [];

            var UtarMaster = [];
            var JantriMaster = [];

            var Transaction_ArrayList = [];
            var TransactionSelectedRow = {};
            var IsLive = "Live";


            $(document).ready(function () {
                //BlockSpace('#OrganizationUserName');
                setTimeout(function () {
                    CustomJantriControl("jv", "JantriView", "readonly");
                    getShifts();
                }, 10);
            });

            function getShifts() {
                var JsonData = { 'SearchShift': "" };
                JsonData['nav'] = nav;
                JsonData['Method'] = "ajax_shift_transaction";
                AjaxCall("/getLiveShifts", JsonData, function (response) {
                    if (response.status == true) {
                        Shift_ArrayList = [];
                        var Row = '<select id="Shifts" name="Shifts" onchange="loadDate(this.value)" class="form-control form-control-sm">';
                        $.each(response.data, function (index, obj) {
                            Shift_ArrayList[this.ShiftId] = obj;
                            Row += '<option value="' + this.id + '">' + this.shift_name + '</option>';
                        });
                        Row += '</select>';
                        $('#ShiftCombo').html(Row);
                        $('#Shifts').focus();
                        loadDate(response.data[0].id);
                        //console.clear();
                    } else if (response.status == true) {
                        Notify("Error ", response.message, "danger");
                    }
                });
            }

            function loadDate(_Val) {
                SelectedShift = {};
                SelectedShift = Shift_ArrayList[_Val];
                var ShiftDate = "{{date('Y-m-d')}}";
                if (IsLive == "Live") {
                    $("#ShiftDatePanel").html(CustomDatePicker("ShiftDate", ShiftDate));
                } else {
                    $("#ShiftDatePanel").html(CustomDatePicker("ShiftDate", ShiftDate));
                }
                //$("#ShiftDatePanel").html(CustomDatePicker("ShiftDate", SelectedShift.ShiftDate));
                $('#Year_ShiftDate').focusout(function () {
                    Jantri();
                    setTimeout(function () { $('#Shifts').focus(); }, 100);

                });
                Jantri();
            }
            function Jantri() {

                var JsonData = {
                    'ShiftDate': getCustomDatePicker("ShiftDate", 'D'),
                    'ShiftId': $('#Shifts').val(),
                    'IsLive': IsLive,
                };
                if (JsonData.ShiftDate == "1970-01-01") {
                    Notify("Invalid ", "Please enter a valid ShiftDate!", "danger");
                    $('#Day_ShiftDate').focus().select();
                    return false;
                }
                if (JsonData.ShiftDate == "" || JsonData.ShiftId == "") {
                    Notify("Invalid ", "Please enter all valid fields!", "danger");
                    return false;
                }
                JsonData['nav'] = nav;
                JsonData['Method'] = (IsLive == "Live" ? "ajax_jantri_live" : "ajax_jantri_declare");
                AjaxCall("/shift_total_collection", JsonData, function (response) {
                    Custom_ClearJantri("jv", "JantriView");
                    if (response.status == true) {
                         select_declare_box(response.declare_number);
                        UtarMaster = [];
                        $.each(response.data, function (index, obj) {
                            UtarMaster.unshift({
                                Number: this.Number,
                                Amount: this.Amount,
                            });
                        });
                        FillJantri(UtarMaster);
                        Custom_Bind_Jantri(JantriMaster, "jv");
                        MasterTotal("jv", "JantriView");


                    } else if (response.status == false) {
                        Notify("Error ", response.message, "danger");
                    }
                });
            }

            function EditAction(ind) {
                TransactionSelectedRow = {};
                TransactionSelectedRow = Transaction_ArrayList[ind];
                window.location = "/transaction_edit/" + SelectedShift.ShiftId + "/" + TransactionSelectedRow.TransactionId;

            }

            function DeleteAction(ind) {
                TransactionSelectedRow = {};
                TransactionSelectedRow = Transaction_ArrayList[ind];
                DeleteTransaction();
            }

            function DeleteTransaction() {
                var JsonData = {};
                JsonData['TransactionId'] = TransactionSelectedRow.TransactionId;
                JsonData['ShiftId'] = SelectedShift.ShiftId;
                JsonData['ShiftDate'] = TransactionSelectedRow.ShiftDate;
                if (JsonData.TransactionId == "" || JsonData.ShiftId == "" || JsonData.ShiftDate == "") {
                    Notify("Invalid ", "Please enter all valid fields!", "danger");
                    return false;
                }
                JsonData['nav'] = nav;
                JsonData['Method'] = "ajax_transaction_delete";
                AjaxCall("/ajax_index", JsonData, function (response) {
                    if (response.status == true) {
                        Notify("Success ", response.message, "success");
                        Transactions();
                    } else if (response.status == false) {
                        Notify("Error ", response.message, "danger");
                    }
                });
            }

            function SaveShift() {
                var JsonData = {};
                var x = $("#AddForm").serializeArray();
                $.each(x, function (i, field) {
                    JsonData[field.name] = field.value;
                });
                console.log(JsonData);
                if (JsonData.ShiftName == "" || JsonData.ShiftDate == "" || JsonData.ShiftNextDay == "") {
                    Notify("Invalid ", "Please enter all valid fields!", "danger");
                    return false;
                }

                AjaxCall(BaseUrl + "ajax_shift_save", JsonData, function (response) {
                    if (response.status == true) {
                        Notify("Success ", response.message, "success");
                        $('#ShiftName').val('');
                        $('#ShiftName').val('');
                        $('#ShiftName').focus();
                        Shifts();
                    } else if (response.status == false) {
                        Notify("Error ", response.message, "danger");
                    }
                });
            }

            function ActionPopup(index) {
                SelectedRow = {};
                SelectedRow = Shift_ArrayList[index];
                $('#ActionModal').modal('show');
                $('[href="#info"]').tab('show');

                setTimeout(function () {
                    $("input[id='edit_RoleTime']").val('');
                    $('#edit_IsActive').val('');
                    $("#edit_IsActive").prop('checked', false);
                    $('#edit_ShiftName').val("");
                    $('#edit_ShiftDate').val("");
                    $('#edit_ShiftFor').val("");
                    $('#edit_ShiftNextDay').val("");

                    $('#edit_ShiftName').val(SelectedRow.ShiftName);
                    $('#edit_ShiftDate').val(SelectedRow.ShiftDateDB);
                    $('#edit_ShiftFor').val(SelectedRow.ShiftFor);
                    $('#edit_ShiftNextDay').val(SelectedRow.ShiftNextDay);

                    if (SelectedRow.IsActive == "1") {
                        $('#edit_IsActive').val('1');
                        $("#edit_IsActive").prop('checked', true);
                    }

                    $('#edit_ShiftName').focus().select();
                    Shift_Timing(SelectedRow.ShiftId);
                }, 500);
            }

            function Shift_Timing(_ShiftId) {
                var JsonData = {
                    'ShiftId': _ShiftId,
                };
                AjaxCall(BaseUrl + "ajax_shift_timings", JsonData, function (response) {
                    var list = "";
                    $.each(Roles, function (index, obj) {
                        list += '<div class="col-xl-3 col-lglg-3 col-md-3 col-sm-3 col-12">'
                            + '<div class="form-group">'
                            + '<label for="disabledInput">' + obj.RoleName + '</label>'
                            + '<input type="time" id="edit_RoleTime[' + obj.RoleId + ']"  name="edit_RoleTime[' + obj.RoleId + ']" class="form-control form-control-sm text-center" Value="">'
                            + '</div>'
                            + '</div>';
                    });
                    $('#edit_RoleTime_Panel').html(list);
                    if (response.status == true) {
                        var list = "";
                        $.each(response.data, function (index, obj) {
                            list += '<div class="col-xl-3 col-lglg-3 col-md-3 col-sm-3 col-12">'
                                + '<div class="form-group">'
                                + '<label for="disabledInput">' + obj.RoleName + '</label>'
                                + '<input type="time" id="edit_RoleTime[' + obj.RoleId + ']"  name="edit_RoleTime[' + obj.RoleId + ']" class="form-control form-control-sm text-center" Value="' + obj.EndTime + '">'
                                + '</div>'
                                + '</div>';
                        });
                        $('#edit_RoleTime_Panel').html(list);
                    } else if (response.status == false) {
                        Notify("Error ", response.message, "danger");
                    }
                });
            }


            function UpdateShift(Status) {
                if (Status == 'Info') {
                    var Name = $('#edit_ShiftName').val();
                    var Date = $('#edit_ShiftDate').val();
                    var NextDay = $('#edit_ShiftNextDay').val();
                    var For = $('#edit_ShiftFor').val();
                    if (Name == "" || Date == "" || NextDay == "" || For == "") {
                        Notify("Invalid ", "Please enter all valid fields!", "danger");
                        $('#Action_Organization_Name').focus().select();
                        return false;
                    }
                    var JsonData = { 'ShiftName': Name, 'ShiftDate': Date, 'ShiftNextDay': NextDay, 'ShiftFor': For };
                } else if (Status == 'Time') {
                    var JsonData = {};
                    var x = $("#EditTimeForm").serializeArray();
                    $.each(x, function (i, field) {
                        JsonData[field.name] = field.value;
                        if (field.value == "") {
                            Notify("Invalid ", "Please enter all valid fields!", "danger");
                            return false;
                        }
                    });
                    console.log(JsonData);
                } else if (Status == 'ShiftActive') {
                    var IsActive = $('#edit_IsActive').val();
                    var JsonData = { 'IsActive': IsActive };
                }
                JsonData['ShiftId'] = SelectedRow.ShiftId;
                JsonData['Status'] = Status;
                AjaxCall(BaseUrl + "ajax_shift_update", JsonData, function (response) {
                    if (response.status == true) {
                        Notify("Success ", response.message, "success");
                        Shifts();
                        $('#ActionModal').modal('hide');
                    } else if (response.status == false) {
                        Notify("Error ", response.message, "danger");
                    }
                });
            }

            function AddBtn() {
                window.location = "transaction_add/" + $('#Shifts').val();
            }

            $(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();
                    }
                });
            });


            $(function () {
                var focusedRow = null;
                $('#scrollVerticalFixHeaderFooter').on('keydown', function (ev) {
                    console.log(ev.keyCode);
                    if (focusedRow == null) {
                        focusedRow = $('tr:nth-child(1)', '#scrollVerticalFixHeaderFooter');
                    } else if (ev.keyCode === 38) {
                        focusedRow.toggleClass('focused');
                        focusedRow = focusedRow.prev('tr');
                    } else if (ev.keyCode === 40) {
                        focusedRow.toggleClass('focused');
                        focusedRow = focusedRow.next('tr');
                    }
                    focusedRow.toggleClass('focused');
                });
                $('#scrollVerticalFixHeaderFooter').focus();
            });
            
            
            
            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>
</div>