@extends('layouts.site')
@section('title', 'Paket Karşılaştırma — Kolay Abonelik')
@section('content')
<div class="max-w-5xl mx-auto px-4 py-10">
    <h1 class="text-2xl font-bold mb-6">Paket Karşılaştırma</h1>

    @if ($packages->isEmpty())
        <p class="text-slate-500">Karşılaştırmak için <a href="{{ route('packages.index') }}" class="text-blue-600 underline">paket listesinden</a> en az iki paket seçin.</p>
    @else
    <div class="overflow-x-auto">
        <table class="w-full text-sm border-collapse">
            <thead>
                <tr>
                    <th class="p-3 text-left bg-slate-50 border">Özellik</th>
                    @foreach ($packages as $p)
                        <th class="p-3 text-left bg-slate-50 border"><a href="{{ route('packages.show', $p) }}" class="hover:text-blue-600">{{ $p->company->name }} — {{ $p->name }}</a></th>
                    @endforeach
                </tr>
            </thead>
            <tbody>
                <tr><td class="p-3 border font-medium">Fiyat</td>@foreach ($packages as $p)<td class="p-3 border">{{ number_format($p->monthly_fee,2,',','.') }} TL/ay</td>@endforeach</tr>
                <tr><td class="p-3 border font-medium">Hız</td>@foreach ($packages as $p)<td class="p-3 border">{{ $p->speed }}</td>@endforeach</tr>
                <tr><td class="p-3 border font-medium">Kota</td>@foreach ($packages as $p)<td class="p-3 border">{{ $p->quota }}</td>@endforeach</tr>
                <tr><td class="p-3 border font-medium">TV İçeriği</td>@foreach ($packages as $p)<td class="p-3 border">{{ $p->tv_content ?? '-' }}</td>@endforeach</tr>
                <tr><td class="p-3 border font-medium">Kurulum Ücreti</td>@foreach ($packages as $p)<td class="p-3 border">{{ number_format($p->setup_fee,2,',','.') }} TL</td>@endforeach</tr>
                <tr><td class="p-3 border font-medium"></td>@foreach ($packages as $p)<td class="p-3 border"><a href="{{ route('packages.show', $p) }}" class="text-blue-600 hover:underline text-xs">Başvur →</a></td>@endforeach</tr>
            </tbody>
        </table>
    </div>
    @endif
</div>
@endsection