@extends('admin.layouts.app')
@section('title','Inventory')
@section('breadcrumb') <span>/</span> Inventory @endsection

@section('content')
<div class="page-header">
    <div>
        <h1>Inventory / Products</h1>
        <p class="page-subtitle">Manage product stock and transactions</p>
    </div>
    @if(auth()->user()->hasPermission('products.create'))
    <a href="{{ route('admin.csr.products.create') }}" class="btn btn-primary">
        <i class="fas fa-plus me-2"></i>Add Product
    </a>
    @endif
</div>

<!-- Stats -->
<div class="row g-3 mb-4">
    <div class="col-6 col-md-3">
        <div class="card p-3 text-center" style="border-top:3px solid #2563eb;">
            <div style="font-size:22px;font-weight:700;">{{ $stats['total_products'] }}</div>
            <div style="font-size:12px;color:#64748b;">Total Products</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card p-3 text-center" style="border-top:3px solid #22c55e;">
            <div style="font-size:22px;font-weight:700;">{{ $stats['active_products'] }}</div>
            <div style="font-size:12px;color:#64748b;">Active</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card p-3 text-center" style="border-top:3px solid #f59e0b;">
            <div style="font-size:22px;font-weight:700;">{{ $stats['low_stock'] }}</div>
            <div style="font-size:12px;color:#64748b;">Low Stock (&lt;10)</div>
        </div>
    </div>
    <div class="col-6 col-md-3">
        <div class="card p-3 text-center" style="border-top:3px solid #ef4444;">
            <div style="font-size:22px;font-weight:700;">{{ $stats['out_of_stock'] }}</div>
            <div style="font-size:12px;color:#64748b;">Out of Stock</div>
        </div>
    </div>
</div>

<!-- Table -->
<div class="card">
    <div class="card-header d-flex align-items-center justify-content-between">
        <h6 class="mb-0 fw-700"><i class="fas fa-boxes text-primary me-2"></i>All Products</h6>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0" id="productsTable">
                <thead style="background:#f8fafc;">
                    <tr>
                        <th class="ps-3">S.N.</th>
                        <th>Product</th>
                        <th>Code</th>
                        <th>Category</th>
                        <th>Unit</th>
                        <th>Current Stock</th>
                        <th>Status</th>
                        <th class="text-center">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse($products as $i => $product)
                    <tr>
                        <td class="ps-3 text-muted">{{ ($products->currentPage()-1)*$products->perPage()+$i+1 }}</td>
                        <td>
                            <div class="d-flex align-items-center gap-2">
                                @if($product->product_image)
                                <img src="{{ asset('uploads/products/'.$product->product_image) }}" width="36" height="36"
                                    style="border-radius:8px;object-fit:cover;border:1.5px solid #e2e8f0;">
                                @else
                                <div style="width:36px;height:36px;background:#f1f5f9;border-radius:8px;display:flex;align-items:center;justify-content:center;">
                                    <i class="fas fa-box text-muted" style="font-size:14px;"></i>
                                </div>
                                @endif
                                <div>
                                    <div style="font-weight:600;font-size:13px;">{{ $product->product_name }}</div>
                                    @if($product->description)
                                    <div style="font-size:11px;color:#94a3b8;">{{ Str::limit($product->description,40) }}</div>
                                    @endif
                                </div>
                            </div>
                        </td>
                        <td><code style="font-size:11px;background:#f1f5f9;padding:2px 6px;border-radius:4px;">{{ $product->product_code }}</code></td>
                        <td style="font-size:12px;">{{ $product->category ?? '—' }}</td>
                        <td style="font-size:12px;">{{ $product->unit ?? 'pcs' }}</td>
                        <td>
                            @php
                            $qty   = $product->current_quantity;
                            $color = $qty === 0 ? 'danger' : ($qty < 10 ? 'warning' : 'success');
                            @endphp
                            <span class="badge bg-{{ $color }}" style="font-size:13px;padding:5px 10px;">
                                {{ $qty }}
                            </span>
                            @if($qty === 0) <small class="text-danger d-block" style="font-size:10px;">Out of stock</small>
                            @elseif($qty < 10) <small class="text-warning d-block" style="font-size:10px;">Low stock</small>
                            @endif
                        </td>
                        <td>
                            <span class="badge bg-{{ $product->status==='active'?'success':'secondary' }}">
                                {{ ucfirst($product->status) }}
                            </span>
                        </td>
                        <td class="text-center">
                            <div class="d-flex gap-1 justify-content-center">
                                <a href="{{ route('admin.csr.products.show',$product) }}" class="btn btn-sm btn-outline-info" title="View"><i class="fas fa-eye"></i></a>
                                @if(auth()->user()->hasPermission('products.add_stock'))
                                <button class="btn btn-sm btn-outline-success" title="Add Stock"
                                    onclick="showAddStock({{ $product->id }},'{{ addslashes($product->product_name) }}',{{ $product->current_quantity }})">
                                    <i class="fas fa-plus-circle"></i>
                                </button>
                                @endif
                                @if(auth()->user()->hasPermission('products.edit'))
                                <a href="{{ route('admin.csr.products.edit',$product) }}" class="btn btn-sm btn-outline-primary" title="Edit"><i class="fas fa-edit"></i></a>
                                @endif
                                <a href="{{ route('admin.csr.products.stock-history',$product) }}" class="btn btn-sm btn-outline-secondary" title="History"><i class="fas fa-history"></i></a>
                                @if(auth()->user()->hasPermission('products.delete'))
                                <button class="btn btn-sm btn-outline-danger" onclick="confirmDelete('{{ route('admin.csr.products.destroy',$product) }}','{{ $product->product_name }}')"><i class="fas fa-trash"></i></button>
                                @endif
                            </div>
                        </td>
                    </tr>
                    @empty
                    <tr>
                        <td colspan="8" class="text-center py-5">
                            <i class="fas fa-boxes d-block mb-2" style="font-size:32px;color:#cbd5e1;"></i>
                            <p class="text-muted">No products found</p>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
    @if($products->hasPages())
    <div class="card-footer bg-white py-3">{{ $products->links() }}</div>
    @endif
</div>

<!-- Add Stock Modal -->
<div class="modal fade" id="addStockModal" tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content" style="border-radius:16px;border:none;box-shadow:0 20px 60px rgba(0,0,0,.2);">
            <div class="modal-header border-0 pb-0">
                <h6 class="modal-title fw-700"><i class="fas fa-plus-circle text-success me-2"></i>Add Stock</h6>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p class="text-muted" style="font-size:13px;">Product: <strong id="stockProductName"></strong></p>
                <div class="mb-2" style="background:#f0fdf4;border-radius:8px;padding:10px;text-align:center;">
                    <div style="font-size:11px;color:#16a34a;font-weight:600;">Current Stock</div>
                    <div style="font-size:22px;font-weight:700;" id="currentStockDisplay">0</div>
                </div>
                <div class="mb-3">
                    <label class="form-label">Quantity to Add <span class="text-danger">*</span></label>
                    <input type="number" id="stockQty" class="form-control" min="1" placeholder="Enter quantity">
                </div>
                <div class="mb-0">
                    <label class="form-label">Description</label>
                    <input type="text" id="stockDesc" class="form-control" placeholder="Optional note">
                </div>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button class="btn btn-outline-secondary btn-sm" data-bs-dismiss="modal">Cancel</button>
                <button class="btn btn-success btn-sm" onclick="submitAddStock()" id="stockSubmitBtn">
                    <i class="fas fa-plus me-1"></i>Add Stock
                </button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
let stockProductId = null;

function showAddStock(id, name, current) {
    stockProductId = id;
    document.getElementById('stockProductName').textContent    = name;
    document.getElementById('currentStockDisplay').textContent = current;
    document.getElementById('stockQty').value  = '';
    document.getElementById('stockDesc').value = '';
    new bootstrap.Modal(document.getElementById('addStockModal')).show();
}

function submitAddStock() {
    const qty  = parseInt(document.getElementById('stockQty').value);
    const desc = document.getElementById('stockDesc').value;
    const btn  = document.getElementById('stockSubmitBtn');

    if (!qty || qty < 1) { toastr.error('Enter a valid quantity.'); return; }

    btn.disabled = true;
    btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';

    fetch(`/admin/csr/products/${stockProductId}/add-stock`, {
        method: 'POST',
        headers: { 'X-CSRF-TOKEN': '{{ csrf_token() }}', 'Content-Type': 'application/json' },
        body: JSON.stringify({ quantity: qty, description: desc })
    })
    .then(r => r.json())
    .then(d => {
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-plus me-1"></i>Add Stock';
        if (d.success) {
            bootstrap.Modal.getInstance(document.getElementById('addStockModal')).hide();
            toastr.success(d.message);
            setTimeout(() => location.reload(), 1000);
        } else {
            toastr.error(d.message || 'Failed to add stock.');
        }
    })
    .catch(() => {
        btn.disabled = false;
        btn.innerHTML = '<i class="fas fa-plus me-1"></i>Add Stock';
        toastr.error('Network error.');
    });
}
</script>
@endpush