@extends('layouts.master')
@section('title') {{ $cliente->name }} @endsection
@section('content')
@component('components.breadcrumb')
@slot('li_1') Clientes @endslot
@slot('title') {{ $cliente->name }} @endslot
@endcomponent

<div class="row">
    <div class="col-xl-4">
        <div class="card">
            <div class="card-body text-center">
                <div class="avatar-md mx-auto mb-3">
                    <span class="avatar-title rounded-circle bg-primary-subtle text-primary fs-24">{{ mb_substr($cliente->name, 0, 1) }}</span>
                </div>
                <h5 class="mb-1">{{ $cliente->name }}</h5>
                <p class="text-muted mb-0">{{ $cliente->email }}</p>
                <p class="text-muted">{{ $cliente->telefone ?: 'Sem telefone registado' }}</p>
            </div>
        </div>

        <div class="card">
            <div class="card-header"><h5 class="card-title mb-0">Cães</h5></div>
            <div class="card-body d-flex flex-column gap-3">
                @forelse ($cliente->caes as $cao)
                    <div class="border rounded p-3">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <h6 class="mb-0">{{ $cao->nome }}</h6>
                                <div class="text-muted fs-13">{{ $cao->raca }} &middot; {{ $cao->sexo === 'femea' ? 'Fêmea' : 'Macho' }}</div>
                            </div>
                        </div>
                        <div class="d-flex flex-wrap gap-1 mt-2">
                            <span class="badge {{ $cao->esterilizado ? 'bg-success-subtle text-success' : 'bg-light text-body' }}">{{ $cao->esterilizado ? 'Esterilizado' : 'Não esterilizado' }}</span>
                            <span class="badge {{ $cao->vacinas_em_dia ? 'bg-success-subtle text-success' : 'bg-danger-subtle text-danger' }}">{{ $cao->vacinas_em_dia ? 'Vacinas em dia' : 'Vacinas em falta' }}</span>
                            <span class="badge {{ $cao->tem_chip ? 'bg-success-subtle text-success' : 'bg-light text-body' }}">{{ $cao->tem_chip ? 'Com chip' : 'Sem chip' }}</span>
                        </div>
                        @if ($cao->notas_saude)
                            <div class="text-muted fs-13 mt-2"><strong>Saúde:</strong> {{ $cao->notas_saude }}</div>
                        @endif
                        @if ($cao->notas)
                            <div class="text-muted fs-13 mt-1">{{ $cao->notas }}</div>
                        @endif
                    </div>
                @empty
                    <p class="text-muted mb-0">Sem cães registados.</p>
                @endforelse
            </div>
        </div>
    </div>

    <div class="col-xl-8">
        <div class="card">
            <div class="card-header"><h5 class="card-title mb-0">Reservas</h5></div>
            <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                    <thead class="table-light">
                        <tr><th>Cão</th><th>Profissional</th><th>Quando</th><th>Preço</th><th>Estado</th></tr>
                    </thead>
                    <tbody>
                        @forelse ($cliente->reservasComoCliente as $reserva)
                            <tr>
                                <td>{{ $reserva->cao->nome }}</td>
                                <td><a href="{{ route('admin.profissionais.show', $reserva->perfilProfissional) }}">{{ $reserva->perfilProfissional->user->name }}</a></td>
                                <td>{{ $reserva->data_hora->format('d/m/Y H:i') }}</td>
                                <td>€{{ number_format($reserva->preco, 2, ',', '.') }}</td>
                                <td>@include('admin.reservas._badge-status', ['status' => $reserva->status])</td>
                            </tr>
                        @empty
                            <tr><td colspan="5" class="text-center text-muted py-4">Sem reservas.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
@endsection