@extends('customer.dashboard.layout')

@section('title', 'Dashboard')

@section('content')
<div class="row mb-4">
    <div class="col-12">
        <h2 class="mb-1">Welcome back, {{ $customer->name }}!</h2>
        <p class="text-muted">Here's an overview of your account activity</p>
    </div>
</div>

<!-- Statistics Cards -->
<div class="row g-3 mb-4">
    <div class="col-md-3">
        <div class="content-card text-center">
            <div class="mb-2" style="color: #667eea; font-size: 32px;">
                <i class="bi bi-bag-check"></i>
            </div>
            <h3 class="h2 mb-1">{{ $stats['total_orders'] }}</h3>
            <p class="text-muted mb-0">Total Orders</p>
        </div>
    </div>

    <div class="col-md-3">
        <div class="content-card text-center">
            <div class="mb-2" style="color: #28a745; font-size: 32px;">
                <i class="bi bi-calendar-check"></i>
            </div>
            <h3 class="h2 mb-1">{{ $stats['total_bookings'] }}</h3>
            <p class="text-muted mb-0">Total Bookings</p>
        </div>
    </div>

    <div class="col-md-3">
        <div class="content-card text-center">
            <div class="mb-2" style="color: #764ba2; font-size: 32px;">
                <i class="bi bi-arrow-repeat"></i>
            </div>
            <h3 class="h2 mb-1">{{ $stats['active_subscriptions'] }}</h3>
            <p class="text-muted mb-0">Active Subscriptions</p>
        </div>
    </div>

    <div class="col-md-3">
        <div class="content-card text-center">
            <div class="mb-2" style="color: #ffc107; font-size: 32px;">
                <i class="bi bi-currency-dollar"></i>
            </div>
            <h3 class="h2 mb-1">RM {{ number_format($stats['total_spent'], 2) }}</h3>
            <p class="text-muted mb-0">Total Spent</p>
        </div>
    </div>
</div>

<!-- Recent Orders -->
@if($recentOrders->count() > 0)
<div class="content-card mb-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="mb-0">Recent Orders</h2>
        <a href="{{ route('customer.orders', $subdomain) }}" class="btn btn-sm btn-outline-primary">
            View All Orders <i class="bi bi-arrow-right"></i>
        </a>
    </div>

    <div class="table-responsive">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Order #</th>
                    <th>Date</th>
                    <th>Items</th>
                    <th>Total</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($recentOrders as $order)
                <tr>
                    <td>
                        <strong>{{ $order->order_number }}</strong>
                    </td>
                    <td>{{ $order->created_at->format('M d, Y') }}</td>
                    <td>{{ $order->orderItems->count() }} item(s)</td>
                    <td><strong>RM {{ number_format($order->total_amount, 2) }}</strong></td>
                    <td>
                        <span class="badge bg-{{ $order->status === 'completed' ? 'success' : ($order->status === 'pending' ? 'warning' : 'secondary') }}">
                            {{ ucfirst($order->status) }}
                        </span>
                    </td>
                    <td>
                        <a href="{{ route('customer.orders.show', [$subdomain, $order->id]) }}"
                           class="btn btn-sm btn-outline-primary">
                            <i class="bi bi-eye"></i> View
                        </a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@else
<div class="content-card mb-4 text-center py-5">
    <i class="bi bi-bag text-muted" style="font-size: 48px;"></i>
    <h3 class="mt-3 mb-2">No Orders Yet</h3>
    <p class="text-muted">Start shopping to see your orders here</p>
    <a href="/products" class="btn btn-primary mt-2">
        <i class="bi bi-shop"></i> Browse Products
    </a>
</div>
@endif

<!-- Recent Bookings -->
@if($recentBookings->count() > 0)
<div class="content-card">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <h2 class="mb-0">Recent Bookings</h2>
        <a href="{{ route('customer.bookings', $subdomain) }}" class="btn btn-sm btn-outline-primary">
            View All Bookings <i class="bi bi-arrow-right"></i>
        </a>
    </div>

    <div class="table-responsive">
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>Booking #</th>
                    <th>Resource</th>
                    <th>Date</th>
                    <th>Time</th>
                    <th>Total</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                @foreach($recentBookings as $booking)
                <tr>
                    <td>
                        <strong>{{ $booking->booking_reference }}</strong>
                    </td>
                    <td>{{ $booking->resource->name ?? 'N/A' }}</td>
                    <td>{{ \Carbon\Carbon::parse($booking->booking_date)->format('M d, Y') }}</td>
                    <td>{{ \Carbon\Carbon::parse($booking->start_time)->format('g:i A') }}</td>
                    <td><strong>RM {{ number_format($booking->total_price, 2) }}</strong></td>
                    <td>
                        <span class="badge bg-{{ $booking->status === 'confirmed' ? 'success' : ($booking->status === 'pending' ? 'warning' : 'secondary') }}">
                            {{ ucfirst($booking->status) }}
                        </span>
                    </td>
                    <td>
                        <a href="{{ route('customer.bookings.show', [$subdomain, $booking->id]) }}"
                           class="btn btn-sm btn-outline-primary">
                            <i class="bi bi-eye"></i> View
                        </a>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>
@elseif($recentOrders->count() === 0)
<div class="content-card text-center py-5">
    <i class="bi bi-calendar-check text-muted" style="font-size: 48px;"></i>
    <h3 class="mt-3 mb-2">No Bookings Yet</h3>
    <p class="text-muted">Book a service to see your bookings here</p>
</div>
@endif
@endsection