@extends('layouts.app')

@section('content')
<div class="container">
    <h1 class="mb-4">إضافة مخزون جماعي</h1>

    <div class="alert alert-info">
        اختر المنتجات التي تريد زيادة مخزونها، وأدخل الكميات والتكلفة الاختيارية والملاحظات لكل منتج.
    </div>

    <form action="{{ route('products.stock-intake.bulk.store') }}" method="POST">
        @csrf

        @error('items')
            <div class="alert alert-danger">{{ $message }}</div>
        @enderror

        <div class="table-responsive">
            <table class="table table-striped align-middle">
                <thead>
                    <tr>
                        <th style="width: 36px;"><input type="checkbox" id="selectAll"></th>
                        <th>المنتج</th>
                        <th>SKU</th>
                        <th class="text-center">المتوفر</th>
                        <th class="text-center">حد إعادة الطلب</th>
                        <th style="width: 140px;">الكمية المضافة</th>
                        <th style="width: 160px;">التكلفة للوحدة (اختياري)</th>
                        <th>ملاحظات</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($products as $index => $p)
                        <tr class="{{ ($p->reorder_level !== null && $p->stock_quantity <= $p->reorder_level) ? 'table-warning' : '' }}">
                            <td>
                                <input type="checkbox" class="row-check" data-index="{{ $index }}">
                            </td>
                            <td>
                                <strong>{{ $p->name }}</strong>
                                <input type="hidden" name="items[{{ $index }}][product_id]" value="{{ $p->id }}">
                            </td>
                            <td>{{ $p->sku ?? '—' }}</td>
                            <td class="text-center"><span class="badge bg-secondary">{{ $p->stock_quantity }}</span></td>
                            <td class="text-center">{{ $p->reorder_level ?? '—' }}</td>
                            <td>
                                <input type="number" min="0" class="form-control form-control-sm qty-input" name="items[{{ $index }}][quantity]" placeholder="0" disabled>
                                @error("items.$index.quantity")<small class="text-danger">{{ $message }}</small>@enderror
                            </td>
                            <td>
                                <input type="number" step="0.01" min="0" class="form-control form-control-sm" name="items[{{ $index }}][unit_cost]" placeholder="0.00" disabled>
                                @error("items.$index.unit_cost")<small class="text-danger">{{ $message }}</small>@enderror
                            </td>
                            <td>
                                <input type="text" class="form-control form-control-sm" name="items[{{ $index }}][notes]" placeholder="ملاحظات (اختياري)" disabled>
                                @error("items.$index.notes")<small class="text-danger">{{ $message }}</small>@enderror
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="text-center text-muted">لا توجد منتجات تتبع المخزون.</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="d-flex justify-content-between mt-3">
            <a href="{{ route('reports.inventory') }}" class="btn btn-outline-secondary">عودة</a>
            <button type="submit" class="btn btn-success">
                <i class="fas fa-check"></i> تنفيذ الإضافة الجماعية
            </button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
    const selectAll = document.getElementById('selectAll');
    const rowChecks = Array.from(document.querySelectorAll('.row-check'));

    function toggleRowInputs(index, enabled) {
        const row = rowChecks[index].closest('tr');
        row.querySelectorAll('input[type="number"], input[type="text"]').forEach(inp => {
            inp.disabled = !enabled;
            if (!enabled) {
                inp.value = '';
            }
        });
    }

    selectAll?.addEventListener('change', (e) => {
        const checked = e.target.checked;
        rowChecks.forEach((chk, i) => {
            chk.checked = checked;
            toggleRowInputs(i, checked);
        });
    });

    rowChecks.forEach((chk, i) => {
        chk.addEventListener('change', (e) => {
            toggleRowInputs(i, e.target.checked);
        });
    });
</script>
@endpush