@extends('business.layouts.app')

@section('content')
<main class="main-content">
        <div class="glass-nav d-flex justify-content-between align-items-center">
            <div>
                <button class="btn btn-white shadow-sm border d-lg-none me-2" @click="sidebarOpen = true">
                    <i class="bi bi-list"></i>
                </button>
                <h4 class="fw-800 mb-0">Fleet Intelligence</h4>
            </div>
            <div class="d-flex align-items-center gap-3">
                <div class="input-group d-none d-md-flex" style="width: 250px;">
                    <span class="input-group-text bg-white border-end-0 border-0 shadow-sm"><i class="bi bi-search text-muted"></i></span>
                    <input type="text" class="form-control border-start-0 border-0 shadow-sm" placeholder="Search trips...">
                </div>
                <button class="btn btn-vway shadow-sm px-4 rounded-pill">
                    <i class="bi bi-plus-lg me-2"></i> New Trip
                </button>
            </div>
        </div>

        <div class="row g-4 mb-4">
            <div class="col-xl-3 col-md-6">
                <div class="bento-card">
                    <div class="icon-box bg-primary bg-opacity-10 text-primary">
                        <i class="bi bi-lightning-charge-fill"></i>
                    </div>
                    <span class="text-muted small fw-600">Total Enquiries</span>
                    <div class="d-flex align-items-end gap-2">
                        <h2 class="fw-800 mb-0 mt-1">1,284</h2>
                        <span class="text-success small fw-bold mb-1"><i class="bi bi-graph-up"></i> 14%</span>
                    </div>
                </div>
            </div>
            <div class="col-xl-3 col-md-6">
                <div class="bento-card">
                    <div class="icon-box" style="background: #e0f2fe; color: #0369a1;">
                        <i class="bi bi-signpost-2-fill"></i>
                    </div>
                    <span class="text-muted small fw-600">Active Trips</span>
                    <h2 class="fw-800 mb-0 mt-1">42</h2>
                    <div class="progress mt-3">
                        <div class="progress-bar" style="width: 65%; background: var(--vway-blue);"></div>
                    </div>
                </div>
            </div>
            <div class="col-xl-6 col-md-12">
                <div class="bento-card bg-dark text-white">
                    <div class="d-flex justify-content-between">
                        <div>
                            <span class="text-white-50 small fw-600">Account Balance</span>
                            <h2 class="fw-800 mt-1 text-white">₹12,45,000.00</h2>
                        </div>
                        <div class="text-end">
                            <span class="badge bg-primary">Monthly Target: 85%</span>
                        </div>
                    </div>
                    <div class="row mt-4 pt-2 border-top border-secondary">
                        <div class="col-6">
                            <p class="small text-white-50 mb-0">Total Purchases</p>
                            <p class="fw-bold mb-0 text-danger">₹2.4L</p>
                        </div>
                        <div class="col-6">
                            <p class="small text-white-50 mb-0">Net Expenses</p>
                            <p class="fw-bold mb-0 text-warning">₹1.1L</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row g-4">
            <div class="col-lg-8">
                <div class="bento-card">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h5 class="fw-800 mb-0">Recent Fleet Activity</h5>
                        <div class="dropdown">
                            <button class="btn btn-light btn-sm rounded-pill px-3" data-bs-toggle="dropdown">All Vehicles <i class="bi bi-chevron-down ms-1"></i></button>
                        </div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-hover align-middle">
                            <thead class="text-muted small text-uppercase bg-light bg-opacity-50">
                                <tr>
                                    <th class="border-0 ps-3">Trip ID</th>
                                    <th class="border-0">Driver & Vehicle</th>
                                    <th class="border-0">Route</th>
                                    <th class="border-0">Status</th>
                                    <th class="border-0 text-end pe-3">Action</th>
                                </tr>
                            </thead>
                            <tbody class="border-top-0">
                                <tr>
                                    <td class="ps-3 fw-bold">#VW-102</td>
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="small fw-bold">Ravi Kumar</div>
                                            <span class="badge bg-light text-dark border">TN-38-9901</span>
                                        </div>
                                    </td>
                                    <td class="small text-muted">Coimbatore → Chennai</td>
                                    <td><span class="status-badge bg-primary bg-opacity-10 text-primary">In Transit</span></td>
                                    <td class="text-end pe-3"><button class="btn btn-sm btn-light"><i class="bi bi-eye"></i></button></td>
                                </tr>
                                <tr>
                                    <td class="ps-3 fw-bold">#VW-101</td>
                                    <td>
                                        <div class="d-flex align-items-center gap-2">
                                            <div class="small fw-bold">Senthil V.</div>
                                            <span class="badge bg-light text-dark border">TN-37-2204</span>
                                        </div>
                                    </td>
                                    <td class="small text-muted">Salem → Bangalore</td>
                                    <td><span class="status-badge bg-success bg-opacity-10 text-success">Arrived</span></td>
                                    <td class="text-end pe-3"><button class="btn btn-sm btn-light"><i class="bi bi-eye"></i></button></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <div class="col-lg-4">
                <div class="bento-card">
                    <h5 class="fw-800 mb-4">Vehicle Health</h5>
                    <div class="d-flex align-items-center gap-3 mb-4">
                        <div class="icon-box mb-0 bg-success bg-opacity-10 text-success" style="width:40px; height:40px; font-size:1rem;">
                            <i class="bi bi-check-circle-fill"></i>
                        </div>
                        <div class="flex-grow-1">
                            <div class="d-flex justify-content-between mb-1">
                                <span class="small fw-bold">Operational</span>
                                <span class="small text-muted">112 / 120</span>
                            </div>
                            <div class="progress"><div class="progress-bar bg-success" style="width: 93%"></div></div>
                        </div>
                    </div>
                    <div class="d-flex align-items-center gap-3 mb-4">
                        <div class="icon-box mb-0 bg-warning bg-opacity-10 text-warning" style="width:40px; height:40px; font-size:1rem;">
                            <i class="bi bi-tools"></i>
                        </div>
                        <div class="flex-grow-1">
                            <div class="d-flex justify-content-between mb-1">
                                <span class="small fw-bold">Under Service</span>
                                <span class="small text-muted">8 / 120</span>
                            </div>
                            <div class="progress"><div class="progress-bar bg-warning" style="width: 7%"></div></div>
                        </div>
                    </div>
                    
                    <div class="p-3 rounded-4 bg-light mt-2 border">
                        <p class="small text-muted mb-2"><i class="bi bi-info-circle me-1"></i> Maintenance Alert</p>
                        <p class="small fw-bold mb-0">3 Vehicles are due for insurance renewal this week.</p>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection