@extends('layouts.admin')
@section('title', 'Dashboard')
@section('header', 'Dashboard Overview')

@push('styles')
<style>
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 24px;
        margin-bottom: 32px;
    }
    
    .stat-card {
        padding: 24px;
        display: flex;
        align-items: center;
        gap: 16px;
    }

    .stat-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        background: rgba(162, 25, 44, 0.1);
        color: var(--crimson);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .stat-icon svg {
        width: 24px;
        height: 24px;
    }

    .stat-details h3 {
        font-size: 14px;
        color: var(--text-light);
        font-weight: 500;
        margin-bottom: 4px;
    }

    .stat-details p {
        font-size: 24px;
        font-weight: 700;
        color: var(--navy);
    }

</style>
@endpush

@section('content')
<div class="stats-grid">
    <div class="card stat-card">
        <div class="stat-icon">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
        </div>
        <div class="stat-details">
            <h3>Total Revenue</h3>
            <p>$124,500</p>
        </div>
    </div>
    
    <div class="card stat-card">
        <div class="stat-icon">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
        </div>
        <div class="stat-details">
            <h3>Active Machines</h3>
            <p>42</p>
        </div>
    </div>
    
    <div class="card stat-card">
        <div class="stat-icon">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
        </div>
        <div class="stat-details">
            <h3>New Clients</h3>
            <p>18</p>
        </div>
    </div>
    
    <div class="card stat-card">
        <div class="stat-icon">
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path></svg>
        </div>
        <div class="stat-details">
            <h3>Active Projects</h3>
            <p>7</p>
        </div>
    </div>
</div>

<div class="recent-activity">
    <h2>Recent Quotes & Enquiries</h2>
    <table class="table">
        <thead>
            <tr>
                <th>Client Name</th>
                <th>Service Required</th>
                <th>Date</th>
                <th>Status</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Acme Construction</td>
                <td>Excavator Hire</td>
                <td>Oct 24, 2026</td>
                <td><span class="badge pending">Pending</span></td>
            </tr>
            <tr>
                <td>Global Build Ltd</td>
                <td>Civil Engineering</td>
                <td>Oct 22, 2026</td>
                <td><span class="badge completed">Completed</span></td>
            </tr>
            <tr>
                <td>Nexus Mining</td>
                <td>Wheel Loaders</td>
                <td>Oct 20, 2026</td>
                <td><span class="badge completed">Completed</span></td>
            </tr>
            <tr>
                <td>City Roads Dept</td>
                <td>Road Maintenance</td>
                <td>Oct 18, 2026</td>
                <td><span class="badge pending">Pending</span></td>
            </tr>
        </tbody>
    </table>
</div>
@endsection