@extends('layouts.app')

@section('title', 'Rapport Inventaire - Supervision')

@push('styles')
<style>
    .stock-status {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        display: inline-block;
        margin-right: 8px;
    }
    
    .stock-good { background-color: #28a745; }
    .stock-low { background-color: #ffc107; }
    .stock-out { background-color: #dc3545; }
    
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }
    
    .stat-item {
        background: white;
        padding: 1rem;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        text-align: center;
    }
    
    .stat-value {
        font-size: 1.5rem;
        font-weight: bold;
    }
    
    .inventory-alert {
        border-left: 4px solid;
    }
    
    .inventory-alert.danger { border-left-color: #dc3545; }
    .inventory-alert.warning { border-left-color: #ffc107; }
    .inventory-alert.success { border-left-color: #28a745; }
    
    .medication-card {
        transition: transform 0.2s;
    }
    
    .medication-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    }
</style>
@endpush

@section('content')
<div class="container-fluid">
    <!-- En-tête -->
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="card bg-warning text-dark">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <h4 class="card-title mb-0">
                                <i class="fas fa-boxes"></i> Rapport d'Inventaire
                            </h4>
                            <p class="card-text mb-0">
                                Gestion des stocks - Centre: {{ Auth::user()->healthCenter->name }}
                            </p>
                        </div>
                        <div>
                            <a href="{{ route('supervisor.dashboard') }}" class="btn btn-dark btn-sm">
                                <i class="fas fa-arrow-left"></i> Retour Dashboard
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Statistiques d'inventaire -->
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i class="fas fa-chart-pie"></i> Vue d'ensemble de l'inventaire
                    </h5>
                </div>
                <div class="card-body">
                    <div class="stats-grid">
                        <div class="stat-item border">
                            <div class="stat-value text-primary">{{ $inventoryStats['total_medications'] }}</div>
                            <div class="text-muted">Total médicaments</div>
                        </div>
                        <div class="stat-item border">
                            <div class="stat-value text-success">{{ $inventoryStats['good_stock_count'] }}</div>
                            <div class="text-muted">Stock suffisant</div>
                        </div>
                        <div class="stat-item border">
                            <div class="stat-value text-warning">{{ $inventoryStats['low_stock_count'] }}</div>
                            <div class="text-muted">Stock bas</div>
                        </div>
                        <div class="stat-item border">
                            <div class="stat-value text-danger">{{ $inventoryStats['out_of_stock_count'] }}</div>
                            <div class="text-muted">Rupture de stock</div>
                        </div>
                        <div class="stat-item border">
                            <div class="stat-value text-info">{{ number_format($inventoryStats['total_value'], 0, ',', ' ') }}</div>
                            <div class="text-muted">Valeur totale (FCFA)</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Alertes stock -->
    @if($inventoryStats['low_stock_count'] > 0 || $inventoryStats['out_of_stock_count'] > 0)
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="card inventory-alert {{ $inventoryStats['out_of_stock_count'] > 0 ? 'danger' : 'warning' }}">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-exclamation-triangle"></i> Alertes de stock
                    </h6>
                </div>
                <div class="card-body">
                    @if($inventoryStats['out_of_stock_count'] > 0)
                        <div class="alert alert-danger mb-2">
                            <i class="fas fa-ban"></i> 
                            <strong>{{ $inventoryStats['out_of_stock_count'] }} médicament(s)</strong> en rupture de stock
                        </div>
                    @endif
                    @if($inventoryStats['low_stock_count'] > 0)
                        <div class="alert alert-warning mb-0">
                            <i class="fas fa-exclamation-triangle"></i> 
                            <strong>{{ $inventoryStats['low_stock_count'] }} médicament(s)</strong> avec un stock bas (≤ 10 unités)
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
    @endif

    <!-- Actions rapides -->
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0">
                        <i class="fas fa-tools"></i> Actions rapides
                    </h6>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-3 mb-2">
                            <button onclick="showStockFilter('out')" class="btn btn-danger w-100">
                                <i class="fas fa-ban"></i> Ruptures de stock
                            </button>
                        </div>
                        <div class="col-md-3 mb-2">
                            <button onclick="showStockFilter('low')" class="btn btn-warning w-100">
                                <i class="fas fa-exclamation-triangle"></i> Stock bas
                            </button>
                        </div>
                        <div class="col-md-3 mb-2">
                            <button onclick="showStockFilter('good')" class="btn btn-success w-100">
                                <i class="fas fa-check"></i> Stock suffisant
                            </button>
                        </div>
                        <div class="col-md-3 mb-2">
                            <button onclick="showStockFilter('all')" class="btn btn-secondary w-100">
                                <i class="fas fa-list"></i> Tout afficher
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recherche et filtres -->
    <div class="row mb-4">
        <div class="col-md-12">
            <div class="card">
                <div class="card-body">
                    <div class="row g-3">
                        <div class="col-md-6">
                            <label class="form-label">Rechercher un médicament</label>
                            <input type="text" id="medication-search" class="form-control" placeholder="Nom ou marque du médicament...">
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Filtrer par forme</label>
                            <select id="form-filter" class="form-select">
                                <option value="">Toutes les formes</option>
                                <option value="tablet">Comprimé</option>
                                <option value="capsule">Gélule</option>
                                <option value="syrup">Sirop</option>
                                <option value="injection">Injection</option>
                                <option value="cream">Crème</option>
                                <option value="drops">Gouttes</option>
                            </select>
                        </div>
                        <div class="col-md-3">
                            <label class="form-label">Trier par</label>
                            <select id="sort-filter" class="form-select">
                                <option value="name">Nom A-Z</option>
                                <option value="stock_asc">Stock croissant</option>
                                <option value="stock_desc">Stock décroissant</option>
                                <option value="price_asc">Prix croissant</option>
                                <option value="price_desc">Prix décroissant</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Liste des médicaments -->
    <div class="row" id="medications-container">
        @foreach($medications as $medication)
        <div class="col-md-4 col-lg-3 mb-3 medication-item" 
             data-name="{{ strtolower($medication->name) }}"
             data-brand="{{ strtolower($medication->brand) }}"
             data-form="{{ $medication->form }}"
             data-stock="{{ $medication->stock_quantity }}"
             data-price="{{ $medication->unit_price }}"
             data-status="{{ $medication->stock_status }}">
            
            <div class="card medication-card h-100">
                <div class="card-body">
                    <!-- En-tête avec statut -->
                    <div class="d-flex justify-content-between align-items-start mb-2">
                        <h6 class="card-title mb-0">{{ $medication->name }}</h6>
                        <div>
                            <span class="stock-status stock-{{ $medication->stock_status }}"></span>
                            @if($medication->stock_status === 'out')
                                <span class="badge bg-danger">Rupture</span>
                            @elseif($medication->stock_status === 'low')
                                <span class="badge bg-warning">Stock bas</span>
                            @else
                                <span class="badge bg-success">OK</span>
                            @endif
                        </div>
                    </div>

                    <!-- Informations du médicament -->
                    <div class="medication-info mb-3">
                        <small class="text-muted d-block">
                            <strong>Marque:</strong> {{ $medication->brand }}
                        </small>
                        <small class="text-muted d-block">
                            <strong>Forme:</strong> {{ ucfirst($medication->form) }}
                        </small>
                        <small class="text-muted d-block">
                            <strong>Dosage:</strong> {{ $medication->dosage }}
                        </small>
                    </div>

                    <!-- Stock et prix -->
                    <div class="d-flex justify-content-between align-items-center">
                        <div>
                            <div class="h5 mb-0">
                                @if($medication->stock_status === 'out')
                                    <span class="text-danger">{{ $medication->stock_quantity }}</span>
                                @elseif($medication->stock_status === 'low')
                                    <span class="text-warning">{{ $medication->stock_quantity }}</span>
                                @else
                                    <span class="text-success">{{ $medication->stock_quantity }}</span>
                                @endif
                            </div>
                            <small class="text-muted">unités</small>
                        </div>
                        <div class="text-end">
                            <div class="h6 mb-0 text-primary">
                                {{ number_format($medication->unit_price, 0, ',', ' ') }} FCFA
                            </div>
                            <small class="text-muted">par unité</small>
                        </div>
                    </div>

                    <!-- Valeur totale du stock -->
                    <div class="mt-2 pt-2 border-top">
                        <small class="text-muted">
                            <strong>Valeur stock:</strong> 
                            {{ number_format($medication->stock_quantity * $medication->unit_price, 0, ',', ' ') }} FCFA
                        </small>
                    </div>
                </div>

                <!-- Actions -->
                @if($medication->stock_status === 'out' || $medication->stock_status === 'low')
                <div class="card-footer bg-light">
                    <small class="text-{{ $medication->stock_status === 'out' ? 'danger' : 'warning' }}">
                        <i class="fas fa-exclamation-triangle"></i>
                        {{ $medication->stock_status === 'out' ? 'Réapprovisionnement urgent' : 'Réapprovisionnement conseillé' }}
                    </small>
                </div>
                @endif
            </div>
        </div>
        @endforeach
    </div>

    <!-- Message si aucun médicament -->
    <div class="row" id="no-medications" style="display: none;">
        <div class="col-md-12">
            <div class="text-center py-5 text-muted">
                <i class="fas fa-search fa-3x mb-3"></i>
                <h5>Aucun médicament trouvé</h5>
                <p>Aucun médicament ne correspond aux critères de recherche.</p>
            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    const searchInput = document.getElementById('medication-search');
    const formFilter = document.getElementById('form-filter');
    const sortFilter = document.getElementById('sort-filter');
    const medicationsContainer = document.getElementById('medications-container');
    const noMedicationsMessage = document.getElementById('no-medications');

    // Fonction de filtrage
    function filterMedications() {
        const searchTerm = searchInput.value.toLowerCase();
        const selectedForm = formFilter.value;
        let medications = Array.from(document.querySelectorAll('.medication-item'));

        // Filtrer
        let visibleCount = 0;
        medications.forEach(function(item) {
            const name = item.dataset.name;
            const brand = item.dataset.brand;
            const form = item.dataset.form;

            const matchesSearch = name.includes(searchTerm) || brand.includes(searchTerm);
            const matchesForm = !selectedForm || form === selectedForm;

            if (matchesSearch && matchesForm) {
                item.style.display = 'block';
                visibleCount++;
            } else {
                item.style.display = 'none';
            }
        });

        // Afficher/masquer le message "aucun résultat"
        if (visibleCount === 0) {
            medicationsContainer.style.display = 'none';
            noMedicationsMessage.style.display = 'block';
        } else {
            medicationsContainer.style.display = 'flex';
            noMedicationsMessage.style.display = 'none';
        }

        // Appliquer le tri
        sortMedications();
    }

    // Fonction de tri
    function sortMedications() {
        const sortValue = sortFilter.value;
        let medications = Array.from(document.querySelectorAll('.medication-item:not([style*="display: none"])'));

        medications.sort(function(a, b) {
            switch (sortValue) {
                case 'name':
                    return a.dataset.name.localeCompare(b.dataset.name);
                case 'stock_asc':
                    return parseInt(a.dataset.stock) - parseInt(b.dataset.stock);
                case 'stock_desc':
                    return parseInt(b.dataset.stock) - parseInt(a.dataset.stock);
                case 'price_asc':
                    return parseFloat(a.dataset.price) - parseFloat(b.dataset.price);
                case 'price_desc':
                    return parseFloat(b.dataset.price) - parseFloat(a.dataset.price);
                default:
                    return 0;
            }
        });

        // Réorganiser les éléments
        medications.forEach(function(item) {
            medicationsContainer.appendChild(item);
        });
    }

    // Fonction de filtrage par statut de stock
    window.showStockFilter = function(status) {
        let medications = Array.from(document.querySelectorAll('.medication-item'));
        let visibleCount = 0;

        medications.forEach(function(item) {
            if (status === 'all' || item.dataset.status === status) {
                item.style.display = 'block';
                visibleCount++;
            } else {
                item.style.display = 'none';
            }
        });

        // Réinitialiser les autres filtres
        searchInput.value = '';
        formFilter.value = '';

        // Afficher/masquer le message "aucun résultat"
        if (visibleCount === 0) {
            medicationsContainer.style.display = 'none';
            noMedicationsMessage.style.display = 'block';
        } else {
            medicationsContainer.style.display = 'flex';
            noMedicationsMessage.style.display = 'none';
        }

        sortMedications();
    };

    // Événements
    searchInput.addEventListener('input', filterMedications);
    formFilter.addEventListener('change', filterMedications);
    sortFilter.addEventListener('change', sortMedications);

    // Tri initial
    sortMedications();
});
</script>
@endpush