@extends('layouts.app')

@section('title', 'Order Confirmation - MiMSMS Voter System')

@section('content')
<div style="max-width: 700px; margin: 0 auto;">
    <div style="text-align: center; margin: 2rem 0;">
        <div style="font-size: 3rem; color: var(--success); margin-bottom: 1rem;">✓</div>
        <h1 style="color: var(--primary-orange);">Order Confirmed!</h1>
        <p style="color: var(--text-light); font-size: 1.1rem;">Your order has been successfully created and submitted to WHMCS.</p>
    </div>

    <div class="card">
        <h2 style="color: var(--primary-orange); margin-bottom: 1.5rem;">Order Details</h2>

        <div style="margin-bottom: 1.5rem;">
            <p><strong>Order ID:</strong> <span style="color: var(--primary-orange);">#{{ $order->id }}</span></p>
            <p><strong>WHMCS Order ID:</strong> <span style="color: var(--primary-red);">{{ $order->whmcs_order_id ?? 'Processing...' }}</span></p>
            <p><strong>Status:</strong> <span class="badge badge-success">{{ ucfirst($order->order_status) }}</span></p>
            <p><strong>Order Date:</strong> {{ $order->created_at->format('M d, Y H:i A') }}</p>
        </div>

        <hr style="border: none; border-top: 1px solid var(--border-color); margin: 1.5rem 0;">

        <h3 style="color: var(--primary-orange); margin-bottom: 1rem;">Customer Information</h3>
        <p><strong>Name:</strong> {{ $order->customer_name }}</p>
        <p><strong>Email:</strong> {{ $order->customer_email }}</p>
        <p><strong>Phone:</strong> {{ $order->customer_phone }}</p>

        <hr style="border: none; border-top: 1px solid var(--border-color); margin: 1.5rem 0;">

        <h3 style="color: var(--primary-orange); margin-bottom: 1rem;">Service Details</h3>
        <p><strong>Electoral Area:</strong> {{ $order->electoralArea->name }}</p>
        <p><strong>Package Type:</strong> {{ ucfirst(str_replace('_', ' ', $order->package_type)) }}</p>
        <p><strong>Quantity:</strong> {{ number_format($order->quantity) }} SMS</p>
        <p><strong>Total Voters:</strong> {{ number_format($order->total_voters) }}</p>

        <hr style="border: none; border-top: 1px solid var(--border-color); margin: 1.5rem 0;">

        <h3 style="color: var(--primary-orange); margin-bottom: 1rem;">Voter Breakdown by Operator</h3>
        <div class="grid" style="grid-template-columns: 1fr;">
            <div class="stat-card">
                <p>Grameenphone</p>
                <h3>{{ number_format($order->operator_breakdown['grameenphone'] ?? 0) }}</h3>
            </div>
            <div class="stat-card">
                <p>Robi / Airtel</p>
                <h3>{{ number_format($order->operator_breakdown['robi'] ?? 0) }}</h3>
            </div>
            <div class="stat-card">
                <p>Banglalink</p>
                <h3>{{ number_format($order->operator_breakdown['banglalink'] ?? 0) }}</h3>
            </div>
        </div>

        @if($order->additional_notes)
            <hr style="border: none; border-top: 1px solid var(--border-color); margin: 1.5rem 0;">
            <h3 style="color: var(--primary-orange); margin-bottom: 1rem;">Additional Notes</h3>
            <p>{{ $order->additional_notes }}</p>
        @endif

        <hr style="border: none; border-top: 1px solid var(--border-color); margin: 1.5rem 0;">

        <div style="background: #f0f8ff; padding: 1rem; border-radius: 4px; margin: 1.5rem 0;">
            <p style="margin: 0; color: #0c5460;">
                <strong>📧 Confirmation Email:</strong> A confirmation email has been sent to {{ $order->customer_email }} with your order details and WHMCS order ID.
            </p>
        </div>

        <div style="display: flex; gap: 1rem; margin-top: 2rem;">
            <a href="{{ route('order.index') }}" class="btn" style="flex: 1; text-align: center; text-decoration: none;">View All Orders</a>
            <a href="{{ route('home') }}" class="btn btn-secondary" style="flex: 1; text-align: center; text-decoration: none;">Back to Home</a>
        </div>
    </div>

    <div class="card" style="background: #fff3cd; border: 1px solid #ffc107; margin-top: 2rem;">
        <h3 style="color: #856404; margin-bottom: 1rem;">⏱️ What's Next?</h3>
        <ol style="color: #856404; margin-left: 1.5rem;">
            <li>Your order has been submitted to WHMCS for processing</li>
            <li>You will receive a confirmation email with your WHMCS order ID</li>
            <li>Our team will review and activate your service shortly</li>
            <li>You can track your order status in your account dashboard</li>
        </ol>
    </div>
</div>
@endsection