@extends('layouts.app')

@section('title', __('Order Confirmation'))

@section('content')
    <div class="confirmation-page">
        <div class="container py-5">
            <!-- Success Message -->
            <div class="row justify-content-center mb-5">
                <div class="col-md-8 text-center">
                    <div class="success-icon mb-4">
                        <i class="fas fa-check-circle fa-5x text-success"></i>
                    </div>
                    <h1 class="h2 mb-3">{{ __('Order Placed Successfully!') }}</h1>
                    <p class="lead text-muted mb-4">
                        {{ __('Thank you for your order. Your order has been received and is being processed.') }}
                    </p>
                    <div class="order-number-card">
                        <h4 class="mb-2">{{ __('Order Number') }}</h4>
                        <div class="order-number">{{ $order->order_number }}</div>
                        <small class="text-muted">{{ __('Please keep this number for your records') }}</small>
                    </div>
                </div>
            </div>

            <!-- Order Details -->
            <div class="row">
                <!-- Left Column: Order Information -->
                <div class="col-lg-8">
                    <!-- Order Items -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0">{{ __('Order Items') }}</h5>
                        </div>
                        <div class="card-body p-0">
                            <div class="table-responsive">
                                <table class="table table-borderless mb-0">
                                    <tbody>
                                    @foreach($order->items as $item)
                                        <tr>
                                            <td style="width: 80px;">
                                                @if($item->product_image)
                                                    <img src="{{ asset('storage/' . $item->product_image) }}"
                                                         alt="{{ $item->product_name }}"
                                                         class="rounded"
                                                         style="width: 60px; height: 60px; object-fit: cover;">
                                                @else
                                                    <div class="bg-light rounded d-flex align-items-center justify-content-center"
                                                         style="width: 60px; height: 60px;">
                                                        <i class="fas fa-image text-muted"></i>
                                                    </div>
                                                @endif
                                            </td>
                                            <td>
                                                <h6 class="mb-1">{{ $item->product_name }}</h6>
                                                @if($item->product_sku)
                                                    <small class="text-muted">{{ __('SKU') }}: {{ $item->product_sku }}</small>
                                                @endif
                                            </td>
                                            <td class="text-center">
                                                <span class="badge bg-light text-dark">{{ $item->quantity }}</span>
                                            </td>
                                            <td class="text-end">
                                                <div class="fw-bold">{{ $item->formatted_total_price }}</div>
                                                <small class="text-muted">{{ $item->formatted_unit_price }} {{ __('each') }}</small>
                                            </td>
                                        </tr>
                                    @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <!-- Customer & Shipping Information -->
                    <div class="row">
                        <div class="col-md-6">
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h6 class="mb-0">{{ __('Customer Information') }}</h6>
                                </div>
                                <div class="card-body">
                                    <div class="info-item mb-2">
                                        <strong>{{ __('Name') }}:</strong><br>
                                        {{ $order->customer_name }}
                                    </div>
                                    <div class="info-item mb-2">
                                        <strong>{{ __('Email') }}:</strong><br>
                                        {{ $order->customer_email }}
                                    </div>
                                    <div class="info-item">
                                        <strong>{{ __('Phone') }}:</strong><br>
                                        {{ $order->customer_phone }}
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-6">
                            <div class="card mb-4">
                                <div class="card-header">
                                    <h6 class="mb-0">{{ __('Shipping Address') }}</h6>
                                </div>
                                <div class="card-body">
                                    <address class="mb-0">
                                        {{ $order->shipping_first_name }} {{ $order->shipping_last_name }}<br>
                                        @if($order->shipping_company)
                                            {{ $order->shipping_company }}<br>
                                        @endif
                                        {{ $order->shipping_address_line_1 }}<br>
                                        @if($order->shipping_address_line_2)
                                            {{ $order->shipping_address_line_2 }}<br>
                                        @endif
                                        {{ $order->shipping_city }}, {{ $order->shipping_state }}<br>
                                        {{ $order->shipping_postal_code }}
                                    </address>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- Order Details -->
                    <div class="card mb-4">
                        <div class="card-header">
                            <h6 class="mb-0">{{ __('Order Details') }}</h6>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-sm-6 mb-3">
                                    <div class="info-item">
                                        <strong>{{ __('Order Date') }}:</strong><br>
                                        {{ $order->created_at->format('F j, Y \a\t g:i A') }}
                                    </div>
                                </div>
                                <div class="col-sm-6 mb-3">
                                    <div class="info-item">
                                        <strong>{{ __('Order Status') }}:</strong><br>
                                        {!! $order->status_badge !!}
                                    </div>
                                </div>
                                <div class="col-sm-6 mb-3">
                                    <div class="info-item">
                                        <strong>{{ __('Shipping Method') }}:</strong><br>
                                        @switch($order->shipping_method)
                                            @case('standard')
                                                {{ __('Standard Shipping (3-5 business days)') }}
                                                @break
                                            @case('express')
                                                {{ __('Express Shipping (1-2 business days)') }}
                                                @break
                                            @case('same_day')
                                                {{ __('Same Day Delivery') }}
                                                @break
                                            @default
                                                {{ $order->shipping_method }}
                                        @endswitch
                                    </div>
                                </div>
                                <div class="col-sm-6 mb-3">
                                    <div class="info-item">
                                        <strong>{{ __('Payment Method') }}:</strong><br>
                                        @switch($order->payment_method)
                                            @case('cod')
                                                {{ __('Cash on Delivery') }}
                                                @break
                                            @case('card')
                                                {{ __('Credit/Debit Card') }}
                                                @break
                                            @case('bank_transfer')
                                                {{ __('Bank Transfer') }}
                                                @break
                                            @default
                                                {{ $order->payment_method }}
                                        @endswitch
                                    </div>
                                </div>
                            </div>

                            @if($order->notes)
                                <div class="info-item mt-3">
                                    <strong>{{ __('Order Notes') }}:</strong><br>
                                    <div class="bg-light p-3 rounded mt-2">
                                        {{ $order->notes }}
                                    </div>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>

                <!-- Right Column: Order Summary -->
                <div class="col-lg-4">
                    <div class="card order-summary">
                        <div class="card-header">
                            <h6 class="mb-0">{{ __('Order Summary') }}</h6>
                        </div>
                        <div class="card-body">
                            <div class="summary-row d-flex justify-content-between mb-2">
                                <span>{{ __('Subtotal') }}:</span>
                                <span>{{ number_format($order->subtotal, 2) }} {{ __('SAR') }}</span>
                            </div>
                            <div class="summary-row d-flex justify-content-between mb-2">
                                <span>{{ __('Shipping') }}:</span>
                                <span>{{ number_format($order->shipping_amount, 2) }} {{ __('SAR') }}</span>
                            </div>
                            <div class="summary-row d-flex justify-content-between mb-2">
                                <span>{{ __('Tax (15%)') }}:</span>
                                <span>{{ number_format($order->tax_amount, 2) }} {{ __('SAR') }}</span>
                            </div>
                            @if($order->discount_amount > 0)
                                <div class="summary-row d-flex justify-content-between mb-2 text-success">
                                    <span>{{ __('Discount') }}:</span>
                                    <span>-{{ number_format($order->discount_amount, 2) }} {{ __('SAR') }}</span>
                                </div>
                            @endif
                            <hr>
                            <div class="summary-row d-flex justify-content-between mb-4">
                                <strong>{{ __('Total') }}:</strong>
                                <strong class="text-primary">{{ $order->formatted_total }}</strong>
                            </div>

                            <!-- Action Buttons -->
                            <div class="d-grid gap-2">
                                @if($order->user_id)
                                    <a href="{{ route('profile.orders', $order->id) }}" class="btn btn-primary">
                                        <i class="fas fa-eye me-2"></i>
                                        {{ __('View Order Details') }}
                                    </a>
                                @endif

                                <a href="{{ route('products.index') }}" class="btn btn-outline-primary">
                                    <i class="fas fa-shopping-bag me-2"></i>
                                    {{ __('Continue Shopping') }}
                                </a>

                                <button type="button" class="btn btn-outline-secondary" onclick="window.print()">
                                    <i class="fas fa-print me-2"></i>
                                    {{ __('Print Order') }}
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- What's Next Card -->
                    <div class="card mt-4">
                        <div class="card-header">
                            <h6 class="mb-0">{{ __('What\'s Next?') }}</h6>
                        </div>
                        <div class="card-body">
                            <div class="timeline">
                                <div class="timeline-item {{ $order->status === 'pending' ? 'active' : 'completed' }}">
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h6>{{ __('Order Received') }}</h6>
                                        <small class="text-muted">{{ __('Your order has been placed') }}</small>
                                    </div>
                                </div>
                                <div class="timeline-item {{ in_array($order->status, ['processing', 'shipped', 'delivered']) ? 'active' : '' }}">
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h6>{{ __('Order Processing') }}</h6>
                                        <small class="text-muted">{{ __('We\'re preparing your order') }}</small>
                                    </div>
                                </div>
                                <div class="timeline-item {{ in_array($order->status, ['shipped', 'delivered']) ? 'active' : '' }}">
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h6>{{ __('Order Shipped') }}</h6>
                                        <small class="text-muted">{{ __('Your order is on the way') }}</small>
                                    </div>
                                </div>
                                <div class="timeline-item {{ $order->status === 'delivered' ? 'active' : '' }}">
                                    <div class="timeline-marker"></div>
                                    <div class="timeline-content">
                                        <h6>{{ __('Order Delivered') }}</h6>
                                        <small class="text-muted">{{ __('Enjoy your purchase!') }}</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Email Notification -->
            <div class="row mt-5">
                <div class="col-12">
                    <div class="alert alert-info">
                        <i class="fas fa-envelope me-2"></i>
                        {{ __('A confirmation email has been sent to') }} <strong>{{ $order->customer_email }}</strong>.
                        {{ __('If you don\'t receive it within a few minutes, please check your spam folder.') }}
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('styles')
    <style>
        .success-icon {
            animation: bounceIn 0.8s ease-out;
        }

        @keyframes bounceIn {
            0% { opacity: 0; transform: scale(0.3); }
            50% { opacity: 1; transform: scale(1.05); }
            70% { transform: scale(0.9); }
            100% { opacity: 1; transform: scale(1); }
        }

        .order-number-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2rem;
            border-radius: 1rem;
            display: inline-block;
            margin: 1rem 0;
        }

        .order-number {
            font-size: 1.5rem;
            font-weight: bold;
            font-family: 'Courier New', monospace;
            letter-spacing: 2px;
            margin: 0.5rem 0;
        }

        .info-item {
            padding: 0.5rem 0;
        }

        .order-summary {
            position: sticky;
            top: 20px;
        }

        .summary-row {
            padding: 0.25rem 0;
        }

        .timeline {
            position: relative;
            padding-left: 2rem;
        }

        .timeline-item {
            position: relative;
            padding-bottom: 1.5rem;
        }

        .timeline-item:not(:last-child)::before {
            content: '';
            position: absolute;
            left: -1.75rem;
            top: 1.5rem;
            width: 2px;
            height: 100%;
            background: #e9ecef;
        }

        .timeline-item.active::before,
        .timeline-item.completed::before {
            background: var(--bs-primary);
        }

        .timeline-marker {
            position: absolute;
            left: -2rem;
            top: 0.25rem;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #e9ecef;
            border: 2px solid white;
            box-shadow: 0 0 0 2px #e9ecef;
        }

        .timeline-item.active .timeline-marker,
        .timeline-item.completed .timeline-marker {
            background: var(--bs-primary);
            box-shadow: 0 0 0 2px var(--bs-primary);
        }

        .timeline-content h6 {
            margin-bottom: 0.25rem;
            font-size: 0.875rem;
        }

        .timeline-content small {
            font-size: 0.75rem;
        }

        /* Print styles */
        @media print {
            .btn, .alert {
                display: none !important;
            }

            .order-summary {
                position: static !important;
            }

            .card {
                border: 1px solid #dee2e6 !important;
                box-shadow: none !important;
            }
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .order-number-card {
                width: 100%;
                text-align: center;
            }

            .order-summary {
                position: static;
            }

            .timeline {
                padding-left: 1.5rem;
            }

            .timeline-marker {
                left: -1.5rem;
            }

            .timeline-item:not(:last-child)::before {
                left: -1.25rem;
            }
        }
    </style>
@endpush