@extends('layouts.master')

@section('content')
<div class="row clearfix">
    <div class="col-lg-12">
        <div class="card">
            <div class="header">
                <h2>Initialisation multiple des stocks poids lourds</h2>
                <ul class="header-dropdown">
                    <li><a href="{{ route('stocks_poids_lourds.create') }}" class="btn btn-primary">Initialisation simple</a></li>
                    <li><a href="{{ route('stocks_poids_lourds.index') }}" class="btn btn-secondary">Retour à la liste</a></li>
                </ul>
            </div>

            <!-- Messages flash -->
            @if(session('message'))
                <div class="alert alert-success alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <i class="zmdi zmdi-check-circle"></i> {{ session('message') }}
                </div>
            @endif
            
            @if(session('warning'))
                <div class="alert alert-warning alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <i class="zmdi zmdi-alert-triangle"></i> {{ session('warning') }}
                </div>
            @endif
            
            @if(session('message_exist'))
                <div class="alert alert-danger alert-dismissible">
                    <button type="button" class="close" data-dismiss="alert">&times;</button>
                    <i class="zmdi zmdi-close-circle"></i> {{ session('message_exist') }}
                </div>
            @endif

            <!-- Résumé détaillé après initialisation -->
            @if(session('init_summary'))
                @php $summary = session('init_summary'); @endphp
                <div class="alert alert-info">
                    <h5><i class="zmdi zmdi-info"></i> Résumé de l'initialisation</h5>
                    <p><strong>Stock :</strong> {{ $summary['stockName'] ?? $summary['stock'] ?? 'N/A' }}</p>
                    <p><strong>Initialisés :</strong> {{ $summary['saved'] }} article(s)</p>
                    @if(($summary['skipped'] ?? 0) > 0)
                        <p><strong>Ignorés :</strong> {{ $summary['skipped'] }} article(s) (déjà initialisés)</p>
                    @endif
                    
                    @if(!empty($summary['success_list']))
                        <button type="button" class="btn btn-sm btn-success" onclick="toggleDetails('successDetails')">
                            <i class="zmdi zmdi-view-list"></i> Voir les articles initialisés
                        </button>
                        <div id="successDetails" style="display:none; margin-top:10px;">
                            <table class="table table-sm table-bordered">
                                <thead>
                                    <tr>
                                        <th>Article</th>
                                        <th>Référence</th>
                                        <th>Quantité</th>
                                        <th>Prix unitaire</th>
                                        <th>Valeur totale</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($summary['success_list'] as $item)
                                    <tr>
                                        <td>{{ $item['article'] }}</td>
                                        <td>{{ $item['reference'] }}</td>
                                        <td>{{ number_format($item['quantite'], 0, ',', ' ') }}</td>
                                        <td>{{ number_format($item['prix'], 0, ',', ' ') }} FBu</td>
                                        <td>{{ number_format($item['valeur_totale'], 0, ',', ' ') }} FBu</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                    
                    @if(!empty($summary['skipped_list']))
                        <button type="button" class="btn btn-sm btn-warning" onclick="toggleDetails('skippedDetails')">
                            <i class="zmdi zmdi-alert-triangle"></i> Voir les articles ignorés
                        </button>
                        <div id="skippedDetails" style="display:none; margin-top:10px;">
                            <table class="table table-sm table-bordered">
                                <thead>
                                    <tr>
                                        <th>Article</th>
                                        <th>Référence</th>
                                        <th>Raison</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach($summary['skipped_list'] as $item)
                                    <tr>
                                        <td>{{ $item['article'] }}</td>
                                        <td>{{ $item['reference'] }}</td>
                                        <td>{{ $item['raison'] }}</td>
                                    </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    @endif
                </div>
            @endif

            <div class="body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label>Sélectionner un stock *</label>
                            <select name="stock_id" id="stock_id" class="form-control" required>
                                <option value="">--- Sélectionner un stock ---</option>
                                @foreach($stocks as $stock)
                                    <option value="{{ $stock->id_stock }}">
                                        {{ $stock->nom_stock }} ({{ $stock->code_stock ?? $stock->id_stock }})
                                    </option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                </div>

                <!-- Spinner de chargement -->
                <div id="loadingSpinner" style="display:none; text-align:center; padding:50px;">
                    <i class="zmdi zmdi-spinner zmdi-hc-spin" style="font-size: 48px;"></i>
                    <p class="mt-2">Chargement des articles disponibles...</p>
                </div>

                <!-- Conteneur des articles -->
                <div id="articlesContainer" style="display:none;">
                    <div class="alert alert-info" id="articlesCountMsg"></div>
                    
                    <form method="POST" action="{{ route('stocks_poids_lourds.mass_initialization.store') }}" id="massInitForm">
                        @csrf
                        <input type="hidden" name="stock_id" id="selected_stock_id">
                        
                        <div class="row mt-4">
                            <div class="col-md-12">
                                <div class="table-responsive">
                                    <table class="table table-bordered table-striped" id="articlesTable">
                                        <thead style="background-color: #5bc0de">
                                            <tr>
                                                <th width="50"><input type="checkbox" id="selectAll"></th>
                                                <th>#</th>
                                                <th>Article</th>
                                                <th>Référence</th>
                                                <th>Catégorie</th>
                                                <th width="180">Quantité initiale *</th>
                                                <th width="180">Prix unitaire (CUMP) *</th>
                                            </tr>
                                        </thead>
                                        <tbody id="articlesTableBody">
                                            <!-- Les articles seront chargés dynamiquement via AJAX -->
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row mt-4">
                            <div class="col-md-12">
                                <div id="selectedCountAlert" class="alert alert-info" style="display: none;">
                                    <i class="zmdi zmdi-info"></i>
                                    <strong id="selectedCountText">0</strong> article(s) sélectionné(s)
                                </div>
                                
                                <button type="submit" class="btn btn-success btn-lg" id="submitBtn" disabled>
                                    <i class="zmdi zmdi-collection-plus"></i> Initialiser les articles sélectionnés
                                </button>
                                <button type="button" class="btn btn-secondary btn-lg" onclick="resetForm()">
                                    <i class="zmdi zmdi-refresh"></i> Réinitialiser
                                </button>
                            </div>
                        </div>
                    </form>
                </div>

                <!-- Message quand aucun article disponible -->
                <div id="noArticlesMsg" class="alert alert-success" style="display:none;">
                    <i class="zmdi zmdi-check-circle"></i>
                    <strong>Tous les articles ont déjà été initialisés dans ce stock !</strong>
                    <br><br>
                    <a href="{{ route('stocks_poids_lourds.index') }}" class="btn btn-primary">
                        <i class="zmdi zmdi-view-list"></i> Voir la liste des stocks
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('page-script')
<script>
function toggleDetails(id) {
    var element = document.getElementById(id);
    if (element.style.display === 'none') {
        element.style.display = 'block';
    } else {
        element.style.display = 'none';
    }
}

$(document).ready(function() {
    let selectedCount = 0;
    let currentArticles = [];
    
    // Activer/désactiver les champs d'un article
    function toggleArticleFields(index, enable) {
        if (enable) {
            $(`.qte-input[data-index="${index}"]`).prop('disabled', false);
            $(`.price-input[data-index="${index}"]`).prop('disabled', false);
        } else {
            $(`.qte-input[data-index="${index}"]`).prop('disabled', true).val('');
            $(`.price-input[data-index="${index}"]`).prop('disabled', true).val('');
        }
    }
    
    // Mettre à jour le compteur et le bouton
    function updateUI() {
        selectedCount = $('.article-checkbox:checked').length;
        
        if (selectedCount > 0) {
            $('#selectedCountText').text(selectedCount);
            $('#selectedCountAlert').fadeIn();
        } else {
            $('#selectedCountAlert').fadeOut();
        }
        
        $('#submitBtn').prop('disabled', selectedCount === 0);
        
        // Mettre à jour le "Tout cocher"
        const allChecked = $('.article-checkbox:checked').length === $('.article-checkbox').length && $('.article-checkbox').length > 0;
        $('#selectAll').prop('checked', allChecked);
    }
    
    // Charger les articles disponibles pour un stock
    function loadArticles(stockId) {
        $('#loadingSpinner').fadeIn();
        $('#articlesContainer').hide();
        $('#noArticlesMsg').hide();
        
        // Afficher un message de chargement dans le tableau
        $('#articlesTableBody').html(`
            <tr>
                <td colspan="7" class="text-center">
                    <i class="zmdi zmdi-spinner zmdi-hc-spin" style="font-size: 24px;"></i>
                    Chargement des articles...
                </td>
            </tr>
        `);
        
        $.ajax({
            url: "{{ route('stocks_poids_lourds.get_available_articles') }}",
            type: "GET",
            data: { stock_id: stockId },
            dataType: "json",
            timeout: 30000, // 30 secondes timeout
            success: function(response) {
                $('#loadingSpinner').fadeOut();
                
                if (response.success) {
                    if (response.articles && response.articles.length > 0) {
                        currentArticles = response.articles;
                        displayArticles(response.articles);
                        $('#articlesContainer').fadeIn();
                        $('#noArticlesMsg').hide();
                        $('#articlesCountMsg').html(`
                            <i class="zmdi zmdi-info-outline"></i> 
                            <strong>${response.articles.length} article(s)</strong> disponible(s) à initialiser dans ce stock.
                        `).fadeIn();
                    } else {
                        $('#articlesContainer').hide();
                        $('#noArticlesMsg').fadeIn();
                        $('#articlesTableBody').empty();
                        currentArticles = [];
                    }
                } else {
                    console.error('Erreur serveur:', response.message);
                    showError('Erreur: ' + (response.message || 'Impossible de charger les articles'));
                    $('#articlesContainer').hide();
                }
            },
            error: function(xhr, status, error) {
                $('#loadingSpinner').fadeOut();
                console.error('Erreur AJAX:', {
                    status: status,
                    error: error,
                    response: xhr.responseText,
                    statusCode: xhr.status
                });
                
                let errorMessage = "Une erreur est survenue lors du chargement des articles.";
                
                if (xhr.status === 404) {
                    errorMessage = "La route de chargement des articles n'a pas été trouvée. Vérifiez que la route 'stocks_poids_lourds.get_available_articles' est bien définie.";
                } else if (xhr.status === 500) {
                    errorMessage = "Erreur interne du serveur. Vérifiez les logs Laravel pour plus de détails.";
                } else if (status === 'timeout') {
                    errorMessage = "Délai d'attente dépassé. Veuillez réessayer.";
                }
                
                showError(errorMessage);
                $('#articlesContainer').hide();
                $('#articlesTableBody').empty();
                currentArticles = [];
            }
        });
    }
    
    // Afficher une erreur
    function showError(message) {
        const errorHtml = `
            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                <i class="zmdi zmdi-close-circle"></i>
                <strong>Erreur !</strong> ${message}
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        `;
        
        // Supprimer les anciennes alertes d'erreur
        $('.alert-danger.alert-dismissible').remove();
        
        // Ajouter la nouvelle erreur après le select
        $('.form-group').after(errorHtml);
        
        // Auto-fermeture après 5 secondes
        setTimeout(function() {
            $('.alert-danger.alert-dismissible').fadeOut();
        }, 5000);
    }
    
    // Afficher les articles dans le tableau
    function displayArticles(articles) {
        const tbody = $('#articlesTableBody');
        tbody.empty();
        
        if (!articles || articles.length === 0) {
            tbody.append(`
                <tr>
                    <td colspan="7" class="text-center text-muted">
                        Aucun article disponible pour ce stock
                    </td>
                </tr>
            `);
            return;
        }
        
        $.each(articles, function(index, article) {
            const row = `
                <tr class="article-row" data-index="${index}" data-article-id="${article.id_article}">
                    <td class="text-center">
                        <input type="checkbox" class="article-checkbox" data-index="${index}">
                    </td>
                    <td class="text-center">${index + 1}</td>
                    <td class="article-name"><strong>${escapeHtml(article.nom_article)}</strong></td>
                    <td class="article-ref">${escapeHtml(article.reference_article || 'N/A')}</td>
                    <td>
                        <span class="badge badge-info">${escapeHtml(article.code_categorie)}</span>
                        ${escapeHtml(article.nom_categorie)}
                    </td>
                    <td>
                        <input type="number" 
                               class="form-control qte-input" 
                               data-index="${index}"
                               placeholder="Quantité" 
                               step="1"
                               min="0"
                               value="0"
                               disabled>
                    </td>
                    <td>
                        <input type="number" 
                               class="form-control price-input" 
                               data-index="${index}"
                               placeholder="Prix unitaire" 
                               step="1"
                               min="0"
                               disabled>
                    </td>
                </tr>
            `;
            tbody.append(row);
        });
        
        // Réinitialiser les événements
        bindEvents();
        updateUI();
    }
    
    // Bind des événements sur les éléments dynamiques
    function bindEvents() {
        // Événement checkbox
        $('.article-checkbox').off('change').on('change', function() {
            const index = $(this).data('index');
            const isChecked = $(this).prop('checked');
            toggleArticleFields(index, isChecked);
            updateUI();
        });
        
        // Événement quantité et prix
        $('.qte-input, .price-input').off('change').on('change', function() {
            let val = parseInt($(this).val());
            if (isNaN(val) || val < 0) {
                $(this).val(0);
            }
        });
        
        // Événement "Tout cocher"
        $('#selectAll').off('change').on('change', function() {
            const isChecked = $(this).prop('checked');
            
            $('.article-checkbox').each(function() {
                const index = $(this).data('index');
                $(this).prop('checked', isChecked);
                toggleArticleFields(index, isChecked);
            });
            
            updateUI();
        });
    }
    
    // Échapper les caractères HTML pour éviter les injections XSS
    function escapeHtml(text) {
        if (!text) return '';
        const map = {
            '&': '&amp;',
            '<': '&lt;',
            '>': '&gt;',
            '"': '&quot;',
            "'": '&#039;'
        };
        return String(text).replace(/[&<>"']/g, function(m) { return map[m]; });
    }
    
    // Validation avant soumission
    $('#massInitForm').on('submit', function(e) {
        let hasError = false;
        let errorMessages = [];
        let selectedArticlesData = [];
        
        $('.article-checkbox:checked').each(function() {
            const index = $(this).data('index');
            const article = currentArticles[index];
            
            if (!article) {
                errorMessages.push(`❌ Article non trouvé à l'index ${index}`);
                hasError = true;
                return;
            }
            
            let qte = $(`.qte-input[data-index="${index}"]`).val();
            const price = $(`.price-input[data-index="${index}"]`).val();
            
            // Vérifier la quantité
            if (!qte && qte !== '0') {
                errorMessages.push(`❌ La quantité pour "${article.nom_article}" est requise`);
                hasError = true;
            } else {
                qte = parseInt(qte);
                if (isNaN(qte)) {
                    errorMessages.push(`❌ La quantité pour "${article.nom_article}" doit être un nombre valide`);
                    hasError = true;
                } else if (qte < 0) {
                    errorMessages.push(`❌ La quantité pour "${article.nom_article}" ne peut pas être négative`);
                    hasError = true;
                }
            }
            
            // Vérifier le prix
            if (!price && price !== '0') {
                errorMessages.push(`❌ Le prix unitaire pour "${article.nom_article}" est requis`);
                hasError = true;
            } else {
                const priceInt = parseInt(price);
                if (isNaN(priceInt)) {
                    errorMessages.push(`❌ Le prix unitaire pour "${article.nom_article}" doit être un nombre valide`);
                    hasError = true;
                } else if (priceInt < 0) {
                    errorMessages.push(`❌ Le prix unitaire pour "${article.nom_article}" ne peut pas être négatif`);
                    hasError = true;
                }
            }
            
            selectedArticlesData.push({
                article_id: article.id_article,
                stock_inventorier: qte || 0,
                cump_article: price
            });
        });
        
        if (hasError) {
            e.preventDefault();
            alert(errorMessages.join('\n'));
            return false;
        }
        
        if (selectedArticlesData.length === 0) {
            e.preventDefault();
            alert('❌ Veuillez sélectionner au moins un article');
            return false;
        }
        
        // Supprimer les anciens inputs dynamiques
        $('#dynamic-articles-inputs').remove();
        
        let $dynamicContainer = $('<div id="dynamic-articles-inputs" style="display:none;"></div>');
        
        $.each(selectedArticlesData, function(idx, article) {
            $dynamicContainer.append(`<input type="hidden" name="articles[${idx}][article_id]" value="${article.article_id}">`);
            $dynamicContainer.append(`<input type="hidden" name="articles[${idx}][stock_inventorier]" value="${article.stock_inventorier}">`);
            $dynamicContainer.append(`<input type="hidden" name="articles[${idx}][cump_article]" value="${article.cump_article}">`);
        });
        
        const stockId = $('#stock_id').val();
        $dynamicContainer.append(`<input type="hidden" name="stock_id" value="${stockId}">`);
        
        $('#massInitForm').append($dynamicContainer);
        
        const stockName = $('#stock_id option:selected').text();
        let confirmMessage = `✅ Confirmer l'initialisation de ${selectedArticlesData.length} article(s) ?\n\nStock: ${stockName}\n`;
        
        const zeroQtyArticles = selectedArticlesData.filter(a => a.stock_inventorier == 0);
        if (zeroQtyArticles.length > 0) {
            confirmMessage += `\n⚠️ Attention: ${zeroQtyArticles.length} article(s) auront une quantité initiale de 0.\n`;
        }
        
        confirmMessage += `\n⚠️ Cette action est irréversible !`;
        
        if (!confirm(confirmMessage)) {
            e.preventDefault();
            return false;
        }
    });
    
    // Réinitialiser le formulaire
    window.resetForm = function() {
        if (confirm('Voulez-vous vraiment réinitialiser le formulaire ?')) {
            $('#stock_id').val('');
            $('#articlesContainer').hide();
            $('#noArticlesMsg').hide();
            $('#articlesTableBody').empty();
            $('#selectedCountAlert').hide();
            $('#articlesCountMsg').hide();
            currentArticles = [];
            $('#submitBtn').prop('disabled', true);
            $('#selectAll').prop('checked', false);
            $('#selected_stock_id').val('');
            
            // Supprimer les inputs dynamiques
            $('#dynamic-articles-inputs').remove();
            
            // Supprimer les alertes d'erreur
            $('.alert-danger.alert-dismissible').remove();
        }
    };
    
    // Quand le stock change
    $('#stock_id').on('change', function() {
        const stockId = $(this).val();
        
        if (stockId) {
            $('#selected_stock_id').val(stockId);
            loadArticles(stockId);
        } else {
            $('#articlesContainer').fadeOut();
            $('#noArticlesMsg').fadeOut();
            $('#articlesTableBody').empty();
            $('#selectedCountAlert').hide();
            $('#articlesCountMsg').hide();
            currentArticles = [];
            $('#submitBtn').prop('disabled', true);
            $('#selectAll').prop('checked', false);
        }
    });
    
    // Initialiser le bouton submit désactivé
    $('#submitBtn').prop('disabled', true);
});
</script>
@endsection