@extends('emails.layout')
@section('title', 'Order Confirmed')
@section('header_subtitle', 'Orders')

@section('content')

<h2 style="margin:0 0 6px;font-size:20px;font-weight:700;color:#292B64">Order Confirmed! 🎉</h2>
<p style="margin:0 0 24px;color:#6b7280;font-size:14px">Hi {{ $salesOrder->customer->name }}, your order has been confirmed and we're excited to get you connected.</p>

{{-- Order number highlight --}}
<div style="background:#f0fdf4;border-left:4px solid #22c55e;border-radius:0 8px 8px 0;padding:16px 20px;margin-bottom:20px;text-align:center">
    <p style="margin:0 0 4px;font-size:12px;font-weight:700;color:#166534;text-transform:uppercase;letter-spacing:.06em">Order Number</p>
    <p style="margin:0;font-size:26px;font-weight:800;color:#166534">{{ $salesOrder->order_number }}</p>
    <p style="margin:6px 0 0;font-size:12px;color:#22c55e">{{ $salesOrder->created_at->format('d M Y') }}</p>
</div>

{{-- Order details --}}
<p style="margin:0 0 8px;font-size:12px;font-weight:700;color:#7c3aed;text-transform:uppercase;letter-spacing:.06em">Order Details</p>
<table cellpadding="0" cellspacing="0" style="width:100%;background:#f9f8ff;border:1px solid #e8e5f5;border-radius:8px;padding:16px;margin-bottom:20px">
    <tr><td style="padding:6px 12px 6px 0;font-size:13px;font-weight:600;color:#6b7280;white-space:nowrap;width:140px">Package</td><td style="padding:6px 0;font-size:13px;color:#1e1b4b;font-weight:600">{{ $salesOrder->package_name ?? 'Internet Package' }}</td></tr>
    <tr><td style="padding:6px 12px 6px 0;font-size:13px;font-weight:600;color:#6b7280;white-space:nowrap">Service Address</td><td style="padding:6px 0;font-size:13px;color:#1e1b4b;font-weight:500">{{ $salesOrder->service_address ?? 'As specified' }}</td></tr>
    <tr><td style="padding:6px 12px 6px 0;font-size:13px;font-weight:600;color:#6b7280;white-space:nowrap">Order Status</td><td style="padding:6px 0;font-size:13px;font-weight:700;color:#166534">{{ ucfirst($salesOrder->status) }}</td></tr>
    <tr><td style="padding:6px 12px 6px 0;font-size:13px;font-weight:600;color:#6b7280;white-space:nowrap">Payment Status</td><td style="padding:6px 0;font-size:13px;font-weight:700;color:{{ $salesOrder->payment_status === 'paid' ? '#166534' : '#d97706' }}">{{ ucfirst($salesOrder->payment_status) }}</td></tr>
</table>

{{-- Next steps --}}
<div style="background:#f9f8ff;border:1px solid #e8e5f5;border-radius:8px;padding:16px;margin-bottom:20px">
    <p style="margin:0 0 10px;font-size:13px;font-weight:700;color:#292B64">What happens next?</p>
    <p style="margin:4px 0;font-size:13px;color:#374151"><strong style="color:#7c3aed">1.</strong> &nbsp;You'll receive an invoice for payment</p>
    <p style="margin:4px 0;font-size:13px;color:#374151"><strong style="color:#7c3aed">2.</strong> &nbsp;Complete payment via Pesepay or bank transfer</p>
    <p style="margin:4px 0;font-size:13px;color:#374151"><strong style="color:#7c3aed">3.</strong> &nbsp;Our team will contact you to schedule installation</p>
    <p style="margin:4px 0;font-size:13px;color:#374151"><strong style="color:#7c3aed">4.</strong> &nbsp;Enjoy your high-speed internet!</p>
</div>

<div style="text-align:center;margin:28px 0">
    <a href="{{ config('app.frontend_url') }}/orders/{{ $salesOrder->order_number }}"
       style="display:inline-block;padding:12px 32px;background:linear-gradient(135deg,#292B64,#4c1d95);color:#ffffff;font-size:14px;font-weight:700;text-decoration:none;border-radius:8px">
        Track Your Order &rarr;
    </a>
</div>

<p style="margin:0;font-size:13px;color:#6b7280">Questions? Contact us at <a href="mailto:noc@afinet.africa" style="color:#7c3aed;text-decoration:none">noc@afinet.africa</a> or call +263 242 304101.</p>

@endsection