@extends('layouts.admin')

@section('content')
<div class="container mx-auto max-w-4xl">
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-bold text-gray-800">Process New Return</h1>
        <a href="{{ route('admin.returns.index') }}"
           class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg flex items-center">
            <i class="fas fa-arrow-left mr-2"></i> Back to Returns
        </a>
    </div>

    <div class="bg-white rounded-lg shadow-lg p-6">
        <form method="POST" action="{{ route('admin.returns.store') }}" id="returnForm">
            @csrf

            <!-- Sale Selection -->
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-2">Select Sale *</label>
                <select name="sale_id" id="saleSelect" required
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">Select a sale...</option>
                    @foreach($sales as $sale)
                        <option value="{{ $sale->id }}">
                            {{ $sale->sale_code }} -
                            {{ $sale->customer->name ?? 'Walk-in Customer' }} -
                            ${{ number_format($sale->total, 2) }} -
                            {{ $sale->created_at->format('M d, Y') }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- Product Selection -->
            <div class="mb-6" id="productSection" style="display: none;">
                <label class="block text-sm font-medium text-gray-700 mb-2">Select Product *</label>
                <select name="product_id" id="productSelect" required
                        class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                    <option value="">Select a product...</option>
                </select>
            </div>

            <!-- Return Details -->
            <div id="returnDetails" style="display: none;">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Quantity to Return *</label>
                        <input type="number" name="quantity_returned" id="quantityInput"
                               min="1" required
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <p class="text-xs text-gray-500 mt-1">Max available: <span id="maxQuantity">0</span></p>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">Refund Amount *</label>
                        <input type="number" name="refund_amount" id="refundAmount"
                               step="0.01" min="0" required
                               class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                               readonly>
                    </div>
                </div>

                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-2">Reason for Return *</label>
                    <textarea name="reason" rows="4" required
                              class="w-full border border-gray-300 rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                              placeholder="Please describe the reason for this return..."></textarea>
                </div>

                <!-- Summary -->
                <div class="bg-gray-50 rounded-lg p-4 mb-6">
                    <h4 class="font-semibold text-gray-800 mb-3">Return Summary</h4>
                    <div class="space-y-2 text-sm">
                        <div class="flex justify-between">
                            <span class="text-gray-600">Product:</span>
                            <span id="summaryProduct" class="font-medium">-</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Original Price:</span>
                            <span id="summaryPrice" class="font-medium">-</span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-gray-600">Quantity Returning:</span>
                            <span id="summaryQuantity" class="font-medium">-</span>
                        </div>
                        <div class="flex justify-between border-t pt-2">
                            <span class="text-gray-800 font-semibold">Total Refund:</span>
                            <span id="summaryTotal" class="text-red-600 font-bold">-</span>
                        </div>
                    </div>
                </div>

                <div class="flex justify-end">
                    <button type="submit"
                            class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold">
                        <i class="fas fa-check-circle mr-2"></i> Process Return
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>
@endsection

@push('scripts')
<script>
let saleProducts = {};

// Load products when sale is selected
document.getElementById('saleSelect').addEventListener('change', function() {
    const saleId = this.value;

    if (!saleId) {
        document.getElementById('productSection').style.display = 'none';
        document.getElementById('returnDetails').style.display = 'none';
        return;
    }

    // Show loading
    document.getElementById('productSection').style.display = 'block';
    document.getElementById('productSelect').innerHTML = '<option value="">Loading products...</option>';

    fetch(`/admin/returns/sale/${saleId}/products`)
        .then(response => response.json())
        .then(data => {
            const productSelect = document.getElementById('productSelect');
            productSelect.innerHTML = '<option value="">Select a product...</option>';

            saleProducts = {};

            data.forEach(item => {
                const product = item.product;
                const key = `${product.id}`;

                if (!saleProducts[key]) {
                    saleProducts[key] = {
                        id: product.id,
                        name: product.product_name,
                        price: parseFloat(item.unit_price),
                        maxQuantity: parseInt(item.quantity),
                        type: product.product_type,
                        unit: product.unit
                    };

                    const option = document.createElement('option');
                    option.value = product.id;
                    option.textContent = `${product.product_name} - ${item.quantity} ${product.unit} @ $${parseFloat(item.unit_price).toFixed(2)}`;
                    option.setAttribute('data-product-key', key);
                    productSelect.appendChild(option);
                }
            });

            document.getElementById('returnDetails').style.display = 'none';
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error loading products');
        });
});

// Show return details when product is selected
document.getElementById('productSelect').addEventListener('change', function() {
    const productId = this.value;

    if (!productId) {
        document.getElementById('returnDetails').style.display = 'none';
        return;
    }

    const product = saleProducts[productId];
    if (product) {
        document.getElementById('maxQuantity').textContent = product.maxQuantity + ' ' + product.unit;
        document.getElementById('quantityInput').max = product.maxQuantity;
        document.getElementById('quantityInput').value = 1;

        // Update summary
        updateSummary(product);

        document.getElementById('returnDetails').style.display = 'block';
    }
});

// Update refund amount and summary when quantity changes
document.getElementById('quantityInput').addEventListener('input', function() {
    const productId = document.getElementById('productSelect').value;
    const product = saleProducts[productId];

    if (product) {
        updateSummary(product);
    }
});

function updateSummary(product) {
    const quantity = parseInt(document.getElementById('quantityInput').value) || 0;
    const maxQuantity = product.maxQuantity;

    // Validate quantity
    if (quantity > maxQuantity) {
        document.getElementById('quantityInput').value = maxQuantity;
        quantity = maxQuantity;
    }

    const refundAmount = quantity * product.price;

    // Update refund amount
    document.getElementById('refundAmount').value = refundAmount.toFixed(2);

    // Update summary
    document.getElementById('summaryProduct').textContent = product.name;
    document.getElementById('summaryPrice').textContent = `$${product.price.toFixed(2)} per ${product.unit}`;
    document.getElementById('summaryQuantity').textContent = `${quantity} ${product.unit}`;
    document.getElementById('summaryTotal').textContent = `$${refundAmount.toFixed(2)}`;
}

// Form validation
document.getElementById('returnForm').addEventListener('submit', function(e) {
    const quantity = parseInt(document.getElementById('quantityInput').value);
    const maxQuantity = parseInt(document.getElementById('maxQuantity').textContent);

    if (quantity > maxQuantity) {
        e.preventDefault();
        alert(`Cannot return more than ${maxQuantity} units.`);
        return;
    }

    if (quantity <= 0) {
        e.preventDefault();
        alert('Please enter a valid quantity.');
        return;
    }
});
</script>
@endpush