@extends('gestions.layouts')

@section('content')
    <div class="row justify-content-center mt-3">
        <div class="col-md-8">
            <div class="card">
                
                <div class="card-body">
                    @if ($gestions->isEmpty())
                        <p>Aucune production enregistrée pour ce jour.</p>
                    @else
                        <table class="table">
                            <thead>
                                <tr>
                                    <th scope="col">Produit</th>
                                    <th scope="col">Quantité</th>
                                    <th scope="col"></th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($gestions as $gestion)
                                    <tr>
                                        <td>{{ $gestion->produit->referenceA }}</td>
                                        <td class="text-center">{{ $gestion->quantite * 1 }} {{ $gestion->unite }}</td>
                                        <td>
                                            <form action="{{ route('gestions.destroy', $gestion->id) }}" method="post" id="deleteForm_{{ $gestion->id }}">
                                                @csrf
                                                @method('DELETE')
                                                <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Êtes-vous sûr de vouloir supprimer ce produit en stock ?')">
                                                    <i class="bi bi-trash"></i> 
                                                </button>
                                            </form>
                                        </td>
                                    </tr>
                    
                                @endforeach

                            </tbody>
                        </table>
                    @endif
                </div>
                <form action="{{ route('gestions.store') }}" method="post">
                    @csrf
                   <input type="hidden" name="date" value="{{ $date }}"> 
                    <!-- Ajoutez d'autres champs du formulaire ici -->

                 
                  
                    <div class="mb-3 row">
                        <label for="famille" class="col-md-4 col-form-label text-md-end text-start">La Famille</label>
                        <div class="col-md-6">
                            <select class="form-control @error('famille') is-invalid @enderror select2" name="famille" id="famille">
                                @foreach ($familles as $famille)
                                    <option value="{{ $famille }}" @if (old('famille') == $famille) selected @endif>{{ $famille }}</option>
                                @endforeach
                            </select>
                            @error('famille')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>

                    <div class="mb-3 row">
                        <label for="produit_id" class="col-md-4 col-form-label text-md-end text-start">Le Produit</label>
                        <div class="col-md-6">
                            <select class="form-control @error('produit_id') is-invalid @enderror select2" name="produit_id" id="produit_id">
                                @foreach ($produits as $produit)
                                    <option value="{{$produit->id}}" @if (old('produit_id') == $produit->referenceA) selected="selected" @endif>
                                        {{ $produit->referenceA.' - ' }}
                                        @if(null != $produit->alternatif || '' != $produit->alternatif)
                                            {{ $produit->alternatif }}
                                        @else
                                            {{ $produit->getDescriptifFullOrAlter() }}
                                        @endif
                                    </option>  
                                @endforeach
                            </select>
                            @if ($errors->has('produit_id'))
                                <span class="text-danger">{{ $errors->first('produit_id') }}</span>
                            @endif
                        </div>
                    </div>


                    <script type="text/javascript" >
                            $(document).ready(function() {
                                $('.select2').select2();
                            })
                    </script>

                    <script type="text/javascript" >
                        function updateProduitsOptions() {
   // alert("Bonjour");
    var famille = document.getElementById('famille').value;
    var produits = {!! ($produits) !!}; // Charger tous les produits dans une variable JavaScript

    console.log("Famille sélectionnée :", famille);
    console.log("Produits chargés :", produits);

    // Filtrer les produits en fonction de la famille sélectionnée
    var produitsFiltres = produits.filter(function(produit) {
        console.log("Produit sélectionné :", produit.referenceA, produit.famille);
        return produit.famille === famille;
    });

    console.log("Produits filtrés :", produitsFiltres);

    // Mettre à jour les options du champ 'produit_id'
    var produitSelect = document.getElementById('produit_id');
    produitSelect.innerHTML = ''; // Effacer les options actuelles

    // Ajouter les options correspondant à la famille sélectionnée
    produitsFiltres.forEach(function(produit) {
        console.log("Produit :", produit);
        var option = document.createElement('option');
        option.value = produit.id;
        option.textContent = produit.referenceA; // Assurez-vous que cette propriété est correcte
        produitSelect.appendChild(option);
    });
}





                    $(document).ready(function() {
                        $('.select2').select2();
                        updateProduitsOptions(); // Appel de la fonction ici
                    });

                    // Gestionnaire d'événements onchange pour mettre à jour les options lorsque la famille est modifiée
                    $('#famille').on('change', function() {
                        updateProduitsOptions();
                    });
                    </script>







                    <div class="mb-3 row">
                        <label for="quantite" class="col-md-4 col-form-label text-md-end text-start">Quantité produite</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control @error('quantite') is-invalid @enderror" id="quantite" name="quantite" value="{{ old('quantite') }}">
                            @error('quantite')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                        </div>
                    </div>


                    <div class="mb-3 row">
                        <label for="unite" class="col-md-4 col-form-label text-md-end text-start">Unité</label>
                        <div class="col-md-6">
                            <select class="form-control @error('unite') is-invalid @enderror select2" name="unite" id="unite">
                                @foreach (['Palette', 'm3', 'Stère', 'Pile', 'ml', 'Pièce', 'Kilo', 'Rouleau', 'm2'] as $option)
                                    <option value="{{ $option }}" @if (old('unite') == $option) selected @endif>{{ $option }}</option>
                                @endforeach
                            </select>
                            @error('unite')
                                <span class="text-danger">{{ $message }}</span>
                            @enderror
                            </div>
                    </div>

            

                    <div class="mb-3 row">
                        <input type="submit" class="col-md-3 offset-md-5 btn btn-secondary" value="Ajouter le Produit">
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('scripts')
<script>
    function confirmDelete(gestionId) {
        console.log('Confirm delete function called with ID:', gestionId);
        var isConfirmed = confirm('Êtes-vous sûr de vouloir supprimer ce produit en stock ?');
        console.log('Confirmation status:', isConfirmed);

        if (isConfirmed) {
            // Supprimer le produit en stock
            document.getElementById('deleteForm_' + gestionId).submit();
        }
    }

    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.btn-confirm-delete').forEach(function (button) {
            button.addEventListener('click', function () {
                var gestionId = this.getAttribute('data-gestion-id');
                confirmDelete(gestionId);
            });
        });
    });


  
    
</script>

@endsection