@extends('layouts.app')

@section('title', 'History')

@section('content')
<div class="space-y-4 animate-fade-in">
    
    <!-- Header -->
    <div>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">History Treatment</h1>
        <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">Riwayat treatment selesai</p>
    </div>

    <!-- Filter Card -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-soft p-4">
        <form method="GET" class="space-y-3">
            <div class="relative">
                <i data-lucide="search" class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400"></i>
                <input type="text" 
                       name="search" 
                       value="{{ request('search') }}" 
                       placeholder="Cari nama pasien..." 
                       class="w-full pl-10 pr-3 py-2.5 text-sm bg-gray-50 dark:bg-gray-700 border-0 rounded-lg text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500">
            </div>

            <div class="grid grid-cols-2 gap-3">
                <div class="relative">
                    <i data-lucide="calendar" class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400"></i>
                    <input type="date" 
                           name="from" 
                           value="{{ request('from', isset($periodFrom) ? $periodFrom->format('Y-m-d') : '') }}" 
                           class="w-full pl-10 pr-3 py-2.5 text-sm bg-gray-50 dark:bg-gray-700 border-0 rounded-lg text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500">
                </div>
                <div class="relative">
                    <i data-lucide="calendar" class="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-gray-400"></i>
                    <input type="date" 
                           name="to" 
                           value="{{ request('to', isset($periodTo) ? $periodTo->format('Y-m-d') : '') }}" 
                           class="w-full pl-10 pr-3 py-2.5 text-sm bg-gray-50 dark:bg-gray-700 border-0 rounded-lg text-gray-900 dark:text-white focus:ring-2 focus:ring-primary-500">
                </div>
            </div>

            <button type="submit" 
                    class="w-full inline-flex items-center justify-center py-2.5 bg-gradient-to-r from-primary-600 to-primary-700 text-white text-sm font-medium rounded-lg shadow-lg">
                <i data-lucide="filter" class="w-4 h-4 mr-2"></i>
                Terapkan Periode
            </button>
        </form>
    </div>

    <!-- Period Summary -->
    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-soft p-4">
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
            <h2 class="text-lg font-bold text-gray-900 dark:text-white">Detail Jadwal</h2>
            @isset($periodFrom)
            <p class="text-sm text-gray-600 dark:text-gray-300">
                Periode: <span class="font-medium">{{ $periodFrom->format('d/m/Y') }}</span> - <span class="font-medium">{{ $periodTo->format('d/m/Y') }}</span>
            </p>
            @endisset
        </div>
    </div>

    <!-- Results: Table on desktop, cards on mobile -->
    <div class="hidden md:block bg-white dark:bg-gray-800 rounded-xl shadow-soft overflow-x-auto">
        <table class="min-w-full text-[13px]">
            <thead class="bg-gray-50 dark:bg-gray-700/50 text-gray-700 dark:text-gray-200">
                <tr>
                    <th class="px-4 py-3 text-left">Tanggal</th>
                    <th class="px-4 py-3 text-left">Pasien</th>
                    <th class="px-4 py-3 text-left">Domisili Pasien</th>
                    <th class="px-4 py-3 text-left">Treatment</th>
                    <th class="px-4 py-3 text-left">Add On</th>
                    <th class="px-4 py-3 text-left">Reimburse</th>
                    <th class="px-4 py-3 text-left">Aksi</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100 dark:divide-gray-700 leading-relaxed">
                @forelse($schedules as $schedule)
                <tr class="hover:bg-gray-50 dark:hover:bg-gray-700/30">
                    <td class="px-4 py-3">{{ $schedule->start_date->format('d/m/Y') }}</td>
                    <td class="px-4 py-3 font-medium text-gray-900 dark:text-gray-100">{{ $schedule->patient_name }}</td>
                    <td class="px-4 py-3">{{ $schedule->patient_domicile }}</td>
                    <td class="px-4 py-3">{{ $schedule->treatment->name ?? '-' }}</td>
                    <td class="px-4 py-3">
                        @php($addonNames = $schedule->addons->map(fn($a) => $a->treatment->name ?? null)->filter()->values())
                        {{ $addonNames->isNotEmpty() ? $addonNames->join(', ') : '-' }}
                    </td>
                    <td class="px-4 py-3 text-emerald-600 dark:text-emerald-400 font-semibold">
                        Rp {{ number_format($schedule->reimbursements->sum('amount'), 0, ',', '.') }}
                    </td>
                    <td class="px-4 py-3">
                        <a href="{{ route('therapist.history.show', $schedule->id) }}" class="text-primary-600 hover:underline">Detail</a>
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="7" class="px-4 py-8 text-center text-gray-500 dark:text-gray-400">Belum ada history pada periode ini</td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    <!-- Mobile Cards -->
    <div class="md:hidden space-y-2">
        @forelse($schedules as $schedule)
            <a href="{{ route('therapist.history.show', $schedule->id) }}" 
               class="block bg-white dark:bg-gray-800 rounded-xl shadow-soft p-4 active:scale-[0.98] transition-all">
                <div class="flex items-start justify-between gap-3">
                    <div class="flex-1 min-w-0">
                        <div class="flex items-center gap-2 mb-1">
                            <h3 class="font-bold text-gray-900 dark:text-white text-base truncate">{{ $schedule->patient_name }}</h3>
                        </div>
                        <div class="text-xs text-gray-500 dark:text-gray-400 mb-2">
                            {{ $schedule->start_date->format('d/m/Y') }} • {{ $schedule->patient_domicile }}
                        </div>
                        <div class="text-sm text-gray-700 dark:text-gray-300">
                            <span class="font-medium">{{ $schedule->treatment->name ?? '-' }}</span>
                        </div>
                        <div class="mt-1 text-xs text-gray-600 dark:text-gray-400">
                            @php($addonNames = $schedule->addons->map(fn($a) => $a->treatment->name ?? null)->filter()->values())
                            Add-on: {{ $addonNames->isNotEmpty() ? $addonNames->join(', ') : '-' }}
                        </div>
                        <div class="mt-2 flex items-center gap-1 text-xs font-semibold text-emerald-600 dark:text-emerald-400">
                            <i data-lucide="receipt" class="w-3 h-3"></i>
                            Rp {{ number_format($schedule->reimbursements->sum('amount'), 0, ',', '.') }}
                        </div>
                    </div>
                    <div class="flex-shrink-0 text-gray-400">
                        <i data-lucide="chevron-right" class="w-5 h-5"></i>
                    </div>
                </div>
            </a>
        @empty
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-soft p-12 text-center">
                <div class="w-16 h-16 bg-gray-100 dark:bg-gray-700 rounded-full flex items-center justify-center mx-auto mb-3">
                    <i data-lucide="history" class="w-8 h-8 text-gray-400"></i>
                </div>
                <p class="text-gray-500 dark:text-gray-400 font-medium">Belum ada history</p>
                <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">Treatment selesai akan muncul di sini</p>
            </div>
        @endforelse
    </div>

    <!-- Pagination -->
    @if($schedules->hasPages())
        <div class="flex justify-center">
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-soft px-4 py-3">
                {{ $schedules->links() }}
            </div>
        </div>
    @endif
</div>

@push('scripts')
<script>
lucide.createIcons();
setTimeout(() => lucide.createIcons(), 100);
</script>
@endpush
@endsection