@extends('index')
@section('title', 'Panier')
@section('title2', 'Votre panier')
@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">Votre panier</h1>
            <p class="lead text-light mb-0">Retrouvez tous vos produits avant de passer à la caisse</p>
        </div>
    @endcomponent

    <!-- Section Panier -->
    <section class="py-5">
        <div class="container">
            <div class="row">
                <!-- Produits du Panier -->
                <div class="col-lg-8" data-aos="fade-right">
                    @if (count($cart) > 0)
                        <div class="card shadow-sm mb-4">
                            <div class="card-body p-0">
                                <table class="table align-middle mb-0">
                                    <thead class="table-light">
                                        <tr>
                                            <th>Produit</th>
                                            <th class="text-center">Prix</th>
                                            <th class="text-center">Quantité</th>
                                            <th class="text-end">Total</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($cart as $item)
                                            <tr>
                                                <td>
                                                    <div class="d-flex align-items-center">
                                                        <img src="{{ asset('assets/images/produits/' . $item['image']) }}"
                                                            alt="{{ $item['name'] }}" class="rounded me-3"
                                                            style="width: 60px; height: 60px; object-fit: cover;">
                                                        <div>
                                                            <h6 class="mb-0">{{ $item['name'] }}</h6>
                                                            <small class="text-muted">Ref : #{{ $item['id'] }}</small>
                                                        </div>
                                                    </div>
                                                </td>
                                                <td class="text-center fw-bold">
                                                    {{ number_format($item['prix'], 0, ',', ' ') }} FCFA
                                                </td>
                                                <td class="text-center">
                                                    {{ $item['quantity'] }}
                                                </td>
                                                <td class="text-end fw-bold">
                                                    {{ number_format($item['prix'] * $item['quantity'], 0, ',', ' ') }} FCFA
                                                </td>
                                                <td class="text-end">
                                                    <form action="{{ route('cart.remove') }}" method="POST">
                                                        @csrf
                                                        @method('DELETE')
                                                        <input type="hidden" name="produit_id" value="{{ $item['id'] }}">
                                                        <button type="submit" class="btn btn-sm btn-outline-danger">
                                                            <i class="bi bi-trash"></i>
                                                        </button>
                                                    </form>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>

                        <!-- Actions -->
                        <div class="d-flex justify-content-between align-items-center mb-4">
                            <form action="{{ route('cart.clear') }}" method="POST">
                                @csrf
                                <button type="submit" class="btn btn-outline-secondary">
                                    <i class="bi bi-x-circle me-1"></i> Vider le panier
                                </button>
                            </form>
                            <h3>Total :
                                <span class="fw-bold text-success">
                                    {{ number_format($total, 0, ',', ' ') }} FCFA
                                </span>
                            </h3>
                        </div>
                        <!-- Coupon Code -->
                        <div class="card shadow-sm">
                            <div class="card-body">
                                <h6 class="card-title">Code promo</h6>
                                <div class="input-group">
                                    <input type="text" class="form-control" placeholder="Entrez votre code promo"
                                        disabled>
                                    <button class="btn btn-outline-success" type="button">Appliquer</button>
                                </div>
                            </div>
                        </div>
                    @else
                        <div class="text-center py-5">
                            <img src="https://cdn-icons-png.flaticon.com/512/2038/2038854.png" alt="Panier vide"
                                class="mb-4" width="120">
                            <h5 class="text-muted">Votre panier est vide</h5>
                            <a href="{{ route('produits') }}" class="btn btn-success mt-3">
                                <i class="bi bi-shop me-1"></i> Découvrir nos produits
                            </a>
                        </div>
                    @endif
                </div>

                <!-- Résumé Panier -->
                <div class="col-lg-4" data-aos="fade-left">
                    <div class="card shadow sticky-top">
                        <div class="card-header bg-success text-white">
                            <h6 class="mb-0">Résumé de votre commande</h6>
                        </div>
                        <div class="card-body">
                            <ul class="list-group list-group-flush mb-3">
                                <li class="list-group-item d-flex justify-content-between">
                                    <span>Sous-total</span>
                                    <span>{{ number_format($total, 0, ',', ' ') }} FCFA</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between">
                                    <span>Livraison</span>
                                    <span class="text-success">Gratuite</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between">
                                    <span>TVA</span>
                                    <span>0 FCFA</span>
                                </li>
                                <li class="list-group-item d-flex justify-content-between fw-bold">
                                    <span>Total</span>
                                    <span class="text-success">{{ number_format($total, 0, ',', ' ') }} FCFA</span>
                                </li>
                            </ul>
                            <a href="{{ route('commandes.create') }}" class="btn btn-success btn-lg w-100">
                                <i class="bi bi-cart-check me-2"></i>Commander maintenant
                            </a>
                            <a href="{{ route('produits') }}" class="btn btn-outline-success w-100 mt-3">
                                <i class="bi bi-arrow-left me-2"></i>Continuer mes achats
                            </a>
                        </div>
                    </div>

                    <!-- Astuce ou promo -->
                    <div class="card shadow-sm mt-4">
                        <div class="card-body">
                            <h6 class="fw-bold">💡 Astuce</h6>
                            <p class="small mb-0">Profitez de la livraison gratuite sur toutes vos commandes.</p>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </section>
@endsection