@if($nomenclature && $duplicate)
    <form method="POST" wire:submit.prevent="duplicateNomenclature">
@elseif ($nomenclature)
    <form method="POST" wire:submit.prevent="updateArticle" >
    {{-- @method('PATCH') --}}
@else 
    <form method="POST" wire:submit.prevent="saveData">
        {{-- <form method="POST" action="{{ route('nomenclatures.store') }}"> --}}
@endif
    {{-- @csrf --}}

    @if ($nomenclature)
        <input name="id" type="hidden"  value="{{ $nomenclature->id }}">
    @endif

    <div class="form-group row">
        <div class="col-md-8" style=" font-weight: 700">{{ __('Nomenclature') }}</div>
        <div class="col-md-4 text-right">
            <button type="submit" class="btn btn-primary"><i class="fas fa-save mr-1"></i>
                @if ($nomenclature && $duplicate)
                    {{ __('Dupliquer') }}
                @else 
                    {{ __('Save') }}
                @endif
            </button>
            <a href="{{route('nomenclatures.index')}}" class="btn btn-danger">
                {{ __('Cancel') }}
            </a>
        </div>
    </div>
    <div class="form-group row">
        <div class="col-md-2">{{ __('Article') }}<span class="required" style="color:red;">&nbsp;*</span></div>
        
        <div wire:ignore class="col-md-5">

            <select class="form-control{{ $errors->has('article_id') ? ' is-invalid' : '' }}" name="article_id" id="list_articles">
                @if ($nomenclature && !$duplicate)
                    <option value="{{ $nomenclature->article_id }}" selected disabled>{{ optional($nomenclature->article)->reference }} - {{ optional($nomenclature->article)->designation }}</option>                 
                @else
                    <option selected="selected"></option>
                    @foreach($articles as $key => $value)
                        <option value="{{ $value->id }}" @if ($value->id == old('article_id', $nomenclature->article_id ?? null)) selected @endif >{{ $value->reference }} - {{ $value->designation }}</option>
                    @endforeach
                @endif
            </select>
            
        </div>

        @error('article_id')
            <span class="col-md-10 offset-2 text-danger" role="alert">
                <strong>{{ $message }}</strong>
            </span>
        @enderror
    </div>

    <div class="form-group row">
        <div class="col-md-2">{{ __('Qte fabrique') }} {{ $unite ?  "($unite)" : '' }}</div>
        <div class="col-md-5">
            <input wire:model="qte_fabriquee" id="qte_fabriquee" type="number" step="0.01" class="form-control{{ $errors->has('qte_fabriquee') ? ' is-invalid' : '' }}" name="qte_fabriquee" value="{{ old('qte_fabriquee', $nomenclature->qte_fabriquee ?? null) }}"  />
            
            @error('qte_fabriquee')
                <span class="text-danger" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>
    </div>

    <hr  style="margin-top: 20px; margin-bottom: 20px;" />
    <div class="form-group row"> 
        <div class="col-md-8" style=" font-weight: 700">{{ __('Composants') }}</div>
    </div>

    @foreach ($allComposants as $index => $allComposant)

    <input type="hidden" id="allComposants[{{$index}}][id]" name="allComposants[{{$index}}][id]" wire:model="allComposants.id" />

    <div class="form-group row">
        <div class="col-md-2 mt-2">{{ __('Article') }}<span class="required" style="color:red;">&nbsp;*</span></div>
        <div  class="col-md-5">
 
            <select name="allComposants[{{$index}}][article_id]"
                    wire:model="allComposants.{{$index}}.article_id"
                    class="form-control allComposants"
                    data-key="{{$index}}">
                <option value=""></option>
                @foreach($AllArticles as $key => $value)
                    @if ($value->id != $article_id && ( !in_array($value->id, $ids) OR $allComposants[$index]['article_id'] == $value->id ) )
                        <option value="{{ $value->id }}">{{ $value->reference }} - {{ $value->designation }}</option>
                    @endif
                @endforeach
            </select>

            @error("allComposants.$index.article_id")
                <span class="text-danger" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>
        
        <div class="col-md-1 mt-2">{{ __('Qte') }} {{ $allComposant['unite_stock'] ? "(". $allComposant['unite_stock'].")" : '' }}</div>
        

        <div class="col-md-2">
            <input type="number" step="0.01" class="form-control{{ $errors->has("allComposants.$index.qte") ? ' is-invalid' : '' }}" name="allComposants[{{$index}}][qte]"  wire:model="allComposants.{{$index}}.qte" />

            @error("allComposants.$index.qte")
                <span class="text-danger" role="alert">
                    <strong>{{ $message }}</strong>
                </span>
            @enderror
        </div>

        <div class="col-md-2 mt-1 text-right" style="white-space: nowrap">
            <a href="#" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#pc-parametres-{{ $index }}">{{ __('Delete') }}</a>
        </div>
        
        {{-- Confirmation modal --}}
        <div wire:ignore.self class="modal fade" id="pc-parametres-{{ $index }}" tabindex="-1" role="dialog" aria-labelledby="pc_parametres" aria-hidden="true">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="pc_parametres">{{ __('Confirmation deleting') }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true close-btn">×</span>
                        </button>
                    </div>
                   <div class="modal-body">
                        <p>{{__("Are you sure you want to delete this ligne?")}}</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary close-btn" data-dismiss="modal">{{ __('Cancel') }}</button>
                        @if ( isset($allComposants[$index]['id']) AND !empty($allComposants[$index]['id']) )
                            <button type="button" wire:click.prevent="delete({{ $allComposants[$index]['id'] }} , {{ $index }})" class="btn btn-danger" data-dismiss="modal">{{ __('Delete') }}</button>
                        @else
                            <button type="button" wire:click.prevent="delete(null , {{ $index }})" class="btn btn-danger close-modal" data-dismiss="modal">{{ __('Delete') }}</button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
        
    </div>

    @endforeach
    <div class="float-right">
        <button class="btn btn-sm btn-success" wire:click.prevent="addComposant">
            <i class="material-icons md-18">add</i>{{ __('Ajouter') }}
        </button>
    </div>
</form>

<script>
    function Init(){
        $('.allComposants').select2({
            theme: 'bootstrap4',
        }).on('change', function() {
            let index = $('data-key').val();            
            @this.set("allComposants." + $(this).attr('data-key') + ".article_id", $(this).val());

            // console.log("allComponent_article_id", @this.get("allComposants." + $(this).attr('data-key') + ".article_id"))
            // console.log('article_id', @this.get('article_id'))
        });
        // if(@this.get('article_id')) {

        //     console.log('original arr',@this.get('AllArticles'))

        //     let allArticles = @this.get('AllArticles');
        //     const newArr = allArticles.filter(x => x.id != @this.get('article_id') )
        //     // @this.set("AllArticles", newArr)
        //     console.log('newArr', newArr)
        //     // @this.set("AllArticles", newArr);

        // }
    }
    document.addEventListener('livewire:load', function () {
        $('#list_articles').select2({
            theme: 'bootstrap4',
        }).on('change', function() {
            @this.set("article_id", $(this).val());
        });

        Init();
        
    });
    window.addEventListener('name-updated', event => {
        Init();
    })
</script>