{% extends 'base.html' %}
{% load i18n l10n %}

{% block title %}{% trans "New Purchase Return" %} | {{ site_settings.business_name }}{% endblock %}

{% block content %}
<div class="container-fluid px-4" id="returnApp">
    <div class="row">
        <!-- Main Form -->
        <div class="col-lg-8">
            <div class="card border-0 shadow-sm rounded-4 mb-4">
                <div class="card-header bg-white border-0 pt-4 px-4">
                    <h5 class="fw-bold mb-0"><i class="bi bi-arrow-return-right me-2 text-primary"></i>{% trans "Create Purchase Return" %}</h5>
                </div>
                <div class="card-body p-4">
                    <!-- Supplier & Return Info -->
                    <div class="row g-3 mb-4">
                        <div class="col-md-4">
                            <label class="form-label small fw-bold">{% trans "Supplier" %}</label>
                            <select class="form-select rounded-3 shadow-none border-secondary-subtle" v-model="supplierId">
                                <option value="">{% trans "Select Supplier" %}</option>
                                {% for supplier in suppliers %}
                                <option value="{{ supplier.id }}">{{ supplier.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-bold">{% trans "Original Purchase #" %}</label>
                            <select class="form-select rounded-3 shadow-none border-secondary-subtle" v-model="purchaseId">
                                <option value="">{% trans "None / Manual" %}</option>
                                {% for purchase in purchases %}
                                <option value="{{ purchase.id }}">#{{ purchase.invoice_number|default:purchase.id }} ({{ purchase.created_at|date:"Y-m-d" }})</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label small fw-bold">{% trans "Return #" %}</label>
                            <input type="text" class="form-control rounded-3 shadow-none border-secondary-subtle" v-model="returnNumber" placeholder="{% trans 'e.g. PRET-1001' %}">
                        </div>
                    </div>

                    <!-- Item Selection -->
                    <div class="mb-4">
                        <label class="form-label small fw-bold">{% trans "Search Products" %}</label>
                        <div class="input-group">
                            <span class="input-group-text bg-light border-end-0 border-secondary-subtle"><i class="bi bi-search"></i></span>
                            <input type="text" class="form-control rounded-3 border-start-0 border-secondary-subtle shadow-none" placeholder="{% trans 'Search by Name or SKU...' %}" v-model="searchQuery" @input="filterProducts">
                        </div>
                        
                        <div class="position-relative">
                            <div class="list-group position-absolute w-100 shadow rounded-3 mt-1" style="z-index: 1000;" v-if="filteredProducts.length > 0">
                                <button v-for="product in filteredProducts" :key="product.id" class="list-group-item list-group-item-action border-0 py-3" @click="addItem(product)">
                                    <div class="d-flex justify-content-between">
                                        <div>
                                            <span class="fw-bold">[[ product.name_en ]]</span> / [[ product.name_ar ]]
                                            <div class="text-muted small">SKU: [[ product.sku ]] | Stock: [[ product.stock ]]</div>
                                        </div>
                                        <div class="text-primary fw-bold">[[ currencySymbol ]][[ product.cost_price ]]</div>
                                    </div>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Items Table -->
                    <div class="table-responsive">
                        <table class="table align-middle">
                            <thead class="bg-light-subtle">
                                <tr class="small text-uppercase text-muted fw-bold">
                                    <th style="width: 40%;">{% trans "Product" %}</th>
                                    <th class="text-center">{% trans "Cost Price" %}</th>
                                    <th class="text-center" style="width: 15%;">{% trans "Quantity" %}</th>
                                    <th class="text-end">{% trans "Total" %}</th>
                                    <th></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item, index) in cart" :key="index">
                                    <td>
                                        <div class="fw-bold">[[ item.name_en ]]</div>
                                        <div class="text-muted small">[[ item.sku ]]</div>
                                    </td>
                                    <td>
                                        <input type="number" step="0.001" class="form-control form-control-sm text-center border-0 border-bottom rounded-0" v-model="item.price" @input="calculateTotal">
                                    </td>
                                    <td>
                                        <input type="number" class="form-control form-control-sm text-center border-0 border-bottom rounded-0" step="0.01" v-model="item.quantity" @input="calculateTotal">
                                    </td>
                                    <td class="text-end fw-bold">[[ currencySymbol ]][[ (item.price * item.quantity).toFixed(decimalPlaces) ]]</td>
                                    <td class="text-end">
                                        <button class="btn btn-link text-danger p-0" @click="removeItem(index)"><i class="bi bi-x-circle"></i></button>
                                    </td>
                                </tr>
                                <tr v-if="cart.length === 0">
                                    <td colspan="5" class="text-center py-5 text-muted">
                                        {% trans "Search and add products to this return." %}
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Return Summary -->
        <div class="col-lg-4">
            <div class="card border-0 shadow-sm rounded-4 sticky-top" style="top: 20px;">
                <div class="card-body p-4">
                    <h5 class="fw-bold mb-4">{% trans "Return Summary" %}</h5>
                    
                    <div class="d-flex justify-content-between mb-2">
                        <span class="text-muted">{% trans "Total Amount" %}</span>
                        <h4 class="fw-bold text-primary mb-0">[[ currencySymbol ]][[ subtotal.toFixed(decimalPlaces) ]]</h4>
                    </div>
                    
                    <hr class="my-4">

                    <div class="mb-4">
                        <label class="form-label small fw-bold">{% trans "Reason for Return / Notes" %}</label>
                        <textarea class="form-control rounded-3" rows="4" v-model="notes" placeholder="{% trans 'e.g. Expired product, incorrect shipment...' %}"></textarea>
                    </div>

                    <div class="alert alert-danger border-0 rounded-3 small mb-4">
                        <i class="bi bi-exclamation-triangle me-2"></i>
                        {% trans "Completing this return will automatically decrease the stock quantity for the selected items." %}
                    </div>

                    <div class="d-grid">
                        <button class="btn btn-primary rounded-3 py-3 fw-bold shadow-sm" :disabled="isProcessing || cart.length === 0 || !supplierId" @click="saveReturn">
                            <span v-if="isProcessing" class="spinner-border spinner-border-sm me-2"></span>
                            <i class="bi bi-check-circle me-2" v-else></i>
                            {% trans "Process Purchase Return" %}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Vue.js 3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
{% localize off %}
<script>
    const { createApp } = Vue;

    createApp({
        delimiters: ['[[', ']]'],
        data() {
            return {
                products: [
                    {% for p in products %}
                    {
                        id: {{ p.id|default:0 }},
                        name_en: "{{ p.name_en|escapejs }}",
                        name_ar: "{{ p.name_ar|escapejs }}",
                        sku: "{{ p.sku|escapejs }}",
                        cost_price: {{ p.cost_price|default:0 }},
                        stock: {{ p.stock_quantity|default:0 }}
                    },
                    {% endfor %}
                ],
                searchQuery: '',
                filteredProducts: [],
                cart: [],
                supplierId: '',
                purchaseId: '',
                returnNumber: '',
                notes: '',
                currencySymbol: '{{ site_settings.currency_symbol|escapejs }}',
                decimalPlaces: {{ decimal_places|default:3 }},
                isProcessing: false
            }
        },
        computed: {
            subtotal() {
                return this.cart.reduce((total, item) => total + (item.price * item.quantity), 0);
            }
        },
        methods: {
            filterProducts() {
                if (this.searchQuery.length > 1) {
                    const query = this.searchQuery.toLowerCase();
                    this.filteredProducts = this.products.filter(p => 
                        p.name_en.toLowerCase().includes(query) || 
                        p.sku.toLowerCase().includes(query) ||
                        p.name_ar.includes(query)
                    ).slice(0, 5);
                } else {
                    this.filteredProducts = [];
                }
            },
            addItem(product) {
                const existing = this.cart.find(item => item.id === product.id);
                if (existing) {
                    existing.quantity++;
                } else {
                    this.cart.push({
                        id: product.id,
                        name_en: product.name_en,
                        sku: product.sku,
                        price: product.cost_price,
                        quantity: 1
                    });
                }
                this.searchQuery = '';
                this.filteredProducts = [];
            },
            removeItem(index) {
                this.cart.splice(index, 1);
            },
            saveReturn() {
                if (this.isProcessing) return;
                if (!confirm("{% trans 'Are you sure you want to process this purchase return? This will deduct from stock.' %}")) return;
                
                this.isProcessing = true;
                
                const payload = {
                    supplier_id: this.supplierId,
                    purchase_id: this.purchaseId,
                    return_number: this.returnNumber,
                    items: this.cart.map(item => ({
                        id: item.id,
                        quantity: item.quantity,
                        price: item.price,
                        line_total: item.price * item.quantity
                    })),
                    total_amount: this.subtotal,
                    notes: this.notes
                };

                fetch("{% url 'create_purchase_return_api' %}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRFToken': '{{ csrf_token }}'
                    },
                    body: JSON.stringify(payload)
                })
                .then(res => res.json())
                .then(data => {
                    if (data.success) {
                        window.location.href = "{% url 'purchase_returns' %}";
                    } else {
                        alert("Error: " + data.error);
                        this.isProcessing = false;
                    }
                })
                .catch(err => {
                    console.error(err);
                    alert("An unexpected error occurred.");
                    this.isProcessing = false;
                });
            }
        }
    }).mount('#returnApp');
</script>
{% endlocalize %}
{% endblock %}