@extends('layouts.site')
@section('title', 'Hesabım — Kolay Abonelik')
@section('content')
@php
    $steps = [
        'new' => 'Başvuru Alındı',
        'contacted' => 'İletişime Geçildi',
        'assigned' => 'Bayiye Yönlendirildi',
        'converted' => 'Abone Oldunuz',
    ];
    $stepKeys = array_keys($steps);
    $initials = collect(explode(' ', $customer->name))->map(fn ($p) => mb_substr($p, 0, 1))->take(2)->implode('');
    $active = request('tab', 'basvurular');
@endphp
<div class="max-w-6xl mx-auto px-4 py-10">
    <div class="grid md:grid-cols-4 gap-8">
        {{-- Sol menü --}}
        <aside class="md:col-span-1">
            <div class="bg-white border rounded-xl p-5 mb-4 text-center shadow-sm">
                <div class="w-14 h-14 rounded-full bg-blue-600 text-white flex items-center justify-center text-lg font-bold mx-auto mb-3">
                    {{ strtoupper($initials) ?: '?' }}
                </div>
                <p class="font-semibold">{{ $customer->name }}</p>
                <p class="text-xs text-slate-400">{{ $customer->email }}</p>
            </div>

            <nav class="bg-white border rounded-xl overflow-hidden shadow-sm text-sm">
                <a href="{{ route('customer.account', ['tab' => 'basvurular']) }}"
                   class="flex items-center gap-2 px-4 py-3 border-b {{ $active === 'basvurular' ? 'bg-blue-50 text-blue-600 font-semibold' : 'hover:bg-slate-50 text-slate-600' }}">
                    <span>📄</span> Başvurularım
                </a>
                <a href="{{ route('customer.account', ['tab' => 'sifre']) }}"
                   class="flex items-center gap-2 px-4 py-3 border-b {{ $active === 'sifre' ? 'bg-blue-50 text-blue-600 font-semibold' : 'hover:bg-slate-50 text-slate-600' }}">
                    <span>🔒</span> Şifre Değiştir
                </a>
                <a href="{{ route('packages.index') }}" class="flex items-center gap-2 px-4 py-3 border-b hover:bg-slate-50 text-slate-600">
                    <span>📦</span> Paketlere Göz At
                </a>
                <form method="POST" action="{{ route('customer.logout') }}">
                    @csrf
                    <button type="submit" class="w-full text-left flex items-center gap-2 px-4 py-3 text-red-600 hover:bg-red-50">
                        <span>↩</span> Çıkış Yap
                    </button>
                </form>
            </nav>
        </aside>

        {{-- İçerik --}}
        <div class="md:col-span-3">
            @if ($active === 'sifre')
                <div class="bg-white border rounded-xl p-6 shadow-sm max-w-md">
                    <h2 class="text-lg font-semibold mb-4">Şifremi Değiştir</h2>
                    @if (session('password_success'))
                        <div class="rounded bg-green-100 text-green-800 px-4 py-2 text-sm mb-4">{{ session('password_success') }}</div>
                    @endif
                    <form method="POST" action="{{ route('customer.password.update') }}" class="space-y-3">
                        @csrf
                        <div>
                            <label class="block text-xs font-medium mb-1">Mevcut Şifre</label>
                            <input type="password" name="current_password" required class="w-full border rounded px-3 py-2 text-sm">
                        </div>
                        <div>
                            <label class="block text-xs font-medium mb-1">Yeni Şifre</label>
                            <input type="password" name="password" required class="w-full border rounded px-3 py-2 text-sm">
                        </div>
                        <div>
                            <label class="block text-xs font-medium mb-1">Yeni Şifre (Tekrar)</label>
                            <input type="password" name="password_confirmation" required class="w-full border rounded px-3 py-2 text-sm">
                        </div>
                        @error('current_password')
                            <p class="text-xs text-red-600">{{ $message }}</p>
                        @enderror
                        @error('password')
                            <p class="text-xs text-red-600">{{ $message }}</p>
                        @enderror
                        <button class="w-full bg-blue-600 text-white rounded py-2 text-sm font-medium hover:bg-blue-700">Şifreyi Güncelle</button>
                    </form>
                </div>
            @else
                <h1 class="text-xl font-bold mb-1">Merhaba, {{ $customer->name }} 👋</h1>
                <p class="text-sm text-slate-500 mb-6">Başvurularınızın güncel durumunu buradan takip edebilirsiniz.</p>

                <div class="space-y-4">
                @forelse ($applications as $application)
                    <div class="bg-white border rounded-xl p-5 shadow-sm">
                        <div class="flex justify-between items-start mb-4">
                            <div>
                                <p class="font-semibold">{{ $application->package?->name }}</p>
                                <p class="text-xs text-slate-400">{{ $application->package?->company?->name }} — {{ $application->created_at->format('d.m.Y') }}</p>
                            </div>
                        </div>

                        @if ($application->status === 'rejected')
                            <div class="flex items-center gap-2 text-red-600 text-sm font-medium bg-red-50 rounded-lg px-3 py-2">
                                <span class="w-2.5 h-2.5 rounded-full bg-red-500 inline-block"></span> Başvurunuz reddedildi.
                            </div>
                        @else
                            @php $currentIndex = array_search($application->status, $stepKeys); @endphp
                            <div class="flex items-center">
                                @foreach ($steps as $key => $label)
                                    @php $reached = $currentIndex !== false && $loop->index <= $currentIndex; @endphp
                                    <div class="flex-1 flex flex-col items-center text-center">
                                        <div class="w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold {{ $reached ? 'bg-blue-600 text-white' : 'bg-slate-200 text-slate-400' }}">
                                            {{ $loop->iteration }}
                                        </div>
                                        <p class="text-[11px] mt-1 {{ $reached ? 'text-blue-600 font-medium' : 'text-slate-400' }}">{{ $label }}</p>
                                    </div>
                                    @if (! $loop->last)
                                        @php $nextReached = $currentIndex !== false && ($loop->index + 1) <= $currentIndex; @endphp
                                        <div class="flex-1 h-0.5 -mt-4 {{ $nextReached ? 'bg-blue-600' : 'bg-slate-200' }}"></div>
                                    @endif
                                @endforeach
                            </div>
                        @endif

                        @if ($application->status === 'converted' && $application->subscription_id)
                            <p class="text-xs text-green-600 mt-4">🎉 Tebrikler, aboneliğiniz oluşturuldu.</p>
                        @endif
                    </div>
                @empty
                    <div class="bg-white border rounded-xl p-8 text-center text-slate-400 text-sm shadow-sm">
                        Henüz bir başvurunuz yok.
                        <a href="{{ route('packages.index') }}" class="block mt-2 text-blue-600 hover:underline">Paketlere göz atıp başvurun →</a>
                    </div>
                @endforelse
                </div>
            @endif
        </div>
    </div>
</div>
@endsection