@extends('master')
@section('content')
    <div class="page-wrapper">
        <div class="content">
            <div class="page-header">
                <div class="page-title">
                    <h4>{{ __('sitelabel.CreatenewCashPaymentVoucher') }}</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('/cashpaymentprocess') }}" enctype="multipart/form-data">
                @csrf
                <div class="card">
                    <div class="card-body">
                        <div class="row">
                            <!-- Booking Date Field -->
                            <div class="col-lg-3 col-sm-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.BookingDate') }}<span class="text-danger">*</span></label>
                                    <input type="date" class="form-control" id="txtBookingDate" name="txtBookingDate"
                                        value="{{ $defaultDate }}" required>
                                </div>
                            </div>

                            <!-- DocNo Field -->
                            <div class="col-lg-3 col-sm-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.DocNo') }}</label>
                                    <input type="text" class="form-control" id="txtDocNo" name="txtDocNo"
                                        value="{{ old('txtDocNo') }}">
                                </div>
                            </div>

                            <div class="col-lg-3 col-sm-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.CashAccount') }}<span class="text-danger">*</span></label>
                                    <select class="form-control" id="cmbAccountName" name="cmbAccountName">
                                        <option value="" disabled selected>
                                            {{ __('sitelabel.SelectCashAccount') }}</option>
                                        @foreach ($coAccounts as $account)
                                            <option value="{{ $account->Id }}">{{ $account->Name }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <!-- Status Field -->
                            <div class="col-lg-3 col-sm-6 col-12">
                                <div class="form-group">
                                    <label>{{ __('sitelabel.Status') }}</label>
                                    <input class="form-check-input" type="checkbox" id="chkStatus" name="chkStatus" checked>
                                </div>
                            </div>
                        </div>

                        <input type="hidden" id="rowsData" name="rowsData" value="">
                        <input type="hidden" id="txtTransactionId" name="txtTransactionId" value="{{ $transactionId }}">

                        <!-- First Table -->
                        <div class="row mt-4">
                            <div class="col-lg-12">
                                <table class="table table-bordered" id="paymentTable">
                                    <thead class="table-header-color">
                                        <tr>
                                            <th style="color: #fff">{{ __('sitelabel.AccountName') }}</th>
                                            <th style="color: #fff">{{ __('sitelabel.Narration') }}</th>
                                            <th style="color: #fff">{{ __('sitelabel.Notes') }}</th>
                                            <th style="color: #fff">{{ __('sitelabel.Amount') }}</th>
                                            <th style="color: #fff">{{ __('sitelabel.Action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr style="background-color: rgb(192, 192, 192)">
                                            <td>
                                                <select class="form-control" id="ddlAccountName">
                                                    <option value="-1" disabled selected>
                                                        {{ __('sitelabel.SelectAccountName') }}</option>
                                                    @foreach ($detailAccounts as $account)
                                                        <option value="{{ $account->Id }}">{{ $account->Name }}</option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td>
                                                <select class="form-control" id="cmbNarration">
                                                    <option value="-1">{{ __('sitelabel.SelectNarration') }}</option>
                                                    @foreach ($narration as $item)
                                                        <option value="{{ $item->Id }}">{{ $item->Narration }}
                                                        </option>
                                                    @endforeach
                                                </select>
                                            </td>
                                            <td><input type="text" class="form-control" id="txtNotes"></td>
                                            <td><input type="number" class="form-control" min="0" id="txtAmount">
                                            </td>
                                            <td><button type="button" class="btn btn-success"
                                                    onclick="addRowToTable()">{{ __('sitelabel.Add') }}</button></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Second Editable Table -->
                        <div class="row mt-4">
                            <div class="col-lg-12">
                                <table class="table table-bordered" id="paymentTable1">
                                    <thead>
                                        <tr>
                                            <th>{{ __('sitelabel.AccountName') }}</th>
                                            <th>{{ __('sitelabel.Notes') }}</th>
                                            <th>{{ __('sitelabel.Amount') }}</th>
                                            <th>{{ __('sitelabel.Action') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody></tbody>
                                    <tfoot>
                                        <tr>
                                            <td colspan="2" style="text-align: right;">
                                                <strong>{{ __('sitelabel.Total') }}</strong>
                                            </td>
                                            <td style="text-align: right;" id="totalAmount">0</td>
                                            <td></td>
                                        </tr>
                                    </tfoot>
                                </table>
                            </div>
                        </div>

                        <!-- Submit -->
                        <div class="row mt-4">
                            <div class="col-lg-12">
                                <button type="submit" class="btn btn-primary" id="savenewButton" name="save_data"
                                    value="1" disabled>{{ __('sitelabel.SaveAndNew') }}</button>
                                <button type="submit" class="btn btn-primary" id="saveButton" name="save"
                                    disabled>{{ __('sitelabel.Save') }}</button>
                                <button type="button" class="btn btn-dark"
                                    onclick="javascript:window.location='{{ url('/cashpayment') }}';">{{ __('sitelabel.Back') }}</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('script')
    <script>
        // Global variables
        let totalAmount = 0;

        $(document).ready(function() {
            $('#cmbNarration').change(function() {
                var selectedValue = $(this).val();
                var selectedText = $("#cmbNarration option:selected").text();
                if (selectedValue !== '-1') {
                    $('#txtNotes').val(selectedText);
                } else {
                    $('#txtNotes').val('');
                }
            });
        });

        // Initialize after DOM loads
        document.addEventListener("DOMContentLoaded", () => {
            initializeSelects();
            setupKeyNavigation();
            setupFormValidation();

            // Make functions globally available
            window.addRowToTable = addRowToTable;
            window.removeRow = removeRow;
            window.calculateTotals = calculateTotals;
            window.collectFormData = collectFormData;
            window.validateForm = validateForm;

            // Initialize totals
            calculateTotals();
        });

        function initializeSelects() {
            $('#ddlAccountName, #cmbAccountName, #cmbNarration').select2({
                theme: "bootstrap-5",
                width: '100%'
            });
        }

        function setupKeyNavigation() {
            const entryFields = ['ddlAccountName', 'txtNotes', 'txtAmount'];

            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 {
                                addRowToTable();
                            }
                        }
                    });
                }
            });
        }

        function calculateTotals() {
            totalAmount = 0; // Reset total before calculation
            const rows = document.querySelectorAll('#paymentTable1 tbody tr');

            rows.forEach(row => {
                const amountInput = row.querySelector('.amount');
                if (amountInput) {
                    totalAmount += parseFloat(amountInput.value) || 0;
                }
            });

            // Update totals display
            document.getElementById('totalAmount').textContent = totalAmount.toFixed(2);

            // Enable/disable save buttons based on entries
            const hasRows = rows.length > 0;
            document.getElementById('saveButton').disabled = !hasRows;
            document.getElementById('savenewButton').disabled = !hasRows;
        }

        function addRowToTable() {
            const accountSelect = document.getElementById('ddlAccountName');
            const notes = document.getElementById('txtNotes').value;
            const amount = parseFloat(document.getElementById('txtAmount').value) || 0;

            // Validation
            if (!accountSelect.value) {
                alert("Please select an account.");
                return;
            }

            if (amount <= 0) {
                alert("Please enter a valid amount greater than 0.");
                return;
            }

            const tableBody = document.querySelector('#paymentTable1 tbody');
            const accountId = accountSelect.value;
            const accountName = accountSelect.options[accountSelect.selectedIndex].text;

            const newRow = `
                <tr>
                    <td>
                        <select class="form-control account-select" name="accounts[]">
                            ${Array.from(accountSelect.options).map(opt => 
                                `<option value="${opt.value}" ${opt.value === accountId ? 'selected' : ''}>${opt.text}</option>`
                            ).join('')}
                        </select>
                    </td>
                    <td>
                        <input type="text" class="form-control" name="notes[]" value="${notes}">
                    </td>
                    <td>
                        <input type="number" min="0" step="0.01" class="form-control amount" name="amount[]" 
                            value="${amount.toFixed(2)}" oninput="calculateTotals()">
                    </td>
                    <td>
                        <button type="button" class="btn btn-danger btn-sm" onclick="removeRow(this)">Remove</button>
                    </td>
                </tr>
            `;

            tableBody.insertAdjacentHTML('beforeend', newRow);

            // Reset input fields
            $('#ddlAccountName').val('-1').trigger('change');
            $('#cmbNarration').val('-1').trigger('change');
            document.getElementById('txtNotes').value = '';
            document.getElementById('txtAmount').value = '';

            // Refresh Select2 for the new row
            $('.account-select').select2({
                theme: "bootstrap-5",
                width: '100%'
            });

            calculateTotals();
            collectFormData();
        }

        function removeRow(button) {
            button.closest('tr').remove();
            calculateTotals();
            collectFormData();
        }

        function collectFormData() {
            const rows = [];
            document.querySelectorAll('#paymentTable1 tbody tr').forEach(row => {
                const accountSelect = row.querySelector('select[name="accounts[]"]');
                rows.push({
                    accountId: accountSelect.value,
                    notes: row.querySelector('input[name="notes[]"]').value,
                    amount: parseFloat(row.querySelector('input[name="amount[]"]').value) || 0
                });
            });

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

        function validateForm() {
            const bookingDate = document.getElementById('txtBookingDate').value;
            const docNo = document.getElementById('txtDocNo').value;
            const cmbAccountName = document.getElementById('cmbAccountName').value;
            const rows = document.querySelectorAll('#paymentTable1 tbody tr');

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

            if (!cmbAccountName) {
                alert('Please select an account.');
                return false;
            }

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

            return true;
        }

        function setupFormValidation() {
            const form = document.querySelector('form');
            form.addEventListener('submit', function(event) {
                event.preventDefault();
                if (validateForm()) {
                    collectFormData();
                    this.submit();
                }
            });
        }
    </script>
@endsection