@extends('layouts.master')

@push('css')
    <link rel="stylesheet" href="{{ asset('css/journal-voucher-create.css') }}">
@endpush

@section('content')
    @php
        $partnerType = data_get($vou_other_detail, 'business_partner_type');
        $partnerId   = data_get($vou_other_detail, 'partner_name');
        $resolvedPartnerName = \App\Http\Controllers\VoucherController::resolvePartnerName($partnerType, $partnerId);
        $partnerLocked = !empty($partnerType) && !empty($partnerId);

        $headerDate = data_get($voucherSingle, 'date');
        $headerDate = $headerDate
            ? \Carbon\Carbon::parse($headerDate)->format('Y-m-d')
            : now()->format('Y-m-d');
    @endphp

    <div class="jv-create-page">
        <!-- Breadcrumb & Header -->
        <div class="az-content-breadcrumb">
            <span>Journal Voucher</span>
            <span>Edit Journal Voucher</span>
        </div>

        <div class="jv-page-header">
            <div class="jv-header-title">
                <div class="jv-header-icon">
                    <i class="fa-solid fa-file-invoice-dollar"></i>
                </div>
                <div class="jv-header-text">
                    <h2>Edit Journal Voucher #{{ $vouchersNumber->voucher_number ?? '' }}</h2>
                    <div class="jv-subtitle">
                        <span>Update double-entry journal transactions</span>
                        <span class="jv-urdu">روزنامچہ واؤچر میں ترمیم کریں</span>
                    </div>
                </div>
            </div>
            <a href="{{ route('voucher.list') }}" class="jv-btn-back">
                <i class="fa-solid fa-arrow-left"></i> Back to Journal Vouchers
            </a>
        </div>

        <!-- Main Form Card -->
        <div class="jv-main-card">
            <form id="myForm" method="post"
                action="{{ route('voucher.update', ['id' => Crypt::encrypt($vouchersNumber->id_vouchers_unique_number)]) }}">
                @csrf

                <!-- Error Display -->
                @if (isset($errors) && count($errors) > 0)
                    <div class="p-3">
                        @foreach ($errors->all() as $error)
                            <div class="alert alert-danger fade show mb-2" role="alert">
                                <i class="fa-solid fa-circle-exclamation mr-2"></i> {{ $error }}
                                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                        @endforeach
                    </div>
                @endif

                <!-- SECTION 1: Voucher Header & Payment Source -->
                <div class="jv-section-header">
                    <h6 class="jv-section-title">
                        <i class="fa-solid fa-sliders"></i> Voucher Configuration & Source Account
                        <span class="jv-urdu" style="margin-left: auto;">واؤچر اور کھاتے کی بنیادی تفصیلات</span>
                    </h6>
                </div>
                <div class="jv-section-body">
                    <div class="row align-items-start">
                        <!-- Voucher Date -->
                        <div class="col-lg-4 col-md-6 col-12">
                            <div class="jv-field-group">
                                <label class="jv-label" for="voucher_date">
                                    <span>Voucher Date <span class="text-danger">*</span></span>
                                    <span class="label-urdu">تاریخ واؤچر</span>
                                </label>
                                <div class="jv-input-icon-wrap">
                                    <i class="fa-regular fa-calendar-days jv-input-icon"></i>
                                    <input type="text" id="voucher_date" name="voucher_date" class="jv-input"
                                        value="{{ $headerDate }}" placeholder="YYYY-MM-DD" readonly required />
                                </div>
                            </div>
                        </div>

                        <!-- Payment Method (Cash / Bank) -->
                        <div class="col-lg-4 col-md-6 col-12">
                            <div class="jv-field-group">
                                <label class="jv-label">
                                    <span>Payment Method <span class="text-danger">*</span></span>
                                    <span class="label-urdu">طریقہ ادائیگی</span>
                                </label>
                                <div class="jv-method-switch">
                                    <label class="jv-method-option" for="cash">
                                        <input type="radio" id="cash" name="payment_method" value="cash">
                                        <span class="jv-method-label">
                                            <i class="fa-solid fa-money-bill-wave"></i> Cash (کیش)
                                        </span>
                                    </label>
                                    <label class="jv-method-option" for="bank">
                                        <input type="radio" id="bank" name="payment_method" value="bank">
                                        <span class="jv-method-label">
                                            <i class="fa-solid fa-building-columns"></i> Bank (بینک)
                                        </span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <!-- Source Account Selection -->
                        <div class="col-lg-4 col-md-12 col-12">
                            <div class="jv-field-group">
                                <label class="jv-label" for="account_select">
                                    <span>Source Cash / Bank Account <span class="text-danger">*</span></span>
                                    <span class="label-urdu">کھاتہ منتخب کریں</span>
                                </label>
                                <select id="account_select" name="account" class="form-control select2">
                                    <option value="">- Select Account -</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- SECTION 2: Business Partner & Transaction Account -->
                <div class="jv-section-header">
                    <h6 class="jv-section-title">
                        <i class="fa-solid fa-handshake"></i> Business Partner & Ledger Account
                        <span class="jv-urdu" style="margin-left: auto;">بزنس پارٹنر اور جنرل لیجر کھاتہ</span>
                    </h6>
                </div>
                <div class="jv-section-body">
                    <div class="row align-items-start">
                        <!-- Business Partner Type -->
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="jv-field-group">
                                <label class="jv-label" for="business_partner">
                                    <span>Partner Type <span class="text-danger">*</span></span>
                                    <span class="label-urdu">پارٹنر کی قسم</span>
                                </label>
                                @if ($partnerLocked)
                                    <select id="business_partner" class="form-control select2" disabled>
                                        <option value="{{ $partnerType }}" selected>{{ ucfirst($partnerType) }}</option>
                                    </select>
                                    <input type="hidden" name="business_partner" value="{{ $partnerType }}">
                                @else
                                    <select onchange="getPartnerData();" id="business_partner" name="business_partner"
                                        class="form-control select2" required>
                                        <option value="">- Select Type -</option>
                                        <option value="employee" {{ $partnerType == 'employee' ? 'selected' : '' }}>Employee (ملازم)</option>
                                        <option value="customer" {{ $partnerType == 'customer' ? 'selected' : '' }}>Customer (گاہک)</option>
                                        <option value="suppliers" {{ $partnerType == 'suppliers' ? 'selected' : '' }}>Supplier (سپلائر)</option>
                                        <option value="other" {{ $partnerType == 'other' ? 'selected' : '' }}>Other (دیگر / وینڈر)</option>
                                    </select>
                                @endif
                            </div>
                        </div>

                        <!-- Partner Name -->
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="jv-field-group">
                                <div class="d-flex align-items-center justify-content-between mb-2" style="min-height: 22px;">
                                    <label class="jv-label mb-0" for="partner_name">
                                        <span>Partner Name <span class="text-danger">*</span></span>
                                    </label>
                                    <span id="addVendorButtonContainer" style="{{ $partnerType === 'other' ? '' : 'display: none;' }}">
                                        <button type="button" class="btn btn-xs btn-outline-primary py-0 px-2"
                                            data-toggle="modal" data-target="#addVendorModal">
                                            <i class="fa-solid fa-plus"></i> New Vendor
                                        </button>
                                    </span>
                                </div>
                                @if ($partnerLocked)
                                    <select id="partner_name" class="form-control select2" disabled>
                                        <option value="{{ $partnerId }}" selected>{{ $resolvedPartnerName }}</option>
                                    </select>
                                    <input type="hidden" name="partner_name" value="{{ $partnerId }}">
                                @else
                                    <select id="partner_name" name="partner_name" class="form-control select2" required>
                                        <option value="">- Select Partner -</option>
                                        @if (!empty($partnerId))
                                            <option value="{{ $partnerId }}" selected>{{ $resolvedPartnerName }}</option>
                                        @endif
                                    </select>
                                @endif
                            </div>
                        </div>

                        <!-- Payment Mode -->
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="jv-field-group">
                                <label class="jv-label" for="payment_mode">
                                    <span>Payment Mode</span>
                                    <span class="label-urdu">طریقہ</span>
                                </label>
                                <select name="payment_mode" class="form-control jv-select" id="payment_mode" style="padding-left: 14px;">
                                    <option value="Cash">Cash</option>
                                    <option value="Cheque">Cheque</option>
                                    <option value="Pay Order">Pay Order</option>
                                    <option value="Credit Card">Credit Card</option>
                                    <option value="Other">Other</option>
                                </select>
                            </div>
                        </div>

                        <!-- Transaction Account -->
                        <div class="col-lg-3 col-md-6 col-12">
                            <div class="jv-field-group">
                                <label class="jv-label" for="transaction_account">
                                    <span>Transaction Account</span>
                                    <span class="label-urdu">کھاتہ</span>
                                </label>
                                <select name="transaction_account" class="form-control select2" id="transaction_account">
                                    <option value="">- Select Account -</option>
                                    @foreach ($accounts as $acc)
                                        <option value="{{ $acc->id_transaction_account }}">
                                            {{ $acc->id_transaction_account }} | {{ $acc->transaction_account_name }}
                                        </option>
                                    @endforeach
                                </select>
                            </div>
                        </div>

                        <!-- Hidden Transaction Type (preserved for compatibility) -->
                        <select name="transaction_type" class="d-none" id="transaction_type">
                            <option value="Credit" selected>Credit</option>
                            <option value="Debit">Debit</option>
                        </select>
                    </div>

                    <!-- Entry Pad / Amount & Add Row -->
                    <div class="jv-entry-bar">
                        <div class="row align-items-end">
                            <div class="col-lg-4 col-md-5 col-12 mb-3 mb-md-0">
                                <div class="jv-field-group mb-0">
                                    <label class="jv-label" for="amount">
                                        <span>Amount (PKR)</span>
                                        <span class="label-urdu">رقم درج کریں</span>
                                    </label>
                                    <div class="jv-input-icon-wrap">
                                        <i class="fa-solid fa-coins jv-input-icon text-warning"></i>
                                        <input type="number" step="any" id="amount" class="jv-input font-weight-bold"
                                            placeholder="0.00" style="font-size: 16px; color: var(--jv-primary);" />
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-5 col-md-4 col-12 mb-3 mb-md-0">
                                <div class="jv-field-group mb-0">
                                    <label class="jv-label" for="instrument">
                                        <span>Instrument / Ref No. (Optional)</span>
                                        <span class="label-urdu">چیک نمبر / ریفرنس</span>
                                    </label>
                                    <div class="jv-input-icon-wrap">
                                        <i class="fa-solid fa-receipt jv-input-icon"></i>
                                        <input type="text" id="instrument" class="jv-input"
                                            placeholder="e.g. Chq # 482910 or Ref No." />
                                    </div>
                                </div>
                            </div>

                            <div class="col-lg-3 col-md-3 col-12">
                                <button type="button" id="addButton" class="jv-btn-add-entry w-100">
                                    <i class="fa-solid fa-plus-circle"></i> Add Entry Row
                                </button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- SECTION 3: Journal Voucher Entries Table -->
                <div class="jv-section-header">
                    <h6 class="jv-section-title">
                        <i class="fa-solid fa-table-list"></i> Voucher Entries (Credit & Debit Ledger)
                        <span class="jv-urdu" style="margin-left: auto;">اندراج شدہ رقوم کی تفصیلات</span>
                    </h6>
                </div>
                <div class="jv-section-body">
                    <div class="jv-table-card">
                        <div class="table-responsive">
                            <table id="example2" class="table jv-table align-middle">
                                <thead>
                                    <tr>
                                        <th class="text-center" style="width: 50px;">#</th>
                                        <th>Account No</th>
                                        <th style="min-width: 200px;">Account Title</th>
                                        <th style="min-width: 140px;">Payment Mode</th>
                                        <th>Partner Name</th>
                                        <th style="min-width: 140px;">Instrument</th>
                                        <th class="text-right text-end">Net Amount</th>
                                        <th class="text-center">Date</th>
                                        <th class="text-right text-end" style="min-width: 140px;">Credit (PKR)</th>
                                        <th class="text-right text-end" style="min-width: 140px;">Debit (PKR)</th>
                                        <th class="text-center" style="width: 70px;">Action</th>
                                    </tr>
                                </thead>
                                <tbody id="voucherTableBody">
                                    @foreach ($vouchersNumber->vouchers as $voucher)
                                        @php
                                            $rowDate = $voucher->date
                                                ? \Carbon\Carbon::parse($voucher->date)->format('Y-m-d')
                                                : $headerDate;
                                            $rowPartnerName = \App\Http\Controllers\VoucherController::resolvePartnerName($voucher->business_partner_type ?? $partnerType, $voucher->partner_name);
                                        @endphp
                                        <tr data-voucher-id="{{ $voucher->id_vouchers }}">
                                            <td class="text-center row-index">{{ $loop->iteration }}</td>
                                            <td>
                                                <input type="hidden" name="voucherId[]" value="{{ $voucher->id_vouchers }}">
                                                <input type="hidden" name="accountNo[]" class="row-account-no" value="{{ $voucher->account_no }}">
                                                <span class="font-weight-600 row-account-no-display">{{ $voucher->account_no }}</span>
                                            </td>
                                            <td style="min-width: 200px;">
                                                <select name="accountName[]" class="form-control form-control-sm row-account-select" style="min-width: 180px; font-weight: 500;">
                                                    @php $foundAccount = false; @endphp
                                                    @foreach ($accounts as $acc)
                                                        @php
                                                            $isMatch = ($voucher->account_no == $acc->id_transaction_account || $voucher->account_title == $acc->transaction_account_name);
                                                            if ($isMatch) $foundAccount = true;
                                                        @endphp
                                                        <option value="{{ $acc->transaction_account_name }}" data-acc-no="{{ $acc->id_transaction_account }}" {{ $isMatch ? 'selected' : '' }}>
                                                            {{ $acc->id_transaction_account }} | {{ $acc->transaction_account_name }}
                                                        </option>
                                                    @endforeach
                                                    @if (!$foundAccount && !empty($voucher->account_title))
                                                        <option value="{{ $voucher->account_title }}" data-acc-no="{{ $voucher->account_no }}" selected>
                                                            {{ $voucher->account_no }} | {{ $voucher->account_title }}
                                                        </option>
                                                    @endif
                                                </select>
                                            </td>
                                            <td style="min-width: 140px;">
                                                <select name="paymentMode[]" class="form-control form-control-sm row-payment-mode"
                                                    style="min-width: 120px; font-weight: 600; color: #0f172a; background-color: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 6px;">
                                                    <option value="Cash" {{ ($voucher->payment_mode == 'Cash') ? 'selected' : '' }}>Cash</option>
                                                    <option value="Cheque" {{ ($voucher->payment_mode == 'Cheque') ? 'selected' : '' }}>Cheque</option>
                                                    <option value="Pay Order" {{ ($voucher->payment_mode == 'Pay Order') ? 'selected' : '' }}>Pay Order</option>
                                                    <option value="Credit Card" {{ ($voucher->payment_mode == 'Credit Card') ? 'selected' : '' }}>Credit Card</option>
                                                    <option value="Other" {{ ($voucher->payment_mode == 'Other') ? 'selected' : '' }}>Other</option>
                                                </select>
                                            </td>
                                            <td>
                                                <span class="font-weight-500 text-dark">{{ $rowPartnerName }}</span>
                                            </td>
                                            <td style="min-width: 140px;">
                                                <input type="text" class="form-control form-control-sm row-instrument"
                                                    name="instrumentAmount[]" value="{{ $voucher->instrument }}"
                                                    placeholder="Ref / Chq #"
                                                    style="min-width: 130px; font-size: 13px; color: #1e293b; background-color: #ffffff; border: 1px solid #cbd5e1; border-radius: 6px;">
                                            </td>
                                            <td class="text-right text-end">
                                                <input type="text" class="amount font-weight-bold text-right" name="netAmount[]"
                                                    value="{{ $voucher->amount }}" readonly
                                                    style="background: transparent; border: none; outline: none; width: 100%; font-size: 13px;">
                                            </td>
                                            <td class="text-center">
                                                <input type="hidden" name="voucherDate[]" value="{{ $rowDate }}">
                                                <span class="small text-muted">{{ $rowDate }}</span>
                                            </td>
                                            <td class="text-right text-end">
                                                <input type="number" step="any" min="0"
                                                    class="form-control form-control-sm text-right creditAmount" name="creditAmount[]"
                                                    value="{{ $voucher->credit }}" style="max-width: 140px; margin-left: auto; font-weight: 600;">
                                            </td>
                                            <td class="text-right text-end">
                                                <input type="number" step="any" min="0"
                                                    class="form-control form-control-sm text-right debitAmount" name="debitAmount[]"
                                                    value="{{ $voucher->debit }}" style="max-width: 140px; margin-left: auto; font-weight: 600;">
                                            </td>
                                            <td class="text-center">
                                                <button type="button" class="btn btn-outline-danger btn-sm rounded-circle delete-row"
                                                    title="Delete Row" style="width: 32px; height: 32px; padding: 0;">
                                                    <i class="fas fa-trash-alt"></i>
                                                </button>
                                            </td>
                                        </tr>
                                    @endforeach
                                </tbody>
                                <tfoot>
                                    <tr>
                                        <td colspan="8" class="text-right text-end text-uppercase">
                                            <strong>Total Ledger Amounts:</strong>
                                        </td>
                                        <td class="text-right text-end">
                                            <span class="jv-pill-credit">
                                                Rs. <span id="totalCredit">{{ number_format($totalCredit, 2, '.', '') }}</span>
                                            </span>
                                        </td>
                                        <td class="text-right text-end">
                                            <span class="jv-pill-debit">
                                                Rs. <span id="totalDebit">{{ number_format($totalDebit, 2, '.', '') }}</span>
                                            </span>
                                        </td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>

                        <!-- Real-time Balance Status Bar -->
                        <div class="jv-balance-bar">
                            <div class="d-flex align-items-center gap-2">
                                <span class="text-muted">Ledger Balance Status:</span>
                                <span id="balanceStatusBadge" class="jv-status-badge balanced">
                                    <i class="fa-solid fa-scale-balanced"></i> Ready
                                </span>
                            </div>
                            <small id="balanceNote" class="text-muted">Debits and Credits must balance before updating.</small>
                        </div>
                    </div>
                </div>

                <!-- Action Footer -->
                <div class="jv-form-footer">
                    <div class="text-muted small">
                        <i class="fa-solid fa-circle-info mr-1"></i> Make sure all changes are balanced before updating.
                    </div>
                    <div class="jv-footer-actions">
                        <a href="{{ route('voucher.list') }}" class="jv-btn-cancel">
                            <i class="fa-solid fa-xmark"></i> Cancel
                        </a>
                        <button type="submit" class="jv-btn-save">
                            <i class="fa-solid fa-floppy-disk"></i> Update Journal Voucher
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Modal: Add Vendor -->
    <div class="modal fade" id="addVendorModal" tabindex="-1" role="dialog" aria-labelledby="addVendorModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addVendorModalLabel">
                        <i class="fa-solid fa-user-plus text-primary mr-2"></i> Add New Vendor
                    </h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="addVendorForm">
                        <meta name="csrf-token" content="{{ csrf_token() }}">
                        <div class="jv-field-group mb-0">
                            <label for="vendorName" class="jv-label">
                                <span>Vendor Name <span class="text-danger">*</span></span>
                            </label>
                            <input type="text" class="jv-input" id="vendorName" name="vendor_name"
                                placeholder="Enter Vendor Name" required>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="jv-btn-save" onclick="saveVendor()">Save Vendor</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Error Notification Popup -->
    <div id="errorNotification" class="alert alert-danger position-fixed top-0 end-0 m-3" style="display: none; z-index: 9999;">
        <strong>Error!</strong> <span id="errorMessage">Empty Field(s) Found.</span>
    </div>
@endsection

@push('scripts')
    <script>
        $(function() {
            const $form = $('#myForm');
            const $tbody = $('#voucherTableBody');
            const EPS = 0.005;
            const num = v => parseFloat(v) || 0;
            const availableAccounts = @json($accounts);

            // Setup CSRF header
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            // Initialize select2 & datepicker
            $('#business_partner, #partner_name, #transaction_account, #account_select')
                .select2({
                    theme: 'default',
                    width: '100%'
                });

            $('#voucher_date').datepicker({
                dateFormat: 'yy-mm-dd'
            });

            // Keyboard shortcut Ctrl/Cmd+S to save
            document.addEventListener('keydown', function(e) {
                if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
                    e.preventDefault();
                    $form[0].requestSubmit();
                } else if (e.key === 'Enter' && !['BUTTON', 'TEXTAREA'].includes(e.target.tagName)) {
                    e.preventDefault();
                }
            });

            // Load Accounts for Cash / Bank
            function loadAccounts(method, selectedId, done) {
                $.getJSON('{{ route('get-transaction-accounts') }}', {
                    type: method
                })
                .done(function(data) {
                    const $sel = $('#account_select').empty();
                    $sel.append(new Option('- Select Account -', ''));
                    $.each(data, (id, name) => $sel.append(new Option(id + ' | ' + name, id)));

                    let found = false;
                    if (selectedId) {
                        found = $sel.find('option').filter(function() {
                            return this.value === String(selectedId);
                        }).length > 0;
                        if (found) $sel.val(String(selectedId));
                    }
                    $sel.trigger('change');
                    if (done) done(found);
                })
                .fail(function(xhr) {
                    console.error(xhr.responseText);
                });
            }

            $('input[name="payment_method"]').on('change', function() {
                const method = $(this).val();
                loadAccounts(method);
                $('#payment_mode').val(method === 'cash' ? 'Cash' : 'Cheque').trigger('change');
            });

            // Business partner data loader
            window.getPartnerData = function() {
                const type = $('#business_partner').val();
                const $names = $('#partner_name').empty().append(new Option('- Select Partner -', ''));

                if (!type) {
                    $('#addVendorButtonContainer').hide();
                    $names.trigger('change');
                    return;
                }

                if (type === 'other') {
                    $('#addVendorButtonContainer').show();
                } else {
                    $('#addVendorButtonContainer').hide();
                }

                $.getJSON('{{ route('get-partner-data') }}', {
                    type: type
                })
                .done(function(data) {
                    if (data && Object.keys(data).length) {
                        $.each(data, (key, value) => {
                            $names.append(new Option(value, key));
                        });
                    }
                    $names.trigger('change');
                })
                .fail(function(xhr) {
                    console.error(xhr.responseText);
                });
            };

            $('#business_partner').on('change', window.getPartnerData);

            // Save new Vendor modal
            window.saveVendor = function() {
                var vendorName = $('#vendorName').val();
                if (!vendorName) {
                    alert('Please enter a vendor name');
                    return;
                }

                $.ajax({
                    url: '{{ route('save-vendor') }}',
                    type: 'POST',
                    data: {
                        vendor_name: vendorName,
                        _token: '{{ csrf_token() }}'
                    },
                    success: function(response) {
                        $('#addVendorModal').modal('hide');
                        $('#vendorName').val('');
                        var newOption = new Option(response.name, response.id || response.vendor_id, true, true);
                        $('#partner_name').append(newOption).trigger('change');
                    },
                    error: function(xhr) {
                        alert('Error saving vendor: ' + (xhr.responseJSON?.message || 'Unknown error'));
                    }
                });
            };

            // Handle Row Account Select change -> sync accountNo
            $tbody.on('change', '.row-account-select', function() {
                const accNo = $(this).find('option:selected').data('acc-no') || '';
                const $tr = $(this).closest('tr');
                $tr.find('.row-account-no').val(accNo);
                $tr.find('.row-account-no-display').text(accNo);
            });

            // Row helpers
            const hidden = (name, value) => $('<input type="hidden">').attr('name', name).val(value ?? '');
            const accountLabel = sel => ($(sel + ' option:selected').text().split('|')[1] || '').trim();

            function buildRow(r) {
                let accountOptions = '';
                availableAccounts.forEach(acc => {
                    const isSel = (String(acc.id_transaction_account) === String(r.accountNo) || acc.transaction_account_name === r.accountName);
                    accountOptions += `<option value="${acc.transaction_account_name}" data-acc-no="${acc.id_transaction_account}" ${isSel ? 'selected' : ''}>${acc.id_transaction_account} | ${acc.transaction_account_name}</option>`;
                });

                const paymentModes = ['Cash', 'Cheque', 'Pay Order', 'Credit Card', 'Other'];
                let modeOptions = '';
                paymentModes.forEach(m => {
                    modeOptions += `<option value="${m}" ${m === r.paymentMode ? 'selected' : ''}>${m}</option>`;
                });

                return $('<tr>').append(
                    $('<td class="text-center row-index">'),
                    $('<td>').append(
                        hidden('voucherId[]', ''),
                        $('<input type="hidden" name="accountNo[]" class="row-account-no">').val(r.accountNo),
                        $('<span class="font-weight-600 row-account-no-display">').text(r.accountNo)
                    ),
                    $('<td style="min-width: 200px;">').append(
                        $('<select name="accountName[]" class="form-control form-control-sm row-account-select" style="min-width: 180px; font-weight: 500;">').html(accountOptions)
                    ),
                    $('<td style="min-width: 140px;">').append(
                        $('<select name="paymentMode[]" class="form-control form-control-sm row-payment-mode" style="min-width: 120px; font-weight: 600; color: #0f172a; background-color: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 6px;">').html(modeOptions)
                    ),
                    $('<td>').append($('<span class="font-weight-500 text-dark">').text(r.partnerName)),
                    $('<td style="min-width: 140px;">').append(
                        $('<input type="text" class="form-control form-control-sm row-instrument" name="instrumentAmount[]" placeholder="Ref / Chq #" style="min-width: 130px; font-size: 13px; color: #1e293b; background-color: #ffffff; border: 1px solid #cbd5e1; border-radius: 6px;">').val(r.instrument || '')
                    ),
                    $('<td class="text-right text-end">').append($('<input type="text" class="amount font-weight-bold text-right" name="netAmount[]" readonly style="background: transparent; border: none; outline: none; width: 100%; font-size: 13px;">')),
                    $('<td class="text-center">').append(hidden('voucherDate[]', r.date), $('<span class="small text-muted">').text(r.date)),
                    $('<td class="text-right text-end">').append(
                        $('<input type="number" step="any" min="0">')
                            .addClass('form-control form-control-sm text-right creditAmount')
                            .attr('name', 'creditAmount[]')
                            .val(r.credit ?? '')
                            .css({'max-width': '140px', 'margin-left': 'auto', 'font-weight': '600'})
                    ),
                    $('<td class="text-right text-end">').append(
                        $('<input type="number" step="any" min="0">')
                            .addClass('form-control form-control-sm text-right debitAmount')
                            .attr('name', 'debitAmount[]')
                            .val(r.debit ?? '')
                            .css({'max-width': '140px', 'margin-left': 'auto', 'font-weight': '600'})
                    ),
                    $('<td class="text-center">').html(
                        '<button type="button" class="btn btn-outline-danger btn-sm rounded-circle delete-row" title="Delete Row" style="width: 32px; height: 32px; padding: 0;"><i class="fas fa-trash-alt"></i></button>'
                    )
                );
            }

            const debitRows = () => $tbody.find('tr').filter(function() {
                return num($(this).find('.creditAmount').val()) <= 0;
            });

            function sumOf(selector) {
                let total = 0;
                $tbody.find(selector).each(function() {
                    total += num($(this).val());
                });
                return total;
            }

            function syncDebitRow() {
                const $d = debitRows();
                if ($d.length === 1) {
                    $d.find('.debitAmount').val(sumOf('.creditAmount').toFixed(2));
                }
            }

            function renumberRows() {
                $tbody.find('tr').each(function(i) {
                    $(this).find('.row-index').text(i + 1);
                });
            }

            function updateTotals() {
                let credit = 0, debit = 0;

                $tbody.find('tr').each(function() {
                    const c = num($(this).find('.creditAmount').val());
                    const d = num($(this).find('.debitAmount').val());
                    $(this).find('.amount').val(Math.abs(d - c).toFixed(2));
                    credit += c;
                    debit += d;
                });

                const diff = Math.abs(credit - debit);
                const balanced = diff < EPS;

                $('#totalCredit').text(credit.toFixed(2));
                $('#totalDebit').text(debit.toFixed(2));

                if (balanced) {
                    $('#balanceStatusBadge')
                        .removeClass('unbalanced')
                        .addClass('balanced')
                        .html('<i class="fa-solid fa-circle-check"></i> Balanced');
                    $('#balanceNote')
                        .removeClass('text-danger font-weight-bold')
                        .addClass('text-muted')
                        .text('Debits and Credits are perfectly balanced.');
                } else {
                    $('#balanceStatusBadge')
                        .removeClass('balanced')
                        .addClass('unbalanced')
                        .html('<i class="fa-solid fa-triangle-exclamation"></i> Out of Balance');
                    $('#balanceNote')
                        .removeClass('text-muted')
                        .addClass('text-danger font-weight-bold')
                        .text('Out of balance by PKR ' + diff.toFixed(2));
                }
            }

            function showError(message) {
                $('#errorMessage').text(message);
                $('#errorNotification').stop(true, true).fadeIn().delay(3500).fadeOut();
            }

            // Add new row button
            $('#addButton').on('click', function() {
                const date = $('#voucher_date').val().trim();
                const creditId = $('#transaction_account').val();
                const debitId = $('#account_select').val();
                const paymentMode = $('#payment_mode').val();
                const instrument = $('#instrument').val().trim();
                const amount = parseFloat($('#amount').val());
                const partnerName = $('#partner_name option:selected').text().trim();
                const $debit = debitRows().last();

                const missing = [];
                if (!date) missing.push('Voucher Date');
                if (!creditId) missing.push('Transaction Account');
                if (!paymentMode) missing.push('Payment Mode');
                if (!amount || amount <= 0) missing.push('Amount');
                if (!$debit.length && !debitId) missing.push('Payment Method / Account');

                if (missing.length) {
                    showError('Please fill: ' + missing.join(', '));
                    return;
                }

                const $credit = buildRow({
                    accountNo: creditId,
                    accountName: accountLabel('#transaction_account'),
                    paymentMode: paymentMode,
                    partnerName: partnerName,
                    instrument: instrument,
                    date: date,
                    credit: amount.toFixed(2),
                    debit: ''
                });

                if ($debit.length) {
                    $credit.insertBefore($debit);
                } else {
                    $tbody.append($credit);
                    $tbody.append(buildRow({
                        accountNo: debitId,
                        accountName: accountLabel('#account_select'),
                        paymentMode: paymentMode,
                        partnerName: partnerName,
                        instrument: instrument,
                        date: date,
                        credit: '',
                        debit: amount.toFixed(2)
                    }));
                }

                syncDebitRow();
                renumberRows();
                updateTotals();
                $('#amount, #instrument').val('');
            });

            // Table input events
            $tbody.on('input', '.creditAmount', function() {
                syncDebitRow();
                updateTotals();
            });
            $tbody.on('input', '.debitAmount', updateTotals);

            $tbody.on('click', '.delete-row', function() {
                const $row = $(this).closest('tr');
                const wasCredit = num($row.find('.creditAmount').val()) > 0;

                $row.remove();
                if (wasCredit) syncDebitRow();
                renumberRows();
                updateTotals();
            });

            // Submit validation
            $form.on('submit', function(e) {
                const missing = [];
                if (!$('#business_partner').val()) missing.push('Business Partner');
                if (!$('#partner_name').val()) missing.push('Partner Name');

                let message = '';
                if (missing.length) {
                    message = 'Please fill: ' + missing.join(', ');
                } else if (!$tbody.find('tr').length) {
                    message = 'Add at least one voucher line.';
                } else if ($tbody.find('tr').filter(function() {
                        return num($(this).find('.creditAmount').val()) +
                            num($(this).find('.debitAmount').val()) <= 0;
                    }).length) {
                    message = 'Every line needs a debit or a credit amount.';
                } else if (Math.abs(sumOf('.creditAmount') - sumOf('.debitAmount')) >= EPS) {
                    message = 'Total debit and total credit must be equal.';
                }

                if (message) {
                    e.preventDefault();
                    showError(message);
                }
            });

            // Autofill header fields from saved lines
            (function autofillFromVoucher() {
                const $rows = $tbody.find('tr');
                if (!$rows.length) return;

                const $debitRow = debitRows().first();
                const $creditRow = $rows.not($debitRow).first();

                const mode = $rows.first().find('.row-payment-mode').val() || $rows.first().find('input[name="paymentMode[]"]').val() || 'Cash';
                const debitAcc = $debitRow.find('.row-account-no').val() || '';
                const creditAcc = $creditRow.find('.row-account-no').val() || '';

                $('#payment_mode').val(mode).trigger('change');

                if (creditAcc) {
                    $('#transaction_account').val(String(creditAcc)).trigger('change');
                }

                function setMethod(method, next) {
                    $('input[name="payment_method"][value="' + method + '"]').prop('checked', true);
                    loadAccounts(method, debitAcc, function(found) {
                        if (!found && next) next();
                    });
                }

                const first = mode === 'Cash' ? 'cash' : 'bank';
                const second = first === 'cash' ? 'bank' : 'cash';

                if (debitAcc) {
                    setMethod(first, function() {
                        setMethod(second);
                    });
                }
            })();

            renumberRows();
            updateTotals();
        });
    </script>
@endpush