<div>
    <div class="card-body">
        <form class="mb-4" wire:submit.prevent="store" id="comment-form">
            <div class="row">
                <div class="col-6">
                    <div class="form-group">
                        <label for="name">نام *</label>
                        <input class="form-control @error('name') is-invalid @enderror" id="name"
                               {{ auth()->check() && !is_null(auth()->user()->name) ? 'readonly' : '' }}
                               wire:model.defer="name" type="text" required>
                        @error('name')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                </div>
                <div class="col-6">
                    <div class="form-group">
                        <label for="email">ایمیل</label>
                        <input class="form-control @error('email') is-invalid @enderror" id="email"
                               {{ auth()->check() && !is_null(auth()->user()->email) ? 'readonly' : '' }}
                               wire:model.defer="email" type="email" dir="ltr">
                        @error('email')
                            <span class="text-danger" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                        @enderror
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-12">
                    <label for="comment">{{ $parent ? 'پاسخ به '. $parent_name : 'نظر'}} *</label>
                    <textarea wire:model.defer="comment" placeholder="نظر باید حداقل ۵ کاراکتر داشته باشد" class="form-control @error('comment') is-invalid @enderror" rows="5" id="comment" required></textarea>
                    @error('comment')
                        <span class="text-danger" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
                </div>
            </div>
            <div class="row mt-2 float-right">
                <div class="col-12">
                    <button type="submit" class="btn btn-{{ $parent ? 'success' : 'primary'}} btn-sm">{{ $parent ? 'ثبت پاسخ' : 'ثبت نظر'}}</button>
                    @if($parent)
                        <button type="button" class="btn btn-danger btn-sm" wire:click="$set('parent', null)">لغو</button>
                    @endif
                </div>
            </div>
        </form>
        @if($comments)
            @foreach($comments as $comment)
                <div class="d-flex {{ !$loop->last ? 'mb-4' : '' }}">
                    <div class="flex-shrink-0">
                        <img class="rounded-circle"
                             src="{{ $comment->mini_avatar }}"
                             alt="{{ $comment->name }}" />
                    </div>
                    <div class="ms-3">
                        <div class="fw-bold">{{ $comment->name }}</div>
                        <div class="small"><span class="fa fa-clock"></span> {{ jdate($comment->created_at)->ago() }}</div>
                        <div class="text-justify">{!! nl2br(e($comment->comment)) !!}</div>
                        <a href="#" wire:click.prevent="$emit('reply', {{ $comment->id }})" class="text-right reply"><i class="fa fa-reply"></i> پاسخ</a>
                        @if($comment->activeChildren)
                            @foreach($comment->activeChildren as $child)
                                <div class="d-flex mt-4">
                                    <div class="flex-shrink-0">
                                        <img class="rounded-circle"
                                             src="{{ $child->mini_avatar }}"
                                             alt="{{ $child->name }}" />
                                    </div>
                                    <div class="ms-3">
                                        <div class="fw-bold">{{ $child->name }}</div>
                                        <div class="small"><span class="fa fa-clock"></span> {{ jdate($child->created_at)->ago() }}</div>
                                        <div class="text-justify">{!! nl2br(e($child->comment)) !!}</div>
                                    </div>
                                </div>
                            @endforeach
                        @endif
                    </div>
                </div>
                @if(!$loop->last)
                    <hr class="w-75 mx-auto">
                @endif
            @endforeach
        @endif
    </div>
    {{ $comments->links() }}
</div>
@push('scripts')
    <script>
        window.addEventListener('move-to-reply', event => {
            $('html, body').animate({
                scrollTop: $("#comment-form").offset().top - 120
            }, 200);
            $('#comment').focus();
        });
        Livewire.on('scrollTop', function() {
            $('html, body').animate({
                scrollTop: $("#comment-form").offset().top + 70
            }, 'slow');
        })
    </script>
@endpush