jouwdriedee/resources/views/checkout/index.blade.php

@extends('layouts.app')

@section('title', 'Afrekenen | Jouwdriedee.nl')

@section('content')
<div class="border-b border-slate-200/80 py-6 sm:py-8 bg-slate-50/50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <h1 class="text-2xl sm:text-3xl font-bold tracking-tight text-slate-900">Afrekenen & Gegevens</h1>
        <p class="text-xs text-slate-500 mt-1">Vul je bezorgadres in om jouw 3D prints in de productiewachtrij te plaatsen.</p>
    </div>
</div>

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
    <form action="{{ route('checkout.store') }}" method="POST">
        @csrf
        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
            
            <!-- Linkerkant: Formulier -->
            <div class="lg:col-span-7 space-y-6">
                
                <!-- 1. Contactgegevens -->
                <div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-4">
                    <h2 class="text-xs font-bold text-slate-900 uppercase tracking-wider flex items-center space-x-2">
                        <i data-lucide="user" class="w-3.5 h-3.5 text-slate-500"></i>
                        <span>1. Contactgegevens</span>
                    </h2>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3.5">
                        <div class="sm:col-span-2 space-y-1">
                            <label class="block text-xs font-medium text-slate-700">Volledige Naam *</label>
                            <input type="text" name="customer_name" required value="{{ old('customer_name') }}" placeholder="Jan Jansen" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
                        </div>

                        <div class="space-y-1">
                            <label class="block text-xs font-medium text-slate-700">E-mailadres *</label>
                            <input type="email" name="customer_email" required value="{{ old('customer_email') }}" placeholder="jan@voorbeeld.nl" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
                        </div>

                        <div class="space-y-1">
                            <label class="block text-xs font-medium text-slate-700">Telefoonnummer</label>
                            <input type="text" name="customer_phone" value="{{ old('customer_phone') }}" placeholder="06-12345678" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
                        </div>
                    </div>
                </div>

                <!-- 2. Verzendadres -->
                <div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-4">
                    <h2 class="text-xs font-bold text-slate-900 uppercase tracking-wider flex items-center space-x-2">
                        <i data-lucide="map-pin" class="w-3.5 h-3.5 text-slate-500"></i>
                        <span>2. Verzendadres (Nederland)</span>
                    </h2>

                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3.5">
                        <div class="sm:col-span-2 space-y-1">
                            <label class="block text-xs font-medium text-slate-700">Straatnaam *</label>
                            <input type="text" name="shipping_street" required value="{{ old('shipping_street') }}" placeholder="Kalverstraat" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
                        </div>

                        <div class="space-y-1">
                            <label class="block text-xs font-medium text-slate-700">Huisnummer *</label>
                            <input type="text" name="shipping_number" required value="{{ old('shipping_number') }}" placeholder="12A" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
                        </div>

                        <div class="space-y-1">
                            <label class="block text-xs font-medium text-slate-700">Postcode *</label>
                            <input type="text" name="shipping_postal_code" required value="{{ old('shipping_postal_code') }}" placeholder="1012 AB" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
                        </div>

                        <div class="sm:col-span-2 space-y-1">
                            <label class="block text-xs font-medium text-slate-700">Woonplaats *</label>
                            <input type="text" name="shipping_city" required value="{{ old('shipping_city') }}" placeholder="Amsterdam" class="w-full bg-slate-50 border border-slate-200 rounded-xl px-3.5 py-2 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900">
                        </div>
                    </div>
                </div>

                <!-- 3. Betaalmethode -->
                <div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-4">
                    <h2 class="text-xs font-bold text-slate-900 uppercase tracking-wider flex items-center space-x-2">
                        <i data-lucide="credit-card" class="w-3.5 h-3.5 text-slate-500"></i>
                        <span>3. Betaalmethode</span>
                    </h2>

                    <div class="space-y-2">
                        <label class="flex items-center justify-between p-3.5 rounded-xl border border-slate-900/10 bg-slate-50 cursor-pointer">
                            <div class="flex items-center space-x-2.5">
                                <input type="radio" name="payment_method" value="ideal" checked class="text-slate-900 focus:ring-slate-900">
                                <span class="text-xs font-semibold text-slate-900">iDEAL</span>
                            </div>
                            <span class="text-[10px] font-medium px-2 py-0.5 rounded bg-white text-slate-700 border border-slate-200">Aanbevolen</span>
                        </label>

                        <label class="flex items-center justify-between p-3.5 rounded-xl border border-slate-200 hover:bg-slate-50 cursor-pointer transition">
                            <div class="flex items-center space-x-2.5">
                                <input type="radio" name="payment_method" value="bancontact" class="text-slate-900 focus:ring-slate-900">
                                <span class="text-xs font-semibold text-slate-900">Bancontact</span>
                            </div>
                            <span class="text-[11px] text-slate-400">België</span>
                        </label>

                        <label class="flex items-center justify-between p-3.5 rounded-xl border border-slate-200 hover:bg-slate-50 cursor-pointer transition">
                            <div class="flex items-center space-x-2.5">
                                <input type="radio" name="payment_method" value="overboeking" class="text-slate-900 focus:ring-slate-900">
                                <span class="text-xs font-semibold text-slate-900">Handmatige Bankoverschrijving</span>
                            </div>
                            <span class="text-[11px] text-slate-400">Achteraf</span>
                        </label>
                    </div>

                    <div class="space-y-1 pt-1">
                        <label class="block text-xs font-medium text-slate-700">Opmerkingen voor de printer (optioneel)</label>
                        <textarea name="notes" rows="2" placeholder="Bijv. gewenste printoriëntatie of bezorginstructie..." class="w-full bg-slate-50 border border-slate-200 rounded-xl p-2.5 text-xs text-slate-900 focus:bg-white focus:outline-none focus:ring-2 focus:ring-slate-900/10 focus:border-slate-900"></textarea>
                    </div>
                </div>

            </div>

            <!-- Rechterkant: Besteloverzicht Card -->
            <div class="lg:col-span-5">
                <div class="p-6 rounded-2xl bg-white border border-slate-200/80 shadow-xs space-y-4 sticky top-24">
                    <h3 class="text-xs font-bold text-slate-900 uppercase tracking-wider pb-2 border-b border-slate-100">Jouw Bestelling</h3>

                    <div class="space-y-2.5 max-h-72 overflow-y-auto pr-1">
                        @foreach($cart as $item)
                            <div class="flex items-center justify-between text-xs py-1.5 border-b border-slate-100">
                                <div class="space-y-0.5">
                                    <div class="font-medium text-slate-900">{{ $item['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">
                                    € {{ number_format($item['price'] * $item['quantity'], 2, ',', '.') }}
                                </span>
                            </div>
                        @endforeach
                    </div>

                    <div class="space-y-1.5 text-xs pt-1">
                        <div class="flex justify-between text-slate-600">
                            <span>Subtotaal</span>
                            <span class="font-semibold text-slate-900">€ {{ number_format($subtotal, 2, ',', '.') }}</span>
                        </div>
                        <div class="flex justify-between text-slate-600">
                            <span>Verzendkosten</span>
                            @if($shipping == 0)
                                <span class="text-emerald-700 font-semibold bg-emerald-50 px-2 py-0.5 rounded-md">Gratis</span>
                            @else
                                <span class="font-semibold text-slate-900">€ {{ number_format($shipping, 2, ',', '.') }}</span>
                            @endif
                        </div>
                    </div>

                    <div class="pt-3 border-t border-slate-100 flex justify-between items-baseline">
                        <span class="text-xs font-medium text-slate-600">Totaalbedrag</span>
                        <span class="text-xl font-bold text-slate-900">€ {{ number_format($total, 2, ',', '.') }}</span>
                    </div>

                    <button type="submit" class="w-full py-3 rounded-xl bg-slate-900 hover:bg-slate-800 text-white font-medium text-xs transition shadow-xs flex items-center justify-center space-x-2 cursor-pointer">
                        <i data-lucide="check" class="w-4 h-4"></i>
                        <span>Bestelling Plaatsen</span>
                    </button>

                    <p class="text-center text-[11px] text-slate-400">
                        Door te bestellen ga je akkoord met de algemene voorwaarden van Jouwdriedee.nl.
                    </p>
                </div>
            </div>

        </div>
    </form>
</div>
@endsection