@extends('layouts.app')

@section('content')
<div class="container mt-4 mb-5">
    <div class="card p-4 shadow-sm">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h5 class="font-semibold mb-0">Stock Adjustment</h5>
            <a href="{{ route('pos.stock.index', ['type' => 1]) }}" class="btn btn-sm btn-dark">Back to Stock</a>
        </div>

        <div class="alert alert-info">
            <strong>Instructions:</strong> Select products with badges, enter physical hand count quantity, and system will automatically calculate and apply adjustments.
        </div>

        <!-- Adjustment Form -->
        <form method="post" action="{{ route('pos.stock.adjustment.store') }}" id="adjustment-form">
            @csrf
            
            <table class="table table-sm table-bordered">
                <thead class="bg-light">
                    <tr>
                        <th style="width: 40%;">Product (Badge)</th>
                        <th style="width: 15%;">Current Qty</th>
                        <th style="width: 15%;">Hand Qty</th>
                        <th style="width: 15%;">Update Qty</th>
                        <th style="width: 10%;">Type</th>
                        <th style="width: 5%;"></th>
                    </tr>
                </thead>
                <tbody id="adjustment-rows">
                    <!-- Adjustment rows will be added here -->
                </tbody>
                <tfoot>
                    <tr>
                        <td>
                            <select class="form-control form-control-sm" id="product-select">
                                <option value="">Select Product & Badge</option>
                                @foreach($productBadges as $pb)
                                <option value="{{ $pb->price_systemid }}:{{ $pb->price_id }}" 
                                        data-barcode="{{ $pb->product_barcode }}"
                                        data-name="{{ $pb->product_name }}"
                                        data-badge="{{ $pb->price_name }}"
                                        data-price="{{ $pb->price_sale }}">
                                    [{{ $pb->product_barcode }}] {{ $pb->product_name }} - {{ $pb->price_name }} ({{ number_format($pb->price_sale, 2) }})
                                </option>
                                @endforeach
                            </select>
                        </td>
                        <td colspan="5">
                            <button type="button" class="btn btn-sm btn-success w-100" onclick="addRow()">
                                <i class="fas fa-plus"></i> Add Product
                            </button>
                        </td>
                    </tr>
                </tfoot>
            </table>

            <div class="mt-4">
                <div class="form-check mb-3">
                    <input class="form-check-input" type="checkbox" required id="confirm-check">
                    <label class="form-check-label" for="confirm-check">
                        <strong>Are you sure?</strong> This will apply all adjustments to stock.
                    </label>
                </div>
                <button type="submit" class="btn btn-success">Complete Adjustments</button>
            </div>
        </form>
    </div>
</div>

<script>
let rowIndex = 0;

function addRow() {
    const select = document.getElementById('product-select');
    const option = select.options[select.selectedIndex];
    
    if (!select.value) {
        alert('Please select a product');
        return;
    }

    const [systemId, badgeId] = select.value.split(':');
    const barcode = option.dataset.barcode;
    const name = option.dataset.name;
    const badge = option.dataset.badge;
    const price = option.dataset.price;

    // Fetch current qty
    fetch(`/pos/stock/adjustment/qty?systemid=${systemId}&badgeid=${badgeId}`)
        .then(r => r.json())
        .then(data => {
            const currentQty = parseFloat(data.qty) || 0;
            
            const tbody = document.getElementById('adjustment-rows');
            const row = document.createElement('tr');
            row.id = `row-${rowIndex}`;
            row.innerHTML = `
                <td>
                    <strong>[${barcode}] ${name}</strong><br>
                    <small class="text-muted">${badge} - Rs. ${price}</small>
                    <input type="hidden" name="adjustments[${rowIndex}][price_systemid]" value="${systemId}">
                    <input type="hidden" name="adjustments[${rowIndex}][price_id]" value="${badgeId}">
                </td>
                <td>
                    <input type="number" step="0.001" class="form-control form-control-sm current-qty" 
                           name="adjustments[${rowIndex}][current_qty]" 
                           value="${currentQty.toFixed(3)}" 
                           readonly>
                </td>
                <td>
                    <input type="number" step="0.001" class="form-control form-control-sm hand-qty" 
                           name="adjustments[${rowIndex}][hand_qty]" 
                           data-row="${rowIndex}"
                           placeholder="0.000" 
                           required>
                </td>
                <td>
                    <input type="number" step="0.001" class="form-control form-control-sm update-qty" 
                           id="update-${rowIndex}" 
                           readonly>
                </td>
                <td class="text-center" id="type-${rowIndex}"></td>
                <td>
                    <button type="button" class="btn btn-sm btn-danger" onclick="removeRow(${rowIndex})">
                        <i class="fas fa-times"></i>
                    </button>
                </td>
            `;
            
            tbody.appendChild(row);
            
            // Add event listener for hand qty calculation
            const handQtyInput = row.querySelector('.hand-qty');
            handQtyInput.addEventListener('input', function() {
                calculateAdjustment(this.dataset.row);
            });

            rowIndex++;
            select.value = '';
        })
        .catch(err => {
            console.error('Error fetching qty:', err);
            alert('Error loading current quantity');
        });
}

function calculateAdjustment(row) {
    const rowEl = document.getElementById(`row-${row}`);
    const currentQty = parseFloat(rowEl.querySelector('.current-qty').value) || 0;
    const handQty = parseFloat(rowEl.querySelector('.hand-qty').value) || 0;
    const difference = handQty - currentQty;
    const updateQty = Math.abs(difference);
    
    // Update qty field
    document.getElementById(`update-${row}`).value = updateQty.toFixed(3);
    
    // Update type badge
    const typeCell = document.getElementById(`type-${row}`);
    if (difference > 0) {
        typeCell.innerHTML = '<span class="badge badge-success">IN</span>';
    } else if (difference < 0) {
        typeCell.innerHTML = '<span class="badge badge-danger">OUT</span>';
    } else {
        typeCell.innerHTML = '<span class="badge badge-secondary">-</span>';
    }
}

function removeRow(row) {
    const rowEl = document.getElementById(`row-${row}`);
    if (rowEl) {
        rowEl.remove();
    }
}
</script>

@if(session('success'))
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
Swal.fire({
    title: 'Success',
    text: '{{ session('success') }}',
    icon: 'success',
    confirmButtonText: 'OK'
});
</script>
@endif
@endsection