# Story 7.6: Booking Limit Indicator

## Epic Reference
**Epic 7:** Client Dashboard

## Dependencies
- **Story 7.5:** New Booking Interface (provides booking page where indicator displays)
- **Story 3.3:** Availability Calendar (calendar component to integrate with)

## User Story
As a **client**,
I want **to see my booking status and limits clearly**,
So that **I understand when I can book consultations**.

## Acceptance Criteria

### Display Locations
- [ ] Dashboard widget showing booking status
- [ ] Booking page status banner

### Status Messages
- [ ] "You can book a consultation today" (when no booking exists for today)
- [ ] "You already have a booking for today" (when pending/approved booking exists for today)
- [ ] "You have a pending request for [date]" (shows first pending request date)

### Calendar Integration
- [ ] Pass `bookedDates` array to availability calendar component
- [ ] Calendar marks user's booked dates as unavailable (distinct styling)
- [ ] Visual indicator differentiates "user already booked" from "no slots available"

### Information
- [ ] Clear messaging about 1-per-day limit
- [ ] Bilingual messages (Arabic/English)

### Edge Cases
- [ ] Handle multiple pending requests (show count or list)
- [ ] Handle cancelled bookings (should not block new booking)
- [ ] Loading state while fetching booking status

## Technical Notes

### Files to Create
- `resources/views/livewire/client/booking-status.blade.php` - Reusable status component

### Files to Modify
- `resources/views/livewire/client/dashboard.blade.php` - Add booking status widget
- `resources/views/livewire/client/booking.blade.php` - Add status banner (from Story 7.5)
- `resources/lang/en/booking.php` - Add translation keys
- `resources/lang/ar/booking.php` - Add translation keys

### Component Implementation

```php
<?php

use Livewire\Volt\Component;

new class extends Component {
    public function getBookingStatus(): array
    {
        $user = auth()->user();

        $todayBooking = $user->consultations()
            ->whereDate('scheduled_date', today())
            ->whereIn('status', ['pending', 'approved'])
            ->first();

        $pendingRequests = $user->consultations()
            ->where('status', 'pending')
            ->where('scheduled_date', '>=', today())
            ->orderBy('scheduled_date')
            ->get();

        $upcomingApproved = $user->consultations()
            ->where('status', 'approved')
            ->where('scheduled_date', '>=', today())
            ->get();

        return [
            'canBookToday' => is_null($todayBooking),
            'todayBooking' => $todayBooking,
            'pendingRequests' => $pendingRequests,
            'upcomingApproved' => $upcomingApproved,
            'bookedDates' => $user->consultations()
                ->whereIn('status', ['pending', 'approved'])
                ->where('scheduled_date', '>=', today())
                ->pluck('scheduled_date')
                ->map(fn($d) => $d->format('Y-m-d'))
                ->toArray(),
        ];
    }

    public function with(): array
    {
        return $this->getBookingStatus();
    }
}; ?>

<div>
    <!-- Template below -->
</div>
```

### Template

```blade
<div class="bg-cream rounded-lg p-4">
    {{-- Loading State --}}
    <div wire:loading class="animate-pulse">
        <div class="h-5 bg-charcoal/20 rounded w-3/4"></div>
    </div>

    <div wire:loading.remove>
        @if($canBookToday)
            <div class="flex items-center gap-2 text-success">
                <flux:icon name="check-circle" class="w-5 h-5" />
                <span>{{ __('booking.can_book_today') }}</span>
            </div>
        @else
            <div class="flex items-center gap-2 text-warning">
                <flux:icon name="exclamation-circle" class="w-5 h-5" />
                <span>{{ __('booking.already_booked_today') }}</span>
            </div>
        @endif

        @if($pendingRequests->isNotEmpty())
            <div class="mt-2 text-sm text-charcoal/70">
                @if($pendingRequests->count() === 1)
                    <p>{{ __('booking.pending_for_date', ['date' => $pendingRequests->first()->scheduled_date->format('d/m/Y')]) }}</p>
                @else
                    <p>{{ __('booking.pending_count', ['count' => $pendingRequests->count()]) }}</p>
                    <ul class="mt-1 list-disc list-inside">
                        @foreach($pendingRequests->take(3) as $request)
                            <li>{{ $request->scheduled_date->format('d/m/Y') }}</li>
                        @endforeach
                    </ul>
                @endif
            </div>
        @endif

        <p class="mt-2 text-sm text-charcoal/70">
            {{ __('booking.limit_message') }}
        </p>
    </div>
</div>
```

### Translation Keys

```php
// resources/lang/en/booking.php
return [
    'can_book_today' => 'You can book a consultation today',
    'already_booked_today' => 'You already have a booking for today',
    'pending_for_date' => 'You have a pending request for :date',
    'pending_count' => 'You have :count pending requests',
    'limit_message' => 'Note: You can book a maximum of 1 consultation per day.',
];

// resources/lang/ar/booking.php
return [
    'can_book_today' => 'يمكنك حجز استشارة اليوم',
    'already_booked_today' => 'لديك حجز بالفعل لهذا اليوم',
    'pending_for_date' => 'لديك طلب معلق بتاريخ :date',
    'pending_count' => 'لديك :count طلبات معلقة',
    'limit_message' => 'ملاحظة: يمكنك حجز استشارة واحدة كحد أقصى في اليوم.',
];
```

### Calendar Integration

Pass `bookedDates` to the availability calendar from Story 3.3:

```blade
{{-- In booking page --}}
<livewire:availability-calendar :disabled-dates="$bookedDates" />
```

The calendar should style user's booked dates differently (e.g., with a badge or distinct color) from dates with no available slots.

## Test Scenarios

### Unit Tests
- `getBookingStatus()` returns correct structure
- `canBookToday` is true when no booking exists for today
- `canBookToday` is false when pending booking exists for today
- `canBookToday` is false when approved booking exists for today
- Cancelled bookings do not affect `canBookToday`
- `bookedDates` only includes pending and approved bookings

### Feature Tests
- Status displays "can book today" message for new users
- Status displays "already booked" when user has today's booking
- Status displays pending request date correctly
- Multiple pending requests display count and dates
- Component renders on dashboard page
- Component renders on booking page
- Messages display correctly in Arabic locale
- Messages display correctly in English locale

### Browser Tests (optional)
- Calendar visually shows user's booked dates as unavailable
- Status updates after successful booking submission

## References
- **PRD Section 5.8:** Client Dashboard - Booking limit status requirement
- **PRD Section 5.4:** "Maximum 1 consultation per client per day"
- **Epic 7 Success Criteria:** "Booking limit enforcement (1 per day)"

## Definition of Done
- [ ] Booking status component created
- [ ] Status displays on dashboard
- [ ] Status displays on booking page
- [ ] Calendar highlights user's booked dates
- [ ] Messages are accurate for all states
- [ ] Bilingual support (AR/EN)
- [ ] Loading state implemented
- [ ] Edge cases handled (multiple pending, cancelled)
- [ ] Unit tests pass
- [ ] Feature tests pass
- [ ] Code formatted with Pint

## Estimation
**Complexity:** Low | **Effort:** 2-3 hours