@extends('layouts.app')

@section('title', 'Bestelling Ontvangen | Jouwdriedee.nl')

@section('content')
<div class="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-16 text-center space-y-8">
    
    <!-- Success Badge -->
    <div class="space-y-3">
        <div class="w-14 h-14 rounded-2xl bg-emerald-50 text-emerald-600 border border-emerald-200/60 flex items-center justify-center mx-auto">
            <i data-lucide="check" class="w-7 h-7 stroke-[2]"></i>
        </div>
        <h1 class="text-2xl sm:text-3xl font-bold tracking-tight text-slate-900">Bedankt voor je bestelling!</h1>
        <p class="text-xs text-slate-500 max-w-sm mx-auto">
            We hebben jouw bestelling ontvangen. De printbestanden worden klaargezet voor productie.
        </p>
        <div class="inline-block px-3 py-1.5 rounded-xl bg-slate-100 border border-slate-200 text-xs font-mono font-medium text-slate-700">
            Bestelnummer: <span class="font-bold text-slate-900">{{ $order->order_number }}</span>
        </div>
    </div>

    <!-- Live 3D Print Status Tracker -->
    <div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs text-left space-y-5">
        <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider flex items-center space-x-2">
            <i data-lucide="printer" class="w-3.5 h-3.5 text-slate-500"></i>
            <span>Productiestatus</span>
        </h3>

        <div class="relative pl-6 space-y-5 border-l-2 border-slate-200">
            
            <!-- Stap 1: Ontvangen -->
            <div class="relative">
                <span class="absolute -left-[31px] top-0.5 w-3.5 h-3.5 rounded-full bg-emerald-500 ring-4 ring-emerald-50"></span>
                <h4 class="text-xs font-semibold text-slate-900">1. Bestelling ontvangen & gecontroleerd</h4>
                <p class="text-[11px] text-slate-500 mt-0.5">Jouw configuratie en materiaalkeuzes zijn opgeslagen.</p>
            </div>

            <!-- Stap 2: Slicing & Printbed -->
            <div class="relative">
                <span class="absolute -left-[31px] top-0.5 w-3.5 h-3.5 rounded-full bg-slate-900 ring-4 ring-slate-100 animate-pulse"></span>
                <h4 class="text-xs font-semibold text-slate-900">2. Slicing & printwachtrij (Huidige fase)</h4>
                <p class="text-[11px] text-slate-500 mt-0.5">Het 3D-model wordt geoptimaliseerd en klaargezet voor de printer.</p>
            </div>

            <!-- Stap 3: 3D Printen -->
            <div class="relative opacity-50">
                <span class="absolute -left-[31px] top-0.5 w-3.5 h-3.5 rounded-full bg-slate-300"></span>
                <h4 class="text-xs font-medium text-slate-700">3. 3D Printen in de studio</h4>
                <p class="text-[11px] text-slate-500 mt-0.5">Laag voor laag geprint op hoge resolutie.</p>
            </div>

            <!-- Stap 4: Kwaliteitscontrole & Verzenden -->
            <div class="relative opacity-50">
                <span class="absolute -left-[31px] top-0.5 w-3.5 h-3.5 rounded-full bg-slate-300"></span>
                <h4 class="text-xs font-medium text-slate-700">4. Kwaliteitscontrole & PostNL verzending</h4>
                <p class="text-[11px] text-slate-500 mt-0.5">Je ontvangt per e-mail een Track & Trace code.</p>
            </div>

        </div>
    </div>

    <!-- Besteloverzicht Card -->
    <div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs text-left space-y-4">
        <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider pb-2 border-b border-slate-100">
            Overzicht van jouw bestelling
        </h3>

        <div class="space-y-2">
            @foreach($order->items as $item)
                <div class="flex items-center justify-between text-xs py-1">
                    <div>
                        <div class="font-medium text-slate-900">{{ $item->product_name }} <span class="text-slate-400">&times; {{ $item->quantity }}</span></div>
                        <div class="text-[11px] text-slate-500">{{ strtoupper($item->material) }} &bull; {{ $item->color }} ({{ $item->scale }})</div>
                    </div>
                    <span class="font-semibold text-slate-900">
                        &euro; {{ number_format($item->total_price, 2, ',', '.') }}
                    </span>
                </div>
            @endforeach
        </div>

        <div class="pt-3 border-t border-slate-100 flex justify-between items-baseline text-xs">
            <span class="font-medium text-slate-500">Totaal betaald</span>
            <span class="text-base font-bold text-slate-900">{{ $order->formatted_total }}</span>
        </div>
    </div>

    <div class="flex flex-col sm:flex-row items-center justify-center gap-3">
        <a href="{{ route('home') }}" class="px-5 py-2.5 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs transition shadow-xs">
            Terug naar de homepagina
        </a>
        <a href="{{ route('account.index') }}" class="px-5 py-2.5 rounded-xl bg-white hover:bg-slate-50 border border-slate-200 text-slate-700 font-medium text-xs transition">
            Bestelling bekijken in account
        </a>
    </div>

</div>
@endsection