@if($testimonials->count() > 0)
<div class="divider"></div>

<div class="testimonials">
    <div class="d-flex align-items-center justify-content-between mb-4 flex-wrap">
        <h2 data-aos="fade-right">What our customers say</h2>
        <div class="testimonials-slider-navigation d-flex align-items-center justify-content-center">
            <div class="prev"><i class="fa-solid fa-chevron-left"></i></div>
            <div class="next"><i class="fa-solid fa-chevron-right"></i></div>
        </div>
    </div>

    <div class="testimonals-slider">
        @php
        $delay = 0;
        @endphp
        @foreach($testimonials as $item)
        @php
            $profile_picture = asset('default_assets/user/default.jpg');
            if($item->profile_picture != null){
                $profile_picture = asset('ProfilePicture/' . $item->profile_picture);
            }
        @endphp
        <div class="testimonial-card" data-aos="fade-up" data-aos-delay="{{$delay}}">
            <div class="images">
                <div class="left"><img src="{{asset('frontend/media/coma.png')}}" alt="" class="img-fluid"></div>
                <div class="middle"><img src="{{$profile_picture}}" alt="" class=""></div>
                <div class="right"><img src="{{asset('frontend/media/coma.png')}}" alt="" class="img-fluid"></div>
            </div>
            <p>
                {{ \Illuminate\Support\Str::words($item->review, 30, '...') }}
            </p>

            <h4 class="name">{{$item->first_name  . ' ' . $item->last_name}}</h4>
            <div class="meta d-flex align-items-center justify-content-center">
                <p class="date">{{ \Carbon\Carbon::parse($item->created_at)->format('F j, Y') }}</p>
                {{-- <div class="comment">12 Comment</div> --}}
            </div>
        </div>

        @php
        $delay += 200;
        @endphp
        @endforeach
    </div>
</div>
@endif

<!-- Button trigger modal -->
<button type="button" class="btn btn-review" data-toggle="modal" data-target="#reviewModal">
    <div class="icon"><i class="fa fa-star" aria-hidden="true"></i></div>
  Leave a review
</button>

<!-- Modal -->
<form action="{{route("saveTestimonials")}}" method="POST">
    @csrf
    <div class="modal fade" id="reviewModal" tabindex="-1" role="dialog" aria-labelledby="reviewModalId" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Leave A Review</h5>
                        <button type="button" class="close text-white" data-dismiss="modal" aria-label="Close">
                            <i class="fa fa-window-close" aria-hidden="true"></i>
                        </button>
                </div>
                <div class="modal-body text-dark">
                    <div class="form-row">
                        @if(!auth()->check())
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="first_name">First Name <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" name="first_name" id="first_name" aria-describedby="first name" placeholder="e.g. John" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="last_name">Last Name</label>
                                <input type="text" class="form-control" name="last_name" id="last_name" aria-describedby="last name" placeholder="e.g. Doe">
                            </div>
                        </div>
                        @endif
                        <div class="col-md-12">
                            <div class="form-group">
                                <label for="review">Review <span class="text-danger">*</span></label>
                                <textarea class="form-control" name="review" id="review" rows="5" required></textarea>
                            </div>
                        </div>
                    </div>


                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-submit">Submit</button>
                </div>
            </div>
        </div>
    </div>
</form>