@extends('layouts.contentLayoutMaster')
@section('title','My Appointments')

@section('content')
<div class="container py-3">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">My Appointments</h4>
    <a href="{{ route('client.appointments.create') }}" class="btn btn-primary">Schedule with My Agent</a>
  </div>

  @if(session('success')) <div class="alert alert-success">{{ session('success') }}</div> @endif

  <div class="table-responsive">
    <table class="table table-striped align-middle">
      <thead>
        <tr>
          <th>When</th>
          <th>Title</th>
          <th>Agent</th>
          <th>Status</th>
          <th>Location</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        @forelse($appointments as $a)
          <tr>
            <td>{{ $a->starts_at->format('M d, Y g:i A') }}</td>
            <td>{{ $a->title }}</td>
            <td>{{ optional($a->agent)->first_name }} {{ optional($a->agent)->last_name }}</td>
            <td><span class="badge bg-{{ $a->status === 'confirmed' ? 'success' : ($a->status === 'pending' ? 'warning' : 'secondary') }}">{{ ucfirst($a->status) }}</span></td>
            <td>{{ $a->location ?: '—' }}</td>
            <td>
              @if($a->status === 'pending')
                <form method="POST" action="{{ route('client.appointments.confirm', $a) }}">
                  @csrf
                  <button class="btn btn-sm btn-success">Confirm</button>
                </form>
              @else
                <span class="text-muted">—</span>
              @endif
            </td>
          </tr>
        @empty
          <tr><td colspan="6" class="text-muted">No appointments yet.</td></tr>
        @endforelse
      </tbody>
    </table>
  </div>

  {{ $appointments->links() }}
</div>
@endsection