@extends('layouts/acc_layout')
@section('title', '| Loan Disbursement Bank Payment (MIS)')
@section('content')
    <div class="row">
        <div class="col-md-12">
            <div class="viewTitle" style="border-bottom: 1px solid white;">
                <a href="{{ url('acc/loanDisbursePayment/') }}" class="btn btn-info pull-right addViewBtn">
                    <i class="glyphicon glyphicon-th-list viewIcon"></i>LIST
                </a>
            </div>
            <div class="panel panel-default">
                <div class="panel-body panelBodyView" style="padding-bottom: 10px;">
                    <div class="panel-title">Bank Reconcile Information (Member Loan Payment)</div>
                    <br>
                    <div class="table-responsive">
                        {!! Form::open(['url' => '#', 'files' => 'true', 'id' => 'submitForm']) !!}
                        <input type="hidden" name="adviceId" value="{{ $adviceId }}">
                        <table class="table table-striped table-bordered" style="color:black; border-collapse: collapse;">
                            <thead>
                                <tr>
                                    <th rowspan="2" style="width: 3%">SL NO</th>
                                    <th rowspan="2" style="width: 7%">Branch</th>
                                    <th rowspan="2" style="width: 7%">Member Name</th>
                                    <th rowspan="2" style="width: 7%">Member Id</th>
                                    <th colspan="3">Previous Bank A/C Information</th>
                                    <th colspan="4">Recent Bank A/C Information</th>
                                    <th rowspan="2" style="width: 7%">Amount (TK.)</th>
                                    <th rowspan="2" style="width: 7%">Resend Date</th>
                                    <th rowspan="2" style="width: 7%">Action</th>
                                </tr>
                                <tr>

                                    <th style="width: 7%">Bank Name</th>
                                    <th style="width: 7%">Account No.</th>
                                    <th style="width: 7%">Routing No.</th>
                                    <th style="width: 7%">Bank Types</th>
                                    <th style="width: 7%">Bank Name</th>
                                    <th style="width: 7%">Account No.</th>
                                    <th style="width: 7%">Routing No.</th>
                                </tr>
                            </thead>
                            <tbody id="payment-rows">
                                <tr class="payment-row">
                                    <td>1</td>
                                    <td>
                                        {!! Form::select('branch[]', ['' => 'Select'] + $uniqueData['branches'], null, [
                                            'class' => 'form-control',
                                            'required',
                                        ]) !!}
                                    </td>

                                    <td>{!! Form::select('memberName[]', ['' => 'Select'], null, ['class' => 'form-control', 'required']) !!}</td>
                                    <td>{!! Form::text('memberId[]', null, ['class' => 'form-control member-id', 'readonly' => true]) !!}</td>
                                    <td>{!! Form::text('prBankName[]', null, ['class' => 'form-control', 'readonly' => true]) !!}</td>
                                    <td>{!! Form::text('prAccountNo[]', null, ['class' => 'form-control', 'readonly' => true]) !!}</td>
                                    <td>{!! Form::text('prRoutingNo[]', null, ['class' => 'form-control', 'readonly' => true]) !!}</td>
                                    <td> {!! Form::select('bankType[]', ['' => 'Select'] + $BANK_TYPES, null, [
                                        'class' => 'form-control bank-type',
                                    ]) !!}</td>
                                    <td>{!! Form::select('bankId[]', ['' => 'Select'], null, ['class' => 'form-control bank-id']) !!} </td>
                                    <td>{!! Form::text('rcAccountNo[]', null, ['class' => 'form-control rcAccountNo', 'autocomplete' => 'off']) !!}</td>
                                    <td>{!! Form::text('rcRoutingNo[]', null, [
                                        'class' => 'form-control rcRoutingNo',
                                        'autocomplete' => 'off',
                                        'readonly' => false,
                                    ]) !!}</td>
                                    <td>{!! Form::text('amount[]', null, ['class' => 'form-control', 'autocomplete' => 'off', 'readonly' => true]) !!}</td>

                                    <td>{!! Form::text('resendDate[]', null, ['class' => 'form-control resendDate', 'autocomplete' => 'off']) !!}</td>
                                    <td>
                                        <i class="fa-plus-square add-more" style="font-size: 26px;"></i>
                                        <i class="fa-minus-square remove-row" style="font-size: 26px; display:none"></i>
                                    </td>
                                </tr>
                            </tbody>

                        </table>

                        <div class="col-sm-12 text-center" style="margin-top: 20px ">
                            {!! Form::submit('Submit', ['id' => 'add', 'class' => 'btn btn-info']) !!}
                        </div>

                        {!! Form::close() !!}
                    </div>
                    <div id="editModal" class="modal fade" style="margin-top:2%;">
                        <div class="modal-header">
                            <h4 class="modal-title">Update Reconcile</h4>
                        </div>
                        <div class="modal-body" style="padding:30px;margin-left:160px">
                            <div class="col-md-10 fullbody">
                                <div class="panel panel-default">
                                    <div class="panel-heading">
                                        <div class="panel-title" style="margin-top:30px">Update Reconcile</div>
                                    </div>
                                    <div class="table-responsive" style="margin-top:20px">
                                        {!! Form::open(['url' => '#', 'files' => 'true', 'id' => 'updateForm']) !!}

                                        <!-- Hidden input to store the ID -->
                                        <input type="hidden" name="adviceId" value="{{ $adviceId }}">
                                        <input id="id" type="hidden" name="id" value="" />

                                        <table id="updateReconcile" class="table table-striped table-bordered"
                                            style="color:black; border-collapse: collapse;">
                                            <thead>
                                                <tr>
                                                    <th rowspan="2" style="width: 7%">Branch</th>
                                                    <th rowspan="2" style="width: 7%">Member Name</th>
                                                    <th rowspan="2" style="width: 7%">Member Id</th>
                                                    <th colspan="3">Previous Bank A/C Information</th>
                                                    <th colspan="4">Recent Bank A/C Information</th>
                                                    <th rowspan="2" style="width: 7%">Amount (TK.)</th>
                                                    <th rowspan="2" style="width: 7%">Resend Date</th>
                                                </tr>
                                                <tr>
                                                    <th style="width: 7%">Bank Name</th>
                                                    <th style="width: 7%">Account No.</th>
                                                    <th style="width: 7%">Routing No.</th>
                                                    <th style="width: 7%">Bank Types</th>
                                                    <th style="width: 7%">Bank Name</th>
                                                    <th style="width: 7%">Account No.</th>
                                                    <th style="width: 7%">Routing No.</th>
                                                </tr>
                                            </thead>
                                            <tbody id="payment-rows">
                                                <tr class="payment-row">
                                                    <td id="branch"></td>
                                                    <td id="memberName"></td>

                                                    <td id="memberId">
                                                    </td>

                                                    <!-- Previous Bank A/C Information -->
                                                    <td id="prBankName"></td>
                                                    <td id="prAccount"></td>
                                                    <td id="prRouting"></td>

                                                    <!-- Recent Bank A/C Information -->
                                                    <td>{!! Form::select('bankType[]', ['' => 'Select'] + $BANK_TYPES, null, [
                                                        'class' => 'form-control editbank-type',
                                                        'required',
                                                    ]) !!}</td>
                                                    <td>{!! Form::select('bankId', ['' => 'Select'], null, ['class' => 'form-control editbank-id', 'required']) !!}</td>
                                                    <td>{!! Form::text('rcAccountNo', null, ['class' => 'form-control editrcAccountNo', 'autocomplete' => 'off']) !!}</td>
                                                    <td>{!! Form::text('rcRoutingNo', null, [
                                                        'class' => 'form-control editrcRoutingNo',
                                                        'autocomplete' => 'off',
                                                        'readonly' => false,
                                                    ]) !!}</td>

                                                    <td id="loan"></td>
                                                    <td>{!! Form::text('resendDate', null, ['class' => 'form-control editresendDate', 'autocomplete' => 'off']) !!}</td>
                                                </tr>
                                            </tbody>
                                        </table>

                                        <div class="modal-footer d-flex justify-content-between">
                                            <input id="EMreconcileId" type="hidden" name="reconcileId" value="">

                                            <!-- Update Button -->
                                            <button type="button" id="updateButton" class="btn btn-success">
                                                <span class="glyphicon glyphicon-edit"
                                                    style="padding-right:4px;"></span>Update
                                            </button>

                                            <!-- Close Button -->
                                            <button type="button" style="margin-bottom:10px" class="btn btn-danger"
                                                data-dismiss="modal">
                                                <span class="glyphicon glyphicon-remove"
                                                    style="padding-right:4px;"></span>Close
                                            </button>
                                        </div>

                                        {!! Form::close() !!}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Start Delete Modal -->
                    <div id="deleteModal" class="modal fade" style="margin-top:3%;">
                        <div class="modal-dialog modal-lg">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h4 class="modal-title"
                                        style="clear:both;background-color:black;color:white; padding:10px;text-align:center;">
                                        Delete Reconcile</h4>
                                </div>
                                <div class="modal-body ">
                                    {{-- <div class="row" style="padding-bottom:20px;"> </div> --}}
                                    <h2 style="color: red;">Are You Confirm to Delete This Record?</h2>
                                    <div class="modal-footer">
                                        <input id="DMreconcileId" type="hidden" value="" />
                                        <button type="button" class="btn btn-danger" id="DMreconcile"
                                            data-dismiss="modal">confirm</button>
                                        <button type="button" class="btn btn-warning" data-dismiss="modal"><span
                                                class="glyphicon glyphicon-remove"
                                                style="padding-right:4px;"></span>Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="panel-title">Bank Reconcile Information List (Member Loan Payment)</div>
                    <br>

                    <div class="table-responsive">

                        <table class="table table-striped table-bordered" style="color:black; border-collapse: collapse;">
                            <thead>
                                <tr>
                                    <th rowspan="2" style="width: 3%">SL NO</th>
                                    <th rowspan="2" style="width: 7%">Branch</th>
                                    <th rowspan="2" style="width: 7%">Member Name</th>
                                    <th rowspan="2" style="width: 7%">Member Id</th>
                                    <th colspan="3">Previous Bank A/C Information</th>
                                    <th colspan="4">Recent Bank A/C Information</th>
                                    <th rowspan="2" style="width: 7%">Amount (TK.)</th>
                                    <th rowspan="2" style="width: 7%">Resend Date</th>
                                    <th rowspan="2" style="width: 7%">Action</th>
                                </tr>
                                <tr>
                                    <th style="width: 7%">Bank Name</th>
                                    <th style="width: 7%">Account No.</th>
                                    <th style="width: 7%">Routing No.</th>
                                    <th style="width: 7%">Bank Types</th>
                                    <th style="width: 7%">Bank Name</th>
                                    <th style="width: 7%">Account No.</th>
                                    <th style="width: 7%">Routing No.</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($reconcileData as $index => $data)
                                    <tr class="payment-row">
                                        <td>{{ $index + 1 }}</td>
                                        <td>
                                            {{ $data['branchInfo']->branchNameWithCode }}

                                        </td>
                                        <td>{{ $data['memberInfo']->memberName }}</td>
                                        <td>{{ $data['memberInfo']->memberCode }}</td>
                                        <td>{{ $data['memberInfo']->bankName }}</td>
                                        <td>{{ $data['memberInfo']->bankAccountNumber }}</td>
                                        <td>{{ $data['memberInfo']->bankRoutingNumber }}</td>
                                        <td>
                                            {{ $BANK_TYPES[$data['bankType']] ?? '-' }}
                                        </td>
                                        <td>{{ $data['bankInfo']->name ?? '-' }}</td>
                                        <td>{{ $data['reconcile']->accountNumber ?? '-' }}</td>
                                        <td>{{ $data['reconcile']->routingNumber ?? '-' }}</td>
                                        <td>{{ $data['loanAmount'] }}</td>
                                        <td>{{ $data['reconcile']->resendDate ? date('d-m-Y', strtotime($data['reconcile']->resendDate)) : '-' }}
                                        </td>

                                        <td class="text-center" width="80">
                                            <a id="editIcone" href="javascript:;" class="edit-modal"
                                                reconcileId="{{ $data['reconcile']->id }}">
                                                <span class="glyphicon glyphicon-edit"></span>
                                            </a> &nbsp;
                                            <a id="deleteIcone" href="javascript:;" class="delete-modal"
                                                reconcileId="{{ $data['reconcile']->id }}">
                                                <span class="glyphicon glyphicon-trash"></span>
                                            </a>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
                {{-- </div> --}}





            </div>
        </div>
    </div>

    <script type="text/javascript">
        $(document).ready(function() {
            initializeDatePicker();

            // Function to initialize datepickers for all .resendDate fields
            function initializeDatePicker() {
                $(".resendDate").each(function() {
                    $(this).removeClass('hasDatepicker'); // Remove any prior datepicker instance
                    $(this).datepicker({
                        dateFormat: "yy-mm-dd",
                        changeMonth: true,
                        changeYear: true,

                    });
                });
            }

            $(document).on('click', '.add-more', function(e) {
                e.preventDefault();

                // Clone the first row and clear its input values
                var newRow = $('#payment-rows .payment-row:first').clone();
                newRow.find('input').val(''); // Clear input values
                newRow.find('select[name="memberName[]"]').prop('disabled', true).empty().append(
                    '<option value="">Select</option>'
                ); // Reset select dropdown to default

                // Ensure unique 'name' and 'id' attributes for the new input fields
                var uniqueId = Date.now(); // Generate a unique timestamp or id
                newRow.find('input.resendDate')
                    .attr('name', 'resendDate[]') // Unique name
                    .attr('id', 'resendDate'); // Unique id

                // Append the new row to the payment rows
                $('#payment-rows').append(newRow);

                // Reinitialize the datepicker for the new resendDate field
                initializeDatePicker();

                // Update the row number and remove button visibility
                updateSlNo();
                $('#payment-rows .payment-row').find('.remove-row').show();
                $('#payment-rows .payment-row:first').find('.remove-row').hide();
            });

            var banks = {!! json_encode($banks) !!};
            var mobileBankings = {!! json_encode($mobileBankings) !!};

            function populateBankIdDropdown(bankType, bankIdSelect) {
                bankIdSelect.empty(); // Clear existing options
                bankIdSelect.append('<option value="">Select</option>'); // Add 'Select' option

                if (bankType === 'bank') {
                    $.each(banks, function(key, value) {
                        bankIdSelect.append('<option value="' + key + '">' + value + '</option>');
                    });
                } else if (bankType === 'mobile_banking') {
                    $.each(mobileBankings, function(key, value) {
                        bankIdSelect.append('<option value="' + key + '">' + value + '</option>');
                    });
                }

                // Optional: Log the populated dropdown for debugging
                console.log('Dropdown populated for bank type:', bankType);
                console.log('Dropdown options:', bankIdSelect.html());
            }

            $(document).on('change', 'select[name="bankType[]"]', function() {
                var bankType = $(this).val();
                var row = $(this).closest('tr'); // Find the closest row
                var bankIdSelect = row.find('select[name="bankId[]"]'); // Find the bank ID dropdown
                var rcRoutingNoInput = row.find(
                    'input[name="rcRoutingNo[]"]'); // Find the routing number input

                // Call function to populate bank ID dropdown
                populateBankIdDropdown(bankType, bankIdSelect);

                // Set the routing number input based on bank type
                if (bankType === 'bank') {
                    rcRoutingNoInput.prop('readonly', false);
                } else if (bankType === 'mobile_banking') {
                    rcRoutingNoInput.prop('readonly', true);
                } else {
                    rcRoutingNoInput.prop('readonly', false);
                }
            });




            function populateMemberNames(row, branchId, adviceId, callback) {
                $.ajax({
                    url: "{{ url('/acc/loanDisbursePayment/fetchMembersByBranch/') }}/" + branchId +
                        "?id=" + adviceId,
                    type: 'GET',
                    success: function(response) {
                        if (response.error) {
                            alert(response.error);
                        } else {
                            var selectMember = $(row).find('select[name="memberName[]"]');

                            // Store the currently selected member ID before clearing the dropdown
                            var preSelectedMemberId = selectMember.val();

                            // Clear the existing options
                            selectMember.empty();
                            selectMember.append('<option value="">Select</option>');

                            // Populate the dropdown with the new members
                            $.each(response.members, function(key, value) {
                                var selected = (key == preSelectedMemberId) ? 'selected' :
                                    '';
                                selectMember.append('<option value="' + key + '" ' +
                                    selected +
                                    '>' + value + '</option>');
                            });

                            // Enable the dropdown again
                            selectMember.prop('disabled', false);

                            // Call the callback if provided
                            if (callback) {
                                callback(preSelectedMemberId); // Pass the pre-selected member ID
                            }
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error(error);
                        alert('Error fetching member names');
                    }
                });
            }

            function populateBankDetails(row, adviceId, memberId) {
                $.ajax({
                    url: "{{ url('/acc/loanDisbursePayment/fetchBankDetails/') }}/" + memberId +
                        "?id=" +
                        adviceId,
                    type: 'GET',
                    success: function(response) {
                        if (response.error) {
                            alert(response.error);
                        } else {
                            $(row).find('input[name="memberId[]"]').val(response.memberCode);

                            $(row).find('input[name="prBankName[]"]').val(response.prBankName).prop(
                                'readonly', true);
                            $(row).find('input[name="prAccountNo[]"]').val(response.prAccountNo)
                                .prop(
                                    'readonly', true);
                            $(row).find('input[name="prRoutingNo[]"]').val(response.prRoutingNo)
                                .prop(
                                    'readonly', true);
                            $(row).find('input[name="amount[]"]').val(response.prAmount).prop(
                                'readonly', true);

                            // Set the application ID in the hidden input field
                            let loanAppField = $(row).find('input[name="loanApp[]"]');
                            if (loanAppField.length === 0) {
                                // Add the hidden field dynamically if not present
                                $('<input>')
                                    .attr({
                                        type: 'hidden',
                                        name: 'loanApp[]',
                                        value: response.applicationId
                                    })
                                    .appendTo(row);
                            } else {
                                // Update the existing field
                                loanAppField.val(response.applicationId).prop('readonly', true);
                            }
                        }
                    },
                    error: function(xhr) {
                        alert('An error occurred: ' + xhr.responseText);
                    }
                });
            }
            $('.payment-row').each(function() {
                var row = $(this);
                var branchId = row.find('select[name="branch[]"]').val();
                var memberId = row.find('select[name="memberName[]"]').val();
                var adviceId = "{{ $adviceId }}";

                if (branchId) {
                    populateMemberNames(row, branchId,
                        adviceId); // Populate member names for the selected branch
                }

                if (memberId) {
                    populateBankDetails(row, adviceId,
                        memberId); // Populate bank details for the selected member
                }
            });
            $(document).on('change', 'select[name="branch[]"]', function() {
                var row = $(this).closest('.payment-row');
                var branchId = $(this).val();
                var adviceId = "{{ $adviceId }}";
                populateMemberNames(row, branchId, adviceId);
            });

            $(document).on('change', 'select[name="memberName[]"]', function() {
                var memberId = $(this).val();
                var row = $(this).closest('.payment-row');
                var adviceId = "{{ $adviceId }}";
                populateBankDetails(row, adviceId, memberId);
            });

            function updateSlNo() {
                $('#payment-rows tr').each(function(index) {
                    $(this).find('td:first').text(index + 1);
                });
            }



            $(document).on('click', '.remove-row', function(e) {
                e.preventDefault();
                $(this).closest('tr').remove();
                updateSlNo();
            });

            $('#payment-rows .payment-row:first').find('.remove-row').hide();





            /*Edit Modal Start*/
            $(document).on('click', '.edit-modal', function() {
                var reconcileId = $(this).attr('reconcileId');
                var csrf = "{{ csrf_token() }}";
                $("#EMreconcileId").val(reconcileId);

                $.ajax({
                    url: './editReconcileId',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        id: reconcileId,
                        _token: csrf
                    },
                    success: function(data) {
                        // Update modal content with data
                        $('#editModal td#branch').text(data.branch);
                        $('#editModal td#memberName').text(data.memberName);
                        $('#editModal td#memberId').text(data.memberId);
                        $('#editModal td#prBankName').text(data.prBankName);
                        $('#editModal td#prAccount').text(data.prAccount);
                        $('#editModal td#prRouting').text(data.prRouting);
                        $('#editModal td#loan').text(data.loan);

                        // Populate input fields
                        $('.editrcAccountNo').val(data['editReconcile'].accountNumber);
                        $('.editrcRoutingNo').val(data['editReconcile'].routingNumber);
                        $('.editresendDate').val(data['editReconcile'].resendDate);

                        // Set bank type
                        var selectedBankType = data.bankType;
                        $('.editbank-type').val(selectedBankType)
                            .change(); // Trigger change event to populate banks

                        // Populate the bank ID dropdown based on the selected bank type
                        populateBankIdDropdown(selectedBankType, $('.editbank-id'));

                        // Set the selected bank ID after populating
                        var selectedBankId = data['editReconcile'].bankId;
                        $('.editbank-id').val(selectedBankId);


                        // Show the modal
                        $("#editModal").find('.modal-dialog').css('width', '55%');
                        $('#editModal').modal('show');
                        $(document).on('change', 'select.editbank-type', function() {
                            var bankType = $(this).val();
                            var row = $(this).closest('tr'); // Find the closest row
                            var bankIdSelect = row.find(
                                'select.editbank-id'); // Find the bank ID dropdown
                            var rcRoutingNoInput = row.find(
                                'input[name="rcRoutingNo"]'
                            ); // Find the routing number input

                            // Call function to populate bank ID dropdown
                            populateBankIdDropdown(bankType, bankIdSelect);

                            // Set the routing number input based on bank type
                            if (bankType === 'bank') {
                                rcRoutingNoInput.prop('readonly', false);
                                rcRoutingNoInput.val(data['editReconcile']
                                    .routingNumber);

                            } else if (bankType === 'mobile_banking') {
                                rcRoutingNoInput.prop('readonly', true);
                                rcRoutingNoInput.val('');
                            } else {
                                rcRoutingNoInput.prop('readonly', false);
                            }
                        });

                    }
                });
            });


        });


        /*edit Modal End*/
        $(document).on('click', '.delete-modal', function() {
            $("#DMreconcileId").val($(this).attr('reconcileId'));
            $('#deleteModal').modal('show');
        });
        $("#DMreconcile").on('click', function() {
            var reconcileId = $("#DMreconcileId").val();
            var csrf = "{{ csrf_token() }}";
            $.ajax({
                    url: './deleteReconcile',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        id: reconcileId,
                        _token: csrf
                    },
                })
                .done(function(data) {
                    // location.reload();

                    setTimeout(function() {
                        window.location.reload();
                    }, 1500);

                })
                .fail(function() {
                    console.log("error");
                })
                .always(function() {
                    console.log("complete");
                });
        });

        function validateInput(input) {
            // Remove any non-numeric characters
            input.value = input.value.replace(/[^0-9]/g, '');
        }


        document.querySelectorAll(
            '.rcAccountNo, .rcRoutingNo'
        ).forEach(function(
            element) {
            element.addEventListener('input', function(e) {
                validateInput(e.target);
            });
        });

        function parseNumber(value) {
            if (!value || isNaN(value)) {
                return 0;
            }
            return parseFloat(value.replace(/,/g, ''));
        }

        $('form').submit(function(event) {
            event.preventDefault();

            var isValid = true;
            var errorMessage = '';
            //  var adviceId = "{{ $adviceId }}";
            // //console.log(adviceId);
            //  var rows = $('#payment-rows .payment-row');

            // rows.each(function() {
            //     var bankType = $(this).find('select[name="bankType[]"]').val();
            //     var rcAccountNo = $(this).find('input[name="rcAccountNo[]"]').val();
            //     var memberId = $(this).find('input[name="memberId[]"]').val();
            // });

            if (isValid) {
                var form = $(this).serialize();
                var csrfToken = "{{ csrf_token() }}";
                var submitButton = $(this).find('input[type="submit"]');
                submitButton.prop('disabled', true);

                $.ajax({
                    url: "{{ route('storeReconcile') }}",
                    type: "POST",
                    data: form,
                    headers: {
                        'X-CSRF-Token': csrfToken
                    },
                    success: function(response) {
                        toastr.success('Success: ' + response.message);
                        submitButton.prop('disabled', false);

                        // Set a timeout to reload the page after 2 seconds
                        setTimeout(function() {
                            window.location.reload();
                        }, 1500); // 2000 milliseconds = 2 seconds
                    },
                    error: function(xhr, status, error) {
                        if (xhr.status === 400) {
                            var errorMessage = xhr.responseJSON.error;
                            toastr.warning(errorMessage);
                        } else {
                            toastr.warning('An unexpected error occurred.');
                        }
                        submitButton.prop('disabled', false);
                    }
                });
            } else {
                toastr.warning(errorMessage);
            }


        });
        $("#updateButton").on('click', function() {
            $("#updateButton").prop("disabled", true);
            $.ajax({
                    url: "{{ route('updateReconcile') }}",
                    type: 'POST',
                    data: $('#updateForm').serialize(),
                    dataType: 'json',
                })
                .done(function(data) { // Changed from 'response' to 'data'
                    // Display success message using Toastr
                    toastr.success('Success: ' + data.message); // Changed 'response.message' to 'data.message'

                    // Enable the update button again
                    $("#updateButton").prop('disabled', false);

                    // Reload the page after a short delay (e.g., 1.5 seconds)
                    setTimeout(function() {
                        window.location.reload();
                    }, 1500);
                })
                .fail(function(xhr) { // Pass the xhr object here
                    if (xhr.status === 400) {
                        var errorMessage = xhr.responseJSON.error;
                        toastr.warning(errorMessage); // Display the validation error
                    } else {
                        toastr.warning('An unexpected error occurred.');
                    }
                })
                .always(function() {
                    $("#updateButton").prop('disabled', false); // Re-enable the button
                });
        });

        /*Update End*/
        // $(".resendDate").datepicker({
        //     dateFormat: "yy-mm-dd",
        //     changeMonth: true,
        //     changeYear: true,
        //     maxDate: "0"
        // });
        $(".editresendDate").datepicker({
            dateFormat: "yy-mm-dd",
            changeMonth: true,
            changeYear: true,

        });
    </script>

@endsection