@extends('layouts.app')

@section('title', '随访提醒 - 病例回访提醒系统')

@section('content')
<div class="page-header">
    <h1 class="page-title">随访提醒</h1>
    <p class="page-subtitle">查看需要随访的患者，及时完成回访工作</p>
</div>

<!-- 统计卡片 -->
<div class="stats-grid">
    <a href="{{ route('patients.reminders', ['filter' => 'all']) }}" class="stat-card {{ $filter === 'all' ? 'active' : '' }}">
        <div class="stat-value">{{ $stats['total'] }}</div>
        <div class="stat-label">总患者数</div>
    </a>
    <a href="{{ route('patients.reminders', ['filter' => 'overdue']) }}" class="stat-card danger {{ $filter === 'overdue' ? 'active' : '' }}">
        <div class="stat-value">{{ $stats['overdue'] }}</div>
        <div class="stat-label">已过期</div>
    </a>
    <a href="{{ route('patients.reminders', ['filter' => 'today']) }}" class="stat-card warning {{ $filter === 'today' ? 'active' : '' }}">
        <div class="stat-value">{{ $stats['today'] }}</div>
        <div class="stat-label">今日到期</div>
    </a>
    <a href="{{ route('patients.reminders', ['filter' => 'upcoming']) }}" class="stat-card info {{ $filter === 'upcoming' ? 'active' : '' }}">
        <div class="stat-value">{{ $stats['upcoming'] }}</div>
        <div class="stat-label">7天内到期</div>
    </a>
    <a href="#" class="stat-card success">
        <div class="stat-value">{{ $stats['completed'] }}</div>
        <div class="stat-label">已完成全部随访</div>
    </a>
</div>

<!-- 筛选标签 -->
<div class="filter-tabs">
    <a href="{{ route('patients.reminders', ['filter' => 'all']) }}" class="filter-tab {{ $filter === 'all' ? 'active' : '' }}">全部</a>
    <a href="{{ route('patients.reminders', ['filter' => 'overdue']) }}" class="filter-tab {{ $filter === 'overdue' ? 'active' : '' }}">已过期</a>
    <a href="{{ route('patients.reminders', ['filter' => 'today']) }}" class="filter-tab {{ $filter === 'today' ? 'active' : '' }}">今日到期</a>
    <a href="{{ route('patients.reminders', ['filter' => 'upcoming']) }}" class="filter-tab {{ $filter === 'upcoming' ? 'active' : '' }}">即将到期</a>
</div>

<!-- 导出按钮 -->
<div style="margin-bottom: 24px;">
    <a href="{{ route('patients.export', ['filter' => $filter]) }}" class="btn btn-outline">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
            <polyline points="7 10 12 15 17 10"/>
            <line x1="12" y1="15" x2="12" y2="3"/>
        </svg>
        导出当前列表
    </a>
</div>

@if($reminders->isEmpty())
    <div class="card">
        <div class="empty-state">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <circle cx="12" cy="12" r="10"/>
                <path d="M8 14s1.5 2 4 2 4-2 4-2"/>
                <line x1="9" y1="9" x2="9.01" y2="9"/>
                <line x1="15" y1="9" x2="15.01" y2="9"/>
            </svg>
            <div class="empty-state-title">暂无需要随访的患者</div>
            <p>当前筛选条件下没有需要随访的患者，您可以切换筛选条件或导入新的患者数据。</p>
            <div style="margin-top: 20px;">
                <a href="{{ route('patients.import') }}" class="btn btn-primary">导入患者数据</a>
            </div>
        </div>
    </div>
@else
    <!-- 提醒卡片列表 - 两列布局 -->
    <div class="reminder-grid">
        @foreach($reminders as $reminder)
            @php
                $patient = $reminder['patient'];
                $nextDate = $reminder['next_follow_up_date'];
                $daysUntil = $reminder['days_until'];
            @endphp
            <div class="reminder-card fade-in">
                {{-- 卡片头部 --}}
                <div class="reminder-card-header">
                    <div class="reminder-patient-info">
                        <div class="reminder-avatar">{{ mb_substr($patient->name, 0, 1) }}</div>
                        <div>
                            <div class="reminder-name">{{ $patient->name }}</div>
                            <div class="reminder-meta">{{ $patient->gender }} · {{ $patient->age }}岁</div>
                        </div>
                    </div>
                    @if($daysUntil !== null && $daysUntil < 0)
                        <span class="badge badge-danger">过期 {{ abs($daysUntil) }} 天</span>
                    @elseif($daysUntil === 0)
                        <span class="badge badge-warning">今日到期</span>
                    @elseif($daysUntil !== null && $daysUntil <= 7)
                        <span class="badge badge-info">{{ $daysUntil }} 天后</span>
                    @else
                        <span class="badge badge-success">未到期</span>
                    @endif
                </div>

                {{-- 诊断标签 --}}
                <div class="reminder-diagnosis">
                    <span class="diagnosis-tag">{{ $patient->getDiagnosisType() }}</span>
                    <span class="follow-up-tag">第{{ $reminder['next_follow_up_number'] }}次随访</span>
                </div>

                {{-- 关键信息 --}}
                <div class="reminder-details">
                    <div class="detail-row">
                        <span class="detail-icon">📅</span>
                        <span class="detail-label">随访日期</span>
                        <span class="detail-value">{{ $nextDate ? $nextDate->format('Y-m-d') : '-' }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-icon">📞</span>
                        <span class="detail-label">联系方式</span>
                        <span class="detail-value">{{ $patient->phone ?: '-' }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-icon">📍</span>
                        <span class="detail-label">地址</span>
                        <span class="detail-value text-truncate">{{ $patient->address ?: '-' }}</span>
                    </div>
                    @if($patient->remark)
                    <div class="detail-row">
                        <span class="detail-icon">📝</span>
                        <span class="detail-label">备注</span>
                        <span class="detail-value remark-text">{{ $patient->remark }}</span>
                    </div>
                    @endif
                </div>

                {{-- 进度条 --}}
                <div class="reminder-progress">
                    @php
                        $total = count($patient->getFollowUpSchedule());
                        $completed = $patient->follow_up_count;
                        $percent = ($completed / $total) * 100;
                    @endphp
                    <div class="progress-header">
                        <span>随访进度</span>
                        <span>{{ $completed }}/{{ $total }}</span>
                    </div>
                    <div class="progress-track">
                        <div class="progress-fill" style="width: {{ $percent }}%"></div>
                    </div>
                </div>

                {{-- 操作按钮 --}}
                <div class="reminder-actions">
                    @if($patient->phone)
                        <a href="tel:{{ $patient->phone }}" class="action-btn action-call" title="拨打电话">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
                                <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/>
                            </svg>
                        </a>
                    @endif
                    <form action="{{ route('patients.follow-up', $patient) }}" method="POST" class="action-form">
                        @csrf
                        <button type="submit" class="action-btn action-complete" title="标记已随访" onclick="return confirm('确认标记 {{ $patient->name }} 完成第{{ $reminder['next_follow_up_number'] }}次随访？')">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
                                <polyline points="20 6 9 17 4 12"/>
                            </svg>
                            <span>已随访</span>
                        </button>
                    </form>
                </div>
            </div>
        @endforeach
    </div>
@endif
@endsection