@extends('layouts.app')
@section('title', 'Raw Materials Inventory')

@section('content')
<section class="content-header">
    <h1 class="tw-text-xl md:tw-text-3xl tw-font-bold tw-text-black">
        <i class="bi bi-boxes"></i> Raw Materials Inventory
    </h1>
</section>

<section class="content">
    <div class="row">
        <!-- Summary Cards -->
        <div class="col-md-3">
            <div class="small-box bg-info">
                <div class="inner">
                    <h3>{{ $summary['total_materials'] ?? 0 }}</h3>
                    <p>Total Materials</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="small-box bg-warning">
                <div class="inner">
                    <h3>{{ $summary['warning_stock'] ?? 0 }}</h3>
                    <p>Low Stock Warning</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="small-box bg-danger">
                <div class="inner">
                    <h3>{{ $summary['low_stock'] ?? 0 }}</h3>
                    <p>Critical Stock</p>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="small-box bg-success">
                <div class="inner">
                    <h3>KES {{ number_format($summary['total_value'] ?? 0, 2) }}</h3>
                    <p>Total Inventory Value</p>
                </div>
            </div>
        </div>
    </div>
    
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover" id="inventoryTable">
                    <thead class="thead-light">
                        <tr>
                            <th>Code</th>
                            <th>Material</th>
                            <th>Category</th>
                            <th>Current Stock</th>
                            <th>Min Stock</th>
                            <th>Max Stock</th>
                            <th>Reorder Point</th>
                            <th>Status</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse($data as $material)
                        <tr>
                            <td><strong>{{ $material->material_code }}</strong></td>
                            <td>{{ $material->name }}</td>
                            <td>{{ $material->category }}</td>
                            <td>
                                <strong>{{ number_format($material->current_stock, 2) }}</strong>
                                <small>{{ $material->unit_of_measure }}</small>
                            </td>
                            <td>{{ number_format($material->minimum_stock_level, 2) }}</td>
                            <td>{{ number_format($material->maximum_stock_level, 2) }}</td>
                            <td>{{ number_format($material->reorder_point, 2) }}</td>
                            <td>
                                @php
                                    $status = $material->stock_status;
                                    $badgeClass = $status === 'success' ? 'success' : ($status === 'warning' ? 'warning' : 'danger');
                                @endphp
                                <span class="badge bg-{{ $badgeClass }}">
                                    {{ ucfirst($status) }}
                                </span>
                            </td>
                            <td>
                                <button class="btn btn-sm btn-info stockBtn" data-id="{{ $material->id }}" data-name="{{ $material->name }}">
                                    <i class="bi bi-eye"></i> View Batches
                                </button>
                                <button class="btn btn-sm btn-warning adjustBtn" data-id="{{ $material->id }}" data-name="{{ $material->name }}">
                                    <i class="bi bi-plus-minus"></i> Adjust
                                </button>
                            </td>
                        </tr>
                        @empty
                        <tr>
                            <td colspan="9" class="text-center py-4">No materials found</td>
                        </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>

<!-- Stock Adjustment Modal -->
<div class="modal fade" id="stockModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-warning">
                <h5 class="modal-title"><i class="bi bi-plus-minus"></i> Adjust Stock</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="stockForm" method="POST">
                @csrf
                <div class="modal-body">
                    <p>Adjusting stock for: <strong id="stockMaterialName"></strong></p>
                    <div class="form-group">
                        <label>Quantity</label>
                        <input type="number" name="quantity" class="form-control" step="0.01" min="0.01" required>
                    </div>
                    <div class="form-group">
                        <label>Type</label>
                        <select name="type" class="form-control" required>
                            <option value="add">Add Stock</option>
                            <option value="subtract">Subtract Stock</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label>Reason</label>
                        <input type="text" name="reason" class="form-control" placeholder="e.g., Stock take, Return, Damage">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-warning">Update Stock</button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
    document.querySelectorAll('.adjustBtn').forEach(btn => {
        btn.addEventListener('click', function() {
            const id = this.dataset.id;
            const name = this.dataset.name;
            document.getElementById('stockMaterialName').textContent = name;
            document.getElementById('stockForm').action = '/manufacturing/inventory/raw/' + id + '/update-stock';
            new bootstrap.Modal(document.getElementById('stockModal')).show();
        });
    });
</script>
@endpush
@endsection