@extends('layouts.app')

@section('content')
    <div class="mx-auto max-w-3xl px-4 py-16">
        @include('customer.partials.nav')

        <h1 class="text-2xl font-bold text-slate-900 mb-6">Rendeléseim</h1>

        @if (session('email_verified'))
            <div class="mb-6 rounded-md bg-emerald-50 border border-emerald-200 px-4 py-3 text-sm text-emerald-700">
                E-mail címét sikeresen megerősítette.
            </div>
        @endif

        @if (session('warranty_case_sent'))
            <div class="mb-6 rounded-md bg-emerald-50 border border-emerald-200 px-4 py-3 text-sm text-emerald-700">
                Garanciális ügyét rögzítettük, hamarosan felvesszük Önnel a kapcsolatot.
            </div>
        @endif

        @forelse ($orders as $order)
            <div class="mt-3 rounded-lg border border-slate-200 p-4">
                <div class="flex items-center justify-between text-sm mb-3">
                    <span class="font-medium text-slate-900">#{{ $order->order_number }}</span>
                    <span class="inline-flex items-center rounded-full bg-brand-50 px-2.5 py-0.5 text-xs font-medium text-brand-700">{{ $order->statusLabel() }}</span>
                    <span class="text-slate-500">{{ $order->created_at->format('Y.m.d.') }}</span>
                </div>
                <div class="divide-y divide-slate-100 text-sm">
                    @foreach ($order->items as $item)
                        <div class="py-2 flex items-center justify-between gap-3">
                            <div>
                                <div class="text-slate-900">{{ $item->product_name_snapshot }} <span class="text-slate-400">({{ $item->quantity }} db)</span></div>
                                @foreach ($item->warrantyCases as $case)
                                    <div class="text-xs text-slate-400">Garanciális ügy állapota: {{ $case->status }}</div>
                                @endforeach
                            </div>
                            <button type="button" onclick="document.getElementById('warranty-form-{{ $item->id }}').classList.toggle('hidden')" class="text-xs text-brand-700 hover:underline shrink-0">Garanciális ügy indítása</button>
                        </div>
                        <form id="warranty-form-{{ $item->id }}" method="POST" action="{{ route('warranty.store', $item->id) }}" class="hidden pb-3">
                            @csrf
                            <textarea name="description" rows="2" placeholder="Írja le a hibajelenséget" required class="w-full rounded-md border border-slate-300 px-3 py-2 text-sm"></textarea>
                            <button type="submit" class="mt-2 text-xs font-semibold text-white bg-brand-700 hover:bg-brand-800 rounded-md px-3 py-1.5">Küldés</button>
                        </form>
                    @endforeach
                </div>
            </div>
        @empty
            <p class="mt-3 text-sm text-slate-500">Még nincs leadott rendelése.</p>
        @endforelse
    </div>
@endsection