@extends('layout.base')

@section('title', 'Historial de citas')

@section('style')
    @parent
    <style>
        /* Contenedor */
        .timeline {
            position: relative;
            margin: 0;
            padding: 20px 0;
        }

        /* Línea vertical central */
        .timeline::before {
            content: "";
            position: absolute;
            left: 50%;
            top: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(180deg, #e6eef7, #f6f9fb);
            transform: translateX(-50%);
            border-radius: 4px;
        }

        /* Item */
        .timeline-item {
            position: relative;
            width: 50%;
            padding: 18px 30px;
            box-sizing: border-box;
        }

        /* Left / Right */
        .timeline-item.left {
            left: 0;
            text-align: right;
        }

        .timeline-item.right {
            left: 50%;
            text-align: left;
        }

        /* Punto redondo */
        .timeline-point {
            position: absolute;
            top: 28px;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #fff;
            border: 4px solid #2b6cb0;
            box-shadow: 0 2px 6px rgba(43, 108, 176, 0.15);
        }

        .timeline-item.left .timeline-point {
            right: -9px;
        }

        .timeline-item.right .timeline-point {
            left: -9px;
        }

        /* Card dentro del item */
        .timeline-card {
            background: #fff;
            border-radius: 12px;
            padding: 14px;
            box-shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
            display: inline-block;
            max-width: 95%;
        }

        .timeline-meta {
            font-size: 13px;
            color: #6b7280;
        }

        .timeline-title {
            font-weight: 700;
            font-size: 16px;
            margin-bottom: 6px;
        }

        .timeline-desc {
            font-size: 14px;
            color: #374151;
        }

        .badge-estado {
            padding: 6px 10px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 600;
        }

        /* Avatar pequeño */
        .avatar-sm {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid #eef2ff;
        }

        /* Responsive: todo a una columna en pantallas pequeñas */
        @media (max-width: 991.98px) {
            .timeline::before {
                left: 8px;
            }

            .timeline-item {
                width: 100%;
                padding-left: 40px;
                padding-right: 18px;
                text-align: left !important;
            }

            .timeline-item.left,
            .timeline-item.right {
                left: 0;
            }

            .timeline-item .timeline-point {
                left: 0;
            }
        }
    </style>
@endsection

@section('container')
    <div class="container py-4">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h3 class="mb-0">Historial de citas</h3>
            <small class="text-muted">Últimas citas registradas</small>
        </div>

        @if (isset($citas) && $citas->count())
            <div class="timeline">
                @foreach ($citas as $i => $cita)
                    @php
                        // decidir lado (alternar)
                        $side = $i % 2 == 0 ? 'left' : 'right';

                        // estado a badge (ajusta según tus códigos)
                        $estadoLabel = match ($cita->estado ?? ($cita->id_estado ?? '')) {
                            1 => ['label' => 'Ingresada', 'class' => 'bg-secondary text-white'],
                            2 => ['label' => 'Reagendada', 'class' => 'bg-info text-white'],
                            3 => ['label' => 'Cancelada', 'class' => 'bg-danger text-white'],
                            4 => ['label' => 'Completada', 'class' => 'bg-success text-white'],
                            default => [
                                'label' => $cita->estado_texto ?? 'Desconocido',
                                'class' => 'bg-light text-dark',
                            ],
                        };

                        // imagen (si viene)
                        $img = $cita->imagen ?? null;
                        if ($img && !str_starts_with($img, 'http')) {
                            // intenta Storage::url si usas storage
                            try {
                                $img = \Illuminate\Support\Facades\Storage::exists($img)
                                    ? \Illuminate\Support\Facades\Storage::url($img)
                                    : asset($img);
                            } catch (\Throwable $e) {
                                $img = asset($img);
                            }
                        }
                    @endphp

                    <div class="timeline-item {{ $side }}">
                        <div class="timeline-point" aria-hidden="true"></div>

                        <div class="timeline-card">
                            <div class="d-flex align-items-center gap-3">
                                <div>
                                    <div class="timeline-title">{{ $cita->servicio ?? 'Servicio' }}</div>
                                    <div class="timeline-meta">
                                        <strong>{{ \Carbon\Carbon::parse($cita->fecha ?? ($cita->fecha_cita ?? $cita->created_at))->format('d/m/Y') }}</strong>
                                        &nbsp;·&nbsp;
                                        {{ isset($cita->hora) ? \Carbon\Carbon::parse($cita->hora)->format('h:i A') : '' }}
                                    </div>
                                </div>

                                <div class="ms-auto text-end">
                                    <span
                                        class="badge-estado {{ $estadoLabel['class'] }}">{{ $estadoLabel['label'] }}</span>
                                </div>
                            </div>

                            <div class="mt-2 timeline-desc">
                                @if (!empty($cita->descripcion))
                                    <div class="mb-1">{{ Str::limit($cita->descripcion, 140) }}</div>
                                @endif

                                <div class="d-flex align-items-center gap-3 mt-2">
                                    @if ($img)
                                        <img src="{{ $img }}" alt="Avatar" class="avatar-sm">
                                    @else
                                        <img src="{{ asset('images/pet-placeholder.png') }}" alt="Avatar"
                                            class="avatar-sm">
                                    @endif

                                    <div class="small text-muted">
                                        <div><strong>Revisor:</strong> {{ $cita->nombres ?? '—' }}</div>
                                        <div><strong>Dirección:</strong>
                                            {{ $cita->domicilio ?? ($cita->calle ? $cita->calle . ' ' . $cita->numero_exterior : '—') }}
                                        </div>
                                    </div>
                                </div>

                                <div class="mt-3 d-flex justify-content-between align-items-center">
                                    <small class="text-muted">Registrada:
                                        {{ \Carbon\Carbon::parse($cita->fecha_creacion ?? ($cita->created_at ?? now()))->diffForHumans() }}</small>
                                    <div>
                                        <a href="{{ route('citas.show', $cita->id_cita ?? ($cita->id ?? $cita->id)) }}"
                                            class="btn btn-sm btn-outline-primary">Ver detalle</a>
                                        @if (isset($cita->id_cita) && ($cita->estado ?? 1) == 1)
                                            <a href="{{ route('citas.reagendar', $cita->id_cita) }}"
                                                class="btn btn-sm btn-outline-success ms-2">Reagendar</a>
                                        @endif
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                @endforeach
            </div>
        @else
            <div class="card p-4 text-center">
                <h5 class="mb-2">No tienes citas registradas</h5>
                <p class="text-muted mb-0">Cuando agendes citas aparecerán aquí en forma de línea de tiempo.</p>
            </div>
        @endif
    </div>
@endsection

@section('scripts')
    @parent
    {{-- Si deseas, puedes añadir una animación para que los items aparezcan one-by-one --}}
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // simple fade-in secuencial
            const items = document.querySelectorAll('.timeline-item');
            items.forEach((it, idx) => {
                it.style.opacity = 0;
                it.style.transform = 'translateY(10px)';
                setTimeout(() => {
                    it.style.transition = 'all 400ms ease';
                    it.style.opacity = 1;
                    it.style.transform = 'translateY(0)';
                }, idx * 80);
            });
        });
    </script>
@endsection