@extends('layouts.site')
@section('title', $package->name.' — Kolay Abonelik')
@section('content')
<div class="max-w-5xl mx-auto px-4 py-10 grid md:grid-cols-5 gap-8">
    <div class="md:col-span-3">
        <a href="{{ route('packages.index') }}" class="text-sm text-blue-600 hover:underline">← Tüm Paketler</a>
        <p class="text-sm text-blue-600 font-semibold mt-4">{{ $package->company->name }}</p>
        <h1 class="text-3xl font-bold mt-1">{{ $package->name }}</h1>

        @if ($package->campaign)
            <p class="inline-block mt-3 bg-green-100 text-green-700 text-xs font-semibold px-3 py-1 rounded-full">{{ $package->campaign }}</p>
        @endif

        <div class="grid grid-cols-2 gap-4 mt-6">
            <div class="border rounded-lg p-4">
                <p class="text-xs text-slate-400">Hız</p>
                <p class="font-semibold">{{ $package->speed ?? '-' }}</p>
            </div>
            <div class="border rounded-lg p-4">
                <p class="text-xs text-slate-400">Kota</p>
                <p class="font-semibold">{{ $package->quota ?? 'Sınırsız' }}</p>
            </div>
            @if ($package->tv_content)
            <div class="border rounded-lg p-4 col-span-2">
                <p class="text-xs text-slate-400">TV İçeriği</p>
                <p class="font-semibold">{{ $package->tv_content }}</p>
            </div>
            @endif
            <div class="border rounded-lg p-4">
                <p class="text-xs text-slate-400">Kurulum Ücreti</p>
                <p class="font-semibold">{{ $package->setup_fee > 0 ? number_format($package->setup_fee, 2, ',', '.').' TL' : 'Ücretsiz' }}</p>
            </div>
            <div class="border rounded-lg p-4">
                <p class="text-xs text-slate-400">Hizmet Türü</p>
                <p class="font-semibold">{{ $package->service_type?->label() ?? '-' }}</p>
            </div>
        </div>

        @if ($package->description)
        <div class="mt-6">
            <h2 class="font-semibold mb-2">Paket Hakkında</h2>
            <p class="text-sm text-slate-600 leading-relaxed">{{ $package->description }}</p>
        </div>
        @endif

        <p class="text-4xl font-bold text-blue-600 mt-8">{{ number_format($package->monthly_fee, 2, ',', '.') }} TL<span class="text-base text-slate-400 font-normal">/ay</span></p>
    </div>

    <div class="md:col-span-2">
        <div class="bg-slate-50 border rounded-lg p-6 sticky top-24">
            <h2 class="font-semibold mb-4">Bu Pakete Başvurun</h2>
            <form method="POST" action="{{ route('applications.store') }}" class="space-y-3">
                @csrf
                <input type="hidden" name="package_id" value="{{ $package->id }}">
                <div>
                    <label class="block text-xs font-medium mb-1">Ad Soyad</label>
                    <input type="text" name="name" required value="{{ old('name', auth('customer')->user()?->name) }}" class="w-full border rounded px-3 py-2 text-sm">
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-xs font-medium mb-1">Telefon</label>
                        <input type="text" name="phone" required value="{{ old('phone', auth('customer')->user()?->phone) }}" class="w-full border rounded px-3 py-2 text-sm">
                    </div>
                    <div>
                        <label class="block text-xs font-medium mb-1">E-posta</label>
                        <input type="email" name="email" value="{{ old('email', auth('customer')->user()?->email) }}" class="w-full border rounded px-3 py-2 text-sm">
                    </div>
                </div>
                <div class="grid grid-cols-2 gap-3">
                    <div>
                        <label class="block text-xs font-medium mb-1">İl</label>
                        <input type="text" name="il" required value="{{ old('il') }}" class="w-full border rounded px-3 py-2 text-sm">
                    </div>
                    <div>
                        <label class="block text-xs font-medium mb-1">İlçe</label>
                        <input type="text" name="ilce" required value="{{ old('ilce') }}" class="w-full border rounded px-3 py-2 text-sm">
                    </div>
                </div>
                <div>
                    <label class="block text-xs font-medium mb-1">Adres (opsiyonel)</label>
                    <textarea name="address" rows="2" class="w-full border rounded px-3 py-2 text-sm">{{ old('address') }}</textarea>
                </div>
                @if ($errors->any())
                    <div class="text-xs text-red-600">
                        <ul class="list-disc list-inside">
                            @foreach ($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                <button class="w-full bg-blue-600 text-white rounded py-2.5 font-semibold hover:bg-blue-700 text-sm">Başvuruyu Gönder</button>

                @guest('customer')
                    <p class="text-xs text-slate-400 text-center">Gönder'e bastığınızda, başvurunuzu tamamlamak için <a href="{{ route('customer.login') }}" class="text-blue-600 hover:underline">giriş yapmanız veya kayıt olmanız</a> istenecek. Bilgileriniz kaybolmaz.</p>
                @endguest
            </form>
        </div>
    </div>
</div>
@endsection