@extends('admin.layouts.admin')

@section('title','Driver Earnings')
@section('page-title','Driver Earnings')

@section('content')

{{-- SUMMARY CARDS --}}
<div class="row g-3 mb-4">
    <div class="col-md-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <small class="text-muted">Total Earnings</small>
                <h4 class="mb-0 text-primary">LKR 185,450</h4>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <small class="text-muted">This Month</small>
                <h4 class="mb-0 text-success">LKR 42,800</h4>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <small class="text-muted">Pending Settlement</small>
                <h4 class="mb-0 text-warning">LKR 8,200</h4>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="card border-0 shadow-sm">
            <div class="card-body">
                <small class="text-muted">Completed Trips</small>
                <h4 class="mb-0">1,248</h4>
            </div>
        </div>
    </div>
</div>

{{-- FILTER BAR --}}
<div class="card border-0 shadow-sm mb-4">
    <div class="card-body d-flex flex-wrap gap-3 align-items-center">
        <strong class="me-auto">Earning History</strong>

        <select class="form-select form-select-sm w-auto">
            <option>This Month</option>
            <option>Last Month</option>
            <option>This Year</option>
        </select>

        <button class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-filetype-csv"></i> CSV
        </button>

        <button class="btn btn-sm btn-outline-secondary">
            <i class="bi bi-file-earmark-pdf"></i> PDF
        </button>
    </div>
</div>

{{-- EARNINGS TABLE --}}
<div class="card border-0 shadow-sm">
    <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
            <thead class="table-light">
                <tr>
                    <th>#</th>
                    <th>Date</th>
                    <th>Driver</th>
                    <th>Trips</th>
                    <th>Commission</th>
                    <th>Net Earning</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>

                <tr>
                    <td>1</td>
                    <td>12 Jun 2025</td>
                    <td>Kasun Perera</td>
                    <td>18</td>
                    <td>LKR 1,200</td>
                    <td><strong>LKR 6,800</strong></td>
                    <td>
                        <span class="badge bg-success">Settled</span>
                    </td>
                </tr>

                <tr>
                    <td>2</td>
                    <td>13 Jun 2025</td>
                    <td>Nimal Silva</td>
                    <td>14</td>
                    <td>LKR 950</td>
                    <td><strong>LKR 5,100</strong></td>
                    <td>
                        <span class="badge bg-warning">Pending</span>
                    </td>
                </tr>

                <tr>
                    <td>3</td>
                    <td>14 Jun 2025</td>
                    <td>Ruwan Fernando</td>
                    <td>21</td>
                    <td>LKR 1,450</td>
                    <td><strong>LKR 8,300</strong></td>
                    <td>
                        <span class="badge bg-success">Settled</span>
                    </td>
                </tr>

            </tbody>
        </table>
    </div>
</div>

@endsection