<!doctype html>
<html lang="fr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Panier - ATARA</title>
    <link rel="icon" type="image/svg+xml" href="{{ asset('favicon.svg') }}">
    <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}">
    
    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800&family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary-color: #16c79a;
            --secondary-color: #14233c;
            --accent-color: #F59E0B;
        }

        body {
            font-family: 'Poppins', sans-serif;
        }

        h1, h2, h3 {
            font-family: 'Playfair Display', serif;
        }

        .header-section {
            background: linear-gradient(135deg, var(--secondary-color), #1e3a5f);
        }

        .header-top-area {
            background: rgba(0,0,0,0.2);
            padding: 10px 0;
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .header-social {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            gap: 15px;
        }

        .header-social a {
            color: #fff;
            font-size: 14px;
            transition: color 0.3s;
        }

        .header-social a:hover {
            color: var(--accent-color);
        }

        .header-bottom-area {
            padding: 6px 0;
            background: #fff;
        }

        .site-logo {
            font-family: 'Playfair Display', serif;
            font-size: 1.4rem;
            font-weight: 800;
            color: #000;
            text-decoration: none;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        @media (max-width: 1200px) {
            .site-logo {
                font-size: 1.3rem;
            }
        }

        @media (max-width: 768px) {
            .site-logo {
                font-size: 1.1rem;
            }
        }

        @media (max-width: 576px) {
            .site-logo {
                font-size: 0.9rem;
            }
        }

        .site-logo i {
            color: #000;
        }

        .navbar {
            padding: 0;
            flex-direction: row !important;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            flex-wrap: wrap;
        }

        .navbar-collapse {
            width: 100%;
            justify-content: center;
            order: 3;
        }

        .main-menu {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            gap: 6px;
            justify-content: space-between;
            width: 100%;
        }

        .main-menu li {
            flex: 1;
            display: flex;
            justify-content: center;
        }

        .main-menu a {
            color: #000;
            text-decoration: none;
            padding: 7px 12px;
            border-radius: 6px;
            transition: all 0.3s;
            font-weight: 500;
            text-transform: uppercase;
            font-size: 0.8rem;
            background: #f8f9fa;
            border: 1px solid #e0e0e0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            min-height: 30px;
        }

        @media (max-width: 768px) {
            .main-menu a {
                padding: 5px 10px;
                font-size: 0.7rem;
                min-height: 28px;
            }
        }

        @media (max-width: 576px) {
            .main-menu a {
                padding: 4px 8px;
                font-size: 0.65rem;
                min-height: 26px;
            }
        }

        .main-menu a:hover {
            background: #fff;
            border-color: #000;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .main-menu a.active {
            background: #000;
            color: #fff;
            border-color: #000;
            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
        }

        .header-action {
            display: flex;
            gap: 0;
            align-items: center;
        }

        .auth-section {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            padding: 0 25px;
        }

        .auth-section:first-child {
            border-right: 3px solid #000;
        }

        .auth-section-title {
            font-size: 0.9rem;
            font-weight: 700;
            color: #000;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            text-decoration: underline;
        }

        .auth-buttons {
            display: flex;
            gap: 15px;
        }

        .btn-auth {
            background: transparent;
            color: #000;
            padding: 8px 20px;
            border: 2px solid #000;
            border-radius: 50px;
            text-decoration: underline;
            font-weight: 700;
            transition: all 0.3s;
            display: inline-block;
            text-transform: uppercase;
            font-size: 0.9rem;
        }

        @media (max-width: 576px) {
            .btn-auth {
                padding: 6px 15px;
                font-size: 0.8rem;
            }
        }

        .btn-auth:hover {
            background: rgba(0,0,0,0.05);
            color: #000;
        }

        .navbar-toggler {
            border-color: rgba(255,255,255,0.3);
        }

        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }

        @media (max-width: 991px) {
            .main-menu {
                flex-direction: column;
                gap: 10px;
                padding: 15px 0;
            }

            .main-menu a {
                padding: 5px 0;
            }

            .header-action {
                flex-direction: column;
                margin-top: 15px;
                width: 100%;
            }

            .auth-section {
                width: 100%;
                padding: 15px 0;
                border-right: none !important;
                border-bottom: 2px solid #000;
            }

            .auth-section:last-child {
                border-bottom: none;
            }

            .navbar-toggler {
                border-color: rgba(0, 0, 0, 0.3);
            }

            .navbar-toggler-icon {
                background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
            }
        }

        .btn--base {
            background: linear-gradient(135deg, var(--primary-color), #0fa87a);
            color: #fff;
            padding: 10px 30px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
        }

        .page-header {
            background: linear-gradient(135deg, var(--primary-color), #0fa87a);
            padding: 60px 0;
            color: #fff;
            text-align: center;
        }

        .page-header h1 {
            font-size: 2.5rem;
            font-weight: 800;
        }

        .cart-section {
            padding: 80px 0;
        }

        .cart-table {
            background: #fff;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
        }

        .cart-item {
            padding: 20px;
            border-bottom: 1px solid #eee;
        }

        .cart-item:last-child {
            border-bottom: none;
        }

        .item-image {
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 10px;
        }

        .cart-summary {
            background: #fff;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.1);
            position: sticky;
            top: 20px;
        }

        .qty-input {
            width: 80px;
            text-align: center;
            border: 2px solid #ddd;
            border-radius: 8px;
            padding: 5px;
        }

        .btn-checkout {
            background: var(--primary-color);
            color: #fff;
            border: none;
            padding: 15px;
            border-radius: 50px;
            font-weight: 600;
            font-size: 1.1rem;
            width: 100%;
            transition: all 0.3s;
        }

        .btn-checkout:hover {
            background: #0fa87a;
            transform: translateY(-2px);
        }

        .cart-badge {
            position: absolute;
            top: -8px;
            right: -8px;
            background: var(--accent-color);
            color: #fff;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .navbar-toggler-icon {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.8)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
        }

        .empty-cart {
            text-align: center;
            padding: 80px 0;
        }

        .empty-cart i {
            font-size: 8rem;
            color: #ddd;
            margin-bottom: 30px;
        }

        .discount-applied {
            background: linear-gradient(135deg, #4CAF50, #45a049);
            color: white;
            padding: 10px;
            border-radius: 8px;
            margin-bottom: 15px;
        }
    </style>
</head>

<body>
    <header class="header-section">
        <div class="header">
            <div class="header-top-area">
                <div class="container">
                    <div class="d-flex align-items-center justify-content-between flex-wrap">
                        <div class="header-top-left">
                            <div class="social-area">
                                <ul class="header-social">
                                    <li><a href="https://www.facebook.com/" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
                                    <li><a href="https://twitter.com" target="_blank"><i class="fab fa-twitter"></i></a></li>
                                    <li><a href="https://www.linkedin.com" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
                                    <li><a href="https://www.instagram.com" target="_blank"><i class="fab fa-instagram"></i></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="header-bottom-area">
                <div class="container">
                    <nav class="navbar navbar-expand-lg">
                        <a class="site-logo" href="{{ url('/') }}">
                            <i class="fas fa-gem"></i> ATARA
                        </a>
                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="navbar-collapse collapse" id="navbarSupportedContent">
                            <ul class="navbar-nav main-menu me-auto ms-auto">
                                <li><a href="{{ url('/') }}">Accueil</a></li>
                                <li><a href="{{ route('about') }}">À Propos</a></li>
                                <li><a href="{{ route('shop.index') }}" class="active">Boutique</a></li>
                                <li><a href="{{ route('public.blog') }}">Blog</a></li>
                                <li><a href="{{ route('public.newsletter') }}">Newsletter</a></li>
                                <li><a href="{{ route('plan') }}">Plan d'investissement</a></li>
                                <li><a href="{{ route('contact') }}">Contact</a></li>
                            </ul>
                            <div class="header-action ms-auto">
                                <div class="auth-section">
                                    <div class="auth-section-title">ESPACE MEMBRE</div>
                                    <div class="auth-buttons">
                                        <a href="{{ route('member.login') }}" class="btn-auth">LOGIN</a>
                                        <a href="{{ route('member.register') }}" class="btn-auth">REGISTER</a>
                                    </div>
                                </div>
                                <div class="auth-section">
                                    <div class="auth-section-title">ESPACE VENDEUR</div>
                                    <div class="auth-buttons">
                                        <a href="{{ route('seller.login') }}" class="btn-auth">LOGIN</a>
                                        <a href="{{ route('seller.register') }}" class="btn-auth">REGISTER</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </header>

    <section class="page-header">
        <div class="container">
            <h1><i class="fas fa-shopping-cart me-3"></i> Mon Panier</h1>
        </div>
    </section>

    <section class="cart-section">
        <div class="container">
            @if(session('success'))
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <i class="fas fa-check-circle me-2"></i> {{ session('success') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            @if(session('error'))
                <div class="alert alert-danger alert-dismissible fade show" role="alert">
                    <i class="fas fa-exclamation-circle me-2"></i> {{ session('error') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            @if(session('info'))
                <div class="alert alert-info alert-dismissible fade show" role="alert">
                    <i class="fas fa-info-circle me-2"></i> {{ session('info') }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            @endif

            @if(!empty($cart) && count($cart) > 0)
                @php
                    // Identifier le vendeur du panier
                    $firstItemId = array_key_first($cart);
                    $firstProduct = \App\Models\Product::find($firstItemId);
                    $cartSellerId = $firstProduct ? $firstProduct->seller_id : null;
                    $sellerName = $cartSellerId 
                        ? (\App\Models\Seller::with('user')->find($cartSellerId)?->shop_name ?? 'Vendeur') 
                        : 'ATARA';
                @endphp
                
                <!-- Info vendeur unique -->
                <div class="alert alert-info mb-4">
                    <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                        <div>
                            <i class="fas fa-store me-2"></i>
                            <strong>Boutique :</strong> {{ $sellerName }}
                            <br>
                            <small class="text-muted">
                                <i class="fas fa-info-circle me-1"></i>
                                Les articles de votre panier proviennent de cette boutique. Pour commander auprès d'une autre boutique, vous devez d'abord finaliser ou vider ce panier.
                            </small>
                        </div>
                        <form action="{{ route('cart.clear') }}" method="POST" class="d-inline">
                            @csrf
                            @method('DELETE')
                            <button type="submit" class="btn btn-outline-danger btn-sm" onclick="return confirm('Êtes-vous sûr de vouloir vider complètement votre panier ?')">
                                <i class="fas fa-trash-alt me-1"></i> Vider le panier
                            </button>
                        </form>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-lg-8">
                        <div class="cart-table">
                            @foreach($cart as $id => $item)
                                <div class="cart-item">
                                    <div class="row align-items-center">
                                        <div class="col-md-2">
                                            @if($item['image'])
                                                <img src="{{ asset('storage/' . $item['image']) }}" class="item-image" alt="{{ $item['name'] }}">
                                            @else
                                                <div class="item-image bg-light d-flex align-items-center justify-content-center">
                                                    <i class="fas fa-gem fa-2x text-muted"></i>
                                                </div>
                                            @endif
                                        </div>
                                        <div class="col-md-4">
                                            <h5 class="mb-0">{{ $item['name'] }}</h5>
                                            <p class="text-muted mb-0">{{ number_format($item['price'], 0, ',', ' ') }} XOF</p>
                                            @if(isset($item['seller_name']))
                                                <small class="text-info">
                                                    <i class="fas fa-store me-1"></i>{{ $item['seller_name'] }}
                                                </small>
                                            @endif
                                        </div>
                                        <div class="col-md-3">
                                            <form action="{{ route('cart.update', $id) }}" method="POST" class="d-flex align-items-center gap-2">
                                                @csrf
                                                @method('PUT')
                                                <input type="number" name="quantity" value="{{ $item['quantity'] }}" min="1" class="qty-input" onchange="this.form.submit()">
                                            </form>
                                        </div>
                                        <div class="col-md-2">
                                            <p class="mb-0 fw-bold text-primary">{{ number_format($item['price'] * $item['quantity'], 0, ',', ' ') }} XOF</p>
                                        </div>
                                        <div class="col-md-1">
                                            <form action="{{ route('cart.remove', $id) }}" method="POST">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Êtes-vous sûr de vouloir supprimer ce produit ?')">
                                                    <i class="fas fa-trash"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>

                    <div class="col-lg-4">
                        <div class="cart-summary">
                            <h3 class="mb-4">Résumé de la Commande</h3>
                            
                            <!-- Code Membre -->
                            <div class="mb-4">
                                <label class="form-label fw-bold">Code Membre</label>
                                @if(session('member_discount_code') || $member)
                                    <div class="discount-applied">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span>
                                                <i class="fas fa-tag me-2"></i>
                                                <strong>{{ session('member_discount_code') ?? $member->member_code }}</strong> 
                                                ({{ $discountPercentage }}%)
                                            </span>
                                            <form action="{{ route('cart.remove-discount') }}" method="POST" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-outline-light" onclick="return confirm('Retirer le code de réduction ?')">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                @else
                                    <form action="{{ route('cart.apply-discount') }}" method="POST" id="discountForm">
                                        @csrf
                                        <div class="input-group mb-2">
                                            <input type="text" name="member_code" class="form-control" placeholder="Ex: MBR1234" required>
                                            <button type="submit" class="btn btn-primary" id="applyDiscountBtn">
                                                <i class="fas fa-check"></i> Appliquer
                                            </button>
                                        </div>
                                        <small class="text-muted">Entrez votre code membre pour bénéficier d'une réduction</small>
                                    </form>
                                @endif
                            </div>
                            
                            <!-- Code Coupon -->
                            <div class="mb-4">
                                <label class="form-label fw-bold"><i class="fas fa-ticket-alt me-1"></i> Code Coupon</label>
                                @if(isset($appliedCoupon) && $appliedCoupon)
                                    <div class="discount-applied bg-success bg-opacity-10 border border-success rounded p-2">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <span class="text-success">
                                                <i class="fas fa-check-circle me-2"></i>
                                                <strong>{{ $appliedCoupon['code'] }}</strong>
                                                @if($appliedCoupon['type'] === 'percentage')
                                                    ({{ $appliedCoupon['value'] }}%)
                                                @elseif($appliedCoupon['type'] === 'fixed')
                                                    ({{ number_format($appliedCoupon['value'], 0, ',', ' ') }} XOF)
                                                @else
                                                    (Livraison gratuite)
                                                @endif
                                            </span>
                                            <form action="{{ route('cart.remove-coupon') }}" method="POST" class="d-inline">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-sm btn-outline-danger" onclick="return confirm('Retirer le coupon ?')">
                                                    <i class="fas fa-times"></i>
                                                </button>
                                            </form>
                                        </div>
                                    </div>
                                @else
                                    <form action="{{ route('cart.apply-coupon') }}" method="POST" id="couponForm">
                                        @csrf
                                        <div class="input-group mb-2">
                                            <input type="text" name="coupon_code" class="form-control" placeholder="Ex: PROMO20" required>
                                            <button type="submit" class="btn btn-success" id="applyCouponBtn">
                                                <i class="fas fa-check"></i> Appliquer
                                            </button>
                                        </div>
                                        <small class="text-muted">Entrez un code coupon de réduction</small>
                                    </form>
                                @endif
                            </div>
                            
                            <hr>
                            
                            <div class="d-flex justify-content-between mb-3">
                                <span>Sous-total:</span>
                                <span class="fw-bold">{{ number_format($subtotal, 0, ',', ' ') }} XOF</span>
                            </div>
                            
                            @if(isset($memberDiscount) && $memberDiscount > 0)
                            <div class="d-flex justify-content-between mb-3 text-success">
                                <span><i class="fas fa-user me-1"></i> Réduction Membre ({{ $discountPercentage }}%):</span>
                                <span class="fw-bold">-{{ number_format($memberDiscount, 0, ',', ' ') }} XOF</span>
                            </div>
                            @endif
                            
                            @if(isset($couponDiscount) && $couponDiscount > 0)
                            <div class="d-flex justify-content-between mb-3 text-success">
                                <span><i class="fas fa-ticket-alt me-1"></i> Coupon {{ $appliedCoupon['code'] ?? '' }}:</span>
                                <span class="fw-bold">-{{ number_format($couponDiscount, 0, ',', ' ') }} XOF</span>
                            </div>
                            @endif
                            
                            <div class="d-flex justify-content-between mb-3">
                                <span>Livraison:</span>
                                <span class="fw-bold">Gratuite</span>
                            </div>
                            <hr>
                            <div class="d-flex justify-content-between mb-4">
                                <span class="h5">Total:</span>
                                <span class="h5 fw-bold text-primary">{{ number_format($total, 0, ',', ' ') }} XOF</span>
                            </div>
                            <a href="{{ route('checkout') }}" class="btn-checkout">
                                <i class="fas fa-lock me-2"></i> Passer la Commande
                            </a>
                            <a href="{{ route('shop.index') }}" class="btn btn-outline-secondary mt-3 w-100">
                                <i class="fas fa-shopping-bag me-2"></i> Continuer les Achats
                            </a>
                        </div>
                    </div>
                </div>
            @else
                <div class="empty-cart">
                    <i class="fas fa-shopping-cart"></i>
                    <h2>Votre panier est vide</h2>
                    <p class="text-muted mb-4">Découvrez notre collection de bijoux de luxe</p>
                    <a href="{{ route('shop.index') }}" class="btn--base">
                        <i class="fas fa-shopping-bag me-2"></i> Aller à la Boutique
                    </a>
                </div>
            @endif
        </div>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        // Gestion du formulaire de code de réduction
        document.addEventListener('DOMContentLoaded', function() {
            const discountForm = document.getElementById('discountForm');
            const applyDiscountBtn = document.getElementById('applyDiscountBtn');
            
            if (discountForm && applyDiscountBtn) {
                discountForm.addEventListener('submit', function(e) {
                    const originalText = applyDiscountBtn.innerHTML;
                    applyDiscountBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
                    applyDiscountBtn.disabled = true;
                    
                    // Le formulaire se soumet automatiquement
                });
            }
            
            // Confirmation pour la suppression
            const deleteForms = document.querySelectorAll('form[action*="cart.remove"]');
            deleteForms.forEach(form => {
                form.addEventListener('submit', function(e) {
                    if (!confirm('Êtes-vous sûr de vouloir supprimer ce produit du panier ?')) {
                        e.preventDefault();
                    }
                });
            });
        });
    </script>
</body>
</html>