@extends('layout.app')
@section('title', 'Edit Sale Voucher')
@push('header_script')
    <style>
        .width-85 {
            margin-top: 10px;
            width: 100px !important;
            margin-right: 15px !important;
        }

        .d-flex {
            margin-bottom: 3px;
        }

        .shopPayment {
            display: none !important;
        }

        .innerTableSpacing {
            padding: 10px 20px;
            background: #f8f9fa;
            border-radius: 6px;
        }

        /* Redesign UI styles matching Freight Billing UI */
        .form-section-title {
            font-size: 0.95rem;
            font-weight: 600;
            color: #495057;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid #e9ecef;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .form-section-title i {
            color: #0d6efd;
        }

        .bg-light-input {
            background-color: #f8f9fa;
        }

        .total-card {
            background: #f0f4f8;
            border: 1px dashed #cbd5e1;
        }

        .party-card {
            height: 100%;
            border: 1px solid #e2e8f0;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
        }

        .party-card .card-header {
            background-color: #f2f2f9;
            padding: 0.6rem 1rem;
        }

        .party-card .card-body {
            padding: 1rem;
            background-color: #fff;
        }

        .party-info-row {
            display: flex;
            margin-bottom: 0.5rem;
            font-size: 0.9rem;
            border-bottom: 1px dashed #f1f5f9;
            padding-bottom: 0.5rem;
        }

        .party-info-row:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .party-info-row label {
            font-weight: 600;
            color: #64748b;
            width: 130px;
            flex-shrink: 0;
        }

        .party-info-row span {
            color: #334155;
            font-weight: 500;
            flex-grow: 1;
        }

        .goods-table th {
            background-color: #f8fafc;
            font-size: 0.8rem;
            font-weight: 700;
            text-transform: uppercase;
            color: #475569;
            padding: 0.6rem;
            border-bottom: 2px solid #e2e8f0;
        }

        .goods-table td {
            vertical-align: middle;
            font-size: 0.85rem;
            padding: 0.5rem;
        }

        .goods-table input.form-control {
            padding: 0.25rem 0.5rem;
            font-size: 0.85rem;
            border-color: #e2e8f0;
        }

        .goods-table input.form-control:focus {
            border-color: #0d6efd;
            box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.1);
        }

        .readonly-input {
            background-color: #f1f5f9 !important;
            cursor: not-allowed;
            color: #64748b;
        }
    </style>
    <link rel="stylesheet" href="{{ asset('theme/assets/vendor/daterange/daterange.css') }}">
@endpush

@section('content')
    <div class="app-hero-header d-flex align-items-center">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);">Edit Sale Voucher</a></li>
        </ol>
        <div class="ms-auto d-lg-flex flex-row">
            <div class="d-flex flex-row gap-1 day-sorting">
                <a href="{{ route('sale-voucher.index') }}" class="btn btn-sm btn-primary">
                    <i class="ri-arrow-left-circle-fill"></i> Back
                </a>
            </div>
        </div>
    </div>

    <div class="app-body">
        {!! Form::open([
            'route' => ['sale-voucher.update', $saleVoucher->id],
            'onsubmit' => 'BtnSubmit.disabled = true',
            'class' => 'needs-validation',
            'method' => 'post',
            'autocomplete' => 'off',
            'files' => true,
        ]) !!}
        @method('PUT')

        <div class="row gx-3">
            {{-- ========================================
                    SECTION 1: VOUCHER DETAILS
                    ======================================== --}}
            <div class="col-12">
                <div class="card mb-3">
                    <div class="card-body">
                        <div class="form-section-title">
                            <i class="ri-file-list-3-line"></i> Voucher Details
                        </div>

                        <div class="row g-3">
                            <div class="col-md-6 col-12">
                                <label class="form-label" for="voucher_no">Voucher No. <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control fw-bold readonly-input" id="voucher_no" name="voucher_no"
                                    required value="{{ old('voucher_no', $saleVoucher->voucher_no) }}" readonly>
                                <div class="text-danger">{{ $errors->first('voucher_no') }}</div>
                            </div>

                            <div class="col-md-6 col-12">
                                <label class="form-label" for="voucher_date">Voucher Date <span
                                        class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">
                                        <i class="ri-calendar-todo-line"></i>
                                    </span>
                                    <input type="text" id="voucher_date" class="form-control datepicker" name="voucher_date" required
                                        min="{{ date('Y-m-d', strtotime($companyDetails->year_from)) }}"
                                        value="{{ old('voucher_date', date('d-m-Y', strtotime($saleVoucher->voucher_date))) }}">
                                </div>
                                <div class="text-danger">{{ $errors->first('voucher_date') }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row gx-3">
            {{-- ========================================
                    PARTY DETAILS CARD
                    ======================================== --}}
            <div class="col-md-6">
                <div class="card party-card mb-3">
                    <div class="card-header">
                        <small class="fw-bold text-uppercase"><i class="ri-user-star-line"></i> Party Details</small>
                    </div>
                    <div class="card-body">
                        <div class="party-info-row">
                            <label>Party Name</label>
                            <span class="fw-bold" id="disp_party_name">-</span>
                        </div>
                        <div class="party-info-row">
                            <label>GST No</label>
                            <span class="fw-bold" id="disp_gst_no">-</span>
                        </div>
                        <div class="party-info-row">
                            <label>Mobile</label>
                            <span id="disp_mobile_no">-</span>
                        </div>
                        <div class="party-info-row">
                            <label>Address</label>
                            <span id="disp_address">-</span>
                        </div>
                        <div class="party-info-row">
                            <label>City/State</label>
                            <span id="disp_city_state">-</span>
                        </div>
                        <div class="party-info-row">
                            <label>GST Type</label>
                            <span id="disp_gst_type">-</span>
                        </div>
                        <div class="party-info-row">
                            <label>Opening Balance</label>
                            <span id="disp_opening_balance">-</span>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ========================================
                    INFORMATION PANEL CARD
                    ======================================== --}}
            <div class="col-md-6">
                <div class="card mb-3 h-100">
                    <div class="card-header bg-light">
                        <small class="fw-bold text-uppercase text-dark"><i class="ri-information-line"></i> Information Panel</small>
                    </div>
                    <div class="card-body">
                        <div class="row g-3">
                            <div class="col-12">
                                <label class="form-label" for="party_account_ledger_id">Select Party <span
                                        class="text-danger">*</span></label>
                                <button type="button" class="btn btn-sm btn-primary py-0 px-1 float-end" data-bs-toggle="modal"
                                    data-bs-target="#commonPartyModal" data_type="purchase_party">
                                    <i class="ri-add-circle-line"></i> Add Party
                                </button>
                                {!! Form::select(
                                    'party_account_ledger_id',
                                    ['' => '--Select--'] + $partyLedger,
                                    old('party_account_ledger_id', $saleVoucher->party_account_ledger_id),
                                    ['class' => 'form-control select2', 'id' => 'party_account_ledger_id', 'required'],
                                ) !!}
                                <small class="text-muted d-block mt-1">
                                    Balance: <span id="party_balance" class="fw-bold"></span>
                                </small>
                                <div class="text-danger">{{ $errors->first('party_account_ledger_id') }}</div>
                                <input type="hidden" name="party_state_id" id="party_state_id"
                                    value="{{ old('party_state_id', $saleVoucher->partyLedger->commonParty->state_id ?? '') }}">
                                <input type="hidden" name="party_register_type" id="party_register_type"
                                    value="{{ old('party_register_type', $saleVoucher->partyLedger->commonParty->register_type ?? '') }}">
                                <input type="hidden" name="is_party_cash_bank" id="is_party_cash_bank"
                                    value="{{ old('is_party_cash_bank', '') }}">
                            </div>

                            <div class="col-12">
                                <label class="form-label" for="created_by">Created By <span
                                        class="text-danger">*</span></label>
                                <input type="text" class="form-control readonly-input" id="created_by" name="created_by"
                                    required readonly value="{{ old('created_by', $saleVoucher->created_by) }}">
                                <div class="text-danger">{{ $errors->first('created_by') }}</div>
                            </div>

                            <div class="col-12">
                                <label class="form-label" for="doc">Document Upload</label>
                                @if ($saleVoucher->doc)
                                    <div class="mb-1">
                                        <a href="{{ asset('storage/' . $saleVoucher->doc) }}" target="_blank"
                                            class="btn btn-sm btn-outline-info">
                                            <i class="ri-file-line"></i> View Existing Document
                                        </a>
                                    </div>
                                @endif
                                <input type="file" class="form-control" id="doc" name="doc">
                                <div class="text-danger">{{ $errors->first('doc') }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {{-- ========================================
                SECTION 3: SELECTED ITEM DETAILS
                ======================================== --}}
        <div class="row gx-3">
            <div class="col-12">
                <div class="card mb-3">
                    <div class="card-header py-2 d-flex justify-content-between align-items-center bg-white border-bottom">
                        <div>
                            <span class="fw-bold text-dark">
                                <i class="ri-file-list-line text-primary"></i> Selected Item Details
                            </span>
                        </div>
                    </div>
                    <div class="card-body p-0">
                        <div class="table-responsive">
                            <table class="table table-bordered mb-0 goods-table text-center align-middle" id="tabdata">
                                <thead class="table-light">
                                    <tr>
                                        <th style="width: 25%">Name of Item <i class="text-danger"> *</i>
                                            <button type="button" class="btn btn-sm btn-primary py-0 px-1"
                                                data-bs-toggle="modal" data-bs-target="#productModal"
                                                data_type="product">
                                                <i class="ri-add-circle-line"></i>
                                            </button>
                                        </th>
                                        <th style="width: 10%">Qty <i class="text-danger"> *</i></th>
                                        <th style="width: 10%">Unit <i class="text-danger"> *</i></th>
                                        <th style="width: 10%">Rate/Unit <i class="text-danger"> *</i></th>
                                        <th style="width: 10%">Amount <i class="text-danger"> *</i></th>
                                        <th style="width: 12%">Tax Rate (%)</th>
                                        <th style="width: 10%">Tax Amount</th>
                                        <th style="width: 10%">Total Amount <i class="text-danger"> *</i></th>
                                        <th style="width: 3%">
                                            <button type="button" id="addrow"
                                                class="btn btn-sm btn-primary">
                                                <i class="ri-add-circle-fill"></i>
                                            </button>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @php $rowIndex = 10; @endphp
                                    @forelse($saleVoucher->voucherDetails as $detail)
                                        @php
                                            $rowIndex++;
                                            $ri = $rowIndex;
                                        @endphp
                                        <tr>
                                            <td>
                                                {!! Form::select(
                                                    'product_id[]',
                                                    ['' => '--Select--'] + $product,
                                                    old('product_id.' . $loop->index, $detail->product_id),
                                                    [
                                                        'class' => 'form-control select2',
                                                        'id' => 'product_id_' . $ri,
                                                        'required',
                                                    ],
                                                ) !!}
                                                <input type="hidden" name="check_item[]"
                                                    value="{{ $detail->id }}">
                                            </td>
                                            <td>
                                                <input class="form-control floatnumber" type="text"
                                                    name="qty[]"
                                                    value="{{ old('qty.' . $loop->index, $detail->qty) }}"
                                                    min="1" id="qty_{{ $ri }}" required>
                                            </td>
                                            <td>
                                                <input class="form-control readonly-input" type="text"
                                                    name="unit[]"
                                                    value="{{ old('unit.' . $loop->index, ucfirst($detail->units)) }}"
                                                    readonly id="unit_{{ $ri }}" required>
                                            </td>
                                            <td>
                                                <input class="form-control floatnumber" type="text"
                                                    name="rate[]"
                                                    value="{{ old('rate.' . $loop->index, number_format($detail->rate, 2, '.', '')) }}"
                                                    id="rate_{{ $ri }}" required>
                                            </td>
                                            <td>
                                                <input class="form-control floatnumber totalProductAmount"
                                                    type="text" name="amount[]"
                                                    value="{{ old('amount.' . $loop->index, number_format($detail->amount, 2, '.', '')) }}"
                                                    id="amount_{{ $ri }}" required>
                                            </td>
                                            <td>
                                                <input class="form-control readonly-input" type="hidden" readonly
                                                    name="tax[]" id="tax_{{ $ri }}"
                                                    value="{{ old('tax.' . $loop->index, $detail->tax ?? '0.00') }}">
                                                @php
                                                    $isGstApplicable = ($detail->product && $detail->product->gst_applicable == 'yes') ? true : false;
                                                    
                                                    $selectAttributes = [
                                                        'class' => 'form-control select2 taxGroupIds',
                                                        'id' => 'tax_group_id_' . $ri,
                                                        'required'
                                                    ];
                                                    
                                                    if (!$isGstApplicable) {
                                                        $selectAttributes['disabled'] = 'disabled';
                                                    }
                                                @endphp
                                                {!! Form::select(
                                                    'tax_group_id[]',
                                                    ['' => '--Select--'] + $taxGroup,
                                                    old('tax_group_id.' . $loop->index, $detail->tax_group_id),
                                                    $selectAttributes
                                                ) !!}
                                            </td>
                                            <td>
                                                <input class="form-control readonly-input totalTaxAmount" type="text"
                                                    name="tax_amount[]"
                                                    value="{{ old('tax_amount.' . $loop->index, number_format($detail->tax_amount, 2, '.', '')) }}"
                                                    id="tax_amount_{{ $ri }}" readonly required>
                                            </td>
                                            <td>
                                                <input class="form-control readonly-input totalValueWithTax"
                                                    type="text" name="total_amount[]"
                                                    value="{{ old('total_amount.' . $loop->index, number_format($detail->total_amount, 2, '.', '')) }}"
                                                    id="total_amount_{{ $ri }}" readonly>
                                            </td>
                                            <td>
                                                @if (!$loop->first)
                                                    <button type="button" class="btn btn-danger btn-sm delbtn">
                                                        <i class="ri-delete-bin-line"></i>
                                                    </button>
                                                @endif
                                            </td>
                                        </tr>
                                    @empty
                                        <tr>
                                            <td>
                                                {!! Form::select('product_id[]', ['' => '--Select--'] + $product, old('product_id.0'), [
                                                    'class' => 'form-control select2',
                                                    'id' => 'product_id_11',
                                                    'required',
                                                ]) !!}
                                                <input type="hidden" name="check_item[]" value="new">
                                            </td>
                                            <td><input class="form-control floatnumber" type="text"
                                                    name="qty[]" value="{{ old('qty.0', 1) }}" min="1"
                                                    id="qty_11" required></td>
                                            <td><input class="form-control readonly-input" type="text"
                                                    name="unit[]" value="{{ old('unit.0') }}" readonly
                                                    id="unit_11" required></td>
                                            <td><input class="form-control floatnumber" type="text"
                                                    name="rate[]" value="{{ old('rate.0', '0.00') }}"
                                                    id="rate_11" required></td>
                                            <td><input class="form-control floatnumber totalProductAmount"
                                                    type="text" name="amount[]"
                                                    value="{{ old('amount.0', '0.00') }}" id="amount_11"
                                                    required></td>
                                            <td>

                                                <input class="form-control readonly-input" type="hidden" readonly
                                                    name="tax[]" id="tax_11"
                                                    value="{{ old('tax.0', '0.00') }}">
                                                {!! Form::select('tax_group_id[]', ['' => '--Select--'] + $taxGroup, old('tax_group_id.0'), [
                                                    'class' => 'form-control select2 taxGroupIds',
                                                    'id' => 'tax_group_id_11',
                                                    'required',
                                                ]) !!}
                                            </td>
                                            <td><input class="form-control readonly-input totalTaxAmount" type="text"
                                                    name="tax_amount[]" value="{{ old('tax_amount.0', '0.00') }}"
                                                    id="tax_amount_11" readonly required></td>
                                            <td><input class="form-control readonly-input totalValueWithTax"
                                                    type="text" name="total_amount[]"
                                                    value="{{ old('total_amount.0', '0.00') }}"
                                                    id="total_amount_11" readonly></td>
                                            <td></td>
                                        </tr>
                                    @endforelse
                                </tbody>
                                <tfoot>
                                    <tr class="table-light fw-bold">
                                        <td colspan="4" class="text-end">Total Amount</td>
                                        <td>
                                            <input type="text" name="total_sale_amount" id="total_sale_amount"
                                                value="{{ old('total_sale_amount', number_format($saleVoucher->total_sale_amount, 2, '.', '')) }}"
                                                readonly class="form-control readonly-input text-end fw-bold">
                                        </td>
                                        <td></td>
                                        <td>
                                            <input type="text" name="total_tax_amount" id="total_tax_amount"
                                                value="{{ old('total_tax_amount', number_format($saleVoucher->total_tax_amount, 2, '.', '')) }}"
                                                readonly class="form-control readonly-input text-end fw-bold">
                                        </td>
                                        <td>
                                            <input type="text" name="final_sale_amount" id="final_sale_amount"
                                                value="{{ old('final_sale_amount', number_format($saleVoucher->final_sale_amount, 2, '.', '')) }}"
                                                readonly class="form-control readonly-input text-end fw-bold">
                                        </td>
                                        <td></td>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

                            {{-- ══════ CALCULATION SECTION ══════ --}}
                            <div class="col-12">

                                {{-- OTHER CHARGES BEFORE GST --}}
                                <div class="row mb-4">
                                    <div class="col-md-8 d-flex flex-column">
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <label class="fw-semibold mb-0">Other Charges
                                                <small class="text-muted">(Before GST — Enter negative to deduct)</small>
                                            </label>
                                            <button type="button" id="addExpense"
                                                class="btn btn-sm btn-primary">+</button>
                                        </div>
                                        <div id="otherExpTable" class="flex-grow-1"></div>
                                    </div>
                                    <div class="col-md-4 d-flex flex-column justify-content-end">
                                        <input type="text" name="total_other_charge" id="total_other_charge"
                                            value="{{ old('total_other_charge', number_format($saleVoucher->total_other_charge ?? 0, 2, '.', '')) }}"
                                            readonly class="form-control form-control-sm text-end fw-semibold">
                                    </div>
                                </div>

                                {{-- GST BREAKUP --}}
                                <div id="gstSection" style="display:none;">
                                    <div id="cgstSgstBlock" style="display:none;">
                                        <div class="row mb-2">
                                            <div class="col-md-8"><label>CGST Output</label></div>
                                            <div class="col-md-4">
                                                <input type="text" name="cgst_input" id="cgst_input"
                                                    value="{{ old('cgst_input', 0) }}" readonly
                                                    class="form-control form-control-sm text-end fw-semibold">
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-8"><label>SGST Output</label></div>
                                            <div class="col-md-4">
                                                <input type="text" name="sgst_input" id="sgst_input"
                                                    value="{{ old('sgst_input', 0) }}" readonly
                                                    class="form-control form-control-sm text-end fw-semibold">
                                            </div>
                                        </div>
                                    </div>
                                    <div id="igstBlock" style="display:none;">
                                        <div class="row mb-3">
                                            <div class="col-md-8"><label>IGST Output</label></div>
                                            <div class="col-md-4">
                                                <input type="text" name="igst_input" id="igst_input"
                                                    value="{{ old('igst_input', 0) }}" readonly
                                                    class="form-control form-control-sm text-end fw-semibold">
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <input type="hidden" name="final_tax_total" id="finalTaxTotal"
                                    value="{{ old('final_tax_total', '0.00') }}">

                                {{-- OTHER CHARGES AFTER GST --}}
                                <div class="row mb-4">
                                    <div class="col-md-8 d-flex flex-column">
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <label class="fw-semibold mb-0">Other Charges After GST
                                                <small class="text-muted">(Enter negative to deduct)</small>
                                            </label>
                                            <button type="button" id="addAfterGstCharge"
                                                class="btn btn-sm btn-primary">+</button>
                                        </div>
                                        <div id="afterGstExpTable" class="flex-grow-1"></div>
                                    </div>
                                    <div class="col-md-4 d-flex flex-column justify-content-end">
                                        <input type="text" name="total_after_gst_charge" id="total_after_gst_charge"
                                            value="{{ old('total_after_gst_charge', 0) }}" readonly
                                            class="form-control form-control-sm text-end fw-semibold">
                                    </div>
                                </div>

                                {{-- GROSS TOTAL --}}
                                <div class="row mb-3">
                                    <div class="col-md-8"><label class="fw-semibold">Gross Total</label></div>
                                    <div class="col-md-4">
                                        <input type="text" name="gross_total" id="gross_total"
                                            value="{{ old('gross_total', number_format(($saleVoucher->total ?? 0) - ($saleVoucher->round_off ?? 0), 2, '.', '')) }}" readonly
                                            class="form-control form-control-sm text-end fw-semibold">
                                    </div>
                                </div>

                                {{-- ROUND OFF --}}
                                <div class="row mb-2">
                                    <div class="col-md-8"><label>Round Off</label></div>
                                    <div class="col-md-4">
                                        <input type="text" name="round_off" id="round_off"
                                            value="{{ old('round_off', number_format($saleVoucher->round_off ?? 0, 2, '.', '')) }}"
                                            class="form-control form-control-sm text-end">
                                    </div>
                                </div>

                                <input type="hidden" name="tcs_amount" id="tcs_amount" value="0">

                                {{-- NET TOTAL --}}
                                <div class="row mb-3">
                                    <div class="col-md-8"><label class="fw-bold">Net Total</label></div>
                                    <div class="col-md-4">
                                        <input type="text" name="net_total" id="net_total"
                                            value="{{ old('net_total', number_format($saleVoucher->total, 2, '.', '')) }}"
                                            readonly class="form-control form-control-sm text-end fw-bold">
                                    </div>
                                </div>

                                {{-- PAID AMOUNT --}}
                                <div class="row mb-4 paymentSection">
                                    <div class="col-md-8 d-flex flex-column">
                                        <div class="d-flex align-items-center gap-2 mb-2">
                                            <label>Paid Amount</label>
                                            <button type="button" id="addPayment"
                                                class="btn btn-sm btn-primary">+</button>
                                        </div>
                                        <div id="paymentTable" class="flex-grow-1"></div>
                                    </div>
                                    <div class="col-md-4 d-flex flex-column justify-content-end">
                                        <input type="text" name="total_paid" id="total_paid"
                                            value="{{ old('total_paid', number_format($saleVoucher->total_paid, 2, '.', '')) }}"
                                            readonly class="form-control form-control-sm text-end fw-semibold">
                                    </div>
                                </div>

                                {{-- REMAINING BALANCE --}}
                                <div class="row mt-4">
                                    <div class="col-md-8"><label class="fw-bold">Remaining Balance</label></div>
                                    <div class="col-md-4">
                                        <input type="text" name="balance" id="balance"
                                            value="{{ old('balance', number_format($saleVoucher->final_total, 2, '.', '')) }}"
                                            readonly class="form-control form-control-sm text-end fw-bold">
                                    </div>
                                </div>

                                <input type="hidden" name="total_other_deduction" id="total_other_deduction"
                                    value="0">
                            </div>

                            {{-- REMARK --}}
                            <div class="col-md-12 col-12">
                                <label class="form-label" for="remark">Remark</label>
                                <textarea class="form-control" name="remark">{{ old('remark', $saleVoucher->remark) }}</textarea>
                                <div class="text-danger">{{ $errors->first('remark') }}</div>
                            </div>

                            <div class="col-xl-12 col-md-12 col-12">
                                <button class="btn btn-primary mt-1" id="BtnSubmit" type="submit">Update</button>
                                <a href="{{ route('sale-voucher.index') }}" class="btn btn-secondary mt-1">Cancel</a>
                            </div>

                            {!! Form::close() !!}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @include('common.modal.common_party')
    @include('common.modal.product')
@endsection

@push('footer_script')
    {{-- ══════ PRE-LOAD EXISTING OTHER CHARGES (BEFORE GST) ══════ --}}
    @php
        $existingOtherCharges = $saleVoucher->otherCharges ?? collect();
        $existingAfterGst = $saleVoucher->afterGstCharges ?? collect();
        $existingPayments = $saleVoucher->payments ?? collect();
    @endphp
@php
$productHasGst = !empty($detail->product->tax_group_id);
@endphp
    <script>
        let companyStateId = parseInt(@json($companyDetails->state_id));
        let taxGroupNoneId = @json($taxGroupNone->id);
        let companyGstType = @json($companyDetails->gst_type ?? 'Unregistered');
        let isCompanyRegular = (companyGstType === 'Regular');

        /* ══════ EXISTING DATA FROM PHP ══════ */
        let existingOtherCharges = @json($existingOtherCharges);
        let existingAfterGst = @json($existingAfterGst);
        let existingPayments = @json($existingPayments);

        /* ══════ EXISTING ROW COUNTER (must be higher than blade-rendered rows) ══════ */
        let productRowCount = {{ $saleVoucher->voucherDetails->count() + 10 + 1 }};

        $(".select2").select2();

        $('.number').keyup(function() {
            this.value = this.value.replace(/\D/g, '');
        });
        $('.negativeNumber').keyup(function() {
            this.value = this.value.replace(/[^0-9\-.]/g, '');
        });
        $('.floatnumber').on('input', function() {
            this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
        });

        function loadLedgerBalance(ledgerId, targetSpanId) {
            if (!ledgerId) {
                $('#' + targetSpanId).text('₹ 0.00').removeClass('text-success text-danger');
                return;
            }
            $.ajax({
                url: '{{ route("getLedgerBalance") }}',
                type: 'GET',
                data: { account_ledger_id: ledgerId },
                success: function(res) {
                    let colorClass = res.balance_type === 'Dr' ? 'text-success' : 'text-danger';
                    let label = res.display_type === 'Receivable' ? 'Receivable' : 'Payable';
                    let text = '₹ ' + parseFloat(res.balance).toFixed(2) + ' ' + res.balance_type + ' (' + label + ')';
                    $('#' + targetSpanId).text(text).removeClass('text-success text-danger').addClass(colorClass);
                }
            });
        }

        /* ══════ PARTY CHANGE ══════ */
        $(document).ready(function() {
            if (!isCompanyRegular) {
                $('.taxGroupIds').val(taxGroupNoneId).trigger('change').attr('disabled', true);
                $('.expTaxGroupIds').val(taxGroupNoneId).trigger('change').attr('disabled', true);
                $('#gstSection, #cgstSgstBlock, #igstBlock').hide();
            }

            // Load initial balance
            let initialLedgerId = $('#party_account_ledger_id').val();
            if (initialLedgerId) {
                loadLedgerBalance(initialLedgerId, 'party_balance');
            }

            $('#party_account_ledger_id').on('change', function() {
                let party_account_ledger_id = $(this).val();
                loadLedgerBalance(party_account_ledger_id, 'party_balance');
                $.ajax({
                    url: '{{ route('commonPartyDetailByAccountLedgerId') }}',
                    type: 'GET',
                    data: {
                        party_account_ledger_id
                    },
                    success: function(response) {
                        let partyData = response[0];
                        let isCashBank = response[1];

                        // Populate Party Details Card
                        if (partyData) {
                            $('#disp_party_name').text(partyData.party_name || '-');
                            $('#disp_gst_no').text(partyData.gst_no || '-');
                            $('#disp_mobile_no').text(partyData.mobile_no || '-');
                            $('#disp_address').text(partyData.address || '-');
                            let stateName = partyData.state ? partyData.state.state_name : (partyData.state_id || '');
                            $('#disp_city_state').text((partyData.city || '') + (stateName ? ' - ' + stateName : ''));
                            $('#disp_gst_type').text(partyData.register_type || '-');
                            $('#disp_opening_balance').text(partyData.opening_balance !== undefined ? parseFloat(partyData.opening_balance).toFixed(2) : '0.00');
                        } else {
                            $('#disp_party_name').text('-');
                            $('#disp_gst_no').text('-');
                            $('#disp_mobile_no').text('-');
                            $('#disp_address').text('-');
                            $('#disp_city_state').text('-');
                            $('#disp_gst_type').text('-');
                            $('#disp_opening_balance').text('-');
                        }

                        if (isCashBank === 'yes') {
                            $('.paymentSection').addClass('shopPayment');
                            $('#is_party_cash_bank').val('yes');
                        } else {
                            $('.paymentSection').removeClass('shopPayment');
                            $('#is_party_cash_bank').val('no');
                        }

                        if (!isCompanyRegular) {
                            $('.taxGroupIds').val(taxGroupNoneId).trigger('change').attr('disabled', true);
                            $('.expTaxGroupIds').val(taxGroupNoneId).trigger('change').attr('disabled', true);
                            $('.totalTaxAmount').val('0.00');
                            $('#total_tax_amount').val('0.00');
                            $('#party_register_type').val('');
                            $('#party_state_id').val('');
                            $('#sgst_input, #cgst_input, #igst_input').val('0.00');
                            $('#gstSection').hide();
                            $('#cgstSgstBlock').hide();
                            $('#igstBlock').hide();
                        } else {
                            $('#party_register_type').val('Regular');
                            // getTaxGroupAndUpdateValueByProduct();
                            let partyStateId = partyData ? parseInt(partyData.state_id || 0) : companyStateId;
                            $('#party_state_id').val(partyStateId);
                            if (!partyStateId) {
                                $('#gstSection').hide();
                                $('#cgstSgstBlock').hide();
                                $('#igstBlock').hide();
                            } else if (partyStateId === companyStateId) {
                                $('#gstSection').show();
                                $('#cgstSgstBlock').show();
                                $('#igstBlock').hide();
                            } else {
                                $('#gstSection').show();
                                $('#cgstSgstBlock').hide();
                                $('#igstBlock').show();
                            }
                        }

                        if (typeof getTaxGroupAndUpdateValueByProduct === 'function') {
                            // getTaxGroupAndUpdateValueByProduct();
                        }

                        // Recalculate totals after party data is loaded (essential for GST calculation on Edit page load)
                        if (typeof calculation === 'function') {
                            calculation();
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error('AJAX Error:', status, error);
                    }
                });
            });

            /* Trigger party change on page load to set GST blocks correctly */
            if ($('#party_account_ledger_id').val()) {
                $('#party_account_ledger_id').trigger('change');
            }
        });


        function getTaxGroupAndUpdateValueByProduct() {
            let taxGroupNoneIds = @json($taxGroupNone->id ?? []);
            let party_account_ledger_id = $('#party_account_ledger_id').val() || 0;
            $("select[id^='product_id_']").each(function() {
                let product_id = $(this).val();
                let id = $(this).attr('id').split('_').pop();
                if (product_id) productDetails(product_id, party_account_ledger_id, taxGroupNoneIds, id);
            });
        }

        /* ══════ ADD NEW PRODUCT ROW ══════ */
        $(document).ready(function() {
            $('#addrow').on('click', function() {
                let i = ++productRowCount;
                let newRow = $('<tr>');
                let cols = '';
                cols += '<td><select name="product_id[]" class="form-control select2" id="product_id_' + i +
                    '" required><option value="">--Select--</option>@foreach ($product as $key => $prow)<option value="{{ $key }}">{{ $prow }}</option>@endforeach</select></td>';
                cols +=
                    '<td><input name="qty[]" class="form-control floatnumber" required type="text" value="1" min="1" id="qty_' +
                    i + '"></td>';
                cols +=
                    '<td><input name="unit[]" class="form-control readonly" required type="text" readonly id="unit_' +
                    i + '"></td>';
                cols +=
                    '<td><input name="rate[]" class="form-control floatnumber" required type="text" value="0.00" id="rate_' +
                    i + '"></td>';
                cols +=
                    '<td><input name="amount[]" class="form-control floatnumber totalProductAmount" required type="text" value="0.00" id="amount_' +
                    i + '"></td>';
                cols += '<td><input name="tax[]" type="hidden" value="0.00" id="tax_' + i +
                    '"><select name="tax_group_id[]" class="form-control select2 taxGroupIds" id="tax_group_id_' +
                    i +
                    '" required><option value="">--Select--</option>@foreach ($taxGroup as $key => $prow)<option value="{{ $key }}">{{ $prow }}</option>@endforeach</select></td>';
                cols +=
                    '<td><input name="tax_amount[]" class="form-control readonly totalTaxAmount" required type="text" value="0.00" readonly id="tax_amount_' +
                    i + '"></td>';
                cols +=
                    '<td><input name="total_amount[]" class="form-control readonly totalValueWithTax" required type="text" value="0.00" readonly id="total_amount_' +
                    i + '"></td>';
                cols +=
                    '<td><input type="hidden" name="check_item[]" value="new"><button type="button" class="btn btn-danger btn-sm delbtn"><i class="ri-delete-bin-line"></i></button></td>';
                if (!isCompanyRegular) {
                    newRow.find('.taxGroupIds').val(taxGroupNoneId).trigger('change').attr('disabled', true);
                }
                newRow.append(cols);
                $('#tabdata tbody').append(newRow);
                $(".select2").select2();
                newRow.find('.floatnumber').on('input', function() {
                    this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
                });
            });

            $('#tabdata').on('click', '.delbtn', function() {
                $(this).closest('tr').remove();
                totalProductAmount();
                totalTaxAmount();
                finalTotalWithTax();
            });
        });

        /* ══════ DELEGATED EVENTS ══════ */
        $(document).on('change', "select[id^='product_id_']", function() {
            let id = $(this).attr('id').split('_').pop();
            callajax(id);
        });
        $(document).on('input', "input[id^='qty_'], input[id^='rate_']", function() {
            let id = $(this).attr('id').replace(/^(qty_|rate_)/, '');
            totalCal(id);
        });
        $(document).on('input', "input[id^='amount_']", function() {
            let id = $(this).attr('id').slice(7);
            totalCal(id);
        });
        $(document).on('change', "select[id^='tax_group_id_']", function() {
            let id = $(this).attr('id').replace('tax_group_id_', '');
            let tax_group_id = $(this).val();
            let party_ledger_id = $('#party_account_ledger_id').val() || 0;
            $.ajax({
                url: '{{ route('getTaxGroupDetailById') }}',
                type: 'GET',
                data: {
                    tax_group_id,
                    party_account_ledger_id: party_ledger_id
                },
                success: function(result) {
                    $('#tax_' + id).val(result.tax_slab || 0);
                    totalCal(id);
                },
                error: function(x, s, e) {
                    console.error('AJAX Error:', e);
                }
            });
        });

        function callajax(id) {
            let taxGroupNoneIds = @json($taxGroupNone->id);
            let party_account_ledger_id = $('#party_account_ledger_id').val();
            let product_id = $('#product_id_' + id).val();
            productDetails(product_id, party_account_ledger_id, taxGroupNoneIds, id);
        }

         function productDetails(product_id, party_account_ledger_id, taxGroupNoneIds, id) {
            $.ajax({
                url: '{{ route('getProductDetailById') }}',
                type: 'GET',
                data: {
                    product_id,
                    party_account_ledger_id
                },
                success: function(result) {
                    $('#rate_' + id).val(result[0].rate_per);
                    let u = result[0].units || '';
                    $('#unit_' + id).val(u.charAt(0).toUpperCase() + u.slice(1));
                    totalCal(id);
                    if (isCompanyRegular) {
                        $('.expTaxGroupIds').removeAttr('disabled');
                        $('#party_register_type').val('Regular');
                        if (result[0].tax_group_id) {
                            $('#tax_group_id_' + id).val(result[0].tax_group_id).trigger('change').removeAttr(
                                'disabled');
                            let slab = (result[0].tax_group && result[0].tax_group.tax_slab) ? result[0]
                                .tax_group.tax_slab : 0;
                            $('#tax_' + id).val(slab);
                        } else {
                            $('#tax_group_id_' + id).val(taxGroupNoneIds).trigger('change').attr('disabled',
                                true);
                            $('#tax_' + id).val(0);
                            $('#tax_amount_' + id).val('0.00');
                            totalTaxAmount();
                        }
                    } else {
                        $('#tax_group_id_' + id).val(taxGroupNoneIds).trigger('change').attr('disabled', true);
                        $('#tax_' + id).val(0);
                        $('#tax_amount_' + id).val('0.00');
                        totalTaxAmount();
                    }
                }
            });
        }

        /* ══════ CALCULATION CHAIN ══════ */
        function totalCal(id) {
            let rate = parseFloat($('#rate_' + id).val()) || 0;
            let qty = parseFloat($('#qty_' + id).val()) || 0;
            $('#amount_' + id).val((rate * qty).toFixed(2));
            totalProductAmount();
            taxAmount(id);
        }

        function totalProductAmount() {
            let sum = 0;
            $('.totalProductAmount').each(function() {
                sum += parseFloat(this.value) || 0;
            });
            $('#total_sale_amount').val(sum.toFixed(2));
        }

        function taxAmount(id) {
            let amount = parseFloat($('#amount_' + id).val()) || 0;
            let tax = parseFloat($('#tax_' + id).val()) || 0;
            if (isCompanyRegular) {
                let taxValue = (amount * tax) / 100;
                $('#tax_amount_' + id).val(taxValue.toFixed(2));
                $('#total_amount_' + id).val((amount + taxValue).toFixed(2));
            } else {
                $('#tax_amount_' + id).val('0.00');
                $('#total_amount_' + id).val(amount.toFixed(2));
            }
            totalTaxAmount();
        }

        function totalTaxAmount() {
            let sum = 0;
            $('.totalTaxAmount').each(function() {
                sum += parseFloat(this.value) || 0;
            });
            $('#total_tax_amount').val(sum.toFixed(2));
            finalTotalWithTax();
        }

        function finalTotalWithTax() {
            let finalSum = 0;
            $('.totalValueWithTax').each(function() {
                finalSum += parseFloat(this.value) || 0;
            });
            $('#final_sale_amount').val(finalSum.toFixed(2));
            updateGstBreakup();
            calculation();
        }

        /* ══════ GST BREAKUP ══════ */
        function updateGstBreakup() {
            let partyStateId = parseInt($('#party_state_id').val()) || 0;
            let totalTax = parseFloat($('#total_tax_amount').val()) || 0;
            $('#cgst_input, #sgst_input, #igst_input').val('0.00');

            if (!partyStateId) {
                $('#gstSection').hide();
                $('#cgstSgstBlock').hide();
                $('#igstBlock').hide();
                return;
            }

            $('#gstSection').show();
            if (partyStateId === companyStateId) {
                let half = (totalTax / 2).toFixed(2);
                $('#cgst_input').val(half);
                $('#sgst_input').val(half);
                $('#cgstSgstBlock').show();
                $('#igstBlock').hide();
            } else {
                $('#igst_input').val(totalTax.toFixed(2));
                $('#cgstSgstBlock').hide();
                $('#igstBlock').show();
            }
        }

        /* ══════ OTHER CHARGES BEFORE GST ══════ */
        $(document).ready(function() {
            let j = 200; // start high to avoid collision with product rows

            function addExpense(expenseAmount, ledgerId, taxGroupId, checkExpId) {
                let newRow = $('<div class="d-flex">');
                let taxGroupNoneId = @json($taxGroupNone->id);
                let checkVal = checkExpId || 'new';

                let expLedgerOptions =
                    '<option value="">--Select--</option>@foreach ($expenseLedger as $key => $prow)<option value="{{ $key }}">{{ $prow }}</option>@endforeach';
                let taxGroupOptions =
                    '@foreach ($taxGroup as $keys => $prows)<option value="{{ $keys }}">{{ $prows }}</option>@endforeach';

                let cols =
                    '<input type="hidden" name="check_expense[]" value="' + checkVal + '">' +
                    '<select name="exp_account_ledger_id[]" class="form-control select2" id="exp_account_ledger_id_' +
                    j + '" required>' + expLedgerOptions + '</select>' +
                    '<select name="exp_tax_group_id[]" style="margin-left:10px;" class="form-control expTaxGroupIds" id="exp_tax_group_id_' +
                    j + '" required>' + taxGroupOptions + '</select>' +
                    '<input type="hidden" name="expense_tax[]" class="expenseTax" value="0.00" id="expense_tax_' +
                    j + '">' +
                    '<input name="exp_amount[]" style="margin-left:10px;" class="form-control expNegativeNumber totalExpenseAmount" value="' +
                    (expenseAmount || 0) + '" required type="text" id="exp_amount_' + j +
                    '" placeholder="+ charge / - deduct">' +
                    '<input name="expense_tax_amount[]" style="margin-left:10px;" class="form-control otherChargeTaxTotal" value="0.00" required type="hidden" id="expense_tax_amount_' +
                    j + '">' +
                    '<input name="total_expense_amount[]" style="margin-left:10px;" class="form-control totalExpAmount" value="0.00" required type="hidden" id="total_expense_amount_' +
                    j + '">' +
                    '<button type="button" id="del_expense_btn_' + j +
                    '" style="border-radius:15px;height:20px;width:20px;margin-top:10px;margin-left:5px;" class="btn btn-danger btn-sm"><i class="ri-delete-bin-2-line ri-sm" style="position:relative;bottom:6px;right:4px;"></i></button>';
                newRow.append(cols);
                $('#otherExpTable').append(newRow);
                $(".select2").select2();

                /* Set pre-filled values */
                if (ledgerId) $('#exp_account_ledger_id_' + j).val(ledgerId).trigger('change.select2');
                if (taxGroupId) {
                    $('#exp_tax_group_id_' + j).val(taxGroupId);
                    // Trigger ajax for tax slab
                    $.ajax({
                        url: '{{ route('getTaxGroupDetailById') }}',
                        type: 'GET',
                        data: {
                            tax_group_id: taxGroupId
                        },
                        success: function(result) {
                            $('#expense_tax_' + j).val(result.tax_slab || 0);
                            expenseTaxCal(j);
                        }
                    });
                }
                $('#total_expense_amount_' + j).val(expenseAmount || 0);

                let is_party_cash_bank = $('#is_party_cash_bank').val();
                if (is_party_cash_bank === 'yes' || !isCompanyRegular) {
                    $('.expTaxGroupIds').val(taxGroupNoneId).attr('disabled', true);
                } else {
                    $('.expTaxGroupIds').removeAttr('disabled');
                }

                newRow.find('.expNegativeNumber').on('input', function() {
                    this.value = this.value.replace(/[^0-9.\-]/g, '').replace(/(\..*)\./g, '$1').replace(
                        /(?!^)-/g, '');
                });
                j++;
            }

            /* Load existing other charges */
            if (existingOtherCharges && existingOtherCharges.length) {
                existingOtherCharges.forEach(function(row) {
                    addExpense(row.paid_amount, row.payment_account_ledger_id, row.exp_tax_group_id || null,
                        row.id);
                });
                /* Recalculate total */
                let sum = 0;
                $('.totalExpAmount').each(function() {
                    sum += parseFloat(this.value) || 0;
                });
                $('#total_other_charge').val(sum.toFixed(2));
                calculation();
            }

            $('#addExpense').on('click', function() {
                addExpense(0);
                calculation();
            });

            $(document).on('input', "input[id^='exp_amount_']", function() {
                let id = $(this).attr('id').slice(11);
                expenseTaxCal(id);
            });
            $(document).on('change', "select[id^='exp_tax_group_id_']", function() {
                let id = $(this).attr('id').replace('exp_tax_group_id_', '');
                let tax_group_id = $(this).val();
                $.ajax({
                    url: '{{ route('getTaxGroupDetailById') }}',
                    type: 'GET',
                    data: {
                        tax_group_id
                    },
                    success: function(result) {
                        $('#expense_tax_' + id).val(result.tax_slab || 0);
                        expenseTaxCal(id);
                    },
                    error: function(x, s, e) {
                        console.error('AJAX Error:', e);
                    }
                });
            });
            $(document).on('click', "button[id^='del_expense_btn_']", function() {
                $(this).closest('.d-flex').remove();
                let sum = 0;
                $('.totalExpAmount').each(function() {
                    sum += parseFloat(this.value) || 0;
                });
                $('#total_other_charge').val(sum.toFixed(2));
                calculation();
            });
        });

        function expenseTaxCal(id) {
            let exp_amount = parseFloat($('#exp_amount_' + id).val()) || 0;
            let expense_tax = parseFloat($('#expense_tax_' + id).val()) || 0;
            let sign = exp_amount < 0 ? -1 : 1;
            let absAmount = Math.abs(exp_amount);
            let expTaxAmount = (absAmount * expense_tax) / 100 * sign;
            $('#expense_tax_amount_' + id).val(expTaxAmount.toFixed(2));
            $('#total_expense_amount_' + id).val(exp_amount.toFixed(2));
            let sum = 0;
            $('.totalExpAmount').each(function() {
                sum += parseFloat(this.value) || 0;
            });
            $('#total_other_charge').val(sum.toFixed(2));
            calculation();
        }

        /* ══════ OTHER CHARGES AFTER GST ══════ */
        $(document).ready(function() {
            let ag = 400; // start high to avoid collision

            function addAfterGstCharge(amt, ledgerId, checkId) {
                let newRow = $('<div class="d-flex mb-1">');
                let checkVal = checkId || 'new';
                let ledgerOptions =
                    '<option value="">--Select--</option>@foreach ($expenseLedger as $key => $prow)<option value="{{ $key }}">{{ $prow }}</option>@endforeach';

                let cols =
                    '<input type="hidden" name="check_after_gst[]" value="' + checkVal + '">' +
                    '<select name="after_gst_ledger_id[]" class="form-control select2" id="after_gst_ledger_id_' +
                    ag + '" required>' + ledgerOptions + '</select>' +
                    '<input name="after_gst_amount[]" style="margin-left:10px;" class="form-control afterGstNegNumber totalAfterGstAmount" value="' +
                    (amt || 0) + '" required type="text" id="after_gst_amount_' + ag +
                    '" placeholder="+ charge / - deduct">' +
                    '<button type="button" id="del_after_gst_btn_' + ag +
                    '" style="border-radius:15px;height:20px;width:20px;margin-top:10px;margin-left:5px;" class="btn btn-danger btn-sm"><i class="ri-delete-bin-2-line ri-sm" style="position:relative;bottom:6px;right:4px;"></i></button>';
                newRow.append(cols);
                $('#afterGstExpTable').append(newRow);
                $(".select2").select2();
                if (ledgerId) $('#after_gst_ledger_id_' + ag).val(ledgerId).trigger('change.select2');
                newRow.find('.afterGstNegNumber').on('input', function() {
                    this.value = this.value.replace(/[^0-9.\-]/g, '').replace(/(\..*)\./g, '$1').replace(
                        /(?!^)-/g, '');
                });
                ag++;
            }

            /* Load existing after-GST charges */
            if (existingAfterGst && existingAfterGst.length) {
                existingAfterGst.forEach(function(row) {
                    addAfterGstCharge(row.amount, row.ledger_id, row.id);
                });
                afterGstCal();
            }

            $('#addAfterGstCharge').on('click', function() {
                addAfterGstCharge(0);
                calculation();
            });

            $(document).on('input', "input[id^='after_gst_amount_']", function() {
                afterGstCal();
            });
            $(document).on('click', "button[id^='del_after_gst_btn_']", function() {
                $(this).closest('.d-flex').remove();
                afterGstCal();
            });
        });

        function afterGstCal() {
            let sum = 0;
            $('.totalAfterGstAmount').each(function() {
                sum += parseFloat(this.value) || 0;
            });
            $('#total_after_gst_charge').val(sum.toFixed(2));
            calculation();
        }

        /* ══════ PAYMENT TABLE ══════ */
        $(document).ready(function() {
            let k = 600; // start high to avoid collision

            function addPayment(paidAmount, ledgerId, checkId) {
                let newRow = $('<div class="d-flex">');
                let checkVal = checkId || 'new';
                let paymentOptions =
                    '@foreach ($paymentLedger as $key => $prow)<option value="{{ $key }}">{{ $prow }}</option>@endforeach';

                let cols =
                    '<input type="hidden" name="check_payment[]" value="' + checkVal + '">' +
                    '<select name="payment_account_ledger_id[]" style="width:45%;" class="form-control select2" id="payment_account_ledger_id_' +
                    k + '" required>' + paymentOptions + '</select>' +
                    '<input name="paid_amount[]" style="margin-left:10px;width:45%;" class="form-control floatnumber totalPaidAmount" value="' +
                    (paidAmount || 0) + '" required type="text" id="paid_amount_' + k + '">' +
                    '<button type="button" id="del_payment_btn_' + k +
                    '" style="border-radius:15px;height:20px;width:20px;margin-top:10px;margin-left:5px;" class="btn btn-danger btn-sm"><i class="ri-delete-bin-2-line ri-sm" style="position:relative;bottom:6px;right:4px;"></i></button>';
                newRow.append(cols);
                $('#paymentTable').append(newRow);
                $(".select2").select2();
                if (ledgerId) $('#payment_account_ledger_id_' + k).val(ledgerId).trigger('change.select2');
                newRow.find('.floatnumber').on('input', function() {
                    this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
                });
                k++;
            }

            /* Load existing payments */
            if (existingPayments && existingPayments.length) {
                existingPayments.forEach(function(row) {
                    addPayment(row.paid_amount, row.payment_account_ledger_id, row.id);
                });
                paymentCal();
            }

            $('#addPayment').on('click', function() {
                addPayment(0);
                calculation();
            });

            $(document).on('input', "input[id^='paid_amount_']", function() {
                paymentCal();
            });
            $(document).on('click', "button[id^='del_payment_btn_']", function() {
                $(this).closest('.d-flex').remove();
                paymentCal();
            });
        });

        function paymentCal() {
            let total = 0;
            $('.totalPaidAmount').each(function() {
                total += parseFloat(this.value) || 0;
            });
            $('#total_paid').val(total.toFixed(2));
            calculation();
        }

        $('#round_off').on('change input', function() {
            calculation();
        });

        /* ══════ FINAL CALCULATION ══════ */
        function calculation() {
            let finalSaleAmount = parseFloat($('#final_sale_amount').val()) || 0;
            let otherCharge = parseFloat($('#total_other_charge').val()) || 0;
            let afterGstCharge = parseFloat($('#total_after_gst_charge').val()) || 0;
            let productTax = parseFloat($('#total_tax_amount').val()) || 0;

            let otherChargeTaxSum = 0;
            $('.otherChargeTaxTotal').each(function() {
                otherChargeTaxSum += parseFloat(this.value) || 0;
            });

            let finalTaxTotal = productTax + otherChargeTaxSum;
            $('#finalTaxTotal').val(finalTaxTotal.toFixed(2));

            let partyStateId = parseInt($('#party_state_id').val()) || 0;

            if (partyStateId && partyStateId === companyStateId) {
                let cgst = (finalTaxTotal / 2).toFixed(2);
                let sgst = (finalTaxTotal - parseFloat(cgst)).toFixed(2);
                $('#cgst_input').val(cgst);
                $('#sgst_input').val(sgst);
                $('#igst_input').val('0.00');
            } else {
                $('#cgst_input').val('0.00');
                $('#sgst_input').val('0.00');
                $('#igst_input').val(finalTaxTotal.toFixed(2));
            }

            let gross_total = finalSaleAmount + otherCharge + afterGstCharge;
            $('#gross_total').val(gross_total.toFixed(2));

            let roundOff = parseFloat($('#round_off').val()) || 0;
            let netAmount = gross_total + roundOff;
            $('#net_total').val(netAmount.toFixed(2));

            if ($('#is_party_cash_bank').val() === 'yes') {
                $('#total_paid').val(netAmount.toFixed(2));
            }

            let total_paid = parseFloat($('#total_paid').val()) || 0;
            $('#balance').val((netAmount - total_paid).toFixed(2));
        }

        /* ══════ RUN INITIAL CALCULATION ON PAGE LOAD ══════ */
        $(document).ready(function() {
            // Small delay to let select2 and other scripts init
            setTimeout(function() {
                totalProductAmount();
                totalTaxAmount();
                finalTotalWithTax();
                calculation();
            }, 300);
        });

        $(document).on('focus', "input[name='rate[]'], input[name='amount[]'], input[name='exp_amount[]'], input[name='after_gst_amount[]'], input[name='paid_amount[]'], input[name='round_off']", function() {
            if ($(this).val() == '0.00' || $(this).val() == '0') {
                $(this).val('');
            }
        });

        $(document).on('blur', "input[name='rate[]'], input[name='amount[]'], input[name='exp_amount[]'], input[name='after_gst_amount[]'], input[name='paid_amount[]'], input[name='round_off']", function() {
            if ($(this).val().trim() === '') {
                $(this).val('0.00');
            }
        });
    </script>

    <script src="{{ asset('theme/assets/vendor/daterange/daterange.js') }}"></script>
    <script>
        $(".datepicker").daterangepicker({
            singleDatePicker: true,
            startDate: moment("{{ date('d-m-Y', strtotime($saleVoucher->voucher_date)) }}", "DD-MM-YYYY"),
            locale: {
                format: "DD-MM-YYYY"
            },
        });
    </script>

    {{-- Party modal  --}}
    <script>
        $(document).ready(function() {
            var cpDataType = '';
            $('#commonPartyModal').on('show.bs.modal', function(event) {
                var btn = event.relatedTarget;
                cpDataType = btn ? ($(btn).attr('data_type') || '') : '';

                $('#cp_account_group_id').val('');
                $('#cp_party_name').val('');
                $('#cp_mobile_no').val('');
                $('#cp_email').val('');
                $('#cp_address').val('');
                $('#cp_country').val('India');
                $('#cp_state_id').val('');
                $('#cp_city').val('');
                $('#cp_pin_code').val('');
                $('#cp_register_type').val('Regular');
                $('#cp_gst_no').val('');
                $('#cp_pan_no').val('');
                $('#cp_opening_balance').val('0');
                $('#cp_starting_date').val('{{ date('d-m-Y', strtotime($financial_year_start)) }}');
                $('#cp_maintain_bal_bil').prop('checked', false);
                $('input[data-type="cp_receiving_payment_pending"]').prop('checked', false).removeAttr(
                    'required');
                $('.cp-error').html('');

                cpRegisterChange();
            });

            $('#commonPartyModal').on('shown.bs.modal', function() {
                $('.select2-cp-modal').each(function() {
                    if ($(this).hasClass('select2-hidden-accessible')) {
                        $(this).select2('destroy');
                    }
                });

                $('.select2-cp-modal').select2({
                    dropdownParent: $('#commonPartyModal'),
                    placeholder: '--Select--',
                    allowClear: true,
                    width: '100%'
                });

                $('#cp_account_group_id').val('').trigger('change');
                $('#cp_state_id').val('').trigger('change');

                if (!$('#cp_starting_date').data('daterangepicker')) {
                    $('#cp_starting_date').daterangepicker({
                        singleDatePicker: true,
                        startDate: moment('{{ $financial_year_start }}', 'DD-MM-YYYY'),
                        locale: {
                            format: 'DD-MM-YYYY'
                        }
                    });
                } else {
                    $('#cp_starting_date').data('daterangepicker').setStartDate(moment('{{ $financial_year_start }}', 'DD-MM-YYYY'));
                }
            });
            $('#commonPartyForm').on('submit', function(e) {
                e.preventDefault();

                $('.cp-error').html('');
                $('#cpBtnSubmit').prop('disabled', true).text('Saving...');

                $.ajax({
                    url: $(this).attr('action'),
                    type: 'POST',
                    data: new FormData(this),
                    processData: false,
                    contentType: false,
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest'
                    },
                    success: function(response) {
                        if (response.success) {

                            var party = response.new_party || response.data;
                            var label = party.party_name + (party.gst_no ? ' - ' + party
                                .gst_no : '');

                            if (cpDataType === 'purchase_party') {
                                $('#party_account_ledger_id')
                                    .append(new Option(label, party.ledger_id, true, true))
                                    .trigger('change');
                            }

                            if (cpDataType === 'consignor') {
                                $('select[id^="consignor_id"]').last()
                                    .append(new Option(party.party_name, party.id, true, true))
                                    .trigger('change');
                                $('select[id^="consignee_id"]')
                                    .append(new Option(party.party_name, party.id, false,
                                        false));
                            }
                            if (cpDataType === 'consignee') {
                                $('select[id^="consignee_id"]').last()
                                    .append(new Option(party.party_name, party.id, true, true))
                                    .trigger('change');
                                $('select[id^="consignor_id"]')
                                    .append(new Option(party.party_name, party.id, false,
                                        false));
                            }
                            $('#commonPartyModal').modal('hide');
                        } else {
                            alert('Something went wrong. Please try again.');
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                            $.each(xhr.responseJSON.errors, function(field, messages) {
                                $('.cp-error[data-field="' + field + '"]').html(
                                    messages[0]);
                            });
                        } else {
                            alert('An unexpected error occurred. Please try again.');
                        }
                    },
                    complete: function() {
                        $('#cpBtnSubmit').prop('disabled', false).text('Submit');
                    }
                });
            });

            $(document).on('change', '#cp_opening_balance', function() {
                var val = parseFloat($(this).val()) || 0;
                var radios = $('input[data-type="cp_receiving_payment_pending"]');
                if (val > 0) {
                    if (!radios.filter(':checked').length) {
                        radios.first().attr('required', true);
                    } else {
                        radios.removeAttr('required');
                    }
                } else {
                    radios.removeAttr('required').prop('checked', false);
                }
            });

            $(document).on('change', 'input[data-type="cp_receiving_payment_pending"]', function() {
                $('input[data-type="cp_receiving_payment_pending"]').removeAttr('required');
            });

            $(document).on('change', '#cp_register_type', function() {
                cpRegisterChange();
            });


            $(document).on('keyup', '.cp_number', function() {
                this.value = this.value.replace(/\D/g, '');
            });

            $(document).on('input', '#cp_gst_no', function() {
                var gst = $(this).val().toUpperCase().replace(/[^A-Z0-9]/g, '');
                $(this).val(gst);
                if (gst.length === 15) {
                    $('#cp_pan_no').val(gst.substring(2, 12));
                } else {
                    $('#cp_pan_no').val('');
                }
            });

        });

        function cpRegisterChange() {
            var type = $('#cp_register_type').val();
            if (type === 'Unregistered') {
                $('#cp_gst_no').removeAttr('required').val('');
                $('.cp_gstShow').hide();
            } else {
                $('#cp_gst_no').attr('required', true);
                $('.cp_gstShow').show();
            }
        }
    </script>

    {{-- - product modal ---------- --}}
    <script>
        $(document).ready(function() {

            var mpDataType = '';
            $('#productModal').on('show.bs.modal', function(event) {
                var btn = event.relatedTarget;
                mpDataType = btn ? ($(btn).attr('data_type') || '') : '';
                $('.mp-error').html('');
                $('#mp_product_category_id').val('');
                $('#mp_product_name').val('');
                $('#mp_units').val('');
                $('#mp_gst_applicable').val('');
                $('#mp_tax_group_id').val('');
                $('#mp_hsn_code').val('');
                $('#mp_opening_stock').val('0');
                $('#mp_stock_alert').val('0');
                $('#mp_rate_per').val('0.00');
                $('#mp_value').val('0.00');
                $('#mp_remark').val('');
                $('#mp_application_reverse_charge').prop('checked', false);
                $('#mp_request_from').val('model');
                $('.mp_ApplicableYes').hide();
                $('#mp_tax_group_id').removeAttr('required');
                $('#mp_hsn_code').removeAttr('required');
            });

            $(document).on('change', '#mp_gst_applicable', function() {
                var val = $(this).val();
                if (val === 'yes') {
                    $('.mp_ApplicableYes').show();
                    $('#mp_tax_group_id').attr('required', true);
                    $('#mp_hsn_code').attr('required', true);
                } else {
                    $('.mp_ApplicableYes').hide();
                    $('#mp_tax_group_id').removeAttr('required').val('');
                    $('#mp_hsn_code').removeAttr('required').val('');
                }
            });

            $(document).on('input', '#mp_opening_stock, #mp_rate_per', function() {
                var stock = parseFloat($('#mp_opening_stock').val()) || 0;
                var rate = parseFloat($('#mp_rate_per').val()) || 0;
                $('#mp_value').val((stock * rate).toFixed(2));
            });


            $(document).on('keyup input', '#mp_opening_stock, #mp_stock_alert', function() {
                this.value = this.value.replace(/\D/g, '');
            });
            $(document).on('input', '#mp_rate_per', function() {
                this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');
            });

            $(document).on('click', '#mpBtnSubmit', function() {

                $('.mp-error').html('');
                $('#mpBtnSubmit').prop('disabled', true).text('Saving...');

                $.ajax({
                    url: "{{ route('product.store') }}",
                    type: "POST",
                    data: $('#productModalForm').serialize(),
                    headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function(response) {
                        if (response.success) {
                            var product = response.data;
                            if (mpDataType === 'product') {
                                var $lastSelect = $('select[id^="product_id_"]').last();
                                var lastId = $lastSelect.attr('id').split('_').pop();
                                $lastSelect.append(
                                    $('<option>', {
                                        value: product.id,
                                        text: product.product_name,
                                        selected: true
                                    })
                                );

                                var unit = product.units || '';
                                $('#unit_' + lastId).val(unit.charAt(0).toUpperCase() + unit
                                    .slice(1));
                                $('#rate_' + lastId).val(parseFloat(product.rate_per).toFixed(
                                    2));

                                if (typeof totalCal === 'function') {
                                    totalCal(lastId);
                                }
                            }

                            $('#productModal').modal('hide');

                        } else {
                            alert('Something went wrong. Please try again.');
                        }
                    },
                    error: function(xhr) {
                        if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {

                            $.each(xhr.responseJSON.errors, function(field, messages) {
                                $('.mp-error[data-field="' + field + '"]').html(
                                    messages[0]);
                            });
                        } else {
                            alert('An unexpected error occurred. Please try again.');
                        }
                    },
                    complete: function() {
                        $('#mpBtnSubmit').prop('disabled', false).text('Submit');
                    }
                });
            });

            $('form').on('submit', function() {
                $('.taxGroupIds, .expTaxGroupIds').removeAttr('disabled');
            });

        });
    </script>
@endpush