@extends('vetPortal::layouts.portal')
@section('title', __('vetPortal::lang.dashboard'))

@section('content')
@php
    $stClass = [
        'pending' => 'vp-b-blue', 'confirmed' => 'vp-b-blue', 'waiting' => 'vp-b-amber',
        'in_progress' => 'vp-b-amber', 'completed' => 'vp-b-green',
        'cancelled' => 'vp-b-red', 'no_show' => 'vp-b-red',
    ];
@endphp

<div class="vp-page-title">Welcome{{ $portalAccount ? ', ' . e($portalAccount->name) : '' }} 👋</div>

@if(optional($portalSettings)->welcome_text)
    <div class="vp-card"><div class="vp-card-b" style="font-size:13px;color:#475569;">{{ $portalSettings->welcome_text }}</div></div>
@endif

<div class="vp-stat-row">
    <div class="vp-stat"><div class="n">{{ $pets->count() }}</div><div class="l">{{ __('vetPortal::lang.my_pets') }}</div></div>
    <div class="vp-stat"><div class="n">{{ $nextAppointment ? 1 : 0 }}</div><div class="l">Upcoming Visit</div></div>
    <div class="vp-stat">
        <div class="n" style="color:{{ $overdueVax ? '#b91c1c' : '#15803d' }};">{{ $overdueVax }}</div>
        <div class="l">Overdue Vaccines</div>
    </div>
</div>

<div class="vp-card">
    <div class="vp-card-h"><i class="fas fa-calendar-check"></i> {{ __('vetPortal::lang.next_appointment') }}</div>
    <div class="vp-card-b">
        @if($nextAppointment)
            <div style="display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;">
                <div>
                    <div style="font-weight:800;font-size:15px;">
                        {{ \Carbon\Carbon::parse($nextAppointment->appointment_date)->format('l, d M Y') }}
                        @ {{ \Carbon\Carbon::parse($nextAppointment->appointment_time)->format('H:i') }}
                    </div>
                    <div style="font-size:13px;color:#64748b;margin-top:3px;">
                        <i class="fas fa-paw"></i> {{ optional($nextAppointment->pet)->petname ?? '—' }}
                        @if(optional($nextAppointment->doctor)->name)
                            &nbsp;·&nbsp; <i class="fas fa-user-md"></i> {{ $nextAppointment->doctor->name }}
                        @endif
                    </div>
                </div>
                <span class="vp-badge {{ $stClass[$nextAppointment->status] ?? 'vp-b-gray' }}">
                    {{ ucfirst(str_replace('_', ' ', $nextAppointment->status)) }}
                </span>
            </div>
        @else
            <div class="vp-empty">No upcoming appointments scheduled.</div>
        @endif
    </div>
</div>

<div class="vp-card">
    <div class="vp-card-h"><i class="fas fa-paw"></i> {{ __('vetPortal::lang.my_pets') }}</div>
    <div class="vp-card-b">
        @if($pets->isEmpty())
            <div class="vp-empty">No pets on file. Please contact the clinic.</div>
        @else
            <div class="vp-grid">
                @foreach($pets as $pet)
                    <a href="{{ route('vp.portal.pet', $pet->id) }}" class="vp-pet">
                        <div class="nm">{{ $pet->petname }}</div>
                        <div class="sub">{{ ucfirst($pet->species ?? 'Pet') }}{{ $pet->breed ? ' · ' . $pet->breed : '' }}</div>
                        <div style="margin-top:6px;font-size:12px;color:var(--pc);font-weight:600;">View profile →</div>
                    </a>
                @endforeach
            </div>
        @endif
    </div>
</div>

@if(optional($portalSettings)->whatsapp_number)
    <a href="https://wa.me/{{ preg_replace('/[^0-9]/', '', $portalSettings->whatsapp_number) }}?text={{ urlencode('Hello, I have a question about my pet.') }}"
       target="_blank" class="vp-btn vp-btn-wa">
        <i class="fab fa-whatsapp"></i> {{ __('vetPortal::lang.contact_clinic') }}
    </a>
@endif
@endsection
