@extends('master')
@section('content')
    <div class="page-wrapper">
        <div class="content">
            <div class="page-header">
                <div class="page-title">
                    <h4>{{ __('sitelabel.UpdateLedgerEntries') }}</h4>
                </div>
            </div>

            @if ($errors->any())
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            @endif

            <form method="post" action="{{ url('/editledgerentriesprocess') }}" enctype="multipart/form-data"
                id="ledgerForm">
                @csrf
                <input type="hidden" name="txtTransactionId" value="{{ $ledgerentries->first()->TransactionId }}">
                <input type="hidden" id="rowsData" name="rowsData">

                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <!-- DocNo Field -->
                            <div class="col-lg-4 col-sm-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.DocNo') }}<span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" name="txtDocNo" id="txtDocNo"
                                        value="{{ $ledgerentries->first()->DocNo }}" required>
                                    @error('txtDocNo')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <!-- Booking Date Field -->
                            <div class="col-lg-4 col-sm-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.BookingDate') }}<span class="text-danger">*</span></label>
                                    <input type="date" class="form-control" name="txtBookingDate" id="txtBookingDate"
                                        value="{{ \Carbon\Carbon::parse($ledgerentries->first()->BookingDate)->format('Y-m-d') }}"
                                        required>
                                    @error('txtBookingDate')
                                        <span class="text-danger">{{ $message }}</span>
                                    @enderror
                                </div>
                            </div>

                            <!-- Entry Table -->
                            <div class="row mt-4">
                                <div class="col-lg-12">
                                    <table class="table table-bordered">
                                        <thead style="background-color: #1649FF">
                                            <tr>
                                                <th style="color: #fff">{{ __('sitelabel.AccountName') }}</th>
                                                <th style="color: #fff">{{ __('sitelabel.DebitAmount') }}</th>
                                                <th style="color: #fff">{{ __('sitelabel.CreditAmount') }}</th>
                                                <th style="color: #fff">{{ __('sitelabel.Action') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr class="entry-row" style="background-color: rgb(192, 192, 192)">
                                                <td>
                                                    <select class="form-control select2" id="ddlAccountName">
                                                        <option value="-1" disabled selected>
                                                            {{ __('sitelabel.SelectAccountName') }}
                                                        </option>
                                                        @foreach ($coAccounts as $account)
                                                            <option value="{{ $account->Id }}">{{ $account->Name }}
                                                            </option>
                                                        @endforeach
                                                    </select>
                                                </td>
                                                <td><input type="number" class="form-control" id="txtDebitAmount"
                                                        min="0"></td>
                                                <td><input type="number" class="form-control" id="txtCreditAmount"
                                                        min="0"></td>
                                                <td><button type="button" class="btn btn-success"
                                                        id="btnAddRow">{{ __('sitelabel.Add') }}</button></td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <!-- Existing Entries Table -->
                            <div class="row mt-4">
                                <div class="col-lg-12">
                                    <table class="table table-bordered" id="ledgerentriesTable">
                                        <thead>
                                            <tr>
                                                <th>{{ __('sitelabel.AccountName') }}</th>
                                                <th>{{ __('sitelabel.DebitAmount') }}</th>
                                                <th>{{ __('sitelabel.CreditAmount') }}</th>
                                                <th>{{ __('sitelabel.Action') }}</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            @foreach ($ledgerentries as $entry)
                                                <tr class="data-row" data-id="{{ $entry->AccountId }}">
                                                    <td>
                                                        <select class="form-control select2" name="accountIds[]">
                                                            @foreach ($coAccounts as $account)
                                                                <option value="{{ $account->Id }}"
                                                                    {{ $account->Id == $entry->AccountId ? 'selected' : '' }}>
                                                                    {{ $account->Name }}
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </td>
                                                    <td><input type="number" class="form-control debit-field"
                                                            value="{{ $entry->DebitAmount }}" min="0"></td>
                                                    <td><input type="number" class="form-control credit-field"
                                                            value="{{ $entry->CreditAmount }}" min="0"></td>
                                                    <td>
                                                        <button type="button"
                                                            class="btn btn-danger btn-sm remove-row">{{ __('sitelabel.Remove') }}</button>
                                                    </td>
                                                </tr>
                                            @endforeach
                                        </tbody>
                                        <tfoot>
                                            <tr>
                                                <td style="text-align: right;"><strong>{{ __('sitelabel.Total') }}</strong>
                                                </td>
                                                <td style="text-align: right;" id="totalDebit">0.00</td>
                                                <td style="text-align: right;" id="totalCredit">0.00</td>
                                                <td></td>
                                            </tr>
                                        </tfoot>
                                    </table>
                                </div>
                            </div>

                            <div class="col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Notes') }}</label>
                                    <textarea name="txtNotes" id="txtNotes">{{ $ledgerentries->first()->Notes }}</textarea>
                                </div>
                            </div>

                            <!-- Submit Buttons -->
                            <div class="row mt-4">
                                <div class="col-lg-12">
                                    <button type="submit" class="btn btn-primary"
                                        id="saveButton">{{ __('sitelabel.Save') }}</button>
                                    <a href="{{ url('/ledgerentries') }}"
                                        class="btn btn-dark">{{ __('sitelabel.Back') }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            $('.select2').select2({
                theme: "bootstrap-5"
            });

            function formatNumber(number) {
                return new Intl.NumberFormat('en-US', {
                    minimumFractionDigits: 2,
                    maximumFractionDigits: 2
                }).format(number);
            }

            // Initial calculations
            calculateTotals();
            collectFormData();
            setupKeyNavigation();
            setupEventListeners();
        });

        function setupKeyNavigation() {
            const entryFields = ['ddlAccountName', 'txtDebitAmount', 'txtCreditAmount'];

            entryFields.forEach((fieldId, index) => {
                const element = document.getElementById(fieldId);
                if (element) {
                    element.addEventListener('keydown', (e) => {
                        if (e.key === 'Enter') {
                            e.preventDefault();
                            if (index < entryFields.length - 1) {
                                document.getElementById(entryFields[index + 1]).focus();
                            } else {
                                document.getElementById('btnAddRow').click();
                            }
                        }
                    });
                }
            });
        }

        function setupEventListeners() {
            // Add row button
            document.getElementById('btnAddRow').addEventListener('click', addRow);

            // Listen for changes in existing rows
            const dataTable = document.getElementById('ledgerentriesTable');
            dataTable.addEventListener('input', function(e) {
                if (e.target.classList.contains('debit-field') || e.target.classList.contains('credit-field')) {
                    calculateTotals();
                    collectFormData();
                }
            });

            // Remove row buttons
            document.querySelectorAll('.remove-row').forEach(button => {
                button.addEventListener('click', function() {
                    this.closest('tr').remove();
                    calculateTotals();
                    collectFormData();
                });
            });

            // Form submission
            document.getElementById('ledgerForm').addEventListener('submit', function(e) {
                e.preventDefault();
                if (validateForm()) {
                    this.submit();
                }
            });

            // Add input event listeners to initial debit and credit fields
            document.querySelectorAll('.debit-field, .credit-field').forEach(field => {
                field.addEventListener('input', function() {
                    calculateTotals();
                    collectFormData();
                });
            });
        }

        function addRow() {
            const accountSelect = document.getElementById('ddlAccountName');
            const debitAmount = parseFloat(document.getElementById('txtDebitAmount').value) || 0;
            const creditAmount = parseFloat(document.getElementById('txtCreditAmount').value) || 0;

            if (!accountSelect.value || (!debitAmount && !creditAmount)) {
                alert("Please fill in all required fields");
                return;
            }

            const tbody = document.querySelector('#ledgerentriesTable tbody');
            const newRow = document.createElement('tr');
            newRow.className = 'data-row';
            newRow.innerHTML = `
                <td>
                    <select class="form-control select2" name="accountIds[]">
                        ${document.getElementById('ddlAccountName').innerHTML}
                    </select>
                </td>
                <td><input type="number" class="form-control debit-field" value="${debitAmount.toFixed(2)}" min="0"></td>
                <td><input type="number" class="form-control credit-field" value="${creditAmount.toFixed(2)}" min="0"></td>
                <td>
                    <button type="button" class="btn btn-danger btn-sm remove-row" onclick="removeRow(this)">Remove</button>
                </td>
            `;

            tbody.appendChild(newRow);

            // Initialize Select2 for the new row
            $(newRow).find('.select2').select2({
                theme: "bootstrap-5"
            });

            // Set the selected account
            $(newRow).find('select').val(accountSelect.value).trigger('change');

            // Clear entry fields
            accountSelect.value = '';
            document.getElementById('txtDebitAmount').value = '';
            document.getElementById('txtCreditAmount').value = '';

            // Setup remove button
            newRow.querySelector('.remove-row').addEventListener('click', function() {
                newRow.remove();
                calculateTotals();
                collectFormData();
            });

            calculateTotals();
            collectFormData();
            accountSelect.focus();
        }

        function calculateTotals() {
            let totalDebit = 0;
            let totalCredit = 0;

            document.querySelectorAll('#ledgerentriesTable tbody tr.data-row').forEach(row => {
                totalDebit += parseFloat(row.querySelector('.debit-field').value) || 0;
                totalCredit += parseFloat(row.querySelector('.credit-field').value) || 0;
            });

            // Update totals with formatted numbers
            document.getElementById('totalDebit').textContent = formatNumber(totalDebit);
            document.getElementById('totalCredit').textContent = formatNumber(totalCredit);
        }

        function collectFormData() {
            const rows = [];
            document.querySelectorAll('#ledgerentriesTable tbody tr.data-row').forEach(row => {
                rows.push({
                    accountId: row.querySelector('select').value,
                    debitAmount: parseFloat(row.querySelector('.debit-field').value) || 0,
                    creditAmount: parseFloat(row.querySelector('.credit-field').value) || 0
                });
            });

            document.getElementById('rowsData').value = JSON.stringify(rows);
        }

        function validateForm() {
            const bookingDate = document.getElementById('txtBookingDate').value;
            const docNo = document.getElementById('txtDocNo').value;
            const rows = JSON.parse(document.getElementById('rowsData').value);

            if (!bookingDate) {
                alert('Please enter a booking date');
                return false;
            }

            if (!docNo) {
                alert('Please enter a document number');
                return false;
            }

            if (!rows || rows.length === 0) {
                alert('Please add at least one entry to the ledger entry');
                return false;
            }

            return true;
        }

        window.addRow = addRow;
        window.calculateTotals = calculateTotals;
        window.collectFormData = collectFormData;
        window.validateForm = validateForm;
    </script>
@endsection