@can('reservations_detail_access')
    <div>
        <div wire:ignore.self id="detailReservation" class="modal fade bd-example-modal-lg" 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 Detail Réservation') }}</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">{{ __('Pet') }}<span class="required" style="color:red;">*</span></div>
                                <div class="col-md-8">
                                    <select wire:model="detail_reservation.pet_id" class="pet_id form-control{{ $errors->has('detail_reservation.pet_id') ? ' is-invalid' : '' }}" name="pet_id" id="pet_id">
                                        <option value=""></option>
                                        @foreach($pets as $pet)
                                            <option value="{{ $pet->id }}" >{{ $pet->reference }} - {{ $pet->nom }}</option>
                                        @endforeach
                                    </select>
                        
                                </div>
                                @error('detail_reservation.pet_id')
                                    <div class="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">{{ __('Tarifs') }}<span class="required" style="color:red;">*</span></div>
                                <div class="col-md-8">
                                    <select wire:model="detail_reservation.code_tarif" class="code_tarif form-control{{ $errors->has('detail_reservation.code_tarif') ? ' is-invalid' : '' }}" name="code_tarif" id="code_tarif">
                                        <option value=""></option>
                                        @foreach($tarifs as $tarif)
                                            <option value="{{ $tarif->id }}">{{ $tarif->code_tarif }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                @error('detail_reservation.code_tarif')
                                    <div class="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">{{ __('Date debut') }}<span class="required" style="color:red;">*</span></div>
                                <div class="col-md-8">
                                    <input wire:model="detail_reservation.date_debut" id="date_debut" type="date" class="form-control{{ $errors->has('detail_reservation.date_debut') ? ' is-invalid' : '' }}" name="date_debut"  required  />
            
                                    @if ($errors->has('detail_reservation.date_debut'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('detail_reservation.date_debut') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>
            
                            <div class="form-group row my-2">
                                <div class="col-md-2">{{ __('Date fin') }}<span class="required" style="color:red;">*</span></div>
                                <div class="col-md-8">
                                    <input wire:model="detail_reservation.date_fin" id="date_fin" type="date" class="form-control{{ $errors->has('detail_reservation.date_fin') ? ' is-invalid' : '' }}" name="date_fin"  required  />
            
                                    @if ($errors->has('detail_reservation.date_fin'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('detail_reservation.date_fin') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>
            
                            <div class="form-group row my-2">
                                <div class="col-md-2">{{ __('Mt. jour') }}</div>
                                <div class="col-md-8">
                                    <input wire:model="detail_reservation.mt_jour" id="mt_jour" type="number" class="form-control{{ $errors->has('detail_reservation.mt_jour') ? ' is-invalid' : '' }}" name="mt_jour"  />
            
                                    @if ($errors->has('detail_reservation.mt_jour'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('detail_reservation.mt_jour') }}</strong>
                                    </span>
                                    @endif
                                </div>
                            </div>
            
                            <div class="form-group row my-2">
                                <div class="col-md-2">{{ __('Nb jour') }}</div>
                                <div class="col-md-8">
                                    <input wire:model="detail_reservation.nb_jour" id="nb_jour" type="number" class="form-control{{ $errors->has('detail_reservation.nb_jour') ? ' is-invalid' : '' }}" name="nb_jour"   />
            
                                    @if ($errors->has('detail_reservation.nb_jour'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('detail_reservation.nb_jour') }}</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="detail_reservation.remise" id="remise" type="number" step="1" class="form-control{{ $errors->has('detail_reservation.remise') ? ' is-invalid' : '' }}" name="remise" required  />
            
                                    @if ($errors->has('detail_reservation.remise'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('detail_reservation.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="detail_reservation.total" id="total" type="number" class="form-control{{ $errors->has('detail_reservation.total') ? ' is-invalid' : '' }}" name="total" readonly />
            
                                    @if ($errors->has('detail_reservation.total'))
                                    <span class="invalid-feedback" role="alert">
                                        <strong>{{ $errors->first('detail_reservation.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($detail_reservation['id']))
                                <button type="submit" wire:click.prevent="updateDetailReservation({{ $detail_reservation['id'] }})" class="btn btn-primary">{{ __('Save') }}</button>
                            @else 
                                <button type="submit" wire:click.prevent="saveDetailReservation" 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>{{__('Detail Réservations')}}</h5>
        
                    <div class="heading">
                        @can('reservations_edit')
                            @if ((App\Models\Reservation::whereKey($this->reservationId)->first()->status ?? 0) != 50)
                            <button wire:click="addDetailReservation" type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg"><i class="material-icons">add</i>Ajouter Détail Réservation</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 width="1"></th>
                                <th>{{__('Pet')}}</th>
                                <th>{{__('Date debut')}}</th>
                                <th>{{__('Date fin')}}</th>
                                <th>{{__('Nb jour')}}</th>
                                <th>{{__('Code Tarif')}}</th>
                                <th>{{__('Remise')}} (%)</th>
                                <th>{{__('Total')}}</th>
                                
                            </tr>
                        </thead>
                        <tbody> 
                            
                            @forelse($details_reservations as $index => $reservation_detail)
                                <tr>
                                    <td width="1">
                                        @can('reservations_detail_edit')
                                            <a href="#" wire:click="editDetailReservation({{ $reservation_detail->id }})" data-toggle="modal" data-target=".bd-example-modal-lg" data-toggle="tooltip" data-placement="top" title="{{__('Edit detail reservation')}}">
                                                <i class="material-icons md-18 text-grey">edit</i>
                                            </a>
                                        @endcan
                                    </td>
                                    <td width="1">
                                        @can('reservations_detail_delete')
                                            <form action="{{ route('reservation_details.destroy', $reservation_detail->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 detail reservation')}}"><i class="material-icons md-18 text-grey">delete</i></a>
                                            </form>
                                        @endcan
                                    </td>
                                    <td width="1">
                                        @can('reservation_details_delete')
                                            <form action="{{ route('reservation_details.destroy', $reservation_detail->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 reservation')}}"><i class="material-icons md-18 text-grey">delete</i></a>
                                            </form>
                                        @endcan
                                    </td>
                                    <td>{{ optional($reservation_detail->pet)->reference }} - {{ optional($reservation_detail->pet)->nom }}</td>
                                    <td>{{ \Carbon\Carbon::parse($reservation_detail->date_debut)->format('d-m-Y') }}</td>
                                    <td>{{ \Carbon\Carbon::parse($reservation_detail->date_fin)->format('d-m-Y') }}</td>
                                    <td>{{ $reservation_detail->nb_jour }}</td>
                                    <td>{{ optional($reservation_detail->tarif)->code_tarif }}</td>
                                    <td>{{ $reservation_detail->remise + 0 }} %</td>
                                    <td>{{ $reservation_detail->total }}</td>
                                </tr>
                            @empty
                                <tr><td align="center" colspan="10"> {{ __('No results found.') }}</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endcan

@push('script')
    <script>        
        function InitDetail(){
            $('.code_tarif').select2({ theme: 'bootstrap4'}).on('change', function() {
                @this.set("detail_reservation.code_tarif", $(this).val());
            });

            $('.pet_id').select2({ theme: 'bootstrap4'}).on('change', function() {
                @this.set("detail_reservation.pet_id", $(this).val());
            });
        }
        document.addEventListener('livewire:load', function () {
            InitDetail();
        });
        window.addEventListener('event-order-fabrication', event => {
            InitDetail();
        })    
    </script>
@endpush