{% extends 'base.html.twig' %}

{% block body %}

    <!-- BEGIN PAGE BAR -->
    <div class="page-bar">
        <!-- BEGIN BREADCRUMB -->
        <ul class="page-breadcrumb">
            <li>
                <a href="{{ path('homepage') }}">Accueil</a>
                <i class="fa fa-circle"></i>
            </li>
            <li>
                <span>Produits</span>
            </li>
        </ul>
        <!-- END BREADCRUMB -->
    </div>

    <br/>

    <div class="portlet light bordered">
        <div class="portlet-title">
            <div class="caption">
                <i class="fa fa-barcode fa-lg font-green"></i>
                <span class="caption-subject bold uppercase">Produits</span>
                <span class="caption-helper">Rechercher et lister</span>
            </div>
            <div class="actions hidden-print">
                <a href="{{ path('produit_new') }}" class="btn white hidden-print"><i class="fa fa-plus"></i> Ajouter un produit</a>
                <button class="btn white hidden-print" onClick="javascript:window.print();"><i class="fa fa-print"></i> Imprimer</button>
                <a href="{{ path('produit_export') }}" class="btn white hidden-print export-produits" target="_blank"><i class="fa fa-download"></i> Exporter</a>
                {% if magasin and magasin.getNetwork() and not magasin.getNetworkMaster() %}
                    <button class="btn white hidden-print" id="btn-sync-reseau" onclick="openSyncReseauModal();"><i class="fa fa-sitemap"></i> Sync Catalogue Réseau</button>
                {% endif %}
                {% if app.user and app.user.getSuperAdmin() %}
                    <a href="{{ path('produit_import') }}" class="btn white hidden-print"><i class="fa fa-upload"></i> Importer</a>
                {% endif %}
            </div>
        </div>
        <div class="portlet-body">
            <!-- Filters toolbar -->
            <div class="ka-toolbar hidden-print">
                <div class="toolbar-left" style="flex:1 1 420px; min-width:320px;">
                    <div class="input-icon input-group" style="width:100%;">
                        <i class="fa fa-search font-red"></i>
                        {{ form_widget(form.motcles, {'attr': {
                            'class': 'form-control',
                            'placeholder': 'Rechercher par référence, désignation…'
                        }}) }}
                        <span class="input-group-addon" title="Afficher les produits épuisés" data-toggle="tooltip">
                            <label style="margin:0; font-weight:normal; cursor:pointer;">
                                <input type="checkbox" class="tooltips" id="estferme"> <span class="hidden-xs">Épuisés</span>
                            </label>
                        </span>
                    </div>
                </div>
                <div class="toolbar-right" style="flex:1 1 320px; min-width:280px;">
                    <div class="input-icon input-group" style="width:100%;">
                        <i class="fa fa-tags font-red"></i>
                        {{ form_widget(form.categorie, {'attr': {
                            'class': 'form-control',
                            'placeholder': 'Filtrer par catégorie…',
                            'data-placeholder': 'Filtrer par catégorie…'
                        }}) }}
                    </div>
                </div>
            </div>

            <hr class="ka-section-sep" />

            <div class="table-responsive">
                <table class="table table-striped table-hover ka-table-tight" id="produits">
                    <thead>
                        <tr>
                            <th>REFERENCE</th>
                            <th>EMPLACEMENT</th>
                            <th>DESIGNATION</th>
                            <th>PRIX HT</th>
                            <th>PRIX TTC</th>
                            <th>QUANTITE</th>
                            <th class="text-right hidden-print">ACTIONS</th>
                        </tr>
                    </thead>
                    <tbody id="produits-liste"></tbody>
                </table>
                <!-- Results -->
                <div id="produits-empty-hint" class="ka-empty-state" style="display:none">
                    <div style="font-size:36px;color:#9aa0a6;line-height:1;margin-bottom:6px;"><i class="fa fa-barcode" aria-hidden="true"></i></div>
                    <h4 style="margin-top:0;">Aucun produit trouvé</h4>
                    <p class="ka-muted">Modifiez votre recherche pour trouver un produit.</p>
                    <a href="{{ path('produit_new') }}" class="btn btn-sm green hidden-print"><i class="fa fa-plus"></i> Ajouter un produit</a>
                </div>
            </div>
        </div>
    </div>

    <!-- Sync Catalogue Réseau Modal -->
    <div id="sync-reseau-modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog" style="width:600px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fermer" id="sync-modal-close-btn"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"><i class="fa fa-sitemap"></i> Synchroniser le Catalogue Réseau</h4>
                </div>
                <div class="modal-body">
                    <!-- Initial Info Section -->
                    <div id="sync-initial-info" style="text-align: center;">
                        <p>Récupération du catalogue du maître réseau...</p>
                        <p><i class="fa fa-spinner fa-spin" style="font-size: 24px; color: #3498db;"></i></p>
                    </div>

                    <!-- Progress Section (hidden until sync starts) -->
                    <div id="sync-progress-section" style="display:none;">
                        <h5>Progression de la synchronisation</h5>
                        
                        <div class="progress" style="height: 25px; margin-bottom: 10px;">
                            <div id="sync-progress-bar" class="progress-bar progress-bar-striped active" role="progressbar" style="width: 0%; line-height: 25px;">
                                <span id="sync-progress-text">0%</span>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-4">
                                <div class="panel panel-default">
                                    <div class="panel-body text-center">
                                        <h6 style="margin: 0; color: #27ae60;">
                                            <i class="fa fa-check"></i> Créés
                                        </h6>
                                        <h3 id="sync-count-created" style="margin: 10px 0;">0</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel panel-default">
                                    <div class="panel-body text-center">
                                        <h6 style="margin: 0; color: #3498db;">
                                            <i class="fa fa-refresh"></i> Mis à jour
                                        </h6>
                                        <h3 id="sync-count-updated" style="margin: 10px 0;">0</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="panel panel-default">
                                    <div class="panel-body text-center">
                                        <h6 style="margin: 0; color: #e74c3c;">
                                            <i class="fa fa-times"></i> Erreurs
                                        </h6>
                                        <h3 id="sync-count-errors" style="margin: 10px 0;">0</h3>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="alert alert-info" id="sync-status-message" style="margin-top: 15px;">
                            Préparation de la synchronisation...
                        </div>

                        <div id="sync-error-messages" style="margin-top: 10px;"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn default" data-dismiss="modal" id="sync-modal-close-footer">Fermer</button>
                    <button type="button" class="btn blue" id="sync-start-btn" style="display:none;" onclick="startSyncReseau();"><i class="fa fa-play"></i> Démarrer</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}

{% block javascripts %}
    <script src="{{ asset('assets/global/scripts/produit.js') ~ '?' ~ random() }}" type="text/javascript"></script>
    <script type="text/javascript">
        let syncReseauData = {
            allProducts: [],
            currentChunk: 0,
            chunkSize: 50,
            stats: { created: 0, updated: 0, errors: 0 },
            totalProducts: 0
        };

        function openSyncReseauModal() {
            // Reset modal state
            document.getElementById('sync-initial-info').style.display = 'block';
            document.getElementById('sync-progress-section').style.display = 'none';
            document.getElementById('sync-start-btn').style.display = 'none';
            document.getElementById('sync-modal-close-btn').disabled = false;
            document.getElementById('sync-modal-close-footer').disabled = false;
            
            // Show modal
            $('#sync-reseau-modal').modal('show');
            
            // Fetch network master products
            fetchNetworkMasterProducts();
        }

        function fetchNetworkMasterProducts() {
            fetch('{{ path('produit_sync_reseau_init') }}', {
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest'
                }
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Erreur réseau: ' + response.status);
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    syncReseauData.allProducts = data.products || [];
                    syncReseauData.totalProducts = data.total;
                    syncReseauData.currentChunk = 0;
                    syncReseauData.stats = { created: 0, updated: 0, errors: 0 };
                    
                    if (syncReseauData.totalProducts === 0) {
                        document.getElementById('sync-initial-info').innerHTML = '<p class="text-warning"><i class="fa fa-info-circle"></i> Aucun produit trouvé dans le catalogue du maître réseau.</p>';
                    } else {
                        document.getElementById('sync-initial-info').innerHTML = '<p><strong>' + syncReseauData.totalProducts + ' produits</strong> seront synchronisés.</p><p class="text-muted">Cliquez sur "Démarrer" pour commencer la synchronisation.</p>';
                        document.getElementById('sync-start-btn').style.display = 'inline-block';
                    }
                } else {
                    document.getElementById('sync-initial-info').innerHTML = '<p class="text-danger"><i class="fa fa-exclamation-triangle"></i> Erreur: ' + (data.message || 'Erreur inconnue') + '</p>';
                }
            })
            .catch(error => {
                document.getElementById('sync-initial-info').innerHTML = '<p class="text-danger"><i class="fa fa-exclamation-triangle"></i> Erreur de connexion: ' + error.message + '</p>';
                console.error('Erreur:', error);
            });
        }

        function startSyncReseau() {
            // Hide initial info and show progress
            document.getElementById('sync-initial-info').style.display = 'none';
            document.getElementById('sync-progress-section').style.display = 'block';
            document.getElementById('sync-start-btn').style.display = 'none';
            document.getElementById('sync-modal-close-btn').disabled = true;
            document.getElementById('sync-modal-close-footer').disabled = true;
            
            // Reset stats
            syncReseauData.currentChunk = 0;
            syncReseauData.stats = { created: 0, updated: 0, errors: 0 };
            
            processNextSyncChunk();
        }

        function processNextSyncChunk() {
            const startIdx = syncReseauData.currentChunk * syncReseauData.chunkSize;
            const endIdx = Math.min(startIdx + syncReseauData.chunkSize, syncReseauData.allProducts.length);

            if (startIdx >= syncReseauData.allProducts.length) {
                // Sync terminée
                completeSyncReseau();
                return;
            }

            const chunk = syncReseauData.allProducts.slice(startIdx, endIdx);
            const totalProducts = syncReseauData.totalProducts;
            const processedProducts = endIdx;

            document.getElementById('sync-status-message').textContent = 'Traitement: ' + processedProducts + ' / ' + totalProducts + ' produits...';

            // Send chunk to backend
            fetch('{{ path('produit_sync_reseau_chunk') }}', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify({
                    chunk: chunk
                })
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Erreur réseau: ' + response.status);
                }
                return response.json();
            })
            .then(data => {
                if (data.success) {
                    syncReseauData.stats.created += data.created || 0;
                    syncReseauData.stats.updated += data.updated || 0;

                    if (data.errors && data.errors.length > 0) {
                        syncReseauData.stats.errors += data.errors.length;
                        displaySyncChunkErrors(data.errors);
                    }

                    updateSyncProgress(processedProducts, totalProducts);
                    syncReseauData.currentChunk++;
                    
                    // Petit délai avant le prochain chunk (évite surcharge)
                    setTimeout(processNextSyncChunk, 200);
                } else {
                    throw new Error(data.message || 'Erreur lors du sync');
                }
            })
            .catch(error => {
                const errorDiv = document.getElementById('sync-error-messages');
                errorDiv.innerHTML += '<div class="alert alert-danger"><strong>Erreur:</strong> ' + error.message + '</div>';
                console.error('Erreur sync:', error);
            });
        }

        function updateSyncProgress(processed, total) {
            const percentage = Math.round((processed / total) * 100);
            document.getElementById('sync-progress-bar').style.width = percentage + '%';
            document.getElementById('sync-progress-text').textContent = percentage + '%';
            document.getElementById('sync-count-created').textContent = syncReseauData.stats.created;
            document.getElementById('sync-count-updated').textContent = syncReseauData.stats.updated;
            document.getElementById('sync-count-errors').textContent = syncReseauData.stats.errors;
        }

        function displaySyncChunkErrors(errors) {
            const errorDiv = document.getElementById('sync-error-messages');
            errors.forEach(function(err) {
                const alert = document.createElement('div');
                alert.className = 'alert alert-warning';
                alert.style.marginBottom = '5px';
                alert.innerHTML = '<small><strong>' + (err.reference || 'Produit') + ':</strong> ' + (err.message || 'Erreur inconnue') + '</small>';
                errorDiv.appendChild(alert);
            });
        }

        function completeSyncReseau() {
            const stats = syncReseauData.stats;
            document.getElementById('sync-modal-close-btn').disabled = false;
            document.getElementById('sync-modal-close-footer').disabled = false;
            document.getElementById('sync-status-message').innerHTML = '<strong style="color: #27ae60;"><i class="fa fa-check"></i> Synchronisation terminée!</strong>';
            
            const summary = '<p><strong>Résumé:</strong></p><ul style="text-align: left;"><li>' + stats.created + ' produit(s) créé(s)</li><li>' + stats.updated + ' produit(s) mis à jour</li>';
            if (stats.errors > 0) {
                document.getElementById('sync-status-message').innerHTML += summary + '<li style="color: #e74c3c;">' + stats.errors + ' erreur(s)</li></ul>';
            } else {
                document.getElementById('sync-status-message').innerHTML += summary + '</ul>';
            }
        }
    </script>
{% endblock %}