@extends('layouts.app')
@section('title', 'Inventory')
@section('breadcrumb')
<li class="breadcrumb-item active">Inventory</li>
@endsection
@section('content')

<div class="page-header d-flex justify-content-between align-items-center">
    <div>
        <h1 class="page-title"><i class="bi bi-boxes me-2" style="color:#1d4ed8;"></i>Inventory</h1>
        <p class="page-subtitle">Track stock levels, adjustments and movements</p>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ route('inventory.movements') }}" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-arrow-left-right me-1"></i> Movement Log
        </a>
        @can_permission('inventory.adjust')
        <button class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#adjustModal">
            <i class="bi bi-plus-slash-minus me-1"></i> Adjust Stock
        </button>
        @endcan_permission
    </div>
</div>

{{-- Stats --}}
<div class="row g-3 mb-3">
    <div class="col-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon" style="background:#dbeafe;"><i class="bi bi-boxes" style="color:#1d4ed8;"></i></div>
            <div><div class="stat-value">{{ number_format($totalVariants) }}</div><div class="stat-label">Total Variants</div></div>
        </div>
    </div>
    <div class="col-6 col-xl-3">
        <div class="stat-card">
            <div class="stat-icon" style="background:#d1fae5;"><i class="bi bi-currency-exchange" style="color:#059669;"></i></div>
            <div><div class="stat-value" style="font-size:1rem;">৳{{ number_format($inventoryValue, 0) }}</div><div class="stat-label">Stock Value</div></div>
        </div>
    </div>
    <div class="col-6 col-xl-3">
        <a href="{{ route('inventory.index', ['stock' => 'low']) }}" style="text-decoration:none;">
        <div class="stat-card">
            <div class="stat-icon" style="background:#fef3c7;"><i class="bi bi-exclamation-triangle" style="color:#d97706;"></i></div>
            <div><div class="stat-value" style="color:#d97706;">{{ $lowStockCount }}</div><div class="stat-label">Low Stock</div></div>
        </div>
        </a>
    </div>
    <div class="col-6 col-xl-3">
        <a href="{{ route('inventory.index', ['stock' => 'out']) }}" style="text-decoration:none;">
        <div class="stat-card">
            <div class="stat-icon" style="background:#fee2e2;"><i class="bi bi-x-circle" style="color:#dc2626;"></i></div>
            <div><div class="stat-value" style="color:#dc2626;">{{ $outOfStockCount }}</div><div class="stat-label">Out of Stock</div></div>
        </div>
        </a>
    </div>
</div>

{{-- Alert for critical items --}}
@if($outOfStockCount > 0)
<div class="alert alert-danger d-flex align-items-center mb-3">
    <i class="bi bi-exclamation-triangle-fill me-2"></i>
    <strong>{{ $outOfStockCount }} product(s)</strong>&nbsp;are completely out of stock. Consider creating purchase orders.
    <a href="{{ route('inventory.index', ['stock' => 'out']) }}" class="ms-2 alert-link">View them →</a>
</div>
@endif

{{-- Filters --}}
<div class="card mb-3">
    <div class="card-body py-2">
        <form method="GET" class="row g-2 align-items-center">
            <div class="col-12 col-md-4">
                <input type="text" name="search" class="form-control" placeholder="Search by name, SKU, barcode..." value="{{ $search }}">
            </div>
            <div class="col-6 col-md-2">
                <select name="stock" class="form-select">
                    <option value="">All Stock</option>
                    <option value="low"     {{ $stock === 'low'     ? 'selected' : '' }}>Low Stock</option>
                    <option value="out"     {{ $stock === 'out'     ? 'selected' : '' }}>Out of Stock</option>
                    <option value="reorder" {{ $stock === 'reorder' ? 'selected' : '' }}>Needs Reorder</option>
                </select>
            </div>
            <div class="col-6 col-md-2">
                <select name="category_id" class="form-select">
                    <option value="">All Categories</option>
                    @foreach($categories as $cat)
                    <option value="{{ $cat->id }}" {{ $category == $cat->id ? 'selected' : '' }}>{{ $cat->name }}</option>
                    @endforeach
                </select>
            </div>
            <div class="col-auto d-flex gap-1">
                <button type="submit" class="btn btn-primary"><i class="bi bi-search"></i></button>
                <a href="{{ route('inventory.index') }}" class="btn btn-outline-secondary"><i class="bi bi-x"></i></a>
            </div>
        </form>
    </div>
</div>

{{-- Stock Table --}}
<div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
        <span><i class="bi bi-boxes me-2"></i>Stock Levels ({{ $variants->total() }})</span>
        <span style="font-size:.8rem;color:#64748b;">
            {{ $lowStockCount }} low &nbsp;|&nbsp; {{ $outOfStockCount }} out &nbsp;|&nbsp; {{ $reorderCount }} need reorder
        </span>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table mb-0">
                <thead>
                    <tr>
                        <th>Product / Variant</th>
                        <th>SKU</th>
                        <th>Category</th>
                        <th>Cost Price</th>
                        <th>Selling Price</th>
                        <th>Current Stock</th>
                        <th>Min Alert</th>
                        <th>Reorder At</th>
                        <th>Status</th>
                        @can_permission('inventory.adjust')
                        <th style="width:80px;">Adjust</th>
                        @endcan_permission
                    </tr>
                </thead>
                <tbody>
                    @forelse($variants as $variant)
                    <tr class="{{ $variant->is_out_of_stock ? 'table-danger' : ($variant->is_low_stock ? 'table-warning' : '') }}" style="--bs-table-bg:transparent;">
                        <td>
                            <div class="fw-600" style="font-size:.875rem;">
                                <a href="{{ route('products.show', $variant->product) }}" style="color:#1d4ed8;text-decoration:none;">{{ $variant->product->name }}</a>
                            </div>
                            <div style="font-size:.78rem;color:#64748b;">{{ $variant->variant_name }}</div>
                            @if($variant->product->brand)<div style="font-size:.72rem;color:#94a3b8;">{{ $variant->product->brand->name }}</div>@endif
                        </td>
                        <td><code style="font-size:.78rem;">{{ $variant->sku }}</code></td>
                        <td style="font-size:.825rem;">{{ $variant->product->category->name }}</td>
                        <td>৳{{ number_format($variant->cost_price, 2) }}</td>
                        <td style="color:#059669;font-weight:600;">৳{{ number_format($variant->selling_price, 2) }}</td>
                        <td>
                            @if($variant->is_out_of_stock)
                            <span class="badge bg-danger">0 — OUT</span>
                            @elseif($variant->is_low_stock)
                            <span class="badge bg-warning text-dark">{{ $variant->current_stock }} — LOW</span>
                            @else
                            <span class="badge bg-success">{{ $variant->current_stock }}</span>
                            @endif
                        </td>
                        <td style="font-size:.825rem;color:#64748b;">{{ $variant->min_stock_alert }}</td>
                        <td style="font-size:.825rem;color:#64748b;">{{ $variant->reorder_level }}</td>
                        <td>
                            @if($variant->current_stock <= $variant->reorder_level && $variant->current_stock > 0)
                            <span class="badge bg-warning text-dark" style="font-size:.68rem;">Reorder</span>
                            @elseif($variant->is_out_of_stock)
                            <span class="badge bg-danger" style="font-size:.68rem;">Critical</span>
                            @else
                            <span class="badge bg-light text-dark border" style="font-size:.68rem;">OK</span>
                            @endif
                        </td>
                        @can_permission('inventory.adjust')
                        <td>
                            <button type="button" class="btn btn-sm btn-outline-primary"
                                onclick="openAdjust({{ $variant->id }}, '{{ addslashes($variant->product->name . ' — ' . $variant->variant_name) }}', {{ $variant->current_stock }})"
                                title="Adjust Stock">
                                <i class="bi bi-plus-slash-minus"></i>
                            </button>
                        </td>
                        @endcan_permission
                    </tr>
                    @empty
                    <tr>
                        <td colspan="10" class="text-center py-5 text-muted">
                            <i class="bi bi-boxes" style="font-size:2.5rem;display:block;margin-bottom:.5rem;"></i>
                            No inventory records found.
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($variants->hasPages())<div class="card-footer">{{ $variants->links() }}</div>@endif
</div>

{{-- Stock Adjustment Modal --}}
@can_permission('inventory.adjust')
<div class="modal fade" id="adjustModal" tabindex="-1">
    <div class="modal-dialog"><div class="modal-content" style="border-radius:14px;border:none;">
        <form method="POST" action="{{ route('inventory.adjust') }}">
            @csrf
            <div class="modal-header border-0 pb-0">
                <h5 class="modal-title fw-700"><i class="bi bi-plus-slash-minus me-2"></i>Stock Adjustment</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label fw-semibold">Product / Variant</label>
                    <select name="product_variant_id" id="adjustVariantSelect" class="form-select" required>
                        <option value="">— Select Variant —</option>
                        @foreach($variants->getCollection() as $v)
                        <option value="{{ $v->id }}">{{ $v->product->name }} — {{ $v->variant_name }} (Stock: {{ $v->current_stock }})</option>
                        @endforeach
                    </select>
                    <small class="text-muted">Only showing current page. For other items, search above then adjust.</small>
                </div>

                <div class="mb-3 p-3 rounded" style="background:#f8fafc;border:1px solid #e2e8f0;">
                    <div style="font-size:.8rem;color:#64748b;">Selected item current stock:</div>
                    <div id="currentStockDisplay" style="font-size:1.5rem;font-weight:800;color:#1d4ed8;">—</div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Adjustment Type <span class="text-danger">*</span></label>
                    <div class="d-flex gap-2">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="adjustment_type" value="add" id="typeAdd" checked onchange="updateAdjustPreview()">
                            <label class="form-check-label" for="typeAdd"><span class="badge bg-success">+ Add</span></label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="adjustment_type" value="subtract" id="typeSub" onchange="updateAdjustPreview()">
                            <label class="form-check-label" for="typeSub"><span class="badge bg-danger">- Subtract</span></label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="adjustment_type" value="set" id="typeSet" onchange="updateAdjustPreview()">
                            <label class="form-check-label" for="typeSet"><span class="badge bg-warning text-dark">= Set Exact</span></label>
                        </div>
                    </div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Quantity <span class="text-danger">*</span></label>
                    <input type="number" name="quantity" id="adjustQty" class="form-control" min="1" required onchange="updateAdjustPreview()" oninput="updateAdjustPreview()">
                    <div id="adjustPreview" class="mt-1" style="font-size:.825rem;color:#059669;"></div>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Reason <span class="text-danger">*</span></label>
                    <select name="reason" class="form-select" required>
                        <option value="">— Select Reason —</option>
                        <option value="Stock count correction">Stock count correction</option>
                        <option value="Damaged goods write-off">Damaged goods write-off</option>
                        <option value="Lost or stolen">Lost or stolen</option>
                        <option value="Sample / display use">Sample / display use</option>
                        <option value="Opening stock entry">Opening stock entry</option>
                        <option value="Return to stock">Return to stock</option>
                        <option value="Manual correction">Manual correction</option>
                    </select>
                </div>

                <div class="mb-3">
                    <label class="form-label fw-semibold">Notes</label>
                    <textarea name="notes" class="form-control" rows="2" placeholder="Optional additional notes"></textarea>
                </div>
            </div>
            <div class="modal-footer border-0">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-primary"><i class="bi bi-check-circle me-1"></i>Save Adjustment</button>
            </div>
        </form>
    </div></div>
</div>
@endcan_permission

@endsection

@push('scripts')
<script>
const variantStocks = {
    @foreach($variants->getCollection() as $v)
    {{ $v->id }}: {{ $v->current_stock }},
    @endforeach
};

function openAdjust(variantId, name, stock) {
    const sel = document.getElementById('adjustVariantSelect');
    if (sel) {
        sel.value = variantId;
        document.getElementById('currentStockDisplay').textContent = stock;
    }
    new bootstrap.Modal(document.getElementById('adjustModal')).show();
}

document.getElementById('adjustVariantSelect')?.addEventListener('change', function () {
    const stock = variantStocks[this.value] ?? '—';
    document.getElementById('currentStockDisplay').textContent = stock;
    updateAdjustPreview();
});

function updateAdjustPreview() {
    const variantId = document.getElementById('adjustVariantSelect')?.value;
    const qty       = parseInt(document.getElementById('adjustQty')?.value) || 0;
    const type      = document.querySelector('[name="adjustment_type"]:checked')?.value;
    const current   = variantStocks[variantId] ?? 0;
    const preview   = document.getElementById('adjustPreview');
    if (!preview || !variantId || !qty) { preview && (preview.textContent = ''); return; }
    let after;
    if (type === 'add')      after = current + qty;
    else if (type === 'subtract') after = Math.max(0, current - qty);
    else after = qty;
    preview.textContent = `Current: ${current} → New stock: ${after}`;
    preview.style.color = after < current ? '#dc2626' : '#059669';
}
</script>
@endpush