@extends('layouts.app')

@section('title', 'Vente Rapide - Pharmacie')

@push('styles')
<style>
    .medication-card {
        transition: all 0.3s ease;
        cursor: pointer;
    }
    .medication-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }
    .cart-item {
        border-left: 4px solid #28a745;
        background-color: #f8f9fa;
    }
    .remove-item {
        background: none;
        border: none;
        color: #dc3545;
        font-size: 1.2rem;
    }
    .total-section {
        background: linear-gradient(45deg, #28a745, #20c997);
        color: white;
    }
    .stock-warning {
        color: #856404;
        background-color: #fff3cd;
        border: 1px solid #ffeaa7;
        border-radius: 4px;
        padding: 2px 6px;
        font-size: 0.8rem;
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="card shadow-sm">
                <div class="card-header bg-success text-white d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">
                        <i class="fas fa-pills"></i> Vente Rapide - Pharmacie
                    </h4>
                    <div class="d-flex gap-3">
                        <span class="badge bg-light text-dark">
                            <i class="fas fa-chart-line"></i> Ventes aujourd'hui: {{ $todaySales }}
                        </span>
                        <span class="badge bg-light text-dark">
                            <i class="fas fa-money-bill-wave"></i> Chiffre d'affaires: {{ number_format($todayRevenue, 0, ',', ' ') }} FCFA
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- Panier de vente -->
        <div class="col-md-4">
            <div class="card shadow-sm sticky-top" style="top: 20px;">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">
                        <i class="fas fa-shopping-cart"></i> Panier de vente
                        <span class="badge bg-light text-dark" id="cart-count">0</span>
                    </h5>
                </div>
                <div class="card-body" style="max-height: 500px; overflow-y: auto;">
                    <!-- Informations client -->
                    <form id="sale-form">
                        <!-- Centre de santé automatiquement assigné depuis l'utilisateur connecté -->
                        <div class="alert alert-info">
                            <i class="fas fa-info-circle"></i>
                            Vente pour le centre : <strong>{{ $userHealthCenter->name ?? 'Centre non défini' }}</strong>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Nom du client *</label>
                            <input type="text" name="customer_name" class="form-control" required>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Téléphone</label>
                            <input type="tel" name="customer_phone" class="form-control">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Mode de paiement *</label>
                            <select name="payment_method" class="form-select" required>
                                <option value="">Sélectionner...</option>
                                <option value="cash">Espèces</option>
                                <option value="card">Carte</option>
                                <option value="mobile_money">Mobile Money</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Remise (%)</label>
                            <input type="number" name="discount_percentage" class="form-control" min="0" max="100" step="0.1" value="0" id="discount-input">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Notes</label>
                            <textarea name="notes" class="form-control" rows="2"></textarea>
                        </div>
                    </form>

                    <hr>

                    <!-- Articles du panier -->
                    <div id="cart-items">
                        <div class="text-center text-muted py-4" id="empty-cart">
                            <i class="fas fa-shopping-cart fa-3x mb-3"></i>
                            <p>Aucun article dans le panier</p>
                        </div>
                    </div>
                </div>

                <!-- Total et validation -->
                <div class="card-footer total-section">
                    <div class="row mb-2">
                        <div class="col">Sous-total:</div>
                        <div class="col-auto" id="subtotal">0 FCFA</div>
                    </div>
                    <div class="row mb-2">
                        <div class="col">Remise:</div>
                        <div class="col-auto" id="discount-amount">0 FCFA</div>
                    </div>
                    <hr class="my-2">
                    <div class="row mb-3">
                        <div class="col"><strong>Total:</strong></div>
                        <div class="col-auto"><strong id="total-amount">0 FCFA</strong></div>
                    </div>
                    <button type="button" class="btn btn-light w-100" id="process-sale" disabled>
                        <i class="fas fa-check"></i> Confirmer la vente
                    </button>
                </div>
            </div>
        </div>

        <!-- Liste des médicaments -->
        <div class="col-md-8">
            <div class="card shadow-sm">
                <div class="card-header">
                    <div class="row align-items-center">
                        <div class="col">
                            <h5 class="mb-0">
                                <i class="fas fa-search"></i> Rechercher des médicaments
                            </h5>
                        </div>
                        <div class="col-md-4">
                            <input type="text" id="medication-search" class="form-control" placeholder="Rechercher...">
                        </div>
                        <div class="col-auto">
                            @if(auth()->user()->hasPermission('view_medications'))
                                <a href="{{ route('medications.create') }}" class="btn btn-success btn-sm" title="Ajouter un nouveau médicament">
                                    <i class="fas fa-plus"></i> Nouveau
                                </a>
                                <a href="{{ route('medications.index') }}" class="btn btn-outline-secondary btn-sm" title="Gérer les médicaments">
                                    <i class="fas fa-cog"></i> Gérer
                                </a>
                            @endif
                        </div>
                    </div>
                </div>
                <div class="card-body" style="max-height: 600px; overflow-y: auto;">
                    <div class="row" id="medications-grid">
                        @forelse($medications as $medication)
                        <div class="col-md-6 mb-3 medication-item" data-name="{{ strtolower($medication->name) }}" data-brand="{{ strtolower($medication->brand) }}">
                            <div class="card medication-card h-100" data-medication-id="{{ $medication->id }}">
                                <div class="card-body">
                                    <div class="d-flex justify-content-between align-items-start mb-2">
                                        <h6 class="card-title mb-0">{{ $medication->name }}</h6>
                                        @if($medication->isLowStock())
                                            <span class="stock-warning">Stock bas</span>
                                        @endif
                                    </div>
                                    
                                    <p class="card-text text-muted small mb-2">
                                        <strong>Marque:</strong> {{ $medication->brand }}<br>
                                        <strong>Forme:</strong> {{ $medication->form }}<br>
                                        <strong>Dosage:</strong> {{ $medication->dosage }}
                                    </p>
                                    
                                    <div class="d-flex justify-content-between align-items-center">
                                        <div>
                                            <span class="h6 text-success">{{ number_format($medication->unit_price, 0, ',', ' ') }} FCFA</span><br>
                                            <small class="text-muted">Stock: {{ $medication->stock_quantity }}</small>
                                        </div>
                                        <button class="btn btn-sm btn-primary add-to-cart" data-medication-id="{{ $medication->id }}">
                                            <i class="fas fa-plus"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        @empty
                        <div class="col-12">
                            <div class="alert alert-info text-center">
                                <i class="fas fa-info-circle fa-2x mb-3"></i>
                                <h5>Aucun médicament disponible</h5>
                                <p>Il n'y a aucun médicament en stock pour ce centre de santé.</p>
                                @if(auth()->user()->hasPermission('view_medications'))
                                    <a href="{{ route('medications.create') }}" class="btn btn-success">
                                        <i class="fas fa-plus"></i> Ajouter le premier médicament
                                    </a>
                                @endif
                            </div>
                        </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de confirmation -->
<div class="modal fade" id="confirmModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Confirmer la vente</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body" id="confirm-content">
                <!-- Contenu dynamique -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-success" id="confirm-sale">Confirmer</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const cart = {
        items: [],
        subtotal: 0,
        discountPercentage: 0,
        discountAmount: 0,
        total: 0,

        addItem(medicationId, medicationData) {
            const existingItem = this.items.find(item => item.medication_id == medicationId);
            
            if (existingItem) {
                if (existingItem.quantity < medicationData.stock_quantity) {
                    existingItem.quantity++;
                    existingItem.total = existingItem.quantity * existingItem.unit_price;
                } else {
                    alert('Stock insuffisant');
                    return;
                }
            } else {
                this.items.push({
                    medication_id: medicationId,
                    name: medicationData.name,
                    brand: medicationData.brand,
                    unit_price: medicationData.unit_price,
                    quantity: 1,
                    total: medicationData.unit_price,
                    stock_quantity: medicationData.stock_quantity
                });
            }
            
            this.updateDisplay();
        },

        removeItem(medicationId) {
            this.items = this.items.filter(item => item.medication_id != medicationId);
            this.updateDisplay();
        },

        updateQuantity(medicationId, quantity) {
            const item = this.items.find(item => item.medication_id == medicationId);
            if (item) {
                if (quantity > 0 && quantity <= item.stock_quantity) {
                    item.quantity = quantity;
                    item.total = item.quantity * item.unit_price;
                    this.updateDisplay();
                }
            }
        },

        calculateTotals() {
            this.subtotal = this.items.reduce((sum, item) => sum + item.total, 0);
            this.discountPercentage = parseFloat(document.getElementById('discount-input').value) || 0;
            this.discountAmount = (this.subtotal * this.discountPercentage) / 100;
            this.total = this.subtotal - this.discountAmount;
        },

        updateDisplay() {
            this.calculateTotals();
            
            // Mettre à jour le compteur du panier
            document.getElementById('cart-count').textContent = this.items.length;
            
            // Mettre à jour les articles du panier
            const cartItemsContainer = document.getElementById('cart-items');
            const emptyCart = document.getElementById('empty-cart');
            
            if (this.items.length === 0) {
                emptyCart.style.display = 'block';
                cartItemsContainer.querySelectorAll('.cart-item').forEach(item => item.remove());
            } else {
                emptyCart.style.display = 'none';
                this.renderCartItems();
            }
            
            // Mettre à jour les totaux
            document.getElementById('subtotal').textContent = this.subtotal.toLocaleString() + ' FCFA';
            document.getElementById('discount-amount').textContent = this.discountAmount.toLocaleString() + ' FCFA';
            document.getElementById('total-amount').textContent = this.total.toLocaleString() + ' FCFA';
            
            // Activer/désactiver le bouton de validation
            const processSaleBtn = document.getElementById('process-sale');
            processSaleBtn.disabled = this.items.length === 0;
        },

        renderCartItems() {
            const container = document.getElementById('cart-items');
            container.querySelectorAll('.cart-item').forEach(item => item.remove());
            
            this.items.forEach(item => {
                const itemElement = document.createElement('div');
                itemElement.className = 'cart-item p-2 mb-2 rounded';
                itemElement.innerHTML = `
                    <div class="d-flex justify-content-between align-items-center">
                        <div class="flex-grow-1">
                            <strong>${item.name}</strong><br>
                            <small class="text-muted">${item.brand}</small>
                        </div>
                        <button class="remove-item" data-medication-id="${item.medication_id}">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="row align-items-center mt-2">
                        <div class="col">
                            <div class="input-group input-group-sm">
                                <button class="btn btn-outline-secondary qty-btn" data-action="decrease" data-medication-id="${item.medication_id}">-</button>
                                <input type="number" class="form-control text-center qty-input" 
                                       value="${item.quantity}" min="1" max="${item.stock_quantity}"
                                       data-medication-id="${item.medication_id}">
                                <button class="btn btn-outline-secondary qty-btn" data-action="increase" data-medication-id="${item.medication_id}">+</button>
                            </div>
                        </div>
                        <div class="col-auto">
                            <strong>${item.total.toLocaleString()} FCFA</strong>
                        </div>
                    </div>
                `;
                container.appendChild(itemElement);
            });
        }
    };

    // Données des médicaments
    const medications = @json($medications->keyBy('id'));

    // Événements pour ajouter au panier
    document.querySelectorAll('.add-to-cart').forEach(button => {
        button.addEventListener('click', function() {
            const medicationId = this.dataset.medicationId;
            const medicationData = medications[medicationId];
            cart.addItem(medicationId, medicationData);
        });
    });

    // Événements du panier (délégation)
    document.getElementById('cart-items').addEventListener('click', function(e) {
        if (e.target.classList.contains('remove-item') || e.target.closest('.remove-item')) {
            const medicationId = e.target.closest('[data-medication-id]').dataset.medicationId;
            cart.removeItem(medicationId);
        }
        
        if (e.target.classList.contains('qty-btn')) {
            const medicationId = e.target.dataset.medicationId;
            const action = e.target.dataset.action;
            const item = cart.items.find(item => item.medication_id == medicationId);
            
            if (item) {
                if (action === 'increase' && item.quantity < item.stock_quantity) {
                    cart.updateQuantity(medicationId, item.quantity + 1);
                } else if (action === 'decrease' && item.quantity > 1) {
                    cart.updateQuantity(medicationId, item.quantity - 1);
                }
            }
        }
    });

    document.getElementById('cart-items').addEventListener('input', function(e) {
        if (e.target.classList.contains('qty-input')) {
            const medicationId = e.target.dataset.medicationId;
            const quantity = parseInt(e.target.value);
            cart.updateQuantity(medicationId, quantity);
        }
    });

    // Événement pour la remise
    document.getElementById('discount-input').addEventListener('input', function() {
        cart.updateDisplay();
    });

    // Recherche de médicaments
    document.getElementById('medication-search').addEventListener('input', function() {
        const searchTerm = this.value.toLowerCase();
        document.querySelectorAll('.medication-item').forEach(item => {
            const name = item.dataset.name;
            const brand = item.dataset.brand;
            
            if (name.includes(searchTerm) || brand.includes(searchTerm)) {
                item.style.display = 'block';
            } else {
                item.style.display = 'none';
            }
        });
    });

    // Traitement de la vente
    document.getElementById('process-sale').addEventListener('click', function() {
        if (cart.items.length === 0) {
            alert('Le panier est vide');
            return;
        }

        // Vérifier les champs requis
        const form = document.getElementById('sale-form');
        if (!form.checkValidity()) {
            form.reportValidity();
            return;
        }

        // Afficher le modal de confirmation
        const confirmContent = document.getElementById('confirm-content');
        confirmContent.innerHTML = `
            <h6>Résumé de la vente</h6>
            <div class="table-responsive">
                <table class="table table-sm">
                    <thead>
                        <tr>
                            <th>Médicament</th>
                            <th>Qté</th>
                            <th>Prix unitaire</th>
                            <th>Total</th>
                        </tr>
                    </thead>
                    <tbody>
                        ${cart.items.map(item => `
                            <tr>
                                <td>${item.name}</td>
                                <td>${item.quantity}</td>
                                <td>${item.unit_price.toLocaleString()} FCFA</td>
                                <td>${item.total.toLocaleString()} FCFA</td>
                            </tr>
                        `).join('')}
                    </tbody>
                </table>
            </div>
            <hr>
            <div class="row">
                <div class="col">Sous-total:</div>
                <div class="col-auto">${cart.subtotal.toLocaleString()} FCFA</div>
            </div>
            <div class="row">
                <div class="col">Remise (${cart.discountPercentage}%):</div>
                <div class="col-auto">${cart.discountAmount.toLocaleString()} FCFA</div>
            </div>
            <div class="row">
                <div class="col"><strong>Total:</strong></div>
                <div class="col-auto"><strong>${cart.total.toLocaleString()} FCFA</strong></div>
            </div>
        `;
        
        new bootstrap.Modal(document.getElementById('confirmModal')).show();
    });

    // Confirmation de la vente
    document.getElementById('confirm-sale').addEventListener('click', function() {
        const confirmButton = this;
        const modal = bootstrap.Modal.getInstance(document.getElementById('confirmModal'));
        
        // Désactiver le bouton pour éviter les doubles clics
        confirmButton.disabled = true;
        confirmButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Traitement...';
        
        const formData = new FormData(document.getElementById('sale-form'));
        
        // Préparer les items pour l'envoi
        const itemsData = cart.items.map(item => ({
            medication_id: item.medication_id,
            quantity: item.quantity,
            unit_price: item.unit_price
        }));
        
        formData.append('items', JSON.stringify(itemsData));

        console.log('Envoi des données:', {
            customer_name: formData.get('customer_name'),
            customer_phone: formData.get('customer_phone'),
            payment_method: formData.get('payment_method'),
            discount_percentage: formData.get('discount_percentage'),
            notes: formData.get('notes'),
            items: itemsData
        });

        fetch('{{ route("pharmacy.quick-sale.store") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                customer_name: formData.get('customer_name'),
                customer_phone: formData.get('customer_phone'),
                payment_method: formData.get('payment_method'),
                discount_percentage: formData.get('discount_percentage') || 0,
                notes: formData.get('notes'),
                items: itemsData
            })
        })
        .then(response => {
            console.log('Statut de la réponse:', response.status);
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            console.log('Réponse du serveur:', data);
            
            if (data.success) {
                // Fermer le modal
                modal.hide();
                
                // Afficher un message de succès
                alert(`Vente effectuée avec succès!\nNuméro de reçu: ${data.receipt_number}\nMontant: ${data.total_amount.toLocaleString()} FCFA`);
                
                // Ouvrir le PDF dans un nouvel onglet pour impression automatique
                if (data.pdf_url) {
                    const printWindow = window.open(data.pdf_url, '_blank');
                    
                    // Essayer d'imprimer automatiquement
                    if (printWindow) {
                        printWindow.onload = function() {
                            printWindow.print();
                        };
                    }
                }
                
                // Réinitialiser le panier et le formulaire
                cart.items = [];
                cart.updateDisplay();
                document.getElementById('sale-form').reset();
                
                // Optionnel: rediriger vers le reçu après un délai
                setTimeout(() => {
                    if (data.receipt_url) {
                        window.location.href = data.receipt_url;
                    }
                }, 2000);
            } else {
                alert('Erreur: ' + (data.message || 'Une erreur inconnue est survenue'));
                
                // Réactiver le bouton
                confirmButton.disabled = false;
                confirmButton.innerHTML = 'Confirmer';
            }
        })
        .catch(error => {
            console.error('Erreur détaillée:', error);
            alert('Une erreur est survenue lors du traitement de la vente: ' + error.message);
            
            // Réactiver le bouton
            confirmButton.disabled = false;
            confirmButton.innerHTML = 'Confirmer';
        });
    });
});
</script>
@endpush