@extends('layouts.app')

@section('title', 'Create Credit Note')

@section('content')
<style>
    .sale-item-row.selected {
        background-color: #e8f5e9;
    }
    .sale-item-row td {
        vertical-align: middle;
    }
    .item-qty, .item-amount, .item-discount {
        background-color: #fff3cd;
    }
    .item-qty:enabled, .item-amount:enabled, .item-discount:enabled {
        background-color: #ffffff;
        border-color: #28a745;
    }
    .info-box {
        min-height: 70px;
    }
    .info-box .info-box-icon {
        line-height: 70px;
    }
    .callout {
        padding: 15px;
        border-left-width: 4px;
    }
    #credit-note-table tbody tr {
        transition: background-color 0.3s;
    }
    .credit-note-summary-card {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 15px;
    }
    .credit-note-summary-card .summary-item {
        padding: 8px 0;
        border-bottom: 1px solid #dee2e6;
    }
    .credit-note-summary-card .summary-item:last-child {
        border-bottom: none;
    }
    .product-not-found {
        color: #856404;
        background-color: #fff3cd;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 12px;
    }
    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 9999;
        display: none;
        align-items: center;
        justify-content: center;
    }
    .loading-overlay.active {
        display: flex;
    }
    .loading-overlay .loading-content {
        background: white;
        padding: 30px 40px;
        border-radius: 10px;
        text-align: center;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }
    .loading-overlay .spinner-border {
        width: 3rem;
        height: 3rem;
    }
    .result-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0,0,0,0.5);
        z-index: 9999;
        display: none;
        align-items: center;
        justify-content: center;
    }
    .result-modal-overlay.active {
        display: flex;
    }
    .result-modal-overlay .result-modal-content {
        background: white;
        padding: 30px;
        border-radius: 10px;
        max-width: 500px;
        width: 90%;
        max-height: 80vh;
        overflow-y: auto;
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    }
    .result-modal-overlay .result-modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #dee2e6;
        padding-bottom: 15px;
        margin-bottom: 20px;
    }
    .result-modal-overlay .result-modal-footer {
        border-top: 1px solid #dee2e6;
        padding-top: 15px;
        margin-top: 20px;
        text-align: right;
    }
    .badge-status-completed {
        background-color: #28a745;
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
    }
    .badge-status-pending {
        background-color: #ffc107;
        color: #212529;
        padding: 5px 10px;
        border-radius: 4px;
    }
    .badge-status-failed {
        background-color: #dc3545;
        color: white;
        padding: 5px 10px;
        border-radius: 4px;
    }
    .mt-10 {
        margin-top: 10px;
    }
    .mt-20 {
        margin-top: 20px;
    }
    .discount-rate-input {
        width: 70px !important;
        display: inline-block !important;
    }
    .discount-amount-input {
        width: 90px !important;
        display: inline-block !important;
    }
</style>

<!-- Content Header (Page header) -->
<section class="content-header no-print">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">
        <i class="fas fa-file-invoice"></i> Create Credit Note
    </h1>
</section>

<!-- Main content -->
<section class="content no-print">
    <div class="box box-solid">
        <div class="box-header">
            <h3 class="box-title">
                <i class="fas fa-info-circle"></i> Sale Information
            </h3>
            <div class="box-tools pull-right">
                <a href="{{ route('sells.index') }}" class="btn btn-default btn-sm">
                    <i class="fas fa-arrow-left"></i> Back to Sales
                </a>
            </div>
        </div>
        <div class="box-body">
            <div class="row">
                <div class="col-sm-4">
                    <strong>@lang('sale.invoice_no'):</strong> 
                    <span class="label label-primary">{{ $transaction->invoice_no ?? 'N/A' }}</span>
                </div>
                <div class="col-sm-4">
                    <strong>@lang('contact.customer'):</strong> 
                    @if(!empty($transaction->contact))
                        {{ $transaction->contact->name }}
                        @if(!empty($transaction->contact->supplier_business_name))
                            ({{ $transaction->contact->supplier_business_name }})
                        @endif
                    @else
                        N/A
                    @endif
                </div>
                <div class="col-sm-4">
                    <strong>@lang('messages.date'):</strong> 
                    {{ \Carbon\Carbon::parse($transaction->transaction_date)->format('d/m/Y H:i') }}
                </div>
            </div>
            <div class="row mt-10">
                <div class="col-sm-4">
                    <strong>Total Amount:</strong> 
                    <span class="label label-success">{{ number_format($transaction->final_total, 2) }}</span>
                </div>
                <div class="col-sm-4">
                    <strong>Location:</strong> 
                    {{ $transaction->location->name ?? 'N/A' }}
                </div>
                <div class="col-sm-4">
                    <strong>Payment Status:</strong> 
                    <span class="label label-{{ $transaction->payment_status == 'paid' ? 'success' : 'warning' }}">
                        {{ ucfirst($transaction->payment_status ?? 'N/A') }}
                    </span>
                </div>
            </div>
        </div>
    </div>

    <!-- Digitax Sale Status -->
    @if(!empty($saleData))
    <div class="box box-solid box-info">
        <div class="box-header with-border">
            <h3 class="box-title"><i class="fas fa-cloud"></i> Tax Sale Information</h3>
        </div>
        <div class="box-body">
            <div class="row">
                <div class="col-sm-3">
                    <strong>Sale ID:</strong> 
                    <span class="label label-info">{{ $saleData['id'] ?? 'N/A' }}</span>
                </div>
                <div class="col-sm-3">
                    <strong>Status:</strong> 
                    <span class="label label-{{ $saleData['status'] == 'COMPLETED' ? 'success' : 'warning' }}">
                        {{ $saleData['status'] ?? 'N/A' }}
                    </span>
                </div>
                <div class="col-sm-3">
                    <strong>eTims No.:</strong> 
                    {{ $saleData['invoice_number'] ?? 'N/A' }}
                </div>
                <div class="col-sm-3" style="display:none;">
                    {{ $saleData['receipt_number'] ?? 'N/A' }}
                </div>
                
                @if(!empty($saleData['etims_url']))
                <div class="col-sm-3">
                    <a href="{{ $saleData['etims_url'] }}" target="_blank" class="btn btn-primary btn-sm">
                        <i class="fas fa-external-link-alt"></i> View ETIMS Receipt
                    </a>
                </div>
                @endif
            </div>
        </div>
    </div>
    @endif

    <!-- Credit Note Form -->
    <div class="box box-solid">
        <div class="box-header">
            <h3 class="box-title">
                <i class="fas fa-edit"></i> Credit Note Details
            </h3>
        </div>
        <div class="box-body">
            <form id="credit-note-form" method="POST" action="{{ route('credit-note.store') }}">
                @csrf
                <input type="hidden" name="transaction_id" value="{{ $transaction->id }}">
                <input type="hidden" name="sale_id" value="{{ $saleData['id'] ?? $transaction->digitax_sale_id ?? '' }}">
                
                <div class="row">
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label for="credit_note_no">Credit Note Number:</label>
                            <input type="text" 
                                   class="form-control" 
                                   id="credit_note_no" 
                                   value="CN-{{ $transaction->invoice_no ?? time() }}"
                                   readonly>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label for="transaction_date">Credit Note Date:</label>
                            <div class="input-group">
                                <span class="input-group-addon">
                                    <i class="fa fa-calendar"></i>
                                </span>
                                <input type="text" 
                                       class="form-control" 
                                       id="transaction_date" 
                                       value="{{ \Carbon\Carbon::now()->format('d/m/Y H:i') }}"
                                       readonly>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-4">
                        <div class="form-group">
                            <label for="invoice_details">Invoice Details:</label>
                            <input type="text" 
                                   class="form-control" 
                                   id="invoice_details" 
                                   name="invoice_details"
                                   value="Credit note for sale #{{ $transaction->invoice_no ?? '' }}"
                                   placeholder="Enter credit note details">
                        </div>
                    </div>
                </div>

                <div class="row mt-10">
                    <div class="col-sm-12">
                        <h4><i class="fas fa-list"></i> Select Items for Credit Note</h4>
                        <p class="text-muted">Select items and adjust quantities/amounts/discounts for the credit note.</p>
                    </div>
                </div>

                <!-- Items Table -->
                <div class="table-responsive">
                    <table class="table table-bordered table-striped" id="credit-note-table">
                        <thead>
                            <tr class="bg-green">
                                <th width="4%">
                                    <input type="checkbox" id="select-all-items" class="form-check-input">
                                </th>
                                <th width="4%">#</th>
                                <th>Product</th>
                                <th style="display:none;" width="8%">Item ID</th>
                                <th width="8%">Original Qty</th>
                                <th width="8%">Unit Price</th>
                                <th width="8%">Original Total</th>
                                <th width="10%">Quantity</th>
                                <th width="10%">Amount</th>
                                <th width="8%">Disc %</th>
                                <th width="10%">Disc Amount</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if(!empty($saleItems) && count($saleItems) > 0)
                                @foreach($saleItems as $index => $item)
                                @php
                                    $product = App\Product::where('item_id', $item['item_id'] ?? '')->first();
                                    $quantity = $item['quantity'] ?? 1;
                                    $unitPrice = $item['unit_price'] ?? 0;
                                    $totalAmount = $item['total_amount'] ?? ($quantity * $unitPrice);
                                    $productFound = !empty($product);
                                    $discountRate = $item['discount_rate'] ?? 0;
                                    $discountAmount = $item['discount_amount'] ?? 0;
                                    
                                    // Check if this item has credit data from existing credit note
                                    $creditQty = $item['credit_quantity'] ?? $quantity;
                                    $creditAmt = $item['credit_amount'] ?? $totalAmount;
                                    $creditDiscRate = $item['credit_discount_rate'] ?? $discountRate;
                                    $creditDiscAmt = $item['credit_discount_amount'] ?? $discountAmount;
                                @endphp
                                <tr class="sale-item-row" data-index="{{ $index }}">
                                    <td>
                                        <input type="checkbox" 
                                               name="selected_items[]" 
                                               value="{{ $index }}" 
                                               class="item-checkbox form-check-input"
                                               data-index="{{ $index }}"
                                               {{ in_array($index, $selectedItems ?? []) ? 'checked' : '' }}>
                                    </td>
                                    <td>{{ $index + 1 }}</td>
                                    <td>
                                        <strong>{{ $item['item_description'] ?? $product->name ?? 'Unknown' }}</strong>
                                        @if($product)
                                            <br><small class="text-muted">SKU: {{ $product->sku ?? 'N/A' }}</small>
                                        @endif
                                        @if(!$productFound)
                                            <br><span class="product-not-found"><i class="fas fa-exclamation-triangle"></i> Product not found in system</span>
                                        @endif
                                    </td>
                                    <td style="display:none;">{{ $item['item_id'] ?? 'N/A' }}</td>
                                    <td class="text-center">
                                        <span class="original-qty">{{ number_format($quantity, 2) }}</span>
                                        <input type="hidden" name="original_qty[{{ $index }}]" value="{{ $quantity }}">
                                    </td>
                                    <td class="text-right">
                                        <span class="unit-price">{{ number_format($unitPrice, 2) }}</span>
                                        <input type="hidden" name="unit_price[{{ $index }}]" value="{{ $unitPrice }}">
                                    </td>
                                    <td class="text-right">
                                        <span class="original-total">{{ number_format($totalAmount, 2) }}</span>
                                        <input type="hidden" name="original_total[{{ $index }}]" value="{{ $totalAmount }}">
                                    </td>
                                    <td>
                                        <input type="number" 
                                               name="quantity[{{ $index }}]" 
                                               class="form-control input-sm item-qty" 
                                               value="{{ number_format($creditQty, 2) }}"
                                               min="0" 
                                               max="{{ $quantity }}"
                                               step="0.01"
                                               data-index="{{ $index }}"
                                               {{ in_array($index, $selectedItems ?? []) ? '' : 'disabled' }}>
                                    </td>
                                    <td>
                                        <input type="number" 
                                               name="amount[{{ $index }}]" 
                                               class="form-control input-sm item-amount" 
                                               value="{{ number_format($creditAmt, 2) }}"
                                               min="0"
                                               step="0.01"
                                               data-index="{{ $index }}"
                                               {{ in_array($index, $selectedItems ?? []) ? '' : 'disabled' }}>
                                    </td>
                                    <td>
                                        <input type="number" 
                                               name="discount_rate[{{ $index }}]" 
                                               class="form-control input-sm item-discount discount-rate-input" 
                                               value="{{ $creditDiscRate }}"
                                               min="0"
                                               max="100"
                                               step="0.01"
                                               data-index="{{ $index }}"
                                               {{ in_array($index, $selectedItems ?? []) ? '' : 'disabled' }}>
                                        <span style="font-size:12px;">%</span>
                                    </td>
                                    <td>
                                        <input type="number" 
                                               name="discount_amount[{{ $index }}]" 
                                               class="form-control input-sm item-discount discount-amount-input" 
                                               value="{{ $creditDiscAmt }}"
                                               min="0"
                                               step="0.01"
                                               data-index="{{ $index }}"
                                               {{ in_array($index, $selectedItems ?? []) ? '' : 'disabled' }}>
                                    </td>
                                </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="11" class="text-center">
                                        <div class="alert alert-warning">
                                            <i class="fas fa-exclamation-triangle"></i>
                                            No items found. Please ensure the sale has been synced with Digitax.
                                        </div>
                                    </td>
                                </tr>
                            @endif
                        </tbody>
                        <tfoot>
                            <tr class="bg-light">
                                <th colspan="6" class="text-right">Totals:</th>
                                <th class="text-center" id="total-qty">0</th>
                                <th class="text-right" id="total-credit-amount">0.00</th>
                                <th class="text-center" id="total-discount-rate">0</th>
                                <th class="text-right" id="total-discount-amount">0.00</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>

                <!-- Summary Section -->
                <div class="row mt-20">
                    <div class="col-sm-6">
                        <div class="credit-note-summary-card">
                            <h5><i class="fas fa-chart-pie"></i> Credit Note Summary</h5>
                            <div class="summary-item">
                                <strong>Total Items Selected:</strong>
                                <span id="selected-count" class="badge badge-primary">0</span>
                            </div>
                            <div class="summary-item">
                                <strong>Total Quantity:</strong>
                                <span id="summary-qty" class="text-info font-weight-bold">0</span>
                            </div>
                            <div class="summary-item">
                                <strong>Total Amount:</strong>
                                <span id="summary-total" class="text-success font-weight-bold">0.00</span>
                            </div>
                            <div class="summary-item">
                                <strong>Total Discount:</strong>
                                <span id="summary-discount" class="text-danger font-weight-bold">0.00</span>
                            </div>
                            <div class="summary-item">
                                <strong>Net Amount:</strong>
                                <span id="summary-net" class="text-primary font-weight-bold">0.00</span>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="credit-note-summary-card">
                            <h5><i class="fas fa-file-signature"></i> Credit Note Information</h5>
                            <div class="summary-item">
                                <strong>Credit Note Number:</strong>
                                <span class="text-primary">CN-{{ $transaction->invoice_no ?? time() }}</span>
                            </div>
                            <div class="summary-item">
                                <strong>Date:</strong>
                                <span class="text-primary">{{ \Carbon\Carbon::now()->format('d/m/Y H:i') }}</span>
                            </div>
                           
                            @if(!empty($creditNoteData) && !empty($creditNoteData['etims_url']))
                            <div class="summary-item etims-link">
                                <strong>ETIMS URL:</strong>
                                <a href="{{ $creditNoteData['etims_url'] }}" target="_blank" class="btn btn-primary btn-xs">
                                    <i class="fas fa-external-link-alt"></i> View Receipt
                                </a>
                            </div>
                            @endif
                            @if(!empty($creditNoteData) && !empty($creditNoteData['receipt_signature']))
                            <div class="summary-item">
                                <strong>Receipt Signature:</strong>
                                <span class="text-muted" style="font-size:12px;">{{ substr($creditNoteData['receipt_signature'], 0, 20) }}...</span>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Submit Button -->
                <div class="row mt-20">
                    <div class="col-sm-12 text-center">
                        <button type="submit" class="btn btn-success btn-lg" id="submit-credit-note">
                            <i class="fas fa-file-invoice"></i> Create Credit Note
                        </button>
                        <a href="{{ route('sells.index') }}" class="btn btn-danger btn-lg ml-2">
                            <i class="fas fa-times"></i> Cancel
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</section>

<!-- Loading Overlay -->
<div class="loading-overlay" id="loadingOverlay">
    <div class="loading-content">
        <div class="spinner-border text-primary" role="status">
            <span class="sr-only">Loading...</span>
        </div>
        <h5 class="mt-3">Processing Credit Note...</h5>
        <p class="text-muted">Please wait while we submit to Digitax</p>
    </div>
</div>

<!-- Result Modal -->
<div class="result-modal-overlay" id="resultModal">
    <div class="result-modal-content">
        <div class="result-modal-header">
            <h5 id="resultModalTitle">Credit Note Created</h5>
            <button type="button" class="close" id="closeModalBtn">
                <span>&times;</span>
            </button>
        </div>
        <div id="resultModalBody">
        </div>
        <div class="result-modal-footer">
            <button type="button" class="btn btn-secondary" id="closeModalFooterBtn">Close</button>
            <a href="#" class="btn btn-primary" id="resultModalAction" target="_blank" style="display:none;">
                <i class="fas fa-external-link-alt"></i> View ETIMS Receipt
            </a>
        </div>
    </div>
</div>

@endsection

@section('javascript')
<script type="text/javascript">
(function() {
    'use strict';

    // Variables
    var selectedItems = new Set();
    var totalAmount = 0;
    var totalQty = 0;
    var totalCreditAmount = 0;
    var totalDiscount = 0;
    var totalDiscountRate = 0;

    // Initialize totals
    function updateTotals() {
        totalAmount = 0;
        totalQty = 0;
        totalCreditAmount = 0;
        totalDiscount = 0;
        totalDiscountRate = 0;
        
        document.querySelectorAll('.item-checkbox:checked').forEach(function(checkbox) {
            var row = checkbox.closest('tr');
            var originalTotal = parseFloat(row.querySelector('.original-total').textContent.replace(/,/g, '')) || 0;
            var qty = parseFloat(row.querySelector('.item-qty').value) || 0;
            var amount = parseFloat(row.querySelector('.item-amount').value) || 0;
            var discountRate = parseFloat(row.querySelector('.discount-rate-input').value) || 0;
            var discountAmount = parseFloat(row.querySelector('.discount-amount-input').value) || 0;
            
            totalAmount += originalTotal;
            totalQty += qty;
            totalCreditAmount += amount;
            totalDiscount += discountAmount;
            totalDiscountRate += discountRate;
        });
        
        var totalQtyEl = document.getElementById('total-qty');
        var totalCreditAmountEl = document.getElementById('total-credit-amount');
        var totalDiscountRateEl = document.getElementById('total-discount-rate');
        var totalDiscountAmountEl = document.getElementById('total-discount-amount');
        
        if (totalQtyEl) totalQtyEl.textContent = totalQty.toFixed(2);
        if (totalCreditAmountEl) totalCreditAmountEl.textContent = totalCreditAmount.toFixed(2);
        if (totalDiscountRateEl) totalDiscountRateEl.textContent = totalDiscountRate.toFixed(2);
        if (totalDiscountAmountEl) totalDiscountAmountEl.textContent = totalDiscount.toFixed(2);
        
        updateSummary();
    }

    function updateSummary() {
        var count = document.querySelectorAll('.item-checkbox:checked').length;
        
        var selectedCountEl = document.getElementById('selected-count');
        var summaryQtyEl = document.getElementById('summary-qty');
        var summaryTotalEl = document.getElementById('summary-total');
        var summaryDiscountEl = document.getElementById('summary-discount');
        var summaryNetEl = document.getElementById('summary-net');
        
        if (selectedCountEl) selectedCountEl.textContent = count;
        if (summaryQtyEl) summaryQtyEl.textContent = totalQty.toFixed(2);
        if (summaryTotalEl) summaryTotalEl.textContent = totalCreditAmount.toFixed(2);
        if (summaryDiscountEl) summaryDiscountEl.textContent = totalDiscount.toFixed(2);
        
        var netAmount = totalCreditAmount - totalDiscount;
        if (summaryNetEl) summaryNetEl.textContent = netAmount.toFixed(2);
    }

    // Calculate discount from rate
    function calculateDiscountFromRate(row) {
        var amount = parseFloat(row.querySelector('.item-amount').value) || 0;
        var rate = parseFloat(row.querySelector('.discount-rate-input').value) || 0;
        var discountAmountInput = row.querySelector('.discount-amount-input');
        
        if (rate > 0 && amount > 0 && discountAmountInput) {
            var discountAmount = (amount * rate) / 100;
            discountAmountInput.value = discountAmount.toFixed(2);
        } else if (discountAmountInput) {
            discountAmountInput.value = 0;
        }
    }

    // Calculate rate from discount amount
    function calculateRateFromDiscount(row) {
        var amount = parseFloat(row.querySelector('.item-amount').value) || 0;
        var discountAmount = parseFloat(row.querySelector('.discount-amount-input').value) || 0;
        var discountRateInput = row.querySelector('.discount-rate-input');
        
        if (discountAmount > 0 && amount > 0 && discountRateInput) {
            var rate = (discountAmount / amount) * 100;
            discountRateInput.value = rate.toFixed(2);
        } else if (discountRateInput) {
            discountRateInput.value = 0;
        }
    }

    // Select/Deselect all items
    var selectAllCheckbox = document.getElementById('select-all-items');
    if (selectAllCheckbox) {
        selectAllCheckbox.addEventListener('change', function() {
            var isChecked = this.checked;
            document.querySelectorAll('.item-checkbox').forEach(function(checkbox) {
                checkbox.checked = isChecked;
                checkbox.dispatchEvent(new Event('change'));
            });
        });
    }

    // Toggle item selection
    document.querySelectorAll('.item-checkbox').forEach(function(checkbox) {
        checkbox.addEventListener('change', function() {
            var index = this.value;
            var row = this.closest('tr');
            var isChecked = this.checked;
            
            var qtyInput = row.querySelector('.item-qty');
            var amountInput = row.querySelector('.item-amount');
            var discountRateInput = row.querySelector('.discount-rate-input');
            var discountAmountInput = row.querySelector('.discount-amount-input');
            
            if (qtyInput) qtyInput.disabled = !isChecked;
            if (amountInput) amountInput.disabled = !isChecked;
            if (discountRateInput) discountRateInput.disabled = !isChecked;
            if (discountAmountInput) discountAmountInput.disabled = !isChecked;
            
            if (isChecked) {
                row.classList.add('selected');
                selectedItems.add(index);
            } else {
                row.classList.remove('selected');
                selectedItems.delete(index);
            }
            
            updateTotals();
        });
    });

    // Update totals when quantity or amount changes
    document.querySelectorAll('.item-qty, .item-amount').forEach(function(input) {
        input.addEventListener('input', function() {
            var index = this.dataset.index;
            var row = this.closest('tr');
            var qtyInput = row.querySelector('.item-qty');
            var amountInput = row.querySelector('.item-amount');
            var originalQtyEl = row.querySelector('.original-qty');
            var unitPriceEl = row.querySelector('.unit-price');
            
            if (!qtyInput || !amountInput || !originalQtyEl || !unitPriceEl) return;
            
            var originalQty = parseFloat(originalQtyEl.textContent.replace(/,/g, ''));
            var unitPrice = parseFloat(unitPriceEl.textContent.replace(/,/g, ''));
            
            if (this.classList.contains('item-qty')) {
                var qty = parseFloat(qtyInput.value) || 0;
                
                if (qty > originalQty) {
                    qtyInput.value = originalQty;
                    qty = originalQty;
                    alert('Quantity cannot exceed original quantity');
                }
                
                if (qty > 0 && !isNaN(unitPrice) && unitPrice > 0) {
                    var newAmount = qty * unitPrice;
                    amountInput.value = newAmount.toFixed(2);
                } else {
                    amountInput.value = 0;
                }
            }
            
            if (this.classList.contains('item-amount')) {
                var amount = parseFloat(amountInput.value) || 0;
                var qty = parseFloat(qtyInput.value) || 0;
                
                if (amount > 0 && unitPrice > 0) {
                    var newQty = amount / unitPrice;
                    if (newQty > originalQty) {
                        amountInput.value = (originalQty * unitPrice).toFixed(2);
                        alert('Amount cannot exceed original total');
                    } else {
                        qtyInput.value = newQty.toFixed(2);
                    }
                }
            }
            
            calculateDiscountFromRate(row);
            updateTotals();
        });
    });

    // Handle discount rate changes
    document.querySelectorAll('.discount-rate-input').forEach(function(input) {
        input.addEventListener('input', function() {
            var row = this.closest('tr');
            
            var rate = parseFloat(this.value) || 0;
            if (rate > 100) {
                this.value = 100;
            }
            
            calculateDiscountFromRate(row);
            updateTotals();
        });
    });

    // Handle discount amount changes
    document.querySelectorAll('.discount-amount-input').forEach(function(input) {
        input.addEventListener('input', function() {
            var row = this.closest('tr');
            var amountInput = row.querySelector('.item-amount');
            if (!amountInput) return;
            
            var amount = parseFloat(amountInput.value) || 0;
            var discount = parseFloat(this.value) || 0;
            
            if (discount > amount) {
                this.value = amount;
                alert('Discount cannot exceed amount');
            }
            
            calculateRateFromDiscount(row);
            updateTotals();
        });
    });

    // Show loading overlay
    function showLoading() {
        var overlay = document.getElementById('loadingOverlay');
        if (overlay) overlay.classList.add('active');
    }

    function hideLoading() {
        var overlay = document.getElementById('loadingOverlay');
        if (overlay) overlay.classList.remove('active');
    }

    // Show result modal
    function showResultModal(title, body, etimsUrl) {
        var titleEl = document.getElementById('resultModalTitle');
        var bodyEl = document.getElementById('resultModalBody');
        var actionBtn = document.getElementById('resultModalAction');
        var modal = document.getElementById('resultModal');
        
        if (titleEl) titleEl.textContent = title;
        if (bodyEl) bodyEl.innerHTML = body;
        
        if (actionBtn) {
            if (etimsUrl) {
                actionBtn.href = etimsUrl;
                actionBtn.style.display = 'inline-block';
            } else {
                actionBtn.style.display = 'none';
            }
        }
        
        if (modal) modal.classList.add('active');
    }

    // Close result modal function
    function closeResultModal() {
        var modal = document.getElementById('resultModal');
        if (modal) modal.classList.remove('active');
        window.location.href = '{{ route("sells.index") }}';
    }

    // Auto-populate if credit note exists
    (function() {
        var selectedItemsData = @json($selectedItems ?? []);
        var saleItemsData = @json($saleItems ?? []);
        var creditNoteStatus = '{{ $creditNoteStatus ?? "PENDING" }}';
        var hasExistingCreditNote = {{ !empty($existingCreditNote) || !empty($transaction->digitax_credit_note_id) ? 'true' : 'false' }};
        var creditNoteData = @json($creditNoteData ?? null);
        
        if (hasExistingCreditNote) {
            var statusClass = 'warning';
            if (creditNoteStatus.toUpperCase() === 'COMPLETED') {
                statusClass = 'success';
            } else if (creditNoteStatus.toUpperCase() === 'PENDING') {
                statusClass = 'warning';
            } else if (creditNoteStatus.toUpperCase() === 'FAILED') {
                statusClass = 'danger';
            }
            
            var statusBadgeElement = document.getElementById('credit-note-status-badge');
            if (statusBadgeElement) {
                statusBadgeElement.className = 'label label-' + statusClass;
                statusBadgeElement.textContent = creditNoteStatus.toUpperCase();
            }
            
            if (selectedItemsData.length > 0) {
                selectedItemsData.forEach(function(index) {
                    var row = document.querySelector('tr[data-index="' + index + '"]');
                    if (row) {
                        var checkbox = row.querySelector('.item-checkbox');
                        if (checkbox) {
                            checkbox.checked = true;
                            checkbox.dispatchEvent(new Event('change'));
                        }
                    }
                });
            }
            
            if (creditNoteStatus.toUpperCase() === 'COMPLETED') {
                var submitBtn = document.getElementById('submit-credit-note');
                if (submitBtn) {
                    submitBtn.innerHTML = '<i class="fas fa-check-circle"></i> Credit Note Already Completed';
                    submitBtn.disabled = true;
                    submitBtn.classList.remove('btn-success');
                    submitBtn.classList.add('btn-default');
                }
            }
            
            setTimeout(function() {
                updateTotals();
                updateSummary();
            }, 300);
        } else {
            setTimeout(function() {
                updateTotals();
                updateSummary();
            }, 100);
        }
    })();

    // Validate form before submit
    var creditNoteForm = document.getElementById('credit-note-form');
    if (creditNoteForm) {
        creditNoteForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            var selectedCount = document.querySelectorAll('.item-checkbox:checked').length;
            
            if (selectedCount === 0) {
                alert('Please select at least one item for the credit note');
                return false;
            }
            
            var hasInvalid = false;
            
            document.querySelectorAll('.item-checkbox:checked').forEach(function(checkbox) {
                var row = checkbox.closest('tr');
                var qtyInput = row.querySelector('.item-qty');
                var amountInput = row.querySelector('.item-amount');
                var discountAmountInput = row.querySelector('.discount-amount-input');
                var originalQtyEl = row.querySelector('.original-qty');
                
                if (!qtyInput || !amountInput || !originalQtyEl) return;
                
                var qty = parseFloat(qtyInput.value) || 0;
                var amount = parseFloat(amountInput.value) || 0;
                var discountAmount = parseFloat(discountAmountInput ? discountAmountInput.value : 0) || 0;
                var originalQty = parseFloat(originalQtyEl.textContent.replace(/,/g, ''));
                
                if (qty <= 0 || amount <= 0) {
                    alert('Quantity and amount must be greater than 0 for selected items');
                    hasInvalid = true;
                    return false;
                }
                
                if (qty > originalQty) {
                    alert('Quantity cannot exceed original quantity');
                    hasInvalid = true;
                    return false;
                }
                
                if (discountAmount > amount) {
                    alert('Discount cannot exceed amount for selected items');
                    hasInvalid = true;
                    return false;
                }
            });
            
            if (hasInvalid) {
                return false;
            }
            
            showLoading();
            
            var formData = new FormData(this);
            
            fetch(this.action, {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('input[name="_token"]').value,
                    'Accept': 'application/json',
                }
            })
            .then(function(response) {
                return response.json();
            })
            .then(function(data) {
                hideLoading();
                
                if (data.success) {
                    var bodyHtml = '<div class="alert alert-success">';
                    bodyHtml += '<h5><i class="fas fa-check-circle"></i> Credit Note Created Successfully!</h5>';
                    bodyHtml += '<hr>';
                    bodyHtml += '<p><strong>Credit Note ID:</strong> ' + (data.data.credit_note_id || 'N/A') + '</p>';
                    bodyHtml += '<p><strong>Invoice Number:</strong> ' + (data.data.invoice_number || 'N/A') + '</p>';
                    if (data.data.receipt_signature) {
                        bodyHtml += '<p><strong>Receipt Signature:</strong> ' + data.data.receipt_signature + '</p>';
                    }
                    bodyHtml += '<p><strong>Status:</strong> <span class="badge-status-completed">' + (data.data.status || 'COMPLETED') + '</span></p>';
                    bodyHtml += '</div>';
                    
                    showResultModal('Credit Note Created', bodyHtml, data.data.etims_url);
                } else {
                    alert(data.message || 'Failed to create credit note');
                }
            })
            .catch(function(error) {
                hideLoading();
                alert('An error occurred: ' + error.message);
            });
        });
    }

    // Attach event listeners for modal close buttons
    document.addEventListener('DOMContentLoaded', function() {
        var closeBtn = document.getElementById('closeModalBtn');
        if (closeBtn) {
            closeBtn.addEventListener('click', closeResultModal);
        }
        
        var closeFooterBtn = document.getElementById('closeModalFooterBtn');
        if (closeFooterBtn) {
            closeFooterBtn.addEventListener('click', closeResultModal);
        }
        
        var resultModal = document.getElementById('resultModal');
        if (resultModal) {
            resultModal.addEventListener('click', function(e) {
                if (e.target === this) {
                    closeResultModal();
                }
            });
        }
    });

    // Fallback update
    setTimeout(function() {
        var selectedCount = document.querySelectorAll('.item-checkbox:checked').length;
        var summaryTotalEl = document.getElementById('summary-total');
        var summaryTotal = summaryTotalEl ? summaryTotalEl.textContent : '0';
        
        if (selectedCount > 0 && parseFloat(summaryTotal) === 0) {
            updateTotals();
            updateSummary();
        }
    }, 1000);

})();
</script>
@endsection