@extends('index')
@section('title', 'Panier')
@section('title2', 'Commande')
@section('content')

    <!-- Header Panier -->
    @component('components.breadcrumb')
        <div data-aos="fade-right" class="text-center">
            <h1 class="display-5 fw-bold text-white mb-3">Commande</h1>
            <p class="lead text-light mb-0">Retrouvez tous vos produits avant de passer à la caisse</p>
        </div>
    @endcomponent

    <section class="py-5 mt-5">
        <div class="container">
            <!-- Progress Steps -->
            <div class="row mb-5" data-aos="fade-up">
                <div class="col-12">
                    <div class="checkout-progress">
                        <div class="progress mb-4" style="height: 4px;">
                            <div class="progress-bar bg-success" style="width: 33%"></div>
                        </div>
                        <div class="d-flex justify-content-between">
                            <div class="step active">
                                <div class="step-circle">
                                    <i class="bi bi-truck"></i>
                                </div>
                                <span class="step-label">Livraison</span>
                            </div>
                            <div class="step">
                                <div class="step-circle">
                                    <i class="bi bi-credit-card"></i>
                                </div>
                                <span class="step-label">Paiement</span>
                            </div>
                            <div class="step">
                                <div class="step-circle">
                                    <i class="bi bi-check-circle"></i>
                                </div>
                                <span class="step-label">Confirmation</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <!-- Checkout Form -->
                <div class="col-lg-8" data-aos="fade-right">
                    <!-- Shipping Information -->
                    <div class="card shadow-sm mb-4">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <i class="bi bi-truck me-2"></i>Informations de livraison
                            </h5>
                        </div>
                        <div class="card-body">
                            <form>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="firstName" class="form-label">Prénom <span
                                                class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="firstName" required>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="lastName" class="form-label">Nom <span
                                                class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="lastName" required>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="email" class="form-label">Email <span
                                            class="text-danger">*</span></label>
                                    <input type="email" class="form-control" id="email" required>
                                </div>
                                <div class="mb-3">
                                    <label for="phone" class="form-label">Téléphone <span
                                            class="text-danger">*</span></label>
                                    <input type="tel" class="form-control" id="phone" required>
                                </div>
                                {{-- <div class="mb-3">
                                    <label for="address" class="form-label">Adresse <span
                                            class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="address" required>
                                </div> --}}
                                {{-- <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label for="city" class="form-label">Ville <span
                                                class="text-danger">*</span></label>
                                        <input type="text" class="form-control" id="city" required>
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label for="postalCode" class="form-label">Code postal</label>
                                        <input type="text" class="form-control" id="postalCode">
                                    </div>
                                </div> --}}
                            </form>
                        </div>
                    </div>

                    <!-- Shipping Method -->
                    <div class="card shadow-sm mb-4">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <i class="bi bi-box-seam me-2"></i>Mode de livraison
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="radio" name="shipping" id="standard" checked>
                                <label class="form-check-label d-flex justify-content-between w-100" for="standard">
                                    <div>
                                        <strong>Livraison standard</strong>
                                        <br><small class="text-muted">3-5 jours ouvrés</small>
                                    </div>
                                    <span class="text-success fw-bold">Gratuite</span>
                                </label>
                            </div>
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="radio" name="shipping" id="express">
                                <label class="form-check-label d-flex justify-content-between w-100" for="express">
                                    <div>
                                        <strong>Livraison express</strong>
                                        <br><small class="text-muted">1-2 jours ouvrés</small>
                                    </div>
                                    <span class="fw-bold">5.000 FCFA</span>
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="shipping" id="pickup">
                                <label class="form-check-label d-flex justify-content-between w-100" for="pickup">
                                    <div>
                                        <strong>Retrait en magasin</strong>
                                        <br><small class="text-muted">Disponible aujourd'hui</small>
                                    </div>
                                    <span class="text-success fw-bold">Gratuite</span>
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Payment Method -->
                    <div class="card shadow-sm">
                        <div class="card-header">
                            <h5 class="mb-0">
                                <i class="bi bi-credit-card me-2"></i>Mode de paiement
                            </h5>
                        </div>
                        <div class="card-body">
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="radio" name="payment" value="card"
                                    id="card" checked>
                                <label class="form-check-label" for="card">
                                    <i class="bi bi-credit-card me-2"></i>Carte bancaire
                                </label>
                            </div>
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="radio" name="payment" value="mobile"
                                    id="mobile">
                                <label class="form-check-label" for="mobile">
                                    <i class="bi bi-phone me-2"></i>Mobile Money (Orange Money, Wave)
                                </label>
                            </div>
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="radio" name="payment" value="cash"
                                    id="cash">
                                <label class="form-check-label" for="cash">
                                    <i class="bi bi-cash me-2"></i>Paiement à la livraison
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Order Summary -->
                <div class="col-lg-4" data-aos="fade-left">
                    <div class="card shadow-sm sticky-top" style="top: 100px;">
                        <div class="card-header bg-success text-white">
                            <h5 class="mb-0">Votre commande</h5>
                        </div>
                        <div class="card-body">
                            <!-- Order Items -->
                            @foreach ($cart as $item)
                                <div class="order-item d-flex mb-3">
                                    <img src="{{ asset('assets/images/produits/' . $item['image']) }}" alt="T-shirt"
                                        class="rounded me-3" style="width: 60px; height: 60px; object-fit: cover;">
                                    <div class="flex-grow-1">
                                        <h6 class="mb-1">{{ $item['name'] }}</h6>
                                        <small class="text-muted">Ref : #{{ $item['id'] }}</small>
                                        <div class="d-flex justify-content-between">
                                            <span>Qté: {{ $item['quantity'] }}</span>
                                            <span
                                                class="fw-bold">{{ number_format($item['prix'] * $item['quantity'], 0, ',', ' ') }}
                                                FCFA</span>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                            <!-- Order Total -->
                            <div class="d-flex justify-content-between mb-2">
                                <span>Sous-total</span>
                                <span>{{ number_format($total, 0, ',', ' ') }} FCFA</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span>Livraison</span>
                                <span class="text-success">Gratuite</span>
                            </div>
                            <div class="d-flex justify-content-between mb-2">
                                <span>TVA</span>
                                <span>0 FCFA</span>
                            </div>
                            <hr>
                            <div class="d-flex justify-content-between mb-4">
                                <strong>Total</strong>
                                <strong class="text-success">{{ number_format($total, 0, ',', ' ') }} FCFA</strong>
                            </div>

                            <div class="d-grid">
                                <button type="button" class="btn btn-success btn-lg">
                                    <i class="bi bi-lock me-2"></i>Finaliser la commande
                                </button>
                            </div>

                            <div class="text-center mt-3">
                                <small class="text-muted">
                                    <i class="bi bi-shield-check me-1"></i>
                                    Paiement 100% sécurisé
                                </small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <style>
        .checkout-progress .step {
            text-align: center;
            flex: 1;
        }

        .step-circle {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #e9ecef;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 10px;
            font-size: 1.2rem;
            color: #6c757d;
        }

        .step.active .step-circle {
            background-color: var(--bs-success);
            color: white;
        }

        .step-label {
            font-size: 0.9rem;
            color: #6c757d;
        }

        .step.active .step-label {
            color: var(--bs-success);
            font-weight: 600;
        }
    </style>
@endsection