@extends('layouts.app-mobile-team')
@section('title', 'My Visits — Team Member')
@section('apptitle', 'My Visits')

@section('content')

<div class="app-tab-row">
    <a href="{{ route('tm.visits', ['tab' => 'upcoming']) }}" class="app-tab {{ $tab === 'upcoming' ? 'active' : '' }}">Upcoming</a>
    <a href="{{ route('tm.visits', ['tab' => 'today']) }}" class="app-tab {{ $tab === 'today' ? 'active' : '' }}">Today</a>
    <a href="{{ route('tm.visits', ['tab' => 'completed']) }}" class="app-tab {{ $tab === 'completed' ? 'active' : '' }}">Completed</a>
</div>

<div class="app-section app-pad">
    @if($visits->count())
        @foreach($visits as $v)
            <a href="{{ route('tm.visit', $v) }}" class="visit-card">
                <div class="vc-date">
                    <strong>{{ $v->scheduled_date->format('d') }}</strong>
                    <span>{{ $v->scheduled_date->format('M') }}</span>
                    <span class="vc-day">{{ $v->scheduled_date->format('D') }}</span>
                </div>
                <div class="vc-body">
                    <div class="vc-top">
                        <span class="visit-pill visit-pill-{{ $v->attendance_status }}">{{ ucfirst(str_replace('_',' ',$v->attendance_status ?? 'pending')) }}</span>
                        <span class="vc-time">{{ $v->scheduled_slot }}</span>
                    </div>
                    <strong class="vc-svc">{{ $v->booking->service->name ?? 'Service' }}</strong>
                    <div class="vc-meta">
                        <span>📍 {{ $v->booking->area->name ?? '—' }}</span>
                        <span>👤 {{ $v->booking->customer->name ?? 'Customer' }}</span>
                    </div>
                </div>
                <span class="vc-arrow">›</span>
            </a>
        @endforeach
        <div class="app-pagination">{{ $visits->links() }}</div>
    @else
        <div class="empty-app">
            <div class="ea-ic">📅</div>
            <h3>No {{ $tab }} visits</h3>
            <p>No visits in this category yet.</p>
        </div>
    @endif
</div>
@endsection
