<!-- Dashboard Header -->
<div class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="m-0 text-dark">Operations Dashboard</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="index.php">Home</a></li>
                    <li class="breadcrumb-item active">Dashboard</li>
                </ol>
            </div>
        </div>
    </div>
</div>

<!-- Main Content -->
<section class="content">
    <div class="container-fluid">
        
        <!-- Search/Filter Panel (Collapsed by Default) -->
        <div class="card collapsed-card card-outline card-primary shadow-sm">
            <div class="card-header">
                <h3 class="card-title"><i class="fas fa-filter text-primary mr-1"></i> Advanced Search Filters</h3>
                <div class="card-tools">
                    <button type="button" class="btn btn-tool" data-card-widget="collapse">
                        <i class="fas fa-plus"></i>
                    </button>
                </div>
            </div>
            <div class="card-body" style="display: none;">
                <form action="#" method="GET">
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Date Range</label>
                                <input type="date" class="form-control" name="filter_date">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Token / Serial No.</label>
                                <input type="text" class="form-control" placeholder="e.g. ABC-1234">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="form-group">
                                <label>Truck Number</label>
                                <input type="text" class="form-control" placeholder="e.g. KHI-9988">
                            </div>
                        </div>
                        <div class="col-md-3">
                            <label>&nbsp;</label>
                            <button type="submit" class="btn btn-primary btn-block"><i class="fas fa-search"></i> Search</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!-- Key Metrics Row -->
        <div class="row">
            <div class="col-lg-3 col-6">
                <div class="small-box bg-info shadow-sm">
                    <div class="inner">
                        <h3>142</h3>
                        <p>Total Trucks Today</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-truck"></i>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-6">
                <div class="small-box bg-success shadow-sm">
                    <div class="inner">
                        <h3>1,850</h3>
                        <p>Total Tonnage (Net)</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-weight-hanging"></i>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-6">
                <div class="small-box bg-warning shadow-sm">
                    <div class="inner">
                        <h3>12</h3>
                        <p>Active In-Transit Queue</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-hourglass-half"></i>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-6">
                <div class="small-box bg-danger shadow-sm">
                    <div class="inner">
                        <h3>3</h3>
                        <p>Alerts / Overweight</p>
                    </div>
                    <div class="icon">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Activity Table Placeholder -->
        <div class="card shadow-sm">
            <div class="card-header border-transparent">
                <h3 class="card-title">Live Station Activity</h3>
            </div>
            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table m-0 table-hover table-striped">
                        <thead>
                            <tr>
                                <th>Token ID</th>
                                <th>Truck No.</th>
                                <th>Block / Mine</th>
                                <th>Tare Weight (In)</th>
                                <th>Status</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><a href="#">ABC-1234</a></td>
                                <td>KHI-9988</td>
                                <td>Block A - Mine 2</td>
                                <td>4,500 kg</td>
                                <td><span class="badge badge-warning">Loading...</span></td>
                                <td><button class="btn btn-sm btn-primary">Process Out</button></td>
                            </tr>
                            <tr>
                                <td><a href="#">ABC-1235</a></td>
                                <td>LHR-5521</td>
                                <td>Block B - Mine 1</td>
                                <td>5,100 kg</td>
                                <td><span class="badge badge-warning">Loading...</span></td>
                                <td><button class="btn btn-sm btn-primary">Process Out</button></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</section>