@extends('layouts.cliente')
@section('title','Detalle reserva #'.$booking->id)

@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; }
  dt{ font-weight:600; color:#495057; }
</style>
@endpush

@section('content')
<div class="mb-3 d-flex justify-content-between align-items-center">
  <h1 class="h4 mb-0">Reserva #{{ $booking->id }}</h1>
  <a href="{{ route('clientes.bookings.index') }}" class="btn btn-sm btn-outline-secondary">
    <i class="bi bi-arrow-left me-1"></i> Volver a mis reservas
  </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 mb-3">
  <div class="card-body">
    <dl class="row mb-0">
      <dt class="col-sm-3">Servicio</dt>
      <dd class="col-sm-9">{{ $booking->service->nombre ?? '—' }}</dd>

      <dt class="col-sm-3">Profesional</dt>
      <dd class="col-sm-9">{{ $booking->provider->nombre_mostrado ?? '—' }}</dd>

      <dt class="col-sm-3">Mascota</dt>
      <dd class="col-sm-9">{{ $booking->mascota->nombre ?? '—' }}</dd>

      <dt class="col-sm-3">Fecha y hora</dt>
      <dd class="col-sm-9">
        {{ optional($booking->starts_at)->format('d-m-Y H:i') }} —
        {{ optional($booking->ends_at)->format('H:i') }}
      </dd>

      <dt class="col-sm-3">Estado</dt>
      <dd class="col-sm-9">
        <span class="badge
          @class([
            'text-bg-success' => $booking->estado === 'confirmada',
            'text-bg-warning' => $booking->estado === 'pendiente',
            'text-bg-danger'  => $booking->estado === 'cancelada',
            'text-bg-secondary' => $booking->estado === 'no_asistio',
          ])">
          {{ ucfirst($booking->estado) }}
        </span>
      </dd>

      <dt class="col-sm-3">Precio</dt>
      <dd class="col-sm-9">${{ number_format($booking->precio ?? 0,0,',','.') }}</dd>

      <dt class="col-sm-3">Notas</dt>
      <dd class="col-sm-9">
        {{ $booking->notas ?? '—' }}
      </dd>
    </dl>
  </div>
</div>

{{-- Acciones --}}
<div class="d-flex gap-2">
  <a href="{{ route('clientes.bookings.index') }}" class="btn btn-outline-secondary">
    <i class="bi bi-list me-1"></i> Mis reservas
  </a>

  @if(in_array($booking->estado, ['pendiente','confirmada']))
    <form method="POST" action="{{ route('clientes.bookings.cancel',$booking) }}"
          onsubmit="return confirm('¿Seguro que quieres cancelar esta reserva?')">
      @csrf @method('PUT')
      <button class="btn btn-outline-danger">
        <i class="bi bi-x-circle me-1"></i> Cancelar reserva
      </button>
    </form>
  @endif
</div>
@endsection