@extends('layouts.app')

@section('title', 'Reporting')

@section('content')
    <div class="container-fluid py-4 module-page module-reporting">
        <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">Reporting</h1>
                                <p class="mb-0 opacity-75">Provide operational reports for closed orders, user efficiency, and transaction history.</p>
                            </div>

                            <div class="module-hero-icon" aria-hidden="true">
                                <i class="bi bi-bar-chart"></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">Closed Order Lines</h3>
                                <p class="small text-muted mb-0">Placeholder area for closed order lines.</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">Daily User Efficiency</h3>
                                <p class="small text-muted mb-0">Placeholder area for daily user efficiency.</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">Export Centre</h3>
                                <p class="small text-muted mb-0">Placeholder area for export centre.</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">Report Filters</h3>
                                <p class="small text-muted mb-0">Placeholder area for report filters.</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">Reporting 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>Report</th>
                                        <th>Period</th>
                                        <th>Rows</th>
                                        <th class="text-end">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Closed Order Lines</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>Daily User Efficiency</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>Export Centre</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>Report Filters</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