@extends('layouts.app')

@section('title', 'Inventory Management')

@section('content')
    <div class="container-fluid py-4 module-page module-inventory-management">
        <div class="row g-4">
            <div class="col-12">
                <section class="card border-0 shadow-sm overflow-hidden">
                    <div class="card-header border-0 text-white module-hero">
                        <div class="d-flex flex-column flex-lg-row align-items-lg-center justify-content-between gap-3">
                            <div>
                                <div class="small text-uppercase opacity-75 fw-semibold mb-2">Replacement module</div>
                                <h1 class="h2 fw-bold mb-2">Inventory Management</h1>
                                <p class="mb-0 opacity-75">Track inventory movement, stock visibility, pallet quantities, and product availability.</p>
                            </div>

                            <div class="module-hero-icon" aria-hidden="true">
                                <i class="bi bi-boxes"></i>
                            </div>
                        </div>
                    </div>
                </section>
            </div>

                    <div class="col-md-6 col-xl-3">
                        <div class="card h-100 border-0 shadow-sm module-metric-card">
                            <div class="card-body">
                                <div class="small text-uppercase text-muted fw-semibold mb-2">01</div>
                                <h3 class="h6 mb-2">Stock Overview</h3>
                                <p class="small text-muted mb-0">Placeholder area for stock overview.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-xl-3">
                        <div class="card h-100 border-0 shadow-sm module-metric-card">
                            <div class="card-body">
                                <div class="small text-uppercase text-muted fw-semibold mb-2">02</div>
                                <h3 class="h6 mb-2">Pallet Quantity Rules</h3>
                                <p class="small text-muted mb-0">Placeholder area for pallet quantity rules.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-xl-3">
                        <div class="card h-100 border-0 shadow-sm module-metric-card">
                            <div class="card-body">
                                <div class="small text-uppercase text-muted fw-semibold mb-2">03</div>
                                <h3 class="h6 mb-2">Inventory Exceptions</h3>
                                <p class="small text-muted mb-0">Placeholder area for inventory exceptions.</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 col-xl-3">
                        <div class="card h-100 border-0 shadow-sm module-metric-card">
                            <div class="card-body">
                                <div class="small text-uppercase text-muted fw-semibold mb-2">04</div>
                                <h3 class="h6 mb-2">Product Movement</h3>
                                <p class="small text-muted mb-0">Placeholder area for product movement.</p>
                            </div>
                        </div>
                    </div>

            <div class="col-12">
                <section class="card border-0 shadow-sm">
                    <div class="card-header bg-white border-bottom">
                        <div class="d-flex flex-column flex-md-row justify-content-between gap-2">
                            <div>
                                <h2 class="h5 mb-1">Inventory Management workbench</h2>
                                <p class="small text-muted mb-0">Sample table layout ready to wire into controllers, queries, DataTables, or Livewire.</p>
                            </div>

                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-outline-secondary btn-sm">Export</button>
                                <button type="button" class="btn btn-primary btn-sm">Create</button>
                            </div>
                        </div>
                    </div>

                    <div class="card-body">
                        <div class="table-responsive">
                            <table class="table table-hover align-middle mb-0">
                                <thead class="table-light">
                                    <tr>
                                        <th>Part Number</th>
                                        <th>Description</th>
                                        <th>Pallet Qty</th>
                                        <th class="text-end">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Stock Overview</td>
                                        <td>Sample 1</td>
                                        <td><span class="badge bg-success-subtle text-success border border-success-subtle">Active</span></td>
                                        <td class="text-end"><a href="#" class="btn btn-sm btn-outline-primary">Open</a></td>
                                    </tr>
                                    <tr>
                                        <td>Pallet Quantity Rules</td>
                                        <td>Sample 2</td>
                                        <td><span class="badge bg-success-subtle text-success border border-success-subtle">Active</span></td>
                                        <td class="text-end"><a href="#" class="btn btn-sm btn-outline-primary">Open</a></td>
                                    </tr>
                                    <tr>
                                        <td>Inventory Exceptions</td>
                                        <td>Sample 3</td>
                                        <td><span class="badge bg-success-subtle text-success border border-success-subtle">Active</span></td>
                                        <td class="text-end"><a href="#" class="btn btn-sm btn-outline-primary">Open</a></td>
                                    </tr>
                                    <tr>
                                        <td>Product Movement</td>
                                        <td>Sample 4</td>
                                        <td><span class="badge bg-success-subtle text-success border border-success-subtle">Active</span></td>
                                        <td class="text-end"><a href="#" class="btn btn-sm btn-outline-primary">Open</a></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </section>
            </div>
        </div>
    </div>
@endsection