@extends('layouts.master')

@section('content')
<div class="row clearfix">
    <div class="col-lg-12">
        <div class="card">
            <div class="header">
                <h3>Nouveau transfert d'articles</h3>
                <a href="{{ route('mouvements_stock_pl.index') }}" class="btn btn-default">← Retour</a>
            </div>
            <div class="body">
               
                <!-- 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
                
                <form method="POST" action="{{ route('transfert.store') }}" id="transfertForm">
                    {{ csrf_field() }}
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Stock source *</label>
                                <select name="id_stock_source" id="id_stock_source" class="form-control" required>
                                    <option value="">-- Sélectionner --</option>
                                    @foreach($stocksSource as $stock)
                                    <option value="{{ $stock->id_stock }}">{{ $stock->code_stock }} | {{ $stock->nom_stock }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Stock destinataire *</label>
                                <select name="id_stock_destinataire" id="id_stock_destinataire" class="form-control" required>
                                    <option value="">-- Sélectionner --</option>
                                    @foreach($stocksDestinataires as $stock)
                                    <option value="{{ $stock->id_stock }}">{{ $stock->code_stock }} | {{ $stock->nom_stock }}</option>
                                    @endforeach
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Date de transfert *</label>
                                <input type="date" name="date_transfert" class="form-control" value="{{ date('Y-m-d') }}" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label>Pièce justificative *</label>
                                <input type="text" name="piece_justificative" class="form-control" placeholder="N° Bon de transfert / Réf" required>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Description</label>
                                <textarea name="description" class="form-control" rows="2" placeholder="Motif du transfert..."></textarea>
                            </div>
                        </div>
                    </div>
                    
                    <hr>
                    <h4>Articles à transférer</h4>
                    
                    <div class="table-responsive">
                        <table class="table table-bordered" id="articlesTable">
                            <thead style="background-color: #5bc0de">
                                <tr>
                                    <th width="40">#</th>
                                    <th width="250">Article</th>
                                    <th width="150">Référence</th>
                                    <th width="120">Stock disponible</th>
                                    <th width="120">CUMP (FBu)</th>
                                    <th width="100">Quantité</th>
                                    <th width="150">Total (FBu)</th>
                                    <th width="40"></th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr id="emptyRow">
                                    <td colspan="8" class="text-center">Sélectionnez un stock source pour voir les articles disponibles</td>
                                </tr>
                            </tbody>
                            <tfoot>
                                <tr>
                                    <th colspan="6" class="text-right">TOTAL :</th>
                                    <th id="totalMontant">0 FBu</th>
                                    <th></th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    
                    <button type="button" class="btn btn-success" id="addArticleBtn" style="display:none;">
                        <i class="fa fa-plus"></i> Ajouter un article
                    </button>
                    
                    <hr>
                    <button type="submit" class="btn btn-primary" id="submitBtn" style="display:none;">Créer le transfert</button>
                    <a href="{{ route('mouvements_stock_pl.index') }}" class="btn btn-default">Annuler</a>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection





@section('page-script')
<script>
    let articleIndex = 0;
    let articlesList = [];
    
    $(document).ready(function() {
        $('#id_stock_source').on('change', function() {
            let stockId = $(this).val();
            if (stockId) {
                loadArticles(stockId);
            } else {
                resetTable();
            }
        });
        
        $('#id_stock_destinataire').on('change', function() {
            let stockSource = $('#id_stock_source').val();
            let stockDest = $(this).val();
            
            if (stockSource && stockDest && stockSource == stockDest) {
                alert('Le stock source et le stock destinataire doivent être différents.');
                $(this).val('');
            }
        });
        
        $('#addArticleBtn').on('click', function() {
            addArticleRow();
        });
    });
    
    function loadArticles(stockId) {
        $.ajax({
            url: '/poids-lourds/get-stock-articles',
            type: 'GET',
            data: { stock_id: stockId },
            success: function(response) {
                articlesList = response;
                if (response.length > 0) {
                    $('#emptyRow').hide();
                    $('#addArticleBtn').show();
                    $('#submitBtn').show();
                    addArticleRow();
                } else {
                    $('#emptyRow').show().html('<td colspan="8" class="text-center">Aucun article disponible dans ce stock</td>');
                    $('#addArticleBtn').hide();
                    $('#submitBtn').hide();
                }
            },
            error: function() {
                alert('Erreur lors du chargement des articles');
            }
        });
    }
    
    function addArticleRow() {
        let html = `
            <tr class="article-row" data-index="${articleIndex}">
                <td>${articleIndex + 1}</td>
                <td>
                    <select name="articles[${articleIndex}][article_id]" class="form-control article-select" data-index="${articleIndex}" required>
                        <option value="">-- Choisir --</option>
                        ${articlesList.map(art => `<option value="${art.id_stock_initial}" 
                            data-prix="${art.cump_article}" 
                            data-disponible="${art.qte_disponible}" 
                            data-reference="${art.reference_article}">
                            ${art.code_article} - ${art.nom_article}
                        </option>`).join('')}
                    </select>
                 </td>
                <td><span class="ref-article-${articleIndex}">--</span></td>
                <td><span class="stock-dispo-${articleIndex}">--</span></td>
                <td><span class="cump-article-${articleIndex}">--</span></td>
                <td>
                    <input type="number" name="articles[${articleIndex}][quantite]" 
                           class="form-control quantite" 
                           data-index="${articleIndex}" 
                           min="1" step="1" required>
                    <!-- Champ caché pour le prix unitaire (CUMP) -->
                    <input type="hidden" name="articles[${articleIndex}][prix_unitaire]" 
                           class="prix-unitaire-hidden-${articleIndex}" value="0">
                 </td>
                <td><span class="total-ligne-${articleIndex}">0</span></td>
                <td>
                    <button type="button" class="btn btn-danger btn-sm remove-row" data-index="${articleIndex}">
                        <i class="fa fa-trash"></i>
                    </button>
                 </td>
             </tr>
        `;
        
        $('#articlesTable tbody').append(html);
        articleIndex++;
        updateTotals();
    }
    
    $(document).on('change', '.article-select', function() {
        let idx = $(this).data('index');
        let selected = $(this).find('option:selected');
        let prix = selected.data('prix');
        let disponible = selected.data('disponible');
        let reference = selected.data('reference');
        
        $(`.ref-article-${idx}`).text(reference || '--');
        $(`.stock-dispo-${idx}`).text(disponible);
        $(`.cump-article-${idx}`).text(prix ? prix.toLocaleString() : '0');
        
        // Mettre à jour le champ caché avec le CUMP
        $(`.prix-unitaire-hidden-${idx}`).val(prix || 0);
        
        $(`.quantite-${idx}`).attr('max', disponible);
        
        // Validation de quantité
        $(`.quantite-${idx}`).off('input').on('input', function() {
            let qte = parseInt($(this).val()) || 0;
            let max = parseInt($(this).attr('max')) || 0;
            if (qte > max) {
                alert(`Quantité maximum disponible: ${max}`);
                $(this).val(max);
                updateLineTotal(idx);
            }
            updateLineTotal(idx);
        });
        
        updateLineTotal(idx);
    });
    
    function updateLineTotal(idx) {
        let qte = parseInt($(`.quantite-${idx}`).val()) || 0;
        let prix = parseInt($(`.prix-unitaire-hidden-${idx}`).val()) || 0;
        let total = qte * prix;
        $(`.total-ligne-${idx}`).text(total.toLocaleString());
        updateTotals();
    }
    
    function updateTotals() {
        let totalGeneral = 0;
        $('[class*="total-ligne-"]').each(function() {
            let val = parseInt($(this).text().replace(/,/g, '')) || 0;
            totalGeneral += val;
        });
        $('#totalMontant').text(totalGeneral.toLocaleString() + ' FBu');
    }
    
    $(document).on('click', '.remove-row', function() {
        $(this).closest('tr').remove();
        updateTotals();
        
        // Renuméroter les lignes
        $('.article-row').each(function(index) {
            $(this).find('td:first').text(index + 1);
        });
        
        if ($('.article-row').length === 0) {
            addArticleRow();
        }
    });
    
    function resetTable() {
        $('#articlesTable tbody').html('<tr id="emptyRow"><td colspan="8" class="text-center">Sélectionnez un stock source pour voir les articles disponibles</td></tr>');
        $('#addArticleBtn').hide();
        $('#submitBtn').hide();
        articleIndex = 0;
        articlesList = [];
    }
</script>
@endsection