@extends('layouts.app')

@section('title', 'Replenishment')

@section('content')
    <div class="container-fluid py-4 module-page module-replenishment">
        <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">Replenishment</h1>
                                <p class="mb-0 opacity-75">Configure replenishment thresholds, review stock gaps, and monitor refill activity.</p>
                            </div>

                            <div class="module-hero-icon" aria-hidden="true">
                                <i class="bi bi-arrow-repeat"></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">Replenishment Rules</h3>
                                <p class="small text-muted mb-0">Placeholder area for replenishment 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">02</div>
                                <h3 class="h6 mb-2">Minimum Stock</h3>
                                <p class="small text-muted mb-0">Placeholder area for minimum stock.</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">Suggested Transfers</h3>
                                <p class="small text-muted mb-0">Placeholder area for suggested transfers.</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">Exception Queue</h3>
                                <p class="small text-muted mb-0">Placeholder area for exception queue.</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">Replenishment 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>Item</th>
                                        <th>Minimum</th>
                                        <th>Current</th>
                                        <th class="text-end">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Replenishment Rules</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>Minimum Stock</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>Suggested Transfers</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>Exception Queue</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