@can('reservations_detail_access')
    <div>
        <div wire:ignore.self id="Email" class="modal fade add-email-modal" 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">{{ __('Envoyer Email') }}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true close-btn">×</span>
                        </button>
                    </div>
                <form wire:submit.prevent="sendEmail">
                        <div class="modal-body">
                            <div class="form-group row my-2">
                                <div class="col-md-2">{{ __('Subject') }}<span class="required" style="color:red;">*</span></div>
                                <div class="col-md-10">
                                    <input wire:model="email.subject" id="subject" type="text" class="form-control{{ $errors->has('email.subject') ? ' is-invalid' : '' }}" name="email.subject" required  />
                                            
                                    @if ($errors->has('email.subject'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('email.subject') }}</strong>
                                        </span>
                                    @endif
                        
                                </div>
                            </div>

                            <div class="form-group row my-2">
                                <div class="col-md-2">{{ __('Email') }}<span class="required" style="color:red;">*</span></div>
                                <div class="col-md-10">
                                    <input wire:model="email.email" id="email" type="text" class="form-control{{ $errors->has('email.email') ? ' is-invalid' : '' }}" name="email.email" required  />
                                            
                                    @if ($errors->has('email.email'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('email.email') }}</strong>
                                        </span>
                                    @endif
                        
                                </div>
                            </div>

                            <div class="form-group row my-2">
                                <div class="col-md-2">{{ __('CC') }}</div>
                                <div class="col-md-10">
                                    <input wire:model="email.cc" id="cc" type="text" class="form-control{{ $errors->has('email.cc') ? ' is-invalid' : '' }}" name="email.cc" />
                                            
                                    @if ($errors->has('email.cc'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('email.cc') }}</strong>
                                        </span>
                                    @endif
                        
                                </div>
                            </div>

                            <div class="form-group row my-2">
                                <div class="col-md-2">{{ __('Type email') }}</div>
                                <div class="col-md-10">
                                    <select wire:model="email.type" name="email.type" id="email.type" class="form-control">
                                        <option value=""></option>

                                        @foreach(App\Helpers\ArticleData::TYPE_EMAILS as $key => $type)
                                            <option value="{{ $key }}" >{{ $type }}</option>
                                        @endforeach
                                    </select>
                                            
                                    @if ($errors->has('email.type'))
                                        <span class="invalid-feedback" role="alert">
                                            <strong>{{ $errors->first('email.type') }}</strong>
                                        </span>
                                    @endif
                        
                                </div>
                            </div>

                            @if(empty($email['type']))
                                <div class="form-group row my-2">
                                    <div class="col-md-2">{{ __('Content') }}<span class="required" style="color:red;">*</span></div>
                                    <div class="col-md-10" wire:ignore>
                                        <div  wire:model="email.content" id="summernote_content"></div>
                                    </div>

                                    @if ($errors->has('email.content'))
                                            <span class="invalid-feedback" role="alert">
                                                <strong>{{ $errors->first('email.content') }}</strong>
                                            </span>
                                    @endif
                                </div>
                            @endif
                            
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary close-btn" data-dismiss="modal">{{ __('Cancel') }}</button>
                            <button type="submit" class="btn btn-primary">{{ __('Send mail') }}</button>
                        </div>
                </form>
                </div>
            </div>
        </div>

        <div class="card bg-white mt-2">
            <div class="page-header">
                <div class="page-title">
                    <h5>{{__('Email')}}</h5>
        
                    <div class="heading">
                        @can('email_edit')
                        @if ((App\Models\Reservation::whereKey($this->reservationId)->first()->status ?? 0) != 50)
                        <button wire:click="addEmail" type="button" class="btn btn-primary" data-toggle="modal" data-target=".add-email-modal">
                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
                                    <path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2zm13 2.383-4.758 2.855L15 11.114v-5.73zm-.034 6.878L9.271 8.82 8 9.583 6.728 8.82l-5.694 3.44A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.739zM1 11.114l4.758-2.876L1 5.383v5.73z"/>
                                </svg>
                                {{ __('Ajouter Email') }}
                            </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>{{__('Subject')}}</th>
                                <th> {{__('Email')}}</th>
                                <th> {{__('CC')}}</th>
                                <th>{{__('Template')}}</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($emails as $email)
                                <tr>
                                    <td width="1">
                                        @can('email_edit')
                                            <form action="{{ route('email.destroy', $email->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 email')}}"><i class="material-icons md-18 text-grey">delete</i></a>
                                            </form>
                                        @endcan
                                    </td>
                                
                                    <td>{{ $email->subject }}</td>
                                    <td>{{ $email->email }}</td>
                                    <td>{{ $email->cc }}</td>
                                    <td>
                                        @if ($email->type && isset(App\Helpers\ArticleData::TYPE_EMAILS[$email->type]) && App\Helpers\ArticleData::TYPE_EMAILS[$email->type])
                                            {{ App\Helpers\ArticleData::TYPE_EMAILS[$email->type] }}
                                        @else
                                            {{ __('Email Personnalisé') }}
                                        @endif
                                    </td>
                                    {{-- <td>{{ $email->etat }}</td> --}}
                                </tr>
                            @empty
                                <tr><td align="center" colspan="8"> {{ __('No results found.') }}</td></tr>
                            @endforelse
                        </tbody>
                    </table>
                    <div class="float-left">
                        @if(!empty($term))
                            {{ $emails->appends(['s' => $term])->links() }}
                        @else
                            {{ $emails->links() }}
                        @endif
                    </div>

                    <div class="float-right text-muted">
                        {{__('Showing')}} {{ $emails->firstItem() }} - {{ $emails->lastItem() }} / {{ $emails->total() }} ({{__('page')}} {{ $emails->currentPage() }} )
                    </div>
                </div>
            </div>
        </div>
    </div>
@endcan

@push('script')

    <script>
        function loadSummerNote(){
    
            $('#summernote_content').summernote({
            height: 400,
            callbacks: {
                onChange: function(contents, $editable) {
                    @this.set('email.content', contents);
            }}
        })}
        document.addEventListener('livewire:load', function () {
            loadSummerNote();
        });
        window.addEventListener('load-summernote', event => {
            loadSummerNote();
        })   
       
    </script>
@endpush