@extends('customer.layouts.app')

@section('title', 'Dashboard')

@section('content')
<div class="welcome-card">
    <div>
        <span class="eyebrow">Customer dashboard</span>
        <h1>Welcome, {{ $customer->customer_name }}!</h1>
        <p>Your account is ready. Your bookings, quotations, service reports and invoices will appear here as we add the next modules.</p>
    </div>
    <div class="welcome-mark"><i class="fa-solid fa-house-shield"></i></div>
</div>

<div class="stat-grid">
    <article class="stat-card">
        <span class="stat-icon green-bg"><i class="fa-regular fa-calendar-check"></i></span>
        <div><small>Upcoming services</small><strong>0</strong></div>
    </article>
    <article class="stat-card">
        <span class="stat-icon amber-bg"><i class="fa-regular fa-file-lines"></i></span>
        <div><small>Pending quotations</small><strong>0</strong></div>
    </article>
    <article class="stat-card">
        <span class="stat-icon blue-bg"><i class="fa-solid fa-receipt"></i></span>
        <div><small>Pending invoices</small><strong>0</strong></div>
    </article>
</div>

<div class="dashboard-grid">
    <article class="content-card">
        <div class="card-heading">
            <div><span class="eyebrow green">Account</span><h2>Your details</h2></div>
            <span class="status-pill"><i class="fa-solid fa-circle-check"></i> Active</span>
        </div>
        <div class="profile-list">
            <div><i class="fa-regular fa-envelope"></i><span><small>Email</small>{{ $customer->email }}</span></div>
            <div><i class="fa-solid fa-phone"></i><span><small>Mobile</small>{{ $customer->mobile }}</span></div>
            <div><i class="fa-solid fa-location-dot"></i><span><small>Service address</small>{{ $customer->address }}, {{ $customer->city }}, {{ $customer->state }} - {{ $customer->pincode }}</span></div>
        </div>
    </article>
    <article class="content-card empty-card">
        <span class="empty-icon"><i class="fa-solid fa-spray-can-sparkles"></i></span>
        <h2>No services yet</h2>
        <p>Your upcoming pest-control bookings will appear here.</p>
        <span class="coming-pill">Service requests coming next</span>
    </article>
</div>
@endsection