@extends('layouts.app')
@section('content')
<main role="main" class="flex-shrink-0">
    <div class="container custom-container">
        <style>
            .btn-header-link::after {
                display: none !important;
            }

            .modal-dialog {
                max-width: 90%;
            }


            /* .disabled-input {
                pointer-events: none;
            } */
        </style>

        <div class="login-5 mt-50 mb-50">
                                <div class="accordion" id="faq">
                                    <div class="card ">
                                        <div class="card-header" id="faqhead1">
                                            <a href="javascript:void(0)" class="btn-header-link fs-4 fw-bold d-block text-center" aria-expanded="true" aria-controls="faq1">Annexure A-2 (TO BE FILLED BY City Coordinator AND SUBMITTED TO RC )</a>
                                        </div>
                                        <div class="custom-form RemunerationMain">
                                            <form method="POST" action="{{ route('submitbill') }}">
                                                @csrf
                                                <div id="faq1" class="collapse show" aria-labelledby="faqhead1" data-parent="#faq1">
                                                    <div class="card-body">
                                                        <div class="custom-form">
                                                            <div class="row">
                                                                @php
                                                                //pr($RemunerationFieldsData);
                                                                @endphp
                                                                @if(isset($ExactFields) && !empty($ExactFields))
                                                                @foreach($ExactFields as $key => $Fields)
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label class="form-label">{{$Labels[$key]}}</label>
                                                                        <input type="text" class="form-control form-control-sm common-fields" name="{{$key}}" value="{{$Fields}}" readonly>
                                                                        <div class="invalid-feedback"></div>
                                                                    </div>
                                                                </div>
                                                                @endforeach
                                                                @endif
                                                                <h5 class='mt-3 fw-bold fs-5'>Number of Candidates:</h5>
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label class="form-label">Allotted Candidates <span class="text-primary">(Note: Please enter the total no. of unique allotted candidates here)</span></label>
                                                                        <input type="text" id="AllottedCandidates" class="form-control form-control-sm valid-field common-fields" name="AllottedCandidates" onkeypress="return blockSpecialChar(event,'numeric')">
                                                                        <div class="invalid-feedback"></div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label class="form-label">Present Candidates</label>
                                                                        <input type="text" class="form-control form-control-sm valid-field common-fields" name="PresentCandidates" onkeypress="return blockSpecialChar(event,'numeric')">
                                                                        <div class="invalid-feedback"></div>
                                                                    </div>
                                                                </div>
                                                                <div class="col-md-6">
                                                                    <div class="form-group">
                                                                        <label class="form-label">Absent Candidates</label>
                                                                        <input type="text" class="form-control form-control-sm valid-field common-fields" name="AbsentCandidates" onkeypress="return blockSpecialChar(event,'numeric')">
                                                                        <div class="invalid-feedback"></div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="table-responsive m-4">
                                                    <table class="table cco-table table-bordered RemunerationOnlineTable">
                                                        <thead>
                                                            <tr>
                                                                <th>#</th>
                                                                <th>Category</th>
                                                                <th width="40%">Remuneration And Conveyance Payable</th>
                                                                <th>No. Of Persons</th>
                                                                <th>No. Of Duty Days</th>
                                                                <th>Amount</th>

                                                            </tr>
                                                        </thead>
                                                        <tbody>

                                                            @if(isset($RemunerationFieldsData) && !empty($RemunerationFieldsData))
                                                            @php
                                                            $i = 0;
                                                            //pr($RemunerationFieldsData);
                                                            $TDSPercentage = config('constants.Amount')['RemunerationTDS'];
                                                            @endphp
                                                            @foreach($RemunerationFieldsData as $k => $Remuneration)

                                                            @php
                                                            $Remuneration = (array)$Remuneration;
                                                            @endphp
                                                            <!-- If Remuneration & CMockDrill Available -->
                                                            @if($Remuneration['Remuneration Text'] != '' && $Remuneration['Mock Drill Text']!= '')
                                                            <tr>
                                                                <td rowspan="2">{{++$i}}</td>
                                                                <td rowspan="2">{{$Remuneration['Source Name']}}</td>
                                                                <td>{{$Remuneration['Remuneration Text']}}</td>
                                                                @if($i==1)
                                                                <input type="hidden" class="ManPowerInput RemunerationAmount" value="{{$Remuneration['Remuneration Amount']}}" />
                                                                @endif
                                                                <input type="hidden" class="ManPowerInput" value="{{$Remuneration['Remuneration Amount']+$Remuneration['Conveyance Amount']}}" />
                                                                <td><input type="text" class="form-control form-control-sm valid-field ManPower calculateTDS" lang="{{$Remuneration['No_ of Person']}}" name="ManPower[]" onkeypress="return blockSpecialChar(event,'numeric')"></td>
                                                                <td><input type="text" class="form-control form-control-sm valid-field DutyDays remunerationDutyDay calculateTDS" lang="{{$Remuneration['No_ of Days']}}" name="DutyDays[]" onkeypress="return blockSpecialChar(event,'numeric')"></td>
                                                                <td><input type="text" class="form-control form-control-sm RemunerationSection" maxlength=8 minlength=1 name="RemunerationAmount[]" onkeypress="return blockSpecialChar(event,'numeric')" readonly></td>
                                                            </tr>
                                                            <tr>
                                                                <td>{{$Remuneration['Mock Drill Text']}}</td>
                                                                <input type="hidden" class="ManPowerInput" value="{{$Remuneration['Mock Drill Charge']+$Remuneration['Mock Drill Conveyance']}}" />
                                                                <td><input type="text" class="form-control form-control-sm valid-field ManPower calculateTDS" lang="{{$Remuneration['No_ of Person']}}" name="ManPower[]" onkeypress="return blockSpecialChar(event,'numeric')"></td>
                                                                <td><input type="text" class="form-control form-control-sm valid-field DutyDays remunerationDutyDay calculateTDS" lang="{{$Remuneration['No_ of Days']}}" name="DutyDays[]" onkeypress="return blockSpecialChar(event,'numeric')"></td>
                                                                <td><input type="text" class="form-control form-control-sm RemunerationSection" maxlength=8 minlength=1 name="RemunerationAmount[]" onkeypress="return blockSpecialChar(event,'numeric')" readonly></td>
                                                            </tr>
                                                            <!-- If Remuneration Available Only-->
                                                            @elseif($Remuneration['Remuneration Text'] != '' && $Remuneration['Mock Drill Text']== '')
                                                            <tr>
                                                                <td>{{++$i}}</td>
                                                                <td>{{$Remuneration['Source Name']}}</td>
                                                                <td>{{$Remuneration['Remuneration Text']}}</td>
                                                                @if($i==1)
                                                                <input type="hidden" class="ManPowerInput RemunerationAmount" value="{{$Remuneration['Remuneration Amount']}}" />
                                                                @endif
                                                                <input type="hidden" class="ManPowerInput" value="{{$Remuneration['Remuneration Amount']+$Remuneration['Conveyance Amount']}}" />
                                                                <td><input type="text" class="form-control form-control-sm valid-field ManPower calculateTDS" lang="{{$Remuneration['No_ of Person']}}" name="ManPower[]" onkeypress="return blockSpecialChar(event,'numeric')"></td>
                                                                <td><input type="text" class="form-control form-control-sm valid-field DutyDays remunerationDutyDay calculateTDS" lang="{{$Remuneration['No_ of Days']}}" name="DutyDays[]" onkeypress="return blockSpecialChar(event,'numeric')"></td>
                                                                <td><input type="text" class="form-control form-control-sm RemunerationSection" maxlength=8 minlength=1 name="RemunerationAmount[]" onkeypress="return blockSpecialChar(event,'numeric')" readonly></td>
                                                            </tr>
                                                            <!-- If CMockDrill Available Only-->
                                                            @elseif($Remuneration['Remuneration Text'] == '' && $Remuneration['Mock Drill Text']!= '')
                                                            <tr>
                                                                <td>{{++$i}}</td>
                                                                <td>{{$Remuneration['Source Name']}}</td>
                                                                <td>{{$Remuneration['Mock Drill Text']}}</td>
                                                                <input type="hidden" class="ManPowerInput" value="{{$Remuneration['Remuneration Amount']+$Remuneration['Conveyance Amount']}}" />
                                                                <td><input type="text" class="form-control form-control-sm valid-field ManPower" lang="{{$Remuneration['No_ of Person']}}" name="ManPower[]" onkeypress="return blockSpecialChar(event,'numeric')"></td>
                                                                <td><input type="text" class="form-control form-control-sm valid-field DutyDays remunerationDutyDay" lang="{{$Remuneration['No_ of Days']}}" name="DutyDays[]" onkeypress="return blockSpecialChar(event,'numeric')"></td>
                                                                <td><input type="text" class="form-control form-control-sm RemunerationSection" maxlength=8 minlength=1 name="RemunerationAmount[]" onkeypress="return blockSpecialChar(event,'numeric')" readonly></td>
                                                            </tr>
                                                            @endif
                                                            @endforeach
                                                            <tr>
                                                                <td>{{++$i}}</td>
                                                                <td>Advance Payment</td>
                                                                <td></td>
                                                                <td></td>
                                                                <td></td>
                                                                <input type="hidden" class="ManPowerInput" value="{{$Remuneration['Remuneration Amount']+$Remuneration['Conveyance Amount']}}" />
                                                                <td><input type="text" class="form-control form-control-sm" value="5000" id="AdvancedNtaAmount" maxlength=8 minlength=1 name="Advance_Received" onkeypress="return blockSpecialChar(event,'numeric')" readonly></td>
                                                            </tr>
                                                            <tr>
                                                                <td>{{++$i}}</td>
                                                                <td>TDS</td>
                                                                <td>@10% on Remuneration</td>
                                                                <td></td>
                                                                <td></td>
                                                                <input type="hidden" class="ManPowerInput" value="{{$Remuneration['Remuneration Amount']+$Remuneration['Conveyance Amount']}}" />
                                                                <td><input type="text" class="form-control form-control-sm" id="TDSAmount" value="0" maxlength=8 minlength=1 name="TDSAmount" onkeypress="return blockSpecialChar(event,'numeric')" readonly></td>
                                                            </tr>
                                                            <tr>
                                                                <td>{{++$i}}</td>
                                                                <td class='fw-bold'>TOTAL CLAIM</td>
                                                                <td></td>
                                                                <td></td>
                                                                <td></td>
                                                                <input type="hidden" class="ManPowerInput" value="{{$Remuneration['Remuneration Amount']+$Remuneration['Conveyance Amount']}}" />
                                                                <td><input type="text" class="form-control form-control-sm required" id="NetPaybleAmount" maxlength=8 minlength=1 name="NetPaybleAmount" onkeypress="return blockSpecialChar(event,'numeric')" readonly></td>
                                                            </tr>
                                                            @endif

                                                        </tbody>
                                                    </table>

                                                </div>
                                                <div class="text-end">
                                                    <button class="btn btn-warning me-4 mb-2 mt-0" id="preview" type="button">Preview</button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal Offline -->
    <div class="modal fade" id="PreviewModal" tabindex="-1" aria-labelledby="PreviewModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="PreviewModalLabel">Preview</h5>
                    <button type="button" class="btn-close EditBill" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body ">

                    <div class="RemunerationModal">

                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success verifyAadhaarBtn" data-id="1" id="verifyAadhaarBtn">Verify Email</button>
                    <button type="button" class="btn btn-primary EditBill" data-bs-dismiss="modal">Edit</button>
                </div>
            </div>
        </div>
    </div>
    </div>
</main>
@endsection
@section('script')
<script>
    $(document).ready(function() {
        $('.ManPower, .DutyDays, .calculateTDS').on('input', function() {
            var AllottedCandidates = $('#AllottedCandidates').val();
            if(AllottedCandidates == ''){
                $(this).val('');
                alert('Please enter allotted candidates first');
                $('#AllottedCandidates').focus();
                return false;
            }
            var value = parseFloat(this.value) || 0; // Ensure the value is treated as a number
            var maxAllowed = parseFloat(this.lang) || 0; // Ensure the lang attribute is treated as a number

            if (!isNaN(value) && !isNaN(maxAllowed)) {
                if (value <= maxAllowed) {
                    $(this).next('span.text-danger').remove();

                    if ($(this).hasClass('calculateTDS')) {
                        console.log("Updating TDS Amount");
                        updateTDSAmountValue(1);
                    }
                    if ($(this).hasClass('DutyDays') || $(this).hasClass('ManPower')) {
                        console.log("Calculating remuneration for DutyDays or ManPower");
                        calculateRemuneration($(this).closest('tr'));
                    }
                } else {
                    showErrorMessage($(this), maxAllowed);
                }
            }

            // Handle empty input values
            if (this.value === '') {
                $(this).closest('tr').find('.RemunerationSection').val(0);
                updateTDSAmountValue(0);
                calculateRemuneration($(this).closest('tr'));
            }
        });

        function showErrorMessage(element, maxAllowed) {
            element.val('');
            element.closest('tr').find('.RemunerationSection').val(0);

            if (!element.next('span.text-danger').length) {
                element.after('<span class="text-danger">Max ' + maxAllowed + ' days allowed</span>');
            }
        }

        function calculateRemuneration(row) {
            var manpowerInputValue = parseFloat(row.find('.ManPowerInput').val()) || 0; // Get value from ManPowerInput
            var manpowerValue = parseInt(row.find('.ManPower').val()) || 0; // Get value from ManPower
            var dutyDaysValue = parseInt(row.find('.DutyDays').val()) || 0; // Get value from DutyDays
            var TDSValue = parseFloat($('#TDSAmount').val()) || 0; // Get value from TDSAmount
            var AdvancedNtaAmount = parseFloat($('#AdvancedNtaAmount').val()) || 0; // Get value from TDSAmount

            if (!isNaN(manpowerInputValue) && !isNaN(manpowerValue) && !isNaN(dutyDaysValue)) {
                var result = manpowerInputValue * manpowerValue * dutyDaysValue;
                result = Math.round(result * 100) / 100; // Round to 2 decimal places
                row.find('.RemunerationSection').val(result);

                var totalExp = 0;
                $('.RemunerationSection').each(function() {
                    var value = parseFloat($(this).val());
                    if (!isNaN(value)) {
                        totalExp += value;
                    }
                });

                var TotafterTDS = totalExp - (TDSValue + AdvancedNtaAmount);
                TotafterTDS = Math.round(TotafterTDS * 100) / 100; // Round to 2 decimal places
                $('#NetPaybleAmount').val(TotafterTDS);
            }
        }

        function updateTDSAmountValue(condition) {
            if (condition == 1) {
                let TDSPercentage = parseFloat('') || 0; // Parse TDSPercentage as a float
                let totalTDSAmount = 0;

                $('.RemunerationAmount').each(function() {
                    var value = parseFloat($(this).val());
                    if (!isNaN(value)) {
                        totalTDSAmount += value;
                    }
                });

                let RemunerationAmount = totalTDSAmount;
                let allAmountApplicableForTDS = parseFloat(RemunerationAmount) || 0; // Parse as float and default to 0 if NaN
                let finalTDSAmount = (TDSPercentage / 100) * allAmountApplicableForTDS;
                finalTDSAmount = Math.round(finalTDSAmount * 100) / 100; // Round to 2 decimal places

                $('#TDSAmount').val(finalTDSAmount);
            } else {
                $('#TDSAmount').val(0);
            }

            // Update total amount claimed whenever TDS amount changes
            var totalExp = 0;
            $('.RemunerationSection').each(function() {
                var value = parseFloat($(this).val());
                if (!isNaN(value)) {
                    totalExp += value;
                }
            });

            var TotafterTDS = totalExp - parseFloat($('#TDSAmount').val()) || 0;
            TotafterTDS = Math.round(TotafterTDS * 100) / 100; // Round to 2 decimal places
            $('#NetPaybleAmount').val(TotafterTDS);
        }

        $('#preview').click(function() {
            var formIsValid = true;
            $('.valid-field').each(function() {
                if ($(this).val().trim() === '') {
                    // Remove existing error message if present
                    $(this).next('span.text-danger').remove();
                    // Add error message
                    $(this).after('<span class="text-danger">*This field is required</span>');
                    // Set focus to the first field that fails validation
                    if (formIsValid) {
                        $(this).focus();
                        formIsValid = false; // Set formIsValid to false to prevent further focus changes
                    }
                } else {
                    // Remove existing error message if the field is not empty
                    $(this).next('span.text-danger').remove();
                }
            });

            if (!formIsValid) {
                return false;
            } else {
                $('#PreviewModal').modal('show');

                // Clone the element
                var tableHtml = $('.RemunerationMain').clone();

                // Find inputs inside the cloned element
                tableHtml.find('input:not(.common-fields)').addClass('border-0').prop({
                    'readonly': true, // Set inputs as readonly
                }).css('pointer-events', 'none'); // Disable pointer events

                // Find inputs with class '.common-fields' and apply readonly and pointer-events
                tableHtml.find('input.common-fields').prop({
                    'readonly': true, // Set inputs as readonly
                }).css('pointer-events', 'none'); // Add border-0 class for styling

                // Hide elements as needed (e.g., with specific IDs or classes)
                tableHtml.find('#preview').hide();

                // Update the content of the target element with the modified HTML
                $('.RemunerationModal').html(tableHtml);

            }
        });


    });
</script>
@endsection