{{-- resources/views/agent/appointments/index.blade.php --}}
@extends('layouts.contentLayoutMaster')
@section('title','My Appointments')

@section('content')
@php
    use Illuminate\Support\Facades\Route as R;
@endphp

<div class="container py-3 mt-4"> {{-- Added mt-4 for more top margin --}}

  {{-- Header with optional "for {Client Name}" --}}
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="mb-0">
      My Appointments
      @isset($activeClient)
        @php
          $activeName = $activeClient->name
            ?? trim(($activeClient->first_name ?? '').' '.($activeClient->last_name ?? ''));
        @endphp
        <small class="text-muted">for {{ $activeName }}</small>
      @endisset
    </h4>

    <div class="d-flex gap-2">
      {{-- Status Update Dropdown and Save (unchanged) --}}
      <form id="bulk-status-form" action="{{ route('agent.appointments.bulkStatus') }}" method="POST" class="d-flex align-items-center me-3">
        @csrf
        <select name="status" class="form-select form-select-sm me-2" required>
          <option value="">Update Status</option>
          <option value="no show">No Show</option>
          <option value="completed">Completed</option>
          <option value="cancelled">Cancelled</option>
          <option value="pending">Pending</option>
          <option value="confirmed">Confirmed</option>
        </select>
        <button type="submit" class="btn btn-sm btn-success">Save</button>
      </form>


      @isset($activeClient)
        <a href="{{ route('agent.appointments.index') }}" class="btn btn-sm btn-outline-secondary">
          Clear Filter
        </a>
      @endisset
      <a href="{{ route('agent.appointments.create', request()->only('client_id')) }}" class="btn btn-sm btn-primary">
        Schedule Appointment
      </a>
    </div>
  </div>

  <div class="table-responsive">
    <table class="table table-striped align-middle">
      <thead>
        <tr>
          <th><input type="checkbox" id="bulkCheckAll" /></th>
          <th>When</th>
          <th>Title</th>
          <th>Client</th>
          <th>Status</th>
          <th>Location</th>
          {{-- Narrowed Actions column --}}
          <th style="width:1%; white-space:nowrap;">Actions</th>
        </tr>
      </thead>
      <tbody>
        @forelse($appointments as $a)
          <tr>
            <td>
              <input type="checkbox" name="appointment_ids[]" value="{{ $a->id }}" form="bulk-status-form" class="bulk-check">
            </td>
            <td>{{ optional($a->starts_at)->format('M d, Y g:i A') }}</td>
            <td>{{ $a->title }}</td>
            <td>
              @php
                $client = $a->client;
                $clientName = $client?->name;
                if (!$clientName) {
                  $first = $client?->first_name ?? '';
                  $last  = $client?->last_name ?? '';
                  $clientName = trim("$first $last");
                }
              @endphp
              {{ $clientName !== '' ? $clientName : '—' }}
            </td>
            <td>
              @php
                $statusColors = [
                  'confirmed'  => 'success',
                  'pending'    => 'warning',
                  'cancelled'  => 'danger',
                  'no show'    => 'dark',
                  'completed'  => 'primary'
                ];
                $badgeColor = $statusColors[$a->status] ?? 'secondary';
              @endphp
              <span class="badge bg-{{ $badgeColor }}">
                {{ ucfirst($a->status) }}
              </span>
            </td>
            <td>{{ $a->location ?: '—' }}</td>
            <td class="text-nowrap">
              <div class="btn-group btn-group-sm" role="group">
                @if (R::has('agent.appointments.show'))
                  <a href="{{ route('agent.appointments.show', $a->id) }}" class="btn btn-outline-primary">View</a>
                @endif
                @if (R::has('agent.appointments.edit'))
                  <a href="{{ route('agent.appointments.edit', $a->id) }}" class="btn btn-outline-success">Edit</a>
                @endif
                @php $joinUrl = $a->meeting_url ?? null; @endphp
                @if ($joinUrl)
                  <a href="{{ $joinUrl }}" target="_blank" rel="noopener" class="btn btn-outline-secondary">Join</a>
                @endif

                {{-- Removed the "Client" button per request --}}

                {{-- Per-row Delete button using bulkDelete route --}}
                <form action="{{ route('agent.appointments.bulkDelete') }}"
                      method="POST"
                      class="d-inline"
                      onsubmit="return confirm('Delete this appointment? This cannot be undone.');">
                  @csrf
                  <input type="hidden" name="appointment_ids[]" value="{{ $a->id }}">
                  <button type="submit" class="btn btn-outline-danger">Delete</button>
                </form>
              </div>
            </td>
          </tr>
        @empty
          <tr>
            <td colspan="7" class="text-muted">
              @isset($activeClient)
                No appointment has been scheduled for this client, yet.
              @else
                No appointments yet.
              @endisset
            </td>
          </tr>
        @endforelse
      </tbody>
    </table>
  </div>

  {{ $appointments->appends(request()->only('client_id'))->links() }}
</div>

@endsection

@section('scripts')
<script>
document.getElementById('bulkCheckAll')?.addEventListener('change', function(e){
  document.querySelectorAll('input.bulk-check[type="checkbox"]').forEach(cb => cb.checked = e.target.checked);
});
</script>
@endsection