@extends('emails.layouts.master')

@section('title', 'Bestelbevestiging #' . $order->order_number . ' | Jouwdriedee.nl')

@section('content')
<div style="text-align: left;">
    
    <div style="display: inline-block; background-color: #D1FAE5; color: #065F46; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px;">
        ✓ Bestelling Ontvangen
    </div>

    <h1 style="color: #0F172A; font-size: 22px; font-weight: 900; margin: 0 0 10px 0; line-height: 1.3;">
        Bedankt voor je bestelling, {{ $order->customer_name }}!
    </h1>

    <p style="color: #475569; font-size: 14px; line-height: 1.6; margin: 0 0 18px 0;">
        We hebben je bestelling <strong>#{{ $order->order_number }}</strong> in goede orde ontvangen. Onze 3D-printers worden voorbereid en jouw items worden met zorg en precisie geprint.
    </p>

    <!-- Bestelde Items Overzicht -->
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="margin: 20px 0; border: 1px solid #E2E8F0; border-radius: 14px; overflow: hidden;">
        <tr style="background-color: #F8FAFC; border-bottom: 1px solid #E2E8F0;">
            <th align="left" style="padding: 12px 16px; font-size: 11px; font-weight: 800; text-transform: uppercase; color: #64748B;">Item</th>
            <th align="center" style="padding: 12px 16px; font-size: 11px; font-weight: 800; text-transform: uppercase; color: #64748B;">Aantal</th>
            <th align="right" style="padding: 12px 16px; font-size: 11px; font-weight: 800; text-transform: uppercase; color: #64748B;">Prijs</th>
        </tr>

        @foreach($order->items as $item)
            <tr style="border-bottom: 1px solid #F1F5F9;">
                <td style="padding: 14px 16px;">
                    <div style="font-weight: 800; font-size: 13px; color: #0F172A;">
                        {{ $item->product_name }}
                    </div>
                    <div style="font-size: 11px; color: #64748B; margin-top: 3px;">
                        @if($item->material) Materiaal: <strong>{{ strtoupper($item->material) }}</strong> &bull; @endif
                        @if($item->color) Kleur: <strong>{{ $item->color }}</strong> &bull; @endif
                        Schaal: {{ $item->scale ?? '100%' }}
                    </div>
                </td>
                <td align="center" style="padding: 14px 16px; font-size: 13px; font-weight: 700; color: #334155;">
                    {{ $item->quantity }}x
                </td>
                <td align="right" style="padding: 14px 16px; font-size: 13px; font-weight: 800; color: #0F172A;">
                    &euro; {{ number_format($item->total_price, 2, ',', '.') }}
                </td>
            </tr>
        @endforeach

        <!-- Subtotaal & Verzending -->
        <tr style="background-color: #FAFAFA;">
            <td colspan="2" style="padding: 10px 16px; font-size: 12px; color: #64748B;">Subtotaal</td>
            <td align="right" style="padding: 10px 16px; font-size: 12px; font-weight: 700; color: #334155;">
                &euro; {{ number_format($order->subtotal, 2, ',', '.') }}
            </td>
        </tr>
        <tr style="background-color: #FAFAFA;">
            <td colspan="2" style="padding: 10px 16px; font-size: 12px; color: #64748B;">Verzendkosten (PostNL)</td>
            <td align="right" style="padding: 10px 16px; font-size: 12px; font-weight: 700; color: #334155;">
                {{ $order->shipping_cost > 0 ? '€ ' . number_format($order->shipping_cost, 2, ',', '.') : 'Gratis' }}
            </td>
        </tr>
        <tr style="background-color: #F1F5F9; border-top: 2px solid #E2E8F0;">
            <td colspan="2" style="padding: 12px 16px; font-size: 14px; font-weight: 900; color: #0F172A;">Totaal incl. btw</td>
            <td align="right" style="padding: 12px 16px; font-size: 16px; font-weight: 900; color: #D97706;">
                {{ $order->formatted_total }}
            </td>
        </tr>
    </table>

    <!-- Afleveradres -->
    <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%" style="background-color: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 14px; margin-bottom: 24px; padding: 16px;">
        <tr>
            <td>
                <div style="font-weight: 800; font-size: 12px; text-transform: uppercase; color: #64748B; margin-bottom: 6px;">
                    📦 Afleveradres:
                </div>
                <div style="font-size: 13px; color: #1E293B; line-height: 1.5;">
                    <strong>{{ $order->customer_name }}</strong><br>
                    {{ $order->shipping_street }} {{ $order->shipping_number }}<br>
                    {{ $order->shipping_postal_code }} {{ $order->shipping_city }}<br>
                    {{ $order->shipping_country ?? 'Nederland' }}
                </div>
            </td>
        </tr>
    </table>

    <!-- Wat gebeurt er nu? -->
    <div style="background-color: #EFF6FF; border: 1px solid #BFDBFE; border-radius: 12px; padding: 14px; font-size: 12px; color: #1E40AF; line-height: 1.5; margin-bottom: 20px;">
        <strong>Wat gebeurt er nu?</strong><br>
        1. We printen jouw model op hoge resolutie.<br>
        2. We controleren de scharnieren en details met de hand.<br>
        3. Je ontvangt een verzendbevestiging zodra het pakketje is overgedragen aan PostNL (binnen 2-3 werkdagen).
    </div>

    @auth
        <div style="text-align: center; margin: 24px 0 10px 0;">
            <a href="{{ route('account.index') }}" class="btn-primary" style="display: inline-block; background-color: #FBBF24; color: #0F172A !important; font-weight: 800; font-size: 13px; padding: 12px 24px; border-radius: 12px; text-decoration: none;">
                Volg Bestelling in Mijn Account &rarr;
            </a>
        </div>
    @endauth

</div>
@endsection