@extends('layouts.cliente')
@section('title','Mis reservas')

@push('styles')
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css">
<style>
  .card-soft{ border:1px solid #dee2e6; border-radius:16px; }
  .table thead th{ background:#f8f9fa; }
</style>
@endpush

@section('content')
<div class="d-flex flex-wrap gap-2 justify-content-between align-items-center mb-3">
  <h1 class="h4 mb-0">Mis reservas</h1>
  <a href="{{ route('agenda.index') }}" class="btn btn-primary">
    <i class="bi bi-plus-circle me-1"></i> Nueva reserva
  </a>
</div>

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

<div class="card card-soft">
  <div class="card-body p-0">
    <div class="table-responsive">
      <table class="table align-middle mb-0">
        <thead>
          <tr>
            <th>#</th>
            <th>Servicio</th>
            <th>Profesional</th>
            <th>Mascota</th>
            <th>Inicio</th>
            <th>Estado</th>
            <th class="text-end">Acciones</th>
          </tr>
        </thead>
        <tbody>
          @forelse($bookings as $b)
            <tr>
              <td>{{ $b->id }}</td>
              <td>{{ $b->service->nombre ?? '—' }}</td>
              <td>{{ $b->provider->nombre_mostrado ?? '—' }}</td>
              <td>{{ $b->mascota->nombre ?? '—' }}</td>
              <td>{{ optional($b->starts_at)->format('d-m-Y H:i') }}</td>
              <td>
                <span class="badge
                  @class([
                    'text-bg-success' => $b->estado === 'confirmada',
                    'text-bg-warning' => $b->estado === 'pendiente',
                    'text-bg-danger'  => $b->estado === 'cancelada',
                    'text-bg-secondary' => $b->estado === 'no_asistio',
                  ])">
                  {{ ucfirst($b->estado) }}
                </span>
              </td>
              <td class="text-end">
                <a class="btn btn-sm btn-outline-primary" href="{{ route('clientes.bookings.show',$b) }}">
                  <i class="bi bi-eye"></i>
                </a>
                @if(in_array($b->estado, ['pendiente','confirmada']))
                  <form method="POST" action="{{ route('clientes.bookings.cancel',$b) }}"
                        class="d-inline"
                        onsubmit="return confirm('¿Cancelar esta reserva?');">
                    @csrf @method('PUT')
                    <button class="btn btn-sm btn-outline-danger">
                      <i class="bi bi-x-circle"></i>
                    </button>
                  </form>
                @endif
              </td>
            </tr>
          @empty
            <tr>
              <td colspan="7" class="text-center py-4 text-muted">
                No tienes reservas. <a href="{{ route('agenda.index') }}">Reserva tu primera hora</a>.
              </td>
            </tr>
          @endforelse
        </tbody>
      </table>
    </div>
  </div>
  <div class="card-footer">
    {{ $bookings->withQueryString()->links() }}
  </div>
</div>
@endsection