@extends('layouts.app')

@section('title', 'Commande confirmée')

@section('content')
<div class="container my-5">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <!-- Success Card -->
            <div class="card border-0 shadow-lg rounded-4 overflow-hidden">
                <!-- Success Header -->
                <div class="bg-gradient" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 3rem 2rem; text-align: center;">
                    <div style="font-size: 4rem; color: #4ade80; margin-bottom: 1rem;">
                        ✅
                    </div>
                    <h1 class="text-white fw-bold mb-2">Commande confirmée!</h1>
                    <p class="text-white-50">Merci pour votre achat</p>
                </div>

                <!-- Order Details -->
                <div class="card-body p-4">
                    <div class="alert alert-info mb-4">
                        <i class="fas fa-info-circle me-2"></i>
                        <strong>Numéro de commande:</strong> <span class="fw-bold">{{ $order->order_number }}</span>
                    </div>

                    <!-- Customer Info -->
                    <h5 class="fw-bold mb-3">Informations de livraison</h5>
                    <div class="row mb-4">
                        <div class="col-md-6">
                            <p><strong>Nom:</strong> {{ $order->customer_name }}</p>
                            <p><strong>Email:</strong> {{ $order->customer_email }}</p>
                            <p><strong>Téléphone:</strong> {{ $order->customer_phone }}</p>
                        </div>
                        <div class="col-md-6">
                            <p><strong>Adresse:</strong> {{ $order->shipping_address ?? '-' }}</p>
                            <p><strong>Ville:</strong> {{ $order->shipping_city ?? '-' }}</p>
                            <p><strong>Pays:</strong> {{ $order->shipping_country ?? '-' }}</p>
                        </div>
                    </div>

                    <hr>

                    <!-- Order Items -->
                    <h5 class="fw-bold mb-3">Détails de la commande</h5>
                    <table class="table table-hover">
                        <thead>
                            <tr class="table-light">
                                <th>Produit</th>
                                <th>Quantité</th>
                                <th>Prix unitaire</th>
                                <th>Total</th>
                            </tr>
                        </thead>
                        <tbody>
                            @if($order->orderItems && count($order->orderItems) > 0)
                                @foreach($order->orderItems as $item)
                                <tr>
                                    <td>{{ $item->product_name ?? ($item->product ? $item->product->name : 'Produit inconnu') }}</td>
                                    <td>{{ $item->quantity ?? 0 }}</td>
                                    <td>{{ number_format($item->unit_price ?? $item->price ?? 0, 0, ',', ' ') }} XOF</td>
                                    <td class="fw-bold">{{ number_format($item->total_price ?? (($item->unit_price ?? $item->price ?? 0) * ($item->quantity ?? 0)), 0, ',', ' ') }} XOF</td>
                                </tr>
                                @endforeach
                            @else
                                <tr>
                                    <td colspan="4" class="text-center text-muted py-3">Aucun produit dans cette commande</td>
                                </tr>
                            @endif
                        </tbody>
                    </table>

                    <hr>

                    <!-- Order Summary -->
                    <div class="row g-2 mb-4">
                        <div class="col-md-6 text-end">
                            <p><strong>Sous-total:</strong></p>
                            <p><strong>Réduction:</strong></p>
                            <p><strong>Frais de livraison:</strong></p>
                            <h5 class="text-primary fw-bold">Total:</h5>
                        </div>
                        <div class="col-md-6 text-end">
                            <p>{{ number_format($order->subtotal_amount ?? 0, 0, ',', ' ') }} XOF</p>
                            <p>-{{ number_format($order->discount_amount ?? 0, 0, ',', ' ') }} XOF</p>
                            <p>{{ number_format($order->shipping_fee ?? 0, 0, ',', ' ') }} XOF</p>
                            <h5 class="text-primary fw-bold">{{ number_format($order->total_amount ?? 0, 0, ',', ' ') }} XOF</h5>
                        </div>
                    </div>

                    <!-- Status -->
                    <div class="alert alert-success">
                        <strong>Statut:</strong> 
                        @if($order->status === 'delivered')
                            ✅ Paiement reçu
                        @elseif($order->status === 'pending')
                            ⏳ En attente de paiement
                        @elseif($order->status === 'processing')
                            🔄 En cours de traitement
                        @elseif($order->status === 'shipped')
                            🚚 Livraison en cours
                        @else
                            {{ ucfirst($order->status) }}
                        @endif
                    </div>

                    @if($order->notes)
                    <div class="alert alert-info">
                        <strong>Notes:</strong> {{ $order->notes }}
                    </div>
                    @endif
                </div>

                <!-- Actions -->
                <div class="card-footer bg-light p-4 text-center">
                    <a href="{{ route('shop.index') }}" class="btn btn-primary btn-lg me-2">
                        <i class="fas fa-shopping-bag me-2"></i> Continuer mes achats
                    </a>
                    <a href="{{ route('shop.order.show', $order) }}" class="btn btn-outline-primary btn-lg">
                        <i class="fas fa-receipt me-2"></i> Voir la commande
                    </a>
                </div>
            </div>

            <!-- Additional Info -->
            <div class="row mt-4">
                <div class="col-md-6">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body text-center">
                            <i class="fas fa-envelope text-primary" style="font-size: 2rem;"></i>
                            <h6 class="mt-3 fw-bold">Confirmation par email</h6>
                            <p class="text-muted small">Un email de confirmation a été envoyé à {{ $order->customer_email }}</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="card border-0 shadow-sm">
                        <div class="card-body text-center">
                            <i class="fas fa-phone text-primary" style="font-size: 2rem;"></i>
                            <h6 class="mt-3 fw-bold">Support client</h6>
                            <p class="text-muted small">Nous serons en contact avec vous au {{ $order->customer_phone }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
