@php
$page_name = 'Limit Voucher';
@endphp
@include('partial.header')
@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 onclick="" style="width:180px;">
                                    <h5 class="table-title">Limit Voucher</h5>
                                </td>

                                <td style="width:50px;"><b>From</b></td>
                                <td style="width:145px;"><span 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="28"
                                                            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_FromDate" name="Month_FromDate"
                                                            value="05" 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_FromDate" name="Year_FromDate"
                                                            value="2023" maxlength="4"></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </span></td>
                                <td style="width:40px;"><b>To</b></td>
                                <td style="width:145px;"><span 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="28"
                                                            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="05"
                                                            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="2023"
                                                            maxlength="4"></td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </span></td>

                                <td style="width:60px;"><b>Party</b></td>
                                <td style="width:250px;">
                                    <input id="SearchPartyName"
                                        class="form-control form-control-sm ui-autocomplete-input" type="text"
                                        placeholder="" autocomplete="off">
                                    <!-- <select  id="SearchPartyName" class="form-control form-control-sm" style="width:100%;" placeholder="Party Name" autocomplete="off">
                                        <option value="">Select Party Name</option>
                                    </select> -->
                                </td>
                                <td><span id="ajax_loader"></span></td>
                                <td></td>
                                <td style="width:150px;">
                                    <button type="button" id="AddButton"
                                        onclick="$('#AddModal').modal('show'); setTimeout(function(){ $('#Day_VoucherDate').focus().select(); }, 500);"
                                        class="btn btn-info btn-block">Add <small> (F2)</small></button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <!--****************** Vertical Scroll table start ************************-->
                    <div class="table-responsive CustomFixedTbl" style="min-height:60vh; max-height:60vh;">
                        <table id="" class="table">
                            <thead>
                                <tr>
                                    <th style="width:50px;">Sr</th>
                                    <th style="width:120px;">Date</th>
                                    <th style="width:250px;">Party</th>
                                    <th style="width:50px;">Cr/Dr</th>
                                    <th style="width:100px;" class="text-right">Amount</th>
                                    <th style="width:250px;">Opposite Party</th>
                                    <th style="width:150px;">Remark</th>
                                    <th style="width:150px;">Added</th>
                                    <th style="width:150px;">Updated</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody id="TableBody">
                                <!-- <tr><td>1</td>
                                <td class="text-center">01 / 09 / 2023</td>
                                <td class="text-left">NARENDER HMG</td>
                                <td class="text-center">Dr</td>
                                <td class="text-right">10000</td>
                                <td class="text-left">LIMIT A/C</td>
                                <td class="text-left"></td>
                                <td class="text-center" style="padding:1px 5px;">
                                <div style="margin-top:-1px; font-size:12px;">PC</div>
                                <div style="font-size:10px; opacity:.7;">01-09-2023 17:49</div></td>
                                <td class="text-center" style="padding:1px 5px;">
                                <div style="margin-top:-1px; font-size:12px;">PC</div>
                                <div style="font-size:10px; opacity:.7;">01-09-2023 17:49</div></td>
                                <td><a onclick="EditAction(0)" class="badge badge-primary" href="limit_vouchers#">Edit</a> &nbsp; <a ondblclick="DeleteAction(0)" class="badge badge-danger" href="limit_vouchers#">Delete</a></td>
                                </tr> -->
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th>Sr</th>
                                    <th>Date</th>
                                    <th>Party</th>
                                    <th>Cr/Dr</th>
                                    <th class="text-right">Amount</th>
                                    <th>Opposite Party</th>
                                    <th>Remark</th>
                                    <th>Added</th>
                                    <th>Updated</th>
                                    <th>Action</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    <!--******** Vertical Scroll table end ********************-->

                </div>


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


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

        <!-- Start Add Voucher Modal -->
        <div class="modal fade" id="AddModal" tabindex="-1" role="dialog" aria-labelledby="basicModalLabel"
            aria-hidden="true">
            <div class="modal-dialog modal-lg" role="document">
                <form method="post" id="AddLedgerForm">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="basicModalLabel">Add Limit Voucher</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="row gutters">
                                <div class="col-xl-2 col-lglg-2 col-md-2 col-sm-2 col-12">
                                    <div class="form-group">
                                        <label for="inputReadOnly">Date</label>
                                        <span style="width:150px;" id="VoucherDatePanel">
                                            <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_VoucherDate" name="Day_VoucherDate"
                                                                value="28" 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_VoucherDate"
                                                                name="Month_VoucherDate" value="05" 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_VoucherDate"
                                                                name="Year_VoucherDate" value="2023" maxlength="4"></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </span>
                                    </div>
                                </div>
                                <div class="col-xl-5 col-lglg-5 col-md-5 col-sm-5 col-12">
                                    <div class="form-group">
                                        <label for="disabledInput"><small>Party</small></label>
                                        <input id="PartyNameInput" class="form-control form-control-sm" style="width: 100%;">
                                        <select  id="PartyName" class="form-control form-control-sm" style="display:none;">
                                            <option value="">Select Party Name</option>
                                            @if ($ledgers->isNotEmpty())
                                                @foreach ($ledgers as $a)
                                                    <option value="{{$a->id}}"> {{$a->name}}</option>
                                                @endforeach
                                            @endif
                                        </select>
                                    </div>
                                </div>

                                <div class="col-xl-2 col-lglg-2 col-md-2 col-sm-2 col-12">
                                    <div class="form-group">
                                        <label for="inputReadOnly">Cr/Dr</label>
                                        <select id="AmountType" class="form-control form-control-sm">
                                            <option value="Dr">Dr</option>
                                            <option value="Cr">Cr</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-xl-3 col-lglg-3 col-md-3 col-sm-3 col-12">
                                    <div class="form-group">
                                        <label for="inputReadOnly">Amount</label>
                                        <input type="text" id="Amount" onkeypress="return isNumberKey(event)"
                                            class="form-control form-control-sm" placeholder="">
                                    </div>
                                </div>
                            </div>
                            <div class="row gutters">
                                <div style="display: none;" class="col-xl-7 col-lglg-7 col-md-7 col-sm-7 col-12">
                                    <div class="form-group">
                                        <label for="disabledInput">Opposite Party</label>
                                        <input type="text" readonly id="OppositeParty"
                                            class="form-control form-control-sm ui-autocomplete-input" value="LIMIT A/C"
                                            autocomplete="off">
                                    </div>
                                </div>
                                <div class="col-xl-5 col-lglg-5 col-md-5 col-sm-5 col-12">
                                    <div class="form-group">
                                        <label for="disabledInput">Remark</label>
                                        <input type="text" id="Remark" class="form-control form-control-sm"
                                            placeholder="">
                                    </div>
                                </div>
                            </div>
                            <div class="row gutters text-center">
                                <b class="text-center w-100"><span class="text-center" style="color:#f03;"
                                        id="RiskyPanel"></span></b>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button id="SaveBtn" onclick="SaveVoucher()" type="button"
                                class="btn btn-primary">Save</button>

                        </div>
                    </div>
                </form>
            </div>
        </div>
        <!-- End Add Voucher Modal -->
    </div>

    <!-- Start Modal -->
    <div class="modal fade" id="FlashMessagePanelModal" tabindex="-1" role="dialog" aria-labelledby="basicModalLabel"
        aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="basicModalLabel">Flash Message</h5>
                    <button type="button" onclick="flashMessagePanelClose()" class="close" data-dismiss="modal"
                        aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row gutters">

                        <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12 text-center">
                            <h3 class="text-center" id="FlashMessage"></h3>
                            <h3>
                            </h3>
                        </div>
                    </div>
                    <div class="row gutters">

                    </div>
                </div>

            </div>
        </div>
    </div>
    <!-- End Modal -->


    <!-- Start Modal -->
    <div class="modal fade" id="OpenOrganizationModal" tabindex="-1" role="dialog" aria-labelledby="basicModalLabel"
        aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-lg" role="document">
            <form method="post" id="AddLedgerForm">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="basicModalLabel">Current Organization</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="row gutters align-top">
                            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
                                <div class="events-container" style="margin-bottom:15px;">
                                    <div class="event-list">
                                        <div class="event-icon">
                                            <div style="margin-right: 0rem;" class="form-check form-check-inline">
                                                <input style="width:30px; height:30px;"
                                                    onclick="setCurrentOrganization(this.id)" class="form-check-input"
                                                    type="radio" name="SetOrganizationGroup" id="SetOrganization1001"
                                                    value="1001">
                                            </div>
                                        </div>
                                        <div class="event-info">
                                            <div class="event-title">
                                                stark99 </div>
                                            <div class="event-date">
                                                RK
                                                | 9999999999
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
                                <div class="events-container" style="margin-bottom:15px;">
                                    <div class="event-list">
                                        <div class="event-icon">
                                            <div style="margin-right: 0rem;" class="form-check form-check-inline">
                                                <input style="width:30px; height:30px;"
                                                    onclick="setCurrentOrganization(this.id)" class="form-check-input"
                                                    type="radio" name="SetOrganizationGroup" id="SetOrganization1002"
                                                    value="1002">
                                            </div>
                                        </div>
                                        <div class="event-info">
                                            <div class="event-title">
                                                GOO99 </div>
                                            <div class="event-date">
                                                RINKU
                                                | 9888758025
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
                                <div class="events-container" style="margin-bottom:15px;">
                                    <div class="event-list">
                                        <div class="event-icon">
                                            <div style="margin-right: 0rem;" class="form-check form-check-inline">
                                                <input checked="" style="width:30px; height:30px;"
                                                    onclick="setCurrentOrganization(this.id)" class="form-check-input"
                                                    type="radio" name="SetOrganizationGroup" id="SetOrganization1003"
                                                    value="1003">
                                            </div>
                                        </div>
                                        <div class="event-info">
                                            <div class="event-title">
                                                RJ99 <small style="color:#f03;">(Current)</small> </div>
                                            <div class="event-date">
                                                RAKESH
                                                | 9999999999
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
                                <div class="events-container" style="margin-bottom:15px;">
                                    <div class="event-list">
                                        <div class="event-icon">
                                            <div style="margin-right: 0rem;" class="form-check form-check-inline">
                                                <input style="width:30px; height:30px;"
                                                    onclick="setCurrentOrganization(this.id)" class="form-check-input"
                                                    type="radio" name="SetOrganizationGroup" id="SetOrganization1011"
                                                    value="1011">
                                            </div>
                                        </div>
                                        <div class="event-info">
                                            <div class="event-title">
                                                STARK61 </div>
                                            <div class="event-date">
                                                RK JI
                                                | 8872430061
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
                                <div class="events-container" style="margin-bottom:15px;">
                                    <div class="event-list">
                                        <div class="event-icon">
                                            <div style="margin-right: 0rem;" class="form-check form-check-inline">
                                                <input style="width:30px; height:30px;"
                                                    onclick="setCurrentOrganization(this.id)" class="form-check-input"
                                                    type="radio" name="SetOrganizationGroup" id="SetOrganization1012"
                                                    value="1012">
                                            </div>
                                        </div>
                                        <div class="event-info">
                                            <div class="event-title">
                                                IDEXCH99 </div>
                                            <div class="event-date">
                                                IDEXCH
                                                | 9090909090
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-4">
                                <div class="events-container" style="margin-bottom:15px;">
                                    <div class="event-list">
                                        <div class="event-icon">
                                            <div style="margin-right: 0rem;" class="form-check form-check-inline">
                                                <input style="width:30px; height:30px;"
                                                    onclick="setCurrentOrganization(this.id)" class="form-check-input"
                                                    type="radio" name="SetOrganizationGroup" id="SetOrganization1013"
                                                    value="1013">
                                            </div>
                                        </div>
                                        <div class="event-info">
                                            <div class="event-title">
                                                AMAN EXCH </div>
                                            <div class="event-date">
                                                AMAN
                                                | 9090909090
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row gutters">

                        </div>
                    </div>

                </div>
            </form>
        </div>
    </div>
    <!-- End Modal -->


    <!-- Start Edit Modal -->
    <div class="modal fade" id="ChangePasswordModal" tabindex="-1" role="dialog" aria-labelledby="basicModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Change Password</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">

                    <ul class="nav nav-tabs" id="myTab" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="home-tab" data-toggle="tab"
                                href="limit_vouchers#info" role="tab" aria-controls="home"
                                aria-selected="true">Password</a>
                        </li>
                    </ul>
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="info" role="tabpanel" aria-labelledby="home-tab">
                            <form action="limit_vouchers#" autocomplete="off">
                                <div class="row gutters">
                                    <div class="col-xl-6 col-lglg-6 col-md-6 col-sm-6 col-12">
                                        <div class="form-group">
                                            <label for="disabledInput">Current Password</label>
                                            <input type="password" id="cp_OldPassword"
                                                class="form-control form-control-sm" placeholder="">
                                        </div>
                                    </div>
                                </div>
                                <div class="row gutters">
                                    <div class="col-xl-6 col-lglg-6 col-md-6 col-sm-6 col-12">
                                        <div class="form-group">
                                            <label for="disabledInput">New Password</label>
                                            <input type="password" id="cp_NewPassword"
                                                class="form-control form-control-sm" placeholder="">
                                        </div>
                                    </div>
                                </div>
                                <div class="row gutters">
                                    <div class="col-xl-6 col-lglg-6 col-md-6 col-sm-6 col-12">
                                        <div class="form-group">
                                            <label for="disabledInput">Confirm Password</label>
                                            <input type="password" id="cp_ConfirmPassword"
                                                class="form-control form-control-sm" placeholder="">
                                        </div>
                                    </div>
                                </div>

                                <div class="row gutters">

                                </div>
                                <div class="row gutters">
                                    <div class="col-xl-4 col-lglg-4 col-md-4 col-sm-4 col-12">
                                        <div class="form-group">
                                            <button onclick="setChangePassword()" type="button"
                                                class="btn btn-success  btn-block">Change Password</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>




                    </div>

                </div>

            </div>
        </div>
    </div>
    <!-- End Edit Modal -->

    <!-- Start TransJantri Modal -->
    <div class="modal fade" id="Hissab_JantriViewModal" tabindex="-1" role="dialog" aria-labelledby="basicModalLabel"
        aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><span id="Hissab_JantriViewModalPartyName"></span></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 class="table-responsive Hissab_JantriView">
                        <table class="CustomJantriTable">
                            
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End TransJantri Modal -->

    <!-- Start Loader Modal -->
    <div class="modal fade" id="Hissab_LoaderPopupModal" tabindex="-1" role="dialog" aria-labelledby="basicModalLabel"
        aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-md" role="document">
            <div class="modal-content">
                <div class="modal-body" style="padding:3px !important;">
                    <div class="table-responsive">
                        <br><br>
                        <div class="text-center">
                            <h5>Hissab</h5>
                        </div>
                        <br>
                        <div class="d-flex justify-content-center">
                            <div class="spinner-border">
                                <span class="sr-only">Loading...</span>
                            </div>
                        </div>
                        <br>
                        <div class="text-center">
                            <h5>Request under process. Please wait...</h5>
                        </div>
                        <br><br>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End Loader Modal -->
    <!-- Start VoucherAlert Modal -->
    <div class="modal fade" id="VoucherAlertModal" tabindex="-1" role="dialog" aria-labelledby="basicModalLabel"
        aria-hidden="true" data-backdrop="static" data-keyboard="false">
        <div class="modal-dialog modal-sm" role="document">
            <form method="post" id="VoucherAlertForm">
                <div class="modal-content">
                    <div class="modal-header" style="background:#f03 !important;">
                        <h5 class="modal-title">Voucher Warning</h5>
                    </div>
                    <div class="modal-body">
                        <div class="row gutters">
                            <div class="col-xl-12 col-lglg-12 col-md-12 col-sm-12 col-12">
                                <div class="form-group text-center">
                                    <h4>Voucher is already exist! </h4>
                                    <b>Do you want to process or cancel?</b>
                                </div>
                            </div>
                            <div class="col-xl-12 col-lglg-12 col-md-12 col-sm-12 col-12">
                                <div class="form-group">
                                    <b id="VoucherAlertMessage"></b>
                                </div>
                            </div>
                            <div class="col-xl-6 col-lglg-6 col-md-6 col-sm-6 col-12">
                                <div class="form-group text-center">
                                    <button id="VoucherExistAlertProcessBtn" onclick="VoucherExistAlertProcess()"
                                        type="button" class="btn btn-danger">Process</button>
                                </div>
                            </div>
                            <div class="col-xl-6 col-lglg-6 col-md-6 col-sm-6 col-12">
                                <div class="form-group text-center">
                                    <button onclick="VoucherExistAlertCancel()" type="button" data-dismiss="modal"
                                        aria-label="Close" class="btn btn-warning">Cancel</button>
                                </div>
                            </div>
                        </div>


                        <div class="row gutters">

                        </div>
                    </div>

                </div>
            </form>
        </div>
    </div>
    <!-- End VoucherAlert Modal -->
    <script>
        var BaseUrl = "/";
        var nav = "limit_vouchers";
        var LoginRoleId = "2";
    </script>

@include('partial.footer')

    <script>
        var VoucherType = '0';

        var EditVoucherId = "";
        var Vouchers_ArrayList = [];
        var SelectedRow = [];

        var SearchLedgerId = '';
        var LedgerId = '';
        var OppositeLedgerId = '';
        var currDate = "{{date('Y-m-d')}}";

        $(document).ready(function () {
            if (IsActionAllowLoad(Page_Add) == false) {
                $('#AddButton').hide();
            }
            //BlockSpace('#OrganizationUserName');
            $("#FromDatePanel").html(CustomDatePicker("FromDate", currDate));
            $("#ToDatePanel").html(CustomDatePicker("ToDate", currDate));
            $("#VoucherDatePanel").html(CustomDatePicker("VoucherDate", currDate));
            $('#Day_FromDate').focus().select();
            Vouchers();
        });


        $(function () {
            // $(document).on('change','#SearchPartyName', function(){
            //     Vouchers();
            // });
            // $('#AddButton').on('click', function () {
            //     $('#partyName').val('');
            //     ('#partyName').trigger('change');
            // });
            $("#SearchPartyName").autocomplete({
                source: (VoucherType == 1 ? '/ajax_journal_ledger_vouchers' : '/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_report", $(this).val(), $(this).attr("id"), function (response) {
                        SearchLedgerId = response.data.LedgerId;
                        Vouchers();
                    });
                } else {
                    SearchLedgerId = "";
                    Vouchers();
                }
            });
            // $("#PartyName").autocomplete({
            //     source: (VoucherType == 1 ? '/ajax_journal_ledger_vouchers' : '/ajax_limit_ledger_vouchers'),
            //     cache: true,
            //     autoSelect: true,
            //     autoFocus: true,
            //     minLength: 0
            // }).focus(function () {
            //     $(this).autocomplete("search", $(this).val());
            //     $('#PartyNameBalance').text('0');
            //     $("#RiskyPanel").text("");
            // }).blur(function () {
            //     if ($(this).val().length > 0) {
            //         getLedgerInfo("/ajax_ledger_info", $(this).val(), $(this).attr("id"), function (response) {
            //             LedgerId = response.data.LedgerId;
            //             $('#PartyNameBalance').text(Math.round(response.data.LedgerBalance));
            //             if (VoucherType != 1 && response.data.IsRisky == 1) {
            //                 var IsRiskyAlert = "Risky mode. Discuss with higher authority before perform an action.";
            //                 $("#RiskyPanel").text(IsRiskyAlert);
            //                 alert(IsRiskyAlert);
            //             } else {
            //                 $("#RiskyPanel").text("");
            //             }
            //         });
            //     } else {
            //         LedgerId = "";
            //     }
            // });
            // $("#OppositeParty").autocomplete({
            //     source: (VoucherType == 1 ? '/ajax_journal_ledger_vouchers' : '/ajax_limit_ledger_vouchers'),
            //     cache: true,
            //     autoSelect: true,
            //     autoFocus: true,
            //     minLength: 0
            // }).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;
            //         });
            //     } else {
            //         OppositeLedgerId = "";
            //     }
            // });
        });

        function Vouchers() {
            var JsonData = {
                'LedgerId': SearchLedgerId,
                'FromDate': getCustomDatePicker("FromDate", 'D'),
                'ToDate': getCustomDatePicker("ToDate", 'D'),
                'IsDeleted': $('#IsDeleted').val(),
                'VoucherType': VoucherType
            };
            JsonData['nav'] = nav;
            JsonData['Method'] = "ajax_voucher_all";
            AjaxLoader("show_black");
            AjaxCall("/get_limit_vouchers", JsonData, function (response) {
                AjaxLoader("hide");
                if (response.status == true) {
                    var Row = '';
                    var TotalAmount = 0;
                    Vouchers_ArrayList = [];
                    $.each(response.data, function (index, obj) {
                        Vouchers_ArrayList[index] = obj;
                        var ActionHtml = '<a onclick="EditAction(' + index + ')" class="badge badge-primary" href="#">Edit</a> &nbsp; <a ondblclick="DeleteAction(' + index + ')" class="badge badge-danger" href="#">Delete</a>';
                        if (this.RecordStatus == 'D') {
                            ActionHtml = '<small style="color:#f03;">(Deleted)</small>';
                        }
                        Row += '<tr>'
                            + '<td>' + (index + 1) + '</td>'
                            + '<td class="text-center">' + setDateProject(this.VoucherDate) + '</td>'
                            + '<td class="text-left">' + this.LedgerName + '</td>'
                            + '<td class="text-center">' + this.AmountType + '</td>'
                            + '<td class="text-right">' + this.Amount + '</td>'
                            + '<td class="text-left">' + this.OppositLedgerName + '</td>'
                            + '<td class="text-left">' + this.Remark + '</td>'
                            + '<td class="text-center" style="padding:1px 5px;"><div style="margin-top:-1px; font-size:12px;">' + TextLimit(this.AddedBy, 15) + '</div><div style="font-size:10px; opacity:.7;">' + setDateTimeProject(this.AddedDate) + '</div></td>'
                            + '<td class="text-center" style="padding:1px 5px;"><div style="margin-top:-1px; font-size:12px;">' + TextLimit(this.UpdatedBy, 15) + '</div><div style="font-size:10px; opacity:.7;">' + setDateTimeProject(this.UpdatedDate) + '</div></td>'
                            + '<td>' + ActionHtml + '</td>'
                            + '</tr>';
                    });
                    $('#TableBody').html(Row);
                    //console.clear();
                } else if (response.status == false) {
                    $('#TableBody').html("");
                    Notify("Error ", response.message, "danger");
                }
            });
        }

        function DeleteAction(index) {
            //if (IsActionAllow(Page_Delete) == false) { return false; }
            if (!confirm('Are you sure!')) {
                return false;
            }
            SelectedRow = {};
            SelectedRow = Vouchers_ArrayList[index];
            var JsonData = {
                'VoucherId': SelectedRow.id,
                'VoucherType': VoucherType
            };
            // if ((JsonData.VoucherType == "" || JsonData.VoucherId == "")) {
            //     Notify("Invalid ", "Please enter all valid fields!", "danger");
            //     return false;
            // }
            JsonData['nav'] = nav;
            JsonData['Method'] = "ajax_voucher_delete";
            AjaxCall("/del_limit_voucher", JsonData, function (response) {
                if (response.status == true) {
                    Notify("Delete Success ", response.message, "success");
                    Vouchers();
                } else if (response.status == false) {
                    Notify("Error ", response.message, "danger");
                }
            });
        }

        function VoucherExistAlert() {
            $('#VoucherAlertMessage').text("");
            $('#VoucherAlertModal').modal("hide");
            var JsonData = {
                //'LedgerId': LedgerId,
                'LedgerName': $('#PartyName').val(),
                //'OppositeLedgerId': OppositeLedgerId,
                'OppositeLedgerName': $('#OppositeParty').val(),
                'Amount': $('#Amount').val(),
                'AmountType': $('#AmountType').val(),
                'VoucherDate': getCustomDatePicker("VoucherDate", 'D'),
                'VoucherType': VoucherType,
                'Remark': $('#Remark').val(),
            };
            JsonData['nav'] = nav;
            JsonData['Method'] = "ajax_voucher_is_exist";
            AjaxCall("/check_voucher_exists", JsonData, function (response) {
                if (response.status == true) {
                    //alert(response.data.length);
                    if (response.data.length > 0) {
                        $('#VoucherAlertMessage').text(response.data[0].AddedBy + " has been added this voucher on " + response.data[0].AddedDate);
                        $('#VoucherExistAlertProcessBtn').prop('disabled', false);
                        $('#VoucherAlertModal').modal("show");
                    } else {
                        SaveVoucherDirect();
                    }
                } else if (response.status == false) {
                    SaveVoucherDirect();
                }
            });
        }

        function VoucherExistAlertProcess() {
            $('#VoucherExistAlertProcessBtn').prop('disabled', false);
            SaveVoucherDirect();
            $('#VoucherAlertModal').modal("hide");
        }

        function VoucherExistAlertCancel() {
            $('#SaveBtn').prop('disabled', false);
            $('#VoucherAlertModal').modal("hide");
        }

        function SaveVoucher() {
            if (EditVoucherId.length != 0) {
                SaveVoucherDirect();
            } else {
                $('#SaveBtn').prop('disabled', true);
                VoucherExistAlert();
            }
        }

        function SaveVoucherDirect() {
            if (IsActionAllow(Page_Add) == false) { return false; }
            $('#SaveBtn').prop('disabled', true);
            var JsonData = {
                //'LedgerId': LedgerId,
                'LedgerName': $('#PartyName').val(),
                //'OppositeLedgerId': OppositeLedgerId,
                'OppositeLedgerName': $('#OppositeParty').val(),
                'Amount': $('#Amount').val(),
                'AmountType': $('#AmountType').val(),
                'VoucherDate': getCustomDatePicker("VoucherDate", 'D'),
                'VoucherType': VoucherType,
                'Remark': $('#Remark').val(),
            };

            if (JsonData.LedgerName == "") {
                Notify("Invalid Party", "Please enter all valid Party!", "danger");
                $('#PartyName').focus().select();
                $('#SaveBtn').prop('disabled', false);
                return false;
            }
            if (JsonData.OppositeLedgerName == "") {
                Notify("Invalid Opposite Party", "Please enter all valid Opposite Party!", "danger");
                $('#OppositeParty').focus().select();
                $('#SaveBtn').prop('disabled', false);
                return false;
            }

            if (parseFloat(JsonData.Amount) <= 0 || JsonData.Amount == "") {
                Notify("Invalid Amount", "Please enter all valid amount!", "danger");
                $('#Amount').focus().select();
                $('#SaveBtn').prop('disabled', false);
                return false;
            }

            if (EditVoucherId.length != 0) {
                JsonData['VoucherId'] = EditVoucherId;
            }
            JsonData['nav'] = nav;
            JsonData['Method'] = "ajax_voucher_save";
            AjaxCall("/add_limit_voucher", JsonData, function (response) {
                if (response.status == true) {
                    Notify("Success ", response.message, "success");
                    $('#CreditAmount').val('');
                    $('#DebitAmount').val('');
                    if (EditVoucherId.length != 0) {
                        SelectedRow = {};
                        EditVoucherId = "";
                        $('#AddModal').modal('hide');
                    }
                    $('#PartyName').val('');
                    $('#PartyNameInput').val('')
                    $('#PartyName').trigger('change');
                    $('#OppositeParty').val('LIMIT A/C');
                    $('#AmountType').val((VoucherType == 1 ? 'Cr' : "Dr"));
                    $('#Amount').val('');
                    $('#Remark').val('');
                    $('#PartyNameBalance').text('0');
                    $("#RiskyPanel").text("");
                    $('#Day_VoucherDate').focus().select();

                    $('#SaveBtn').prop('disabled', false);
                    Vouchers();
                } else if (response.status == false) {
                    Notify("Error ", response.message, "danger");
                    $('#SaveBtn').prop('disabled', false);
                }
            });
        }

        function EditAction(index) {
            if (IsActionAllow(Page_Edit) == false) { return false; }

            SelectedRow = {};
            SelectedRow = Vouchers_ArrayList[index];
            EditVoucherId = SelectedRow.id;


            if (SelectedRow.Remark == "AUTO_SETT" || SelectedRow.Remark == "AUTO_SETTLE" || SelectedRow.Remark == "AUTO_SETTLE_AGENT") {
                Notify("Unauthorized ", "Please choose a valid voucher!", "danger");
                return false;
            }

            $('#AddModal').modal('show');

            $('#PartyName').val('');
            $('#OppositeParty').val('');
            $('#Amount').val('');
            $('#Remark').val('');
            $('#AmountType').val('Cr');

            $('#PartyName').val(SelectedRow.LedgerId);
            $('#OppositeParty').val(SelectedRow.OppositLedgerName);
            $('#AmountType').val(SelectedRow.AmountType);
            $('#Amount').val(SelectedRow.Amount);
            $('#Remark').val(SelectedRow.Remark);
            $('#PartyName').trigger('change');

            // getLedgerInfo("/ajax_ledger_info", $('#PartyName').val(), "PartyName", function (response) {
            //     LedgerId = response.data.LedgerId;
            //     getLedgerInfo("/ajax_ledger_info", $('#OppositeParty').val(), "OppositeParty", function (response) {
            //         OppositeLedgerId = response.data.LedgerId;
            //     });
            // });

            setTimeout(function () { $('#PartyName').focus().select(); }, 300);

        }



        $(function () {
            // $('#SearchPartyName').select2();
            $("body").keydown(function (e) {
                var keyCode = e.keyCode || e.which;
                if (keyCode == 113) // F2 - Save Transaction
                {
                    if (IsActionAllow(Page_Add) == false) { return false; }
                    e.preventDefault();
                    $('#AddButton').click();
                }
                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({});

    $(document).ready(function () {
        var availableParty = [];
        var agentMap = {};
        
        $("#PartyName option").each(function() {
            var value = $(this).val();
            var text = $(this).text();
            console.log(value);
            
            if(value) { // Exclude the first empty option
        
                availableParty.push(text.trim());
                agentMap[text.trim()] = value;
            }
        });

        function initializeAutocomplete(inputSelector, selectSelector) {
            $(inputSelector).autocomplete({
                source: availableParty,
                select: function (event, ui) {
                    var selectedText = ui.item.value;
                    var selectedValue = agentMap[selectedText];

                    // Set the value of the input and the hidden select
                    $(this).val(selectedText); // Input field
                    $(selectSelector).val(selectedValue); // Hidden select field
                }
            });
        }

        initializeAutocomplete('#PartyNameInput', '#PartyName');
    });
    </script>