@extends('layouts.app')

@section('title', 'M3 Integration')

@section('content')
    <div class="container-fluid py-4 module-page module-m3-integration">
        <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">M3 Integration</h1>
                                <p class="mb-0 opacity-75">Observe M3 transactions, delivery methods, close shipment calls, and API exchanges.</p>
                            </div>

                            <div class="module-hero-icon" aria-hidden="true">
                                <i class="bi bi-server"></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">M3 Transaction Log</h3>
                                <p class="small text-muted mb-0">Placeholder area for m3 transaction log.</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">M3 Delivery Methods</h3>
                                <p class="small text-muted mb-0">Placeholder area for m3 delivery methods.</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">Close Shipment API</h3>
                                <p class="small text-muted mb-0">Placeholder area for close shipment api.</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">M3 Error Queue</h3>
                                <p class="small text-muted mb-0">Placeholder area for m3 error 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">M3 Integration 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>Transaction</th>
                                        <th>Program</th>
                                        <th>Message</th>
                                        <th class="text-end">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>M3 Transaction Log</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>M3 Delivery Methods</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>Close Shipment API</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>M3 Error 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