@can('reservations_detail_access')
    <div>
        <div wire:ignore.self id="add-accessoire-service" class="modal fade add-accessoire-service" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="modele">{{ __('Ajouter accessoire service') }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true close-btn">×</span>
                        </button>
                    </div>
                <form>
                        <div class="modal-body">
                            <div class="form-group row my-2">
                                <div class="col-md-2">{{ __('Article') }}<span class="required" style="color:red;">*</span></div>
                                <div class="col-md-8">

                                    <select wire:ignore wire:model="accessoirce_service.article_id" class="article_id form-control{{ $errors->has('accessoirce_service.article_id') ? ' is-invalid' : '' }}" name="article_id" id="article_id">
                                        <option value=""></option>
                                        @foreach($articles as $article)
                                            <option value="{{ $article->id }}" >{{ $article->reference }} - {{ $article->libelle }}</option>
                                        @endforeach
                                    </select>
                        
                                </div>
                                @error('accessoirce_service.article_id')
                                    <div class="text-sm offset-2 col-md-8 text-danger" style="font-size: 80%">
                                        <strong>{{ $message }}</strong>
                                    </div>
                                @enderror
                            </div>
            
                            <div class="form-group row my-2">
                                <div class="col-md-2">{{ __('Quantité') }}<span class="required" style="color:red;">*</span></div>
                                <div class="col-md-8">
                                    <input wire:model="accessoirce_service.qte" id="qte" type="number" class="form-control{{ $errors->has('accessoirce_service.qte') ? ' is-invalid' : '' }}" name="qte" required  />
            
                                    @if ($errors->has('accessoirce_service.qte'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('accessoirce_service.qte') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>
            
                            <div class="form-group row my-2">
                                <div class="col-md-2">{{ __('Prix') }}<span class="required" style="color:red;">*</span></div>
                                <div class="col-md-8">
                                    <input wire:model="accessoirce_service.prix" id="prix" type="number" class="form-control{{ $errors->has('accessoirce_service.prix') ? ' is-invalid' : '' }}" name="prix" />
            
                                    @if ($errors->has('accessoirce_service.prix'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('accessoirce_service.prix') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>
            
                            <div class="form-group row my-2">
                                <div class="col-md-2">{{ __('Remise') }} (%)</div>
                                <div class="col-md-8">
                                    <input wire:model="accessoirce_service.remise" id="remise" type="number" class="form-control{{ $errors->has('accessoirce_service.remise') ? ' is-invalid' : '' }}" name="remise" required  />
            
                                    @if ($errors->has('accessoirce_service.remise'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('accessoirce_service.remise') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>
            
                            <div class="form-group row">
                                <div class="col-md-2">{{ __('Total') }}</div>
                                <div class="col-md-8">
                                    <input wire:model="accessoirce_service.total" id="total" type="number" class="form-control{{ $errors->has('accessoirce_service.total') ? ' is-invalid' : '' }}" name="total" readonly />
            
                                    @if ($errors->has('accessoirce_service.total'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('accessoirce_service.total') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>   
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary close-btn" data-dismiss="modal">{{ __('Cancel') }}</button>
                            @if (isset($accessoirce_service['id']))
                                <button type="submit" wire:click.prevent="updateAccessoireService({{ $accessoirce_service['id'] }})" class="btn btn-primary">{{ __('Save') }}</button>
                            @else
                                <button type="submit" wire:click.prevent="saveAccessoireService" class="btn btn-primary">{{ __('Save') }}</button>
                            @endif
                        </div>
                </form>
                </div>
            </div>
        </div>

        <div class="card bg-white mt-2">
            <div class="page-header">
                <div class="page-title">
                    <h5>{{__('Accessoire Service')}}</h5>
        
                    <div class="heading">
                        @can('accessoire_services_edit')
                        @if ((App\Models\Reservation::whereKey($this->reservationId)->first()->status ?? 0) != 50)
                        <button wire:click="addAccessoireService" type="button" class="btn btn-success" data-toggle="modal" data-target=".add-accessoire-service"><i class="material-icons">add</i> Ajouter Accessoire Service</button>
                        @endif
                        @endcan                    

                    </div>
                </div>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped table-borderless">
                        <thead>
                            <tr>
                                <th width="1"></th>
                                <th width="1"></th>
                                <th>{{__('Article')}}</th>
                                <th> {{__('Prix')}}</th>
                                <th>{{__('Quantité')}}</th>
                                <th>{{__('Remise')}} (%)</th>
                                <th>{{__('Total')}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($accessoireServices as $accessoirce_service)
                                <tr>
                                    <td width="1">
                                        @can('accessoire_services_edit')
                                            <a href="#" wire:click="editAccessoireService({{ $accessoirce_service->id }})" data-toggle="modal" data-target=".add-accessoire-service" data-toggle="tooltip" data-placement="top" title="{{__('Edit accessoire service')}}">
                                                <i class="material-icons md-18 text-grey">edit</i>
                                            </a>
                                        @endcan
                                    </td>
                                    
                                    <td width="1">
                                        @can('accessoire_services_delete')
                                            <form action="{{ route('accessoirce_services.destroy', $accessoirce_service->id) }}" method="POST">
                                                @method('DELETE')
                                                @csrf
                                                
                                                <a href="#" class="deleteBtn" data-confirm-message="{{__("Are you sure you want to delete this ligne?")}}" data-toggle="tooltip" data-placement="top" title="{{__('Delete accessoire service')}}"><i class="material-icons md-18 text-grey">delete</i></a>
                                            </form>
                                        @endcan
                                    </td>
                                    <td>{{ optional($accessoirce_service->article)->reference }} - {{ optional($accessoirce_service->article)->libelle }}</td>
                                    <td>{{ $accessoirce_service->prix }}</td>
                                    <td>{{ $accessoirce_service->qte }}</td>
                                    <td>{{ $accessoirce_service->remise }}</td>
                                    <td>{{ $accessoirce_service->total }}</td>
                                </tr>
                            @empty
                                <tr><td align="center" colspan="8"> {{ __('No results found.') }}</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endcan

@push('script')
    <script> 
        function Init(){
    
            $('.article_id').select2({ theme: 'bootstrap4'}).on('change', function() {
                @this.set("accessoirce_service.article_id", $(this).val());
            });
        }
        document.addEventListener('livewire:load', function () {
            Init();
        });
        window.addEventListener('event-accessoire', event => {
            Init();
        })    
    </script>
@endpush