@extends('layouts.app')

@section('title', 'Modifier - ' . $item->name)

@section('content')
<div class="min-h-screen bg-gray-50 py-4 sm:py-6">
    <div class="container mx-auto px-3 sm:px-4">
        <div class="max-w-4xl mx-auto">
            
            {{-- En-tête compact --}}
            <div class="mb-4 sm:mb-6">
                <a href="{{ route('prestataire.inventory.index') }}" class="inline-flex items-center text-indigo-600 hover:text-indigo-800 text-sm mb-2">
                    <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
                    </svg>
                    Retour
                </a>
                <h1 class="text-xl sm:text-2xl font-bold text-gray-900 flex items-center gap-2">
                    <span class="text-2xl">✏️</span>
                    Modifier l'article
                </h1>
                <p class="text-gray-500 text-sm mt-1 truncate">{{ $item->name }}</p>
            </div>

            @if(session('success'))
                <div class="mb-6 p-4 bg-green-50 border border-green-200 rounded-xl text-green-700">
                    {{ session('success') }}
                </div>
            @endif

            @if(session('error'))
                <div class="mb-6 p-4 bg-red-50 border border-red-200 rounded-xl text-red-700">
                    {{ session('error') }}
                </div>
            @endif

            {{-- Formulaire --}}
            <form action="{{ route('prestataire.inventory.update', $item) }}" method="POST" enctype="multipart/form-data" class="space-y-4">
                @csrf
                @method('PUT')

                {{-- Section Informations de base --}}
                <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
                    <div class="bg-indigo-600 px-4 py-2.5">
                        <h2 class="text-sm font-semibold text-white flex items-center gap-2">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            Informations
                        </h2>
                    </div>
                    <div class="p-4 space-y-4">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <div class="sm:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Nom *</label>
                                <input type="text" name="name" value="{{ old('name', $item->name) }}" required
                                       class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 @error('name') border-red-500 @enderror">
                                @error('name')
                                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Catégorie *</label>
                                <select name="category" required
                                        class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 @error('category') border-red-500 @enderror">
                                    <option value="">Choisir...</option>
                                    <option value="equipment" {{ old('category', $item->category) == 'equipment' ? 'selected' : '' }}>Équipement</option>
                                    <option value="material" {{ old('category', $item->category) == 'material' ? 'selected' : '' }}>Matériel</option>
                                    <option value="consumable" {{ old('category', $item->category) == 'consumable' ? 'selected' : '' }}>Consommable</option>
                                    <option value="accessory" {{ old('category', $item->category) == 'accessory' ? 'selected' : '' }}>Accessoire</option>
                                    <option value="other" {{ old('category', $item->category) == 'other' ? 'selected' : '' }}>Autre</option>
                                </select>
                                @error('category')
                                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">SKU</label>
                                <input type="text" name="sku" value="{{ old('sku', $item->sku) }}"
                                       class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 @error('sku') border-red-500 @enderror"
                                       placeholder="Référence">
                                @error('sku')
                                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            <div class="sm:col-span-2">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                                <textarea name="description" rows="2"
                                          class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 @error('description') border-red-500 @enderror">{{ old('description', $item->description) }}</textarea>
                                @error('description')
                                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Section Prix et Bénéfices --}}
                <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
                    <div class="bg-green-600 px-4 py-2.5">
                        <h2 class="text-sm font-semibold text-white flex items-center gap-2">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                            Prix
                        </h2>
                    </div>
                    <div class="p-4">
                        <div class="grid grid-cols-2 sm:grid-cols-3 gap-3">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Achat € *</label>
                                <div class="relative">
                                    <input type="number" name="cost_per_unit" step="0.01" min="0" 
                                           value="{{ old('cost_per_unit', $item->cost_per_unit) }}" required
                                           id="costPrice"
                                           class="w-full px-3 py-2 pl-6 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 @error('cost_per_unit') border-red-500 @enderror">
                                    <span class="absolute left-2 top-1/2 -translate-y-1/2 text-gray-400 text-sm">€</span>
                                </div>
                                @error('cost_per_unit')
                                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Vente € *</label>
                                <div class="relative">
                                    <input type="number" name="selling_price" step="0.01" min="0" 
                                           value="{{ old('selling_price', $item->selling_price) }}" required
                                           id="sellingPrice"
                                           class="w-full px-3 py-2 pl-6 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 @error('selling_price') border-red-500 @enderror">
                                    <span class="absolute left-2 top-1/2 -translate-y-1/2 text-gray-400 text-sm">€</span>
                                </div>
                                @error('selling_price')
                                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                @enderror
                            </div>
                            
                            <div class="col-span-2 sm:col-span-1">
                                <label class="block text-sm font-medium text-gray-700 mb-1">Marge</label>
                                <div class="px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg flex items-center justify-between">
                                    <span id="profitAmount" class="text-sm font-bold text-emerald-600">+0€</span>
                                    <span id="profitPercent" class="text-xs font-semibold px-1.5 py-0.5 bg-emerald-100 text-emerald-700 rounded">0%</span>
                                </div>
                            </div>
                        </div>
                        
                        {{-- Indicateur visuel de marge compact --}}
                        <div class="mt-3 p-3 bg-gray-50 rounded-lg">
                            <div class="flex items-center justify-between mb-1">
                                <span class="text-xs text-gray-600">Rentabilité</span>
                                <span id="profitLabel" class="text-xs font-medium text-gray-600">-</span>
                            </div>
                            <div class="h-2 bg-gray-200 rounded-full overflow-hidden">
                                <div id="profitBar" class="h-full bg-gray-400 rounded-full transition-all duration-300" style="width: 0%"></div>
                            </div>
                        </div>

                        {{-- Résumé financier complet --}}
                        @php
                            $itemProfit = ($item->selling_price - $item->cost_per_unit) * $item->quantity;
                            $itemMargin = $item->cost_per_unit > 0 ? (($item->selling_price - $item->cost_per_unit) / $item->cost_per_unit) * 100 : 0;
                        @endphp
                        <div class="mt-3 p-3 bg-indigo-50 border border-indigo-100 rounded-lg">
                            <p class="text-xs font-medium text-indigo-800 mb-2">💰 Résumé financier (stock: {{ $item->quantity }})</p>
                            <div class="grid grid-cols-3 gap-2 text-center">
                                <div>
                                    <p class="text-xs text-indigo-600">Coût total</p>
                                    <p class="text-sm font-bold text-gray-800">{{ number_format($item->cost_per_unit * $item->quantity, 0) }}€</p>
                                </div>
                                <div>
                                    <p class="text-xs text-indigo-600">Valeur vente</p>
                                    <p class="text-sm font-bold text-gray-800">{{ number_format($item->selling_price * $item->quantity, 0) }}€</p>
                                </div>
                                <div>
                                    <p class="text-xs text-indigo-600">Bénéfice</p>
                                    <p class="text-sm font-bold {{ $itemProfit >= 0 ? 'text-emerald-600' : 'text-red-600' }}">
                                        {{ $itemProfit >= 0 ? '+' : '' }}{{ number_format($itemProfit, 0) }}€
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Section Stock --}}
                <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
                    <div class="bg-blue-600 px-4 py-2.5">
                        <h2 class="text-sm font-semibold text-white flex items-center gap-2">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>
                            </svg>
                            Gestion du Stock
                        </h2>
                    </div>
                    <div class="p-4">
                        <div class="grid grid-cols-3 gap-3">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Quantité *</label>
                                <input type="number" name="quantity" min="0" value="{{ old('quantity', $item->quantity) }}" required
                                       class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 @error('quantity') border-red-500 @enderror">
                                @error('quantity')
                                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                                @enderror
                                @if($item->initial_quantity)
                                    <p class="text-xs text-gray-400 mt-1">Initial: {{ $item->initial_quantity }}</p>
                                @endif
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Unité</label>
                                <select name="unit"
                                        class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500">
                                    <option value="unité" {{ old('unit', $item->unit) == 'unité' ? 'selected' : '' }}>Unité</option>
                                    <option value="pièce" {{ old('unit', $item->unit) == 'pièce' ? 'selected' : '' }}>Pièce</option>
                                    <option value="lot" {{ old('unit', $item->unit) == 'lot' ? 'selected' : '' }}>Lot</option>
                                    <option value="boîte" {{ old('unit', $item->unit) == 'boîte' ? 'selected' : '' }}>Boîte</option>
                                    <option value="kg" {{ old('unit', $item->unit) == 'kg' ? 'selected' : '' }}>Kg</option>
                                    <option value="mètre" {{ old('unit', $item->unit) == 'mètre' ? 'selected' : '' }}>Mètre</option>
                                </select>
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Seuil alerte</label>
                                <input type="number" name="reorder_level" min="0" value="{{ old('reorder_level', $item->reorder_level ?? 5) }}"
                                       class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
                                       title="Alerte si stock ≤ cette valeur">
                            </div>
                        </div>
                        
                        {{-- Infos de suivi --}}
                        @if($item->last_restocked_at || $item->created_at)
                        <div class="mt-3 pt-3 border-t border-gray-100 flex flex-wrap gap-3 text-xs text-gray-500">
                            @if($item->last_restocked_at)
                                <span>📦 Dernier réappro: {{ $item->last_restocked_at->format('d/m/Y') }}</span>
                            @endif
                            @if($item->created_at)
                                <span>📅 Créé le: {{ $item->created_at->format('d/m/Y') }}</span>
                            @endif
                            @if($item->updated_at && $item->updated_at != $item->created_at)
                                <span>✏️ Modifié: {{ $item->updated_at->format('d/m/Y H:i') }}</span>
                            @endif
                        </div>
                        @endif
                    </div>
                </div>

                {{-- Section Fournisseur et Emplacement --}}
                <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
                    <div class="bg-amber-600 px-4 py-2.5">
                        <h2 class="text-sm font-semibold text-white flex items-center gap-2">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/>
                            </svg>
                            Fournisseur
                        </h2>
                    </div>
                    <div class="p-4">
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Fournisseur</label>
                                <input type="text" name="supplier" value="{{ old('supplier', $item->supplier) }}"
                                       class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
                                       placeholder="Amazon, LDLC...">
                            </div>
                            
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Emplacement</label>
                                <input type="text" name="location" value="{{ old('location', $item->location) }}"
                                       class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500"
                                       placeholder="Étagère A3...">
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Photos actuelles --}}
                @php
                    $photos = is_array($item->photos) ? $item->photos : json_decode($item->photos, true);
                @endphp
                @if($photos && count($photos) > 0)
                <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden">
                    <div class="bg-pink-600 px-4 py-2.5">
                        <h2 class="text-sm font-semibold text-white flex items-center gap-2">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>
                            </svg>
                            Photos
                        </h2>
                    </div>
                    <div class="p-3">
                        <div class="flex gap-2 overflow-x-auto pb-2">
                            @foreach($photos as $photo)
                                <img src="{{ asset('storage/' . $photo) }}" alt="Photo" 
                                     class="w-16 h-16 flex-shrink-0 object-cover rounded-lg border border-gray-200">
                            @endforeach
                        </div>
                    </div>
                </div>
                @endif

                {{-- Lien avec Vente Flash --}}
                @php
                    // Chercher les ventes urgentes liées à cet article d'inventaire
                    $linkedUrgentSales = \App\Models\UrgentSale::where('inventory_item_id', $item->id)->get();
                @endphp
                
                @if($item->urgent_sale_id || $linkedUrgentSales->count() > 0)
                <div class="bg-orange-50 border border-orange-200 rounded-xl p-4">
                    <div class="flex items-center gap-3 mb-3">
                        <div class="p-3 bg-orange-100 rounded-full">
                            <svg class="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                            </svg>
                        </div>
                        <div>
                            <p class="font-semibold text-orange-800">⚡ Ventes flash liées</p>
                            <p class="text-sm text-orange-600">Cet article est lié à {{ $linkedUrgentSales->count() }} vente(s) urgente(s)</p>
                        </div>
                    </div>
                    
                    @foreach($linkedUrgentSales as $sale)
                    <div class="flex items-center justify-between bg-white rounded-lg p-3 mb-2 border border-orange-100">
                        <div>
                            <p class="font-medium text-gray-800">{{ $sale->title }}</p>
                            <p class="text-sm text-gray-500">{{ number_format($sale->price, 2) }} € • {{ ucfirst($sale->status) }}</p>
                        </div>
                        <a href="{{ route('prestataire.urgent-sales.edit', $sale->id) }}" 
                           class="px-4 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition text-sm font-medium">
                            Modifier →
                        </a>
                    </div>
                    @endforeach
                </div>
                @else
                {{-- Pas de vente liée - proposer d'en créer une --}}
                <div class="bg-gradient-to-r from-orange-50 to-amber-50 border border-orange-200 rounded-xl p-4 flex items-center gap-4">
                    <div class="p-3 bg-orange-100 rounded-full">
                        <svg class="w-6 h-6 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
                        </svg>
                    </div>
                    <div class="flex-1">
                        <p class="font-semibold text-orange-800">💡 Créer une vente flash ?</p>
                        <p class="text-sm text-orange-600">Vendez cet article rapidement avec une annonce urgente</p>
                    </div>
                    <a href="{{ route('prestataire.urgent-sales.from-inventory', $item->id) }}" 
                       class="px-4 py-2 bg-gradient-to-r from-orange-500 to-amber-500 text-white rounded-lg hover:from-orange-600 hover:to-amber-600 transition text-sm font-semibold shadow-md">
                        ⚡ Créer une vente flash
                    </a>
                </div>
                @endif

                {{-- Boutons d'action du formulaire principal --}}
                <div class="flex gap-3 justify-end">
                    <a href="{{ route('prestataire.inventory.index') }}" 
                       class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition">
                        Annuler
                    </a>
                    <button type="submit" 
                            class="px-4 py-2 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700 transition flex items-center gap-1.5">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
                        </svg>
                        Enregistrer
                    </button>
                </div>
            </form>

            {{-- Zone de danger --}}
            <div class="mt-4 pt-4 border-t border-gray-200">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
                    <div>
                        <h3 class="text-sm font-semibold text-red-700">Zone de danger</h3>
                        <p class="text-xs text-gray-500">Supprimer définitivement cet article</p>
                    </div>
                    <form action="{{ route('prestataire.inventory.destroy', $item) }}" method="POST" 
                          onsubmit="return confirm('Supprimer cet article ?')">
                        @csrf
                        @method('DELETE')
                        <button type="submit" 
                                class="px-3 py-2 bg-red-100 text-red-700 rounded-lg text-sm font-medium hover:bg-red-200 transition flex items-center gap-1.5">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                            </svg>
                            Supprimer
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
    // Calcul automatique de la marge
    const costInput = document.getElementById('costPrice');
    const sellingInput = document.getElementById('sellingPrice');
    const profitAmount = document.getElementById('profitAmount');
    const profitPercent = document.getElementById('profitPercent');
    const profitBar = document.getElementById('profitBar');
    const profitLabel = document.getElementById('profitLabel');

    function calculateProfit() {
        const cost = parseFloat(costInput.value) || 0;
        const selling = parseFloat(sellingInput.value) || 0;
        const profit = selling - cost;
        const margin = cost > 0 ? ((profit / cost) * 100) : 0;
        
        // Afficher le bénéfice
        profitAmount.textContent = (profit >= 0 ? '+' : '') + profit.toFixed(2) + ' €';
        profitAmount.className = profit >= 0 ? 'text-lg font-bold text-emerald-600' : 'text-lg font-bold text-red-600';
        
        // Afficher le pourcentage
        profitPercent.textContent = margin.toFixed(1) + '%';
        
        // Couleur du pourcentage
        if (margin >= 30) {
            profitPercent.className = 'text-sm font-semibold px-2 py-1 bg-emerald-100 text-emerald-700 rounded-lg';
            profitBar.className = 'h-full bg-emerald-500 rounded-full transition-all duration-300';
            profitLabel.textContent = '🎯 Excellente marge !';
            profitLabel.className = 'text-sm font-medium text-emerald-600';
        } else if (margin >= 15) {
            profitPercent.className = 'text-sm font-semibold px-2 py-1 bg-green-100 text-green-700 rounded-lg';
            profitBar.className = 'h-full bg-green-500 rounded-full transition-all duration-300';
            profitLabel.textContent = '✅ Bonne marge';
            profitLabel.className = 'text-sm font-medium text-green-600';
        } else if (margin >= 0) {
            profitPercent.className = 'text-sm font-semibold px-2 py-1 bg-amber-100 text-amber-700 rounded-lg';
            profitBar.className = 'h-full bg-amber-500 rounded-full transition-all duration-300';
            profitLabel.textContent = '⚠️ Marge faible';
            profitLabel.className = 'text-sm font-medium text-amber-600';
        } else {
            profitPercent.className = 'text-sm font-semibold px-2 py-1 bg-red-100 text-red-700 rounded-lg';
            profitBar.className = 'h-full bg-red-500 rounded-full transition-all duration-300';
            profitLabel.textContent = '❌ Vente à perte !';
            profitLabel.className = 'text-sm font-medium text-red-600';
        }
        
        // Barre de progression (max 50% pour l'affichage)
        const barWidth = Math.min(Math.max(margin + 10, 0), 50) * 2;
        profitBar.style.width = barWidth + '%';
    }

    costInput.addEventListener('input', calculateProfit);
    sellingInput.addEventListener('input', calculateProfit);
    
    // Calculer au chargement
    calculateProfit();
</script>
@endpush
@endsection