{% extends "pos/base.html" %}
{% load static %}

{% block content %}
<div class="container-fluid">
    <h1>New Stock Transfer</h1>

    <form method="post" action="{% url 'stock_transfer:transfer_add' %}" id="transfer-form">
        {% csrf_token %}

        <div class="form-row">
            <div class="form-group col-md-3">
                <label>From</label>
                <input type="text" class="form-control" value="{{ from_branch_name }}" readonly>
            </div>
            <div class="form-group col-md-3">
                {{ form.to_branch.label_tag }}
                {{ form.to_branch }}
            </div>
            <div class="form-group col-md-3 align-self-end">
                <div class="form-check">
                    {{ form.bill_on_purchase }}
                    {{ form.bill_on_purchase.label_tag }}
                    <small class="form-text text-muted">Use FIFO cost + overhead</small>
                </div>
            </div>
            <!-- FIFO Price Display -->
            <div class="form-group col-md-3">
                <label>Selected Product FIFO Info:</label>
                <div class="card bg-light">
                    <div class="card-body py-2 px-3">
                        <small class="text-muted">Purchase Price:</small>
                        <span id="fifo-price-display" class="badge badge-info ml-2">--</span>
                        <br>
                        <small class="text-muted">Available Qty:</small>
                        <span id="fifo-qty-display" class="badge badge-secondary ml-2">--</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Zero Stock Warning -->
        {% if not zero_stock_allow %}
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <i class="fas fa-exclamation-triangle"></i>
            <strong>Note:</strong> Zero/negative stock items will not be transferred.
            <button type="button" class="close" data-dismiss="alert">&times;</button>
        </div>
        {% endif %}

        <table class="table table-bordered" id="lines-table">
            <thead>
                <tr>
                    <th style="width:2%">#</th>
                    <th style="width:15%">Code</th>
                    <th>Name</th>
                    <th style="width:8%">Stock</th>
                    <th style="width:10%">Qty</th>
                    <th class="price-col" style="width:12%">Price</th>
                    <th class="total-col" style="width:12%">Total</th>
                    <th style="width:5%">Action</th>
                </tr>
            </thead>
            <tbody>
                <tr data-index="0">
                    <td class="sn">1</td>
                    <td>
                        <input type="text" name="lines-0-code" class="form-control code-input"
                            placeholder="Scan/Enter code">
                    </td>
                    <td>
                        <select name="lines-0-name" class="form-control name-input" style="width:100%">
                            <option></option>
                        </select>
                    </td>
                    <td>
                        <span class="stock-display badge badge-secondary">--</span>
                    </td>
                    <td>
                        <input type="number" name="lines-0-qty" class="form-control qty-input" step="0.01">
                    </td>
                    <td class="price-col">
                        <input type="number" name="lines-0-price" class="form-control price-input" step="0.01">
                    </td>
                    <td class="total-col">
                        <span class="total-text">0.00</span>
                    </td>
                    <td>
                        <button type="button" class="btn btn-sm btn-danger remove-row">✖</button>
                    </td>
                </tr>
            </tbody>
        </table>

        <button type="button" class="btn btn-secondary mb-3" id="add-row">
            + Add Item
        </button>

        <!-- Summary Section - Always visible, Grand Total hidden when bill_on_purchase -->
        <div id="summary-section" class="row">
            <div class="col-md-6 offset-md-6">
                <table class="table table-borderless">
                    <tr class="subtotal-row">
                        <th>Sub Total</th>
                        <td><span id="sub-total">0.00</span></td>
                    </tr>
                    <tr>
                        <th>Discount</th>
                        <td>
                            <input type="number" id="discount" name="discount" class="form-control" value="0" step="0.01">
                        </td>
                    </tr>
                    <tr>
                        <th>Loading</th>
                        <td>
                            <input type="number" id="transport-charges" name="transport_charges" class="form-control" value="0" step="0.01">
                        </td>
                    </tr>
                    <tr>
                        <th>Commission</th>
                        <td>
                            <input type="number" id="other-charges" name="other_charges" class="form-control" value="0" step="0.01">
                        </td>
                    </tr>
                    <tr>
                        <th>Other Expense</th>
                        <td>
                            <input type="number" id="sales-tax" name="sales_tax" class="form-control" value="0" step="0.01">
                        </td>
                    </tr>
                    <tr class="grand-total-row">
                        <th>Grand Total</th>
                        <td><span id="grand-total">0.00</span></td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="mt-3">
            <button type="button" class="btn btn-info" id="preview-btn">
                <i class="fas fa-eye"></i> Preview
            </button>
            
            <!-- Regular Transfer Button -->
            <button type="submit" name="auto_approve" value="0" class="btn btn-primary">
                <i class="fas fa-paper-plane"></i> Transfer
            </button>
            
            <!-- Transfer & Approve Button -->
            <button type="submit" name="auto_approve" value="1" class="btn btn-success">
                <i class="fas fa-check-double"></i> Transfer & Approve
            </button>
        </div>
    </form>
</div>

<!-- Preview Modal -->
<div class="modal fade" id="previewModal" tabindex="-1" role="dialog" aria-labelledby="previewModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="previewModalLabel">Transfer Preview</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span>&times;</span></button>
            </div>
            <div class="modal-body">
                <table class="table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Code</th>
                            <th>Name</th>
                            <th>Stock</th>
                            <th>Qty</th>
                            <th>Price</th>
                            <th>Total</th>
                        </tr>
                    </thead>
                    <tbody id="preview-lines"></tbody>
                </table>
                <hr>
                <div class="row">
                    <div class="col-md-6 offset-md-6">
                        <p><strong>Subtotal:</strong> <span id="preview-sub-total"></span></p>
                        <p><strong>Discount:</strong> <span id="preview-discount"></span></p>
                        <p><strong>Loading:</strong> <span id="preview-transport"></span></p>
                        <p><strong>Commission:</strong> <span id="preview-other"></span></p>
                        <p><strong>Other Expenses:</strong> <span id="preview-tax"></span></p>
                        <p><strong>Overhead Total:</strong> <span id="preview-overhead"></span></p>
                        <hr>
                        <p class="h5"><strong>Grand Total:</strong> <span id="preview-grand"></span></p>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<!-- ══════════════════════════════════════════════════════════════════════ -->
<!-- PRINT DIALOG MODAL — Shows after transfer is created                  -->
<!-- ══════════════════════════════════════════════════════════════════════ -->
<div class="modal fade" id="printDialog" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content" style="border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.3);">

            <!-- Header -->
            <div class="modal-header text-white" id="printDialogHeader"
                 style="background: linear-gradient(135deg, #28a745, #218838); border: none; padding: 18px 24px;">
                <h5 class="modal-title" style="font-weight: 700; font-size: 18px;">
                    <i class="fas fa-check-circle mr-2"></i>
                    <span id="printDialogTitle">Transfer Created!</span>
                </h5>
            </div>

            <!-- Body -->
            <div class="modal-body" style="padding: 24px;">
                <p id="printDialogMsg" class="mb-3" style="font-size: 14px; color: #555;"></p>

                <p style="font-weight: 600; font-size: 15px; color: #333; margin-bottom: 16px;">
                    Print Invoice:
                </p>

                <div class="row">

                    <!-- A4 Print -->
                    <div class="col-6 col-md-3 mb-2">
                        <button type="button" class="btn btn-outline-primary btn-block print-option-btn"
                                data-format="a4"
                                style="height: 90px; border-radius: 10px; font-weight: 600; border-width: 2px; transition: all 0.2s;">
                            <i class="fas fa-file-alt d-block mb-1" style="font-size: 24px;"></i>
                            <span style="font-size: 12px;">A4 Print</span>
                        </button>
                    </div>

                    <!-- A5 Print -->
                    <div class="col-6 col-md-3 mb-2">
                        <button type="button" class="btn btn-outline-info btn-block print-option-btn"
                                data-format="a5"
                                style="height: 90px; border-radius: 10px; font-weight: 600; border-width: 2px; transition: all 0.2s;">
                            <i class="fas fa-file d-block mb-1" style="font-size: 24px;"></i>
                            <span style="font-size: 12px;">A5 Print</span>
                        </button>
                    </div>

                    <!-- Thermal Print -->
                    <div class="col-6 col-md-3 mb-2">
                        <button type="button" class="btn btn-outline-dark btn-block print-option-btn"
                                data-format="thermal"
                                style="height: 90px; border-radius: 10px; font-weight: 600; border-width: 2px; transition: all 0.2s;">
                            <i class="fas fa-receipt d-block mb-1" style="font-size: 24px;"></i>
                            <span style="font-size: 12px;">Thermal</span>
                        </button>
                    </div>

                    <!-- Skip / Cancel -->
                    <div class="col-6 col-md-3 mb-2">
                        <button type="button" class="btn btn-outline-secondary btn-block" id="printSkipBtn"
                                style="height: 90px; border-radius: 10px; font-weight: 600; border-width: 2px; transition: all 0.2s;">
                            <i class="fas fa-times d-block mb-1" style="font-size: 24px;"></i>
                            <span style="font-size: 12px;">Skip</span>
                        </button>
                    </div>

                </div>
            </div>

        </div>
    </div>
</div>

<style>
    .print-option-btn:hover, #printSkipBtn:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .print-option-btn:active, #printSkipBtn:active {
        transform: translateY(0);
    }
    #transferSpinner {
        display: none;
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(255,255,255,0.7);
        z-index: 9999;
        justify-content: center;
        align-items: center;
    }
    #transferSpinner.show { display: flex; }
</style>

<!-- Loading Spinner -->
<div id="transferSpinner">
    <div class="text-center">
        <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
            <span class="sr-only">Processing...</span>
        </div>
        <p class="mt-2 font-weight-bold text-primary">Processing Transfer...</p>
    </div>
</div>

{% endblock content %}

{% block javascripts %}

<style>
    .stock-display {
        font-size: 0.85em;
        min-width: 50px;
        display: inline-block;
    }
    .stock-low { background-color: #dc3545 !important; }
    .stock-medium { background-color: #ffc107 !important; color: #000 !important; }
    .stock-high { background-color: #28a745 !important; }
    
    #fifo-price-display, #fifo-qty-display { font-size: 1em; }
    
    /* Highlight invalid stock */
    .invalid-stock { background-color: #f8d7da !important; }
</style>

<script>
$(function () {
    // ─────────────────────────────────────────────────────────────────────────
    // Settings from Django context
    // ─────────────────────────────────────────────────────────────────────────
    const zeroStockAllow = {{ zero_stock_allow|yesno:"true,false" }};
    const barcodeMode = {{ barcode_mode|yesno:"true,false" }};  // true = Code focus, false = Name focus
    
    let lastSelectedProduct = null;

    // ─────────────────────────────────────────────────────────────────────────
    // Focus Management
    // ─────────────────────────────────────────────────────────────────────────
    
    // 1) On page load: Focus on "To Branch" dropdown
    $(document).ready(function() {
        $('#id_to_branch').focus();
    });
    
    // 2) When branch is selected: Focus based on barcode setting
    $('#id_to_branch').on('change', function() {
        if ($(this).val()) {
            const $lastRow = $('#lines-table tbody tr').last();
            
            if (barcodeMode) {
                // barcode='1': Focus on Code input
                $lastRow.find('.code-input').focus();
            } else {
                // barcode='0': Focus on Name Select2 and open it
                const $nameSelect = $lastRow.find('.name-input');
                $nameSelect.select2('open');
            }
        }
    });

    // ─────────────────────────────────────────────────────────────────────────
    // Recalculation Logic
    // ─────────────────────────────────────────────────────────────────────────
    function recalc() {
        let sub = 0;
        const billOnPurchase = $('#id_bill_on_purchase').is(':checked');
        
        $('#lines-table tbody tr').each(function () {
            const qty = parseFloat($(this).find('.qty-input').val()) || 0;
            const price = parseFloat($(this).find('.price-input').val()) || 0;
            const tot = qty * price;
            $(this).find('.total-text').text(tot.toFixed(2));
            sub += tot;
        });
        
        $('#sub-total').text(sub.toFixed(2));

        const disc = parseFloat($('#discount').val()) || 0;
        const trans = parseFloat($('#transport-charges').val()) || 0;
        const other = parseFloat($('#other-charges').val()) || 0;
        const tax = parseFloat($('#sales-tax').val()) || 0;
        const overhead = trans + other + tax - disc;
        const grand = sub + overhead;
        
        $('#grand-total').text(grand.toFixed(2));
    }

    // ─────────────────────────────────────────────────────────────────────────
    // Bill on Purchase Toggle
    // ─────────────────────────────────────────────────────────────────────────
    $('#id_bill_on_purchase').change(function () {
        if (this.checked) {
            // Hide price/total columns, but keep overhead inputs visible
            $('.price-col, .total-col').hide();
            $('.subtotal-row, .grand-total-row').hide();
            // Overhead inputs remain visible for entry
        } else {
            $('.price-col, .total-col').show();
            $('.subtotal-row, .grand-total-row').show();
        }
        recalc();
    }).trigger('change');

    // ─────────────────────────────────────────────────────────────────────────
    // FIFO Price Fetching
    // ─────────────────────────────────────────────────────────────────────────
    function fetchFifoPrice(prodId, prodCode) {
        if (!prodId && !prodCode) {
            $('#fifo-price-display').text('--');
            $('#fifo-qty-display').text('--');
            return;
        }
        
        $.get("{% url 'stock_transfer:ajax_product_fifo_price' %}", {
            prod_id: prodId || prodCode
        }).done(function(resp) {
            if (resp.success) {
                $('#fifo-price-display').text(resp.fifo_price.toFixed(2));
                $('#fifo-qty-display').text(resp.available_qty.toFixed(2));
            } else {
                $('#fifo-price-display').text('N/A');
                $('#fifo-qty-display').text('N/A');
            }
        }).fail(function() {
            $('#fifo-price-display').text('Error');
            $('#fifo-qty-display').text('Error');
        });
    }

    // ─────────────────────────────────────────────────────────────────────────
    // Stock Badge Styling
    // ─────────────────────────────────────────────────────────────────────────
    function updateStockBadge($badge, stock, $row) {
        $badge.text(stock.toFixed(2));
        $badge.removeClass('stock-low stock-medium stock-high');
        $row.removeClass('invalid-stock');
        
        if (stock <= 0) {
            $badge.addClass('stock-low');
            if (!zeroStockAllow) {
                $row.addClass('invalid-stock');
            }
        } else if (stock < 10) {
            $badge.addClass('stock-medium');
        } else {
            $badge.addClass('stock-high');
        }
    }

    // ─────────────────────────────────────────────────────────────────────────
    // Code Input: Enter Key Handling
    // ─────────────────────────────────────────────────────────────────────────
    $('#lines-table').on('keydown', '.code-input', function (e) {
        if (e.which === 13) {
            e.preventDefault();
            const $row = $(this).closest('tr');
            const code = $.trim($(this).val());
            
            // FIXED: If code is empty, focus on Name (not Qty)
            if (!code) {
                const $nameSelect = $row.find('.name-input');
                $nameSelect.select2('open');
                return;
            }
            
            $.post("{% url 'stock_transfer:ajax_product_by_code' %}", {
                code: code,
                csrfmiddlewaretoken: '{{ csrf_token }}'
            }).done(function(resp) {
                if (resp.success) {
                    const p = resp.product;
                    const $name = $row.find('.name-input');
                    const opt = new Option(p.text || p.name, p.id, true, true);
                    $name.append(opt).trigger('change');
                    $row.find('.price-input').val(p.price);
                    
                    // Update stock display
                    const stock = p.present_stock || 0;
                    updateStockBadge($row.find('.stock-display'), stock, $row);
                    
                    // Fetch FIFO price
                    fetchFifoPrice(p.prod_id || p.code, p.code);
                    
                    $row.find('.qty-input').focus();
                    recalc();
                } else {
                    alert('Product code not found');
                    // Focus on Name if code not found
                    $row.find('.name-input').select2('open');
                }
            });
        }
    });

    // ─────────────────────────────────────────────────────────────────────────
    // Name Select2 Initialization
    // ─────────────────────────────────────────────────────────────────────────
    function initNameSelect($sel) {
        $sel.select2({
            placeholder: 'Search name…',
            allowClear: true,
            ajax: {
                url: "{% url 'stock_transfer:ajax_product_search' %}",
                dataType: 'json',
                delay: 250,
                data: function(params) {
                    return { q: params.term };
                },
                processResults: function(data) {
                    return { results: data.results };
                },
                cache: true
            },
            templateResult: function(item) {
                if (item.loading) return item.text;
                
                const stock = item.present_stock || 0;
                let stockClass = 'badge-secondary';
                let stockWarning = '';
                
                if (stock <= 0) {
                    stockClass = 'badge-danger';
                    if (!zeroStockAllow) {
                        stockWarning = ' <small class="text-danger">(Cannot transfer)</small>';
                    }
                } else if (stock < 10) {
                    stockClass = 'badge-warning';
                }
                
                return $('<span>').html(
                    `${item.text} <small>(${item.code})</small> ` +
                    `<span class="badge ${stockClass} ml-2">Stock: ${stock}</span>` +
                    stockWarning
                );
            },
            templateSelection: function(item) {
                return item.text || item.id;
            },
            escapeMarkup: function(m) { return m; }
        }).on('select2:select', function(e) {
            const d = e.params.data;
            const $row = $(e.target).closest('tr');
            
            $row.find('.code-input').val(d.code);
            $row.find('.price-input').val(d.price);
            
            // Update stock display
            const stock = d.present_stock || 0;
            updateStockBadge($row.find('.stock-display'), stock, $row);
            
            // Store and fetch FIFO price
            lastSelectedProduct = d;
            fetchFifoPrice(d.prod_id, d.code);
            
            $row.find('.qty-input').focus();
            recalc();
        });
    }
    
    initNameSelect($('.name-input').first());

    // ─────────────────────────────────────────────────────────────────────────
    // Qty Enter Key: Price or New Row
    // ─────────────────────────────────────────────────────────────────────────
    $('#lines-table').on('keydown', '.qty-input', function (e) {
        if (e.which === 13) {
            e.preventDefault();
            if ($('#id_bill_on_purchase').is(':checked')) {
                $('#add-row').click();
            } else {
                $(this).closest('tr').find('.price-input').focus();
            }
        }
    });

    // ─────────────────────────────────────────────────────────────────────────
    // Price Enter Key: New Row
    // ─────────────────────────────────────────────────────────────────────────
    $('#lines-table').on('keydown', '.price-input', function (e) {
        if (e.which === 13) {
            e.preventDefault();
            $('#add-row').click();
        }
    });

    // ─────────────────────────────────────────────────────────────────────────
    // Add Row: Focus based on barcode setting
    // ─────────────────────────────────────────────────────────────────────────
    $('#add-row').click(function () {
        const idx = $('#lines-table tbody tr').length;
        const tpl = `
            <tr data-index="${idx}">
                <td class="sn">${idx + 1}</td>
                <td>
                    <input type="text" name="lines-${idx}-code" class="form-control code-input"
                        placeholder="Scan/Enter code">
                </td>
                <td>
                    <select name="lines-${idx}-name" class="form-control name-input" style="width:100%">
                        <option></option>
                    </select>
                </td>
                <td>
                    <span class="stock-display badge badge-secondary">--</span>
                </td>
                <td>
                    <input type="number" name="lines-${idx}-qty" class="form-control qty-input" step="0.01">
                </td>
                <td class="price-col">
                    <input type="number" name="lines-${idx}-price" class="form-control price-input" step="0.01">
                </td>
                <td class="total-col"><span class="total-text">0.00</span></td>
                <td>
                    <button type="button" class="btn btn-sm btn-danger remove-row">✖</button>
                </td>
            </tr>`;
        
        $('#lines-table tbody').append(tpl);
        const $new = $('#lines-table tbody tr').last();
        initNameSelect($new.find('.name-input'));
        $('#id_bill_on_purchase').trigger('change');
        
        // Focus based on barcode setting
        if (barcodeMode) {
            $new.find('.code-input').focus();
        } else {
            $new.find('.name-input').select2('open');
        }
    });

    // ─────────────────────────────────────────────────────────────────────────
    // Remove Row
    // ─────────────────────────────────────────────────────────────────────────
    $('#lines-table').on('click', '.remove-row', function () {
        $(this).closest('tr').remove();
        $('#lines-table tbody tr').each(function (i) {
            $(this).attr('data-index', i)
                .find('.sn').text(i + 1)
                .end().find('input,select').each(function () {
                    const nm = $(this).attr('name');
                    if (nm) $(this).attr('name', nm.replace(/\d+/, i));
                });
        });
        recalc();
    });

    // ─────────────────────────────────────────────────────────────────────────
    // Recalc on Input
    // ─────────────────────────────────────────────────────────────────────────
    $('#lines-table').on('input', '.qty-input, .price-input', recalc);
    $('#discount, #transport-charges, #other-charges, #sales-tax').on('input', recalc);

    // ─────────────────────────────────────────────────────────────────────────
    // Preview Modal
    // ─────────────────────────────────────────────────────────────────────────
    $('#preview-btn').click(function () {
        const $pt = $('#preview-lines').empty();
        const billOnPurchase = $('#id_bill_on_purchase').is(':checked');
        
        $('#lines-table tbody tr').each(function (i) {
            const sn = i + 1;
            const code = $(this).find('.code-input').val() || '';
            const nameData = $(this).find('.name-input').select2('data')[0];
            const name = nameData ? nameData.text : '';
            const stock = $(this).find('.stock-display').text() || '--';
            const qty = $(this).find('.qty-input').val() || 0;
            const price = billOnPurchase ? 'FIFO' : ($(this).find('.price-input').val() || 0);
            const tot = billOnPurchase ? 'FIFO + Overhead' : (qty * parseFloat(price || 0)).toFixed(2);
            
            $pt.append(`
                <tr>
                    <td>${sn}</td>
                    <td>${code}</td>
                    <td>${name}</td>
                    <td>${stock}</td>
                    <td>${qty}</td>
                    <td>${price}</td>
                    <td>${tot}</td>
                </tr>
            `);
        });
        
        const disc = parseFloat($('#discount').val()) || 0;
        const trans = parseFloat($('#transport-charges').val()) || 0;
        const other = parseFloat($('#other-charges').val()) || 0;
        const tax = parseFloat($('#sales-tax').val()) || 0;
        const overhead = trans + other + tax - disc;
        
        $('#preview-sub-total').text(billOnPurchase ? 'Based on FIFO' : $('#sub-total').text());
        $('#preview-discount').text(disc.toFixed(2));
        $('#preview-transport').text(trans.toFixed(2));
        $('#preview-other').text(other.toFixed(2));
        $('#preview-tax').text(tax.toFixed(2));
        $('#preview-overhead').text(overhead.toFixed(2));
        $('#preview-grand').text(billOnPurchase ? 'FIFO Total + ' + overhead.toFixed(2) : $('#grand-total').text());
        
        $('#previewModal').modal('show');
    });

    // ─────────────────────────────────────────────────────────────────────────
    // Stock Validation Helper
    // ─────────────────────────────────────────────────────────────────────────
    function hasInvalidStockItems() {
        if (zeroStockAllow) return false;
        let invalid = false;
        $('#lines-table tbody tr').each(function() {
            if ($(this).hasClass('invalid-stock')) {
                invalid = true;
                return false;
            }
        });
        return invalid;
    }

    // ─────────────────────────────────────────────────────────────────────────
    // AJAX Form Submit + Print Dialog
    // ─────────────────────────────────────────────────────────────────────────
    let pendingTransferId = null;

    function submitTransferAjax(autoApproveValue) {
        if (hasInvalidStockItems()) {
            alert('Cannot transfer: Some items have zero or negative stock.\n\nPlease remove highlighted items before proceeding.');
            return;
        }

        if (autoApproveValue === '1') {
            if (!confirm('Are you sure you want to Transfer & Approve immediately?\n\nThis will:\n- Deduct stock from your branch\n- Add stock to destination branch\n- Create sale & purchase invoices\n\nThis action cannot be undone.')) {
                return;
            }
        }

        const $form = $('#transfer-form');
        const formData = $form.serialize() + '&auto_approve=' + autoApproveValue;

        $('#transferSpinner').addClass('show');

        $.ajax({
            url: $form.attr('action'),
            type: 'POST',
            data: formData,
            headers: { 'X-Requested-With': 'XMLHttpRequest' },
            success: function(resp) {
                $('#transferSpinner').removeClass('show');

                if (resp.success) {
                    pendingTransferId = resp.transfer_id;
                    $('#printDialogMsg').text(resp.message);

                    if (resp.msg_level === 'warning') {
                        $('#printDialogHeader').css('background', 'linear-gradient(135deg, #ffc107, #e0a800)');
                        $('#printDialogTitle').html('<i class="fas fa-exclamation-triangle mr-2"></i> Transfer Created (with warnings)');
                    } else {
                        $('#printDialogHeader').css('background', 'linear-gradient(135deg, #28a745, #218838)');
                        $('#printDialogTitle').html('<i class="fas fa-check-circle mr-2"></i> Transfer Created!');
                    }

                    $('#printDialog').modal('show');
                } else {
                    alert(resp.message || 'Transfer failed.');
                }
            },
            error: function(xhr) {
                $('#transferSpinner').removeClass('show');
                alert('Server error. Please try again.');
                console.error('Transfer AJAX error:', xhr.responseText);
            }
        });
    }

    // ─────────────────────────────────────────────────────────────────────────
    // Button Click Handlers (intercept normal form submit)
    // ─────────────────────────────────────────────────────────────────────────
    $('button[name="auto_approve"]').click(function(e) {
        e.preventDefault();
        submitTransferAjax($(this).val());
    });

    // ─────────────────────────────────────────────────────────────────────────
    // Print Dialog — Print Option Buttons
    // ─────────────────────────────────────────────────────────────────────────
    $(document).on('click', '.print-option-btn', function() {
        if (!pendingTransferId) return;

        const format = $(this).data('format');
        let printUrl = '';

        if (format === 'a4') {
            printUrl = '/stock_transfer/transfer/' + pendingTransferId + '/print/';
        } else if (format === 'a5') {
            printUrl = '/stock_transfer/transfer/' + pendingTransferId + '/print/a5/';
        } else if (format === 'thermal') {
            printUrl = '/stock_transfer/transfer/' + pendingTransferId + '/print/thermal/';
        }

        if (printUrl) {
            window.open(printUrl, '_blank');
        }

        $('#printDialog').modal('hide');
        window.location.href = "{% url 'stock_transfer:incoming_transfers' %}";
    });

    // ─────────────────────────────────────────────────────────────────────────
    // Print Dialog — Skip Button
    // ─────────────────────────────────────────────────────────────────────────
    $(document).on('click', '#printSkipBtn', function() {
        $('#printDialog').modal('hide');
        window.location.href = "{% url 'stock_transfer:incoming_transfers' %}";
    });
});
</script>
{% endblock javascripts %}