@extends('layouts.app')

@section('content')
<div class="container-fluid mt-4 mb-5">
    <div class="card p-4 shadow-sm">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <div>
                <h5 class="font-semibold mb-1">Stock Count Session #{{ $count->sc_id }}</h5>
                <small class="text-muted">Date: {{ $count->sc_date->format('Y-m-d') }} | User: {{ $count->user->user_fname ?? 'N/A' }}</small>
            </div>
            <div>
                <a href="{{ route('pos.stock.count.print', $count->sc_id) }}" target="_blank" class="btn btn-sm btn-info">Print Worksheet</a>
                <a href="{{ route('pos.stock.count.index') }}" class="btn btn-sm btn-dark">Back to List</a>
            </div>
        </div>

        <!-- Progress Bar -->
        @php
            $total = $items->count();
            $counted = $items->where('scl_count_qty', '>', 0)->count();
            $progress = $total > 0 ? round(($counted / $total) * 100) : 0;
        @endphp
        <div class="mb-4">
            <div class="d-flex justify-content-between mb-1">
                <small class="font-weight-bold">Progress: {{ $counted }} / {{ $total }} items counted</small>
                <small>{{ $progress }}%</small>
            </div>
            <div class="progress">
                <div class="progress-bar bg-success" role="progressbar" style="width: {{ $progress }}%" aria-valuenow="{{ $progress }}" aria-valuemin="0" aria-valuemax="100"></div>
            </div>
        </div>

        <!-- Search Filter -->
        <div class="mb-3">
            <input type="text" id="search-input" class="form-control" placeholder="Search by barcode or product name...">
        </div>

        <!-- Count Table -->
        <div class="table-responsive" style="max-height: 600px; overflow-y: auto;">
            <table class="table table-sm table-bordered table-hover" id="count-table">
                <thead class="bg-light sticky-top">
                    <tr>
                        <th style="width: 10%;">Barcode</th>
                        <th style="width: 35%;">Product Name</th>
                        <th style="width: 12%;">System Qty</th>
                        <th style="width: 12%;">Count Qty</th>
                        <th style="width: 12%;">Variance</th>
                        <th style="width: 12%;">Update Qty</th>
                        <th style="width: 7%;">Type</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($items as $item)
                    <tr data-id="{{ $item->scl_id }}" data-search="{{ strtolower($item->product->product_barcode . ' ' . $item->product->product_name) }}">
                        <td>{{ $item->product->product_barcode }}</td>
                        <td>{{ $item->product->product_name }}</td>
                        <td class="text-right">{{ number_format($item->scl_system_qty, 3) }}</td>
                        <td>
                            <input type="number" 
                                   step="0.001" 
                                   class="form-control form-control-sm count-input" 
                                   data-item-id="{{ $item->scl_id }}"
                                   data-system-qty="{{ $item->scl_system_qty }}"
                                   value="{{ $item->scl_count_qty > 0 ? $item->scl_count_qty : '' }}"
                                   placeholder="0.000">
                        </td>
                        <td class="text-right variance-cell" id="variance-{{ $item->scl_id }}">
                            @if($item->scl_count_qty > 0)
                            @php $variance = $item->scl_count_qty - $item->scl_system_qty; @endphp
                            <span class="{{ $variance > 0 ? 'text-success' : ($variance < 0 ? 'text-danger' : '') }}">
                                {{ number_format($variance, 3) }}
                            </span>
                            @endif
                        </td>
                        <td class="text-right update-qty-cell" id="update-qty-{{ $item->scl_id }}">
                            @if($item->scl_details_update_qty > 0)
                            {{ number_format($item->scl_details_update_qty, 3) }}
                            @endif
                        </td>
                        <td class="text-center type-cell" id="type-{{ $item->scl_id }}">
                            @if($item->scl_count_qty > 0)
                            <span class="badge badge-{{ $item->scl_details_in_out == 1 ? 'success' : 'danger' }}">
                                {{ $item->scl_details_in_out == 1 ? 'IN' : 'OUT' }}
                            </span>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- Complete Button -->
        <div class="mt-4 text-right">
            <form method="post" action="{{ route('pos.stock.count.complete', $count->sc_id) }}" id="complete-form">
                @csrf
                <button type="submit" class="btn btn-success" onclick="return confirm('Complete this stock count and apply all adjustments? This cannot be undone.')">
                    Complete Stock Count & Apply Adjustments
                </button>
            </form>
        </div>
    </div>
</div>

<script>
// Auto-save count quantity on blur
document.querySelectorAll('.count-input').forEach(input => {
    input.addEventListener('blur', function() {
        const itemId = this.dataset.itemId;
        const systemQty = parseFloat(this.dataset.systemQty);
        const countQty = parseFloat(this.value) || 0;
        
        if (countQty < 0) {
            alert('Count quantity cannot be negative');
            this.value = '';
            return;
        }

        // Save to server
        fetch(`/pos/stock/count/{{ $count->sc_id }}/${itemId}/update`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ scl_count_qty: countQty })
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                const variance = data.variance;
                const updateQty = data.update_qty;
                
                // Update variance cell
                const varianceCell = document.getElementById(`variance-${itemId}`);
                if (variance !== 0) {
                    const color = variance > 0 ? 'text-success' : 'text-danger';
                    varianceCell.innerHTML = `<span class="${color}">${variance.toFixed(3)}</span>`;
                } else {
                    varianceCell.innerHTML = '0.000';
                }
                
                // Update qty cell
                document.getElementById(`update-qty-${itemId}`).textContent = updateQty.toFixed(3);
                
                // Update type cell
                const typeCell = document.getElementById(`type-${itemId}`);
                if (variance !== 0) {
                    const badgeClass = variance > 0 ? 'badge-success' : 'badge-danger';
                    const badgeText = variance > 0 ? 'IN' : 'OUT';
                    typeCell.innerHTML = `<span class="badge ${badgeClass}">${badgeText}</span>`;
                } else {
                    typeCell.innerHTML = '';
                }
            }
        })
        .catch(err => console.error('Error saving:', err));
    });
});

// Search filter
document.getElementById('search-input').addEventListener('input', function() {
    const search = this.value.toLowerCase();
    document.querySelectorAll('#count-table tbody tr').forEach(row => {
        const searchText = row.dataset.search;
        row.style.display = searchText.includes(search) ? '' : 'none';
    });
});
</script>
@endsection