@extends('layouts.site')
@section('title', 'Paketler — Kolay Abonelik')
@section('content')
<div class="max-w-6xl mx-auto px-4 py-10">
    <h1 class="text-2xl font-bold mb-6">İnternet & TV Paketleri</h1>

    <form method="GET" class="flex flex-wrap gap-2 mb-8 bg-slate-50 p-4 rounded-lg">
        <select name="company_id" class="border rounded px-3 py-2 text-sm">
            <option value="">Tüm Firmalar</option>
            @foreach ($companies as $c)
                <option value="{{ $c->id }}" @selected(request('company_id')==$c->id)>{{ $c->name }}</option>
            @endforeach
        </select>
        <select name="service_type" class="border rounded px-3 py-2 text-sm">
            <option value="">Tüm Hizmet Türleri</option>
            @foreach (['internet'=>'İnternet','tv'=>'TV','internet_tv'=>'İnternet + TV','fiber'=>'Fiber','dsl'=>'DSL','mobile_internet'=>'Mobil İnternet'] as $val=>$label)
                <option value="{{ $val }}" @selected(request('service_type')===$val)>{{ $label }}</option>
            @endforeach
        </select>
        <input type="number" name="price_min" placeholder="Min Fiyat" value="{{ request('price_min') }}" class="border rounded px-3 py-2 text-sm w-28">
        <input type="number" name="price_max" placeholder="Max Fiyat" value="{{ request('price_max') }}" class="border rounded px-3 py-2 text-sm w-28">
        <input type="text" name="speed" placeholder="Hız (örn: 100)" value="{{ request('speed') }}" class="border rounded px-3 py-2 text-sm w-32">
        <label class="flex items-center gap-1 text-sm">
            <input type="checkbox" name="campaign_only" value="1" @checked(request('campaign_only'))> Sadece Kampanyalı
        </label>
        <button class="bg-blue-600 text-white rounded px-4 py-2 text-sm font-medium">Filtrele</button>
    </form>

    <form id="compare-form" method="GET" action="{{ route('packages.compare') }}">
        <div class="grid md:grid-cols-3 gap-6">
            @foreach ($packages as $package)
                <div class="border rounded-lg p-5 hover:shadow-md transition">
                    <label class="flex items-center gap-2 text-xs text-slate-400 mb-2">
                        <input type="checkbox" name="ids[]" value="{{ $package->id }}" class="compare-check"> Karşılaştırmaya ekle
                    </label>
                    <a href="{{ route('packages.show', $package) }}" class="block">
                        <p class="text-xs text-blue-600 font-semibold">{{ $package->company->name }}</p>
                        <h3 class="font-bold text-lg hover:text-blue-600">{{ $package->name }}</h3>
                        <p class="text-sm text-slate-500">{{ $package->speed }} — {{ $package->quota }}</p>
                        @if ($package->tv_content)<p class="text-xs text-slate-400">{{ $package->tv_content }}</p>@endif
                        <p class="text-2xl font-bold text-blue-600 mt-3">{{ number_format($package->monthly_fee,2,',','.') }} TL<span class="text-sm text-slate-400">/ay</span></p>
                        @if ($package->campaign)<p class="text-xs text-green-600 mt-1">{{ $package->campaign }}</p>@endif
                    </a>
                </div>
            @endforeach
        </div>
        <button type="submit" id="compare-btn" class="mt-6 bg-slate-800 text-white rounded px-5 py-2.5 text-sm font-medium hidden">Seçilenleri Karşılaştır</button>
    </form>

    <div class="mt-8">{{ $packages->links() }}</div>
</div>

<script>
document.addEventListener('change', function (e) {
    if (e.target.classList.contains('compare-check')) {
        const checked = document.querySelectorAll('.compare-check:checked').length;
        document.getElementById('compare-btn').classList.toggle('hidden', checked < 2);
    }
});
document.getElementById('compare-form').addEventListener('submit', function (e) {
    e.preventDefault();
    const ids = Array.from(document.querySelectorAll('.compare-check:checked')).map(c => c.value);
    window.location.href = "{{ route('packages.compare') }}?ids=" + ids.join(',');
});
</script>
@endsection