@extends('layouts/acc_layout')
@section('title', '| Payment Request Limit')
@section('content')
    @include('successMsg')

    <div class="row add-data-form">
        <div class="col-md-12">

            <div class="col-md-8 col-md-offset-2 fullbody ">
                <div class="viewTitle" style="border-bottom: 1px solid white;">
                    <a href="{{ url('acc/paymentRequestLimit') }}" class="btn btn-info pull-right addViewBtn"><i
                            class="glyphicon glyphicon-th-list viewIcon">
                        </i></a>
                </div>
                <div class="panel panel-default panel-border">

                    <div class="panel-heading">
                        <div class="panel-title">Payment Request Limit</div>
                    </div>

                    <div class="panel-body">
                        {!! Form::open([
                            'url' => route('storePaymentRequestLimit'),
                            'role' => 'form',
                            'class' => 'form-horizontal form-groups',
                        ]) !!}

                        <input type="hidden" name="totalAmount" id="totalAmountHidden" value="">

                        <div class="form-group">
                            {!! Form::label('limitDate', 'Limit Date:', ['class' => 'col-sm-1 control-label']) !!}
                            <div class="col-sm-2">
                                {!! Form::text(
                                    'limitDate',
                                    $existingData ? \Carbon\Carbon::parse($existingData->limitDate)->format('d/m/Y') : null,
                                    [
                                        'id' => 'limitDate',
                                        'class' => 'form-control',
                                        'readonly',
                                    ],
                                ) !!}
                            </div>

                        </div>
                        <div id="tableContainer">
                            <table class="table table-stripe" style="color:black; width:100%;">
                                <thead class="animated fadeInUp">
                                    <tr>
                                        <th style="width: 5%">
                                            <div align="center">SL#</div>
                                        </th>
                                        <th style="width: 35%">
                                            <div align="center">Branch Name</div>
                                        </th>
                                        <th style="width: 25%">
                                            <div align="center">
                                                Limit<br>

                                                {!! Form::hidden('overall_limit', $existingData ? $existingData->totalLimitAmount : null, [
                                                    'id' => 'overall_limit',
                                                    'class' => 'form-control',
                                                    'oninput' => 'validateInput(this)',
                                                ]) !!}
                                            </div>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php
                                        $Count = 1;
                                    @endphp
                                    @if (count($branchInfoArr) > 0)
                                        @foreach ($branchInfoArr as $key => $info)
                                            <tr>
                                                <td class="slNo">{{ $Count }}</td>
                                                <td style="text-align: left;">
                                                    &nbsp;
                                                    {{ str_pad($info['branchCode'], 3, '0', STR_PAD_LEFT) }}-{{ $info['branchName'] }}
                                                </td>
                                                <td>
                                                    {!! Form::text(
                                                        "limits[{$info['id']}]",
                                                        $existingData && isset($existingData->branchLimitAmounts[$info['id']])
                                                            ? $existingData->branchLimitAmounts[$info['id']]
                                                            : null,
                                                        [
                                                            'class' => 'form-control branchLimit',
                                                            'data-branch-id' => $info['id'],
                                                            'oninput' => 'validateInput(this)',
                                                        ],
                                                    ) !!}
                                                </td>
                                            </tr>
                                            @php
                                                $Count++;
                                            @endphp
                                        @endforeach
                                    @endif
                                    <tr>
                                        <td id="total" colspan="2" class="text-center"><b>Actual Total:</b>
                                        </td>
                                        <td id="totalAmount"></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

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

                    </div>
                    {!! Form::close() !!}
                </div>
            </div>
            <div class="col-md-2"></div>
        </div>

        <script type="text/javascript">
            $(document).ready(function() {
                // $('#limitDate').datepicker({
                //     dateFormat: 'dd/mm/yy'
                // });
                function validateInput(input) {
                    // This regex allows only numbers to be input
                    input.value = input.value.replace(/[^0-9.]/g, '');
                }

                // Attach the event listener to the input elements with class 'branchLimit'
                document.querySelectorAll('#overall_limit, .branchLimit').forEach(function(element) {
                    element.addEventListener('input', function(e) {
                        validateInput(e.target);
                    });
                });

                function distributeLimit() {
                    var overallLimit = parseFloat($('#overall_limit').val());
                    var numLimits = $('input[name^="limits"]').length;

                    if (!isNaN(overallLimit)) {
                        var distributedValue = Math.floor(overallLimit / numLimits);
                        var fractionalValue = overallLimit % numLimits;
                        // console.log(fractionalValue);
                        var branchLimits = $('input[name^="limits"]');
                        var lastIndex = branchLimits.length - 1;

                        // Distribute the limit equally to all branch limits except the last one
                        branchLimits.each(function(index) {
                            if (index !== lastIndex) {
                                $(this).val(distributedValue.toFixed(2));
                            }
                        });

                        var lastLimit = isNaN(lastLimit) ? 0 : lastLimit; // Ensure lastLimit is numeric
                        lastLimit += distributedValue + fractionalValue;

                        branchLimits.eq(lastIndex).val(lastLimit.toFixed(2));

                        calculateTotal();
                    } else {
                        $('input[name^="limits"]').val('');
                        $('#totalAmount').data('fractional-value', '0.00');
                        calculateTotal();
                    }
                }


                function calculateTotal() {
                    var total = 0;

                    $('input[name^="limits"]').each(function() {
                        var val = parseFloat($(this).val());

                        if (!isNaN(val)) {
                            total += val;
                        }
                    });

                    // Display the total in the UI
                    $('#totalAmount').text(total.toFixed(2));
                    $('#totalAmountHidden').val(total.toFixed(2));
                }

                $('#overall_limit').on('input', distributeLimit);
                $('input[name^="limits"]').on('input',
                    calculateTotal);

                // $('#processButton').click(function() {
                //     var limitDate = $('#limitDate').val();
                //     if (limitDate !== '') {
                //         $.ajax({
                //             url: "{{ route('fetchExistingData') }}",
                //             type: "GET",
                //             data: {
                //                 limitDate: limitDate
                //             },
                //             success: function(response) {
                //                 if (response) {
                //                     $('#overall_limit').val(response.totalLimitAmount);
                //                     $('#totalAmount').text(response.actualTotalAmount);
                //                     $('#totalAmountHidden').val(response.actualTotalAmount);

                //                     if (response.branchLimitAmounts) {
                //                         var branchLimits = JSON.parse(response.branchLimitAmounts);

                //                         $.each(branchLimits, function(branchId, limitAmount) {
                //                             $('input[name="limits[' + branchId + ']"]').val(
                //                                 limitAmount);
                //                         });
                //                     }
                //                 }
                //             },
                //             error: function(xhr, status, error) {
                //                 alert(error);
                //             }
                //         });
                //         $('#updateButtonContainer').show();
                //     } else {
                //         alert('Please select a date.');
                //     }
                // });

                calculateTotal();

                $('form').submit(function(event) {
                    event.preventDefault();
                    var form = $(this).serialize();
                    var csrfToken = "{{ csrf_token() }}";
                    var updateButton = $(this).find('input[type="submit"]');

                    console.log("AJAX request sent");
                    $.ajax({
                        url: "{{ route('updatePaymentRequestLimit', ['id' => $id]) }}",

                        type: "POST",
                        data: form,
                        headers: {
                            'X-CSRF-Token': csrfToken

                        },

                        success: function(response) {
                            console.log('hi');
                            if (response.errors) {
                                $.each(response.errors, function(field, error) {
                                    $('<div class="error-message">').text(error)
                                        .insertAfter('#' + field);
                                });
                                updateButton.prop('disabled', false);
                            } else {
                                toastr.success('Success: ' + response.message);
                                updateButton.prop('disabled', false);

                                window.location.href =
                                    "{{ url('acc/paymentRequestLimit/') }}";
                                setTimeout(function() {
                                    window.location.href =
                                        "{{ url('acc/paymentRequestLimit/') }}";
                                }, 2.0 * 1000);
                            }
                        },
                        error: function(xhr, status, error) {
                            if (xhr.status === 400) {
                                var response = xhr.responseJSON;
                                toastr.warning(response.responseTitle + ": " + response
                                    .responseText);
                            } else {
                                alert(error);
                            }
                            submitButton.prop('disabled', false);
                        }
                    });
                });
            });
        </script>
    </div>
@endsection