@extends('layouts.master')

@section('content')


<div class="card">
    <div class="card-header">
        <h3 class="text-center">Formulaire d'ajout de demande d'articles sur un bon de réquisition No: <mark>{{ $requisition->numero_requisition }}</mark></h3>
    </div>
   @if (session()->has('success'))
    <div class="alert alert-success">
      <center> <h5 style="color:black;"> {{ session()->get('success') }}</h5></center>
    </div>
@elseif (session()->has('error'))
    <div class="alert alert-danger">
       <h5 class="text-center" style="color:white;"> {{ session()->get('error') }}</h5>
    </div>

@endif 
           @if ($errors->any())
      <div class="alert alert-danger">
        <ul>
          @foreach($errors->all() as $message)
          <li class="text-black">{{ $message }}</li>
          @endforeach
        </ul>
      </div>
    @endif
    <div class="card-body">
           <a href="{{ url('detail_bon_requisition', $requisition->id_requisition) }}" class="btn btn-success btn-sm">
        <i class="fa fa-arrow-left"></i> Retour aux détails
    </a>
    <br>
        <form method="POST" id="dynamic_form" action="{{ url('save_demande_details') }}">
            @csrf
            <input type="hidden" name="requisition_id" value="{{ $requisition->id_requisition }}">

            <div class="table-responsive">
                <table class="table table-bordered table-striped" id="articles_table">
                    <thead>
                        <tr>
                            <th>Libellé de l'article</th>
                            <th>Quantité</th>
                            <th>Observation</th>
                            <th width="80">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Les lignes seront ajoutées dynamiquement -->
                    </tbody>
                    <tfoot>
                        <tr>
                            <td colspan="4" class="text-center">
                                <button type="button" name="add_row" id="add_row" class="btn btn-primary btn-sm float-center">
                                     <i class="fa fa-plus
                                    <i class="fa fa-plus"></i> Ajouter un autre
                                </button>
                            </td>
                        </tr>
                    </tfoot>
                </table>
            </div>

            <div class="text-center mt-3">
                <button type="submit" name="save" id="save" class="btn btn-success">
                    <i class="fa fa-save"></i> Enregistrer la demande
                </button>
            </div>
        </form>
    </div>
</div>
@endsection

@section('page-script')
<script>
    $(document).ready(function () {
    function initSelect2(selector) {
        if ($.fn.select2) {
            $(selector).select2({
                placeholder: "Sélectionner un article",
                allowClear: true,
                width: '100%'
            });
        }
    }

    // Fonction pour vérifier si un article existe déjà (hors ligne courante)
    function articleExists(articleId, currentRow) {
        let exists = false;
        $('#articles_table tbody tr').each(function () {
            if ($(this).is(currentRow)) return true; // ignore la ligne courante
            const selectedValue = $(this).find('select[name="article[]"]').val();
            if (selectedValue && selectedValue === articleId) {
                exists = true;
                return false; // sort du each
            }
        });
        return exists;
    }

    // Fonction pour mettre à jour la quantité d'une ligne existante
    function updateQuantity(articleId, newQuantity, currentRow) {
        $('#articles_table tbody tr').each(function () {
            if ($(this).is(currentRow)) return true;
            const selectedValue = $(this).find('select[name="article[]"]').val();
            if (selectedValue && selectedValue === articleId) {
                const qtyInput = $(this).find('input[name="quantite[]"]');
                let currentQty = parseInt(qtyInput.val()) || 0;
                qtyInput.val(currentQty + parseInt(newQuantity));
                return false;
            }
        });
    }

    // Ajouter une ligne
    function addRow(articleId = '', quantity = '') {
        const newRow = `
            <tr>
                       @php
    $unitesInvariables = ['kg', 'g', 'mg', 'l', 'ml', 'm', 'cm', 'mm'];
@endphp

                <td>
                    <select name="article[]" class="form-control article-select" required>
                        <option value="">------ Sélectionner l'article ------</option> 
                        @foreach ($articles as $u)
                            <option value="{{ $u->id_article }}" ${articleId == {{ $u->id_article }} ? 'selected' : ''}> {{ $u->nom_article }} | {{ $u->reference_article  }}
                             => ({{ $u->qte_disponible }} 
                                 {{
        in_array(strtolower($u->unite_mesure), $unitesInvariables)
        ? $u->unite_mesure
        : \Illuminate\Support\Str::plural($u->unite_mesure, $u->qte_disponible)
}})
        </option>
                        @endforeach
                    </select>
                </td> 
                <td>
                    <input type="number" name="quantite[]" min="1" class="form-control" placeholder="Quantité demandée ici" value="${quantity}" required>
                </td>
                <td>
                    <input type="text" name="observation_article[]" class="form-control" placeholder="Observation ici">
                </td>
                <td class="text-center">
                    <button type="button" class="btn btn-danger btn-sm remove_row">
                        <i class="fa fa-trash"></i> Supprimer
                    </button>
                </td>
            </tr>
        `;
        $('#articles_table tbody').append(newRow);
        initSelect2('#articles_table tbody tr:last .article-select');
        // Attacher l'événement de changement sur le nouveau select
        attachSelectChangeEvent('#articles_table tbody tr:last .article-select');
    }

    // Événement lors du changement de select
    function attachSelectChangeEvent(selector) {
        $(selector).off('change').on('change', function () {
            const selectedArticle = $(this).val();
            const currentRow = $(this).closest('tr');
            const qty = currentRow.find('input[name="quantite[]"]').val();

            if (!selectedArticle) return;

            if (articleExists(selectedArticle, currentRow)) {
                alert("Cet article existe déjà dans la demande. La quantité sera additionnée à la ligne existante.");
                // Mettre à jour la quantité existante avec la valeur de la ligne courante
                updateQuantity(selectedArticle, qty, currentRow);
                // Supprimer la ligne courante
                currentRow.remove();
            }
        });
    }

    // Ajout de la première ligne
    addRow();

    // Ajout d'une ligne vierge via le bouton
    $('#add_row').on('click', function () {
        addRow();
    });

    // Suppression de ligne
    $(document).on('click', '.remove_row', function () {
        const rowCount = $('#articles_table tbody tr').length;
        if (rowCount > 1) {
            $(this).closest('tr').remove();
        } else {
            alert("Vous devez conserver au moins une ligne.");
        }
    });

    // Validation avant soumission (optionnel)
    $('#dynamic_form').on('submit', function (e) {
        let isValid = true;
        $('#articles_table tbody tr').each(function () {
            const article = $(this).find('select[name="article[]"]').val();
            const quantite = $(this).find('input[name="quantite[]"]').val();
            if (!article || !quantite) {
                isValid = false;
                return false;
            }
        });
        if (!isValid) {
            e.preventDefault();
            alert("Veuillez remplir tous les champs (article et quantité) pour chaque ligne.");
        }
    });
});
</script>
@endsection