@if ($lead->recordings->count() > 0)
<div class="search-notes mb-5">
    <input type="text" class="form-control" id="searchRecording" placeholder="Search in Conversations">
</div>
@endif

<div class="recordings-list">
    @forelse ($lead->recordings as $recording)
        <div class="d-flex gap-3 note-item mb-4">
            <div class="left d-flex flex-column gap-2 mt-2">
                <i class="bx bx-star fs-3 update-recording-star-icon {{ $recording->is_featured ? 'text-warning' : '' }}"
                    data-recording-id="{{ $recording->id }}"
                    data-is-featured="{{ $recording->is_featured }}"
                    role="button"
                    title="Mark as Featured"></i>
            </div>
            <div class="right">
                <div class="note-header">
                    <div class="title">
                        <h5>{{ \Carbon\Carbon::parse($recording->start_datetime)->format('d M Y h:i A') }}</h5>
                    </div>
                </div>
                <div>
                    {{-- With agent {{ $recording->agentUser?->name }} during {{ $recording->direction }} call. --}}
                    {{-- Add audio player if the URL exists --}}
                    @if($recording->audio_file_location)
                        <div class="mt-2">
                            <audio controls>
                                <source src="{{ $recording->audio_file_location }}" type="audio/mpeg">
                                Your browser does not support the audio element.
                            </audio>
                        </div>
                    @endif
                </div>
                <div class="note-footer">
                    {{-- <button class="btn btn-lg btn-default"><i class="bx bx-play"></i> </button> --}}
                </div>
            </div>
        </div>
    @empty

    @endforelse

    @forelse ($lead->emails as $email)
        <div class="d-flex gap-3 note-item mb-4">
            <div class="left d-flex flex-column gap-2 mt-2">
                <i class="bx bx-star"></i>
            </div>
            <div class="right">
                <div class="note-header">
                    <div class="title d-flex flex-row justify-content-between gap-5">
                        <h5>Email sent on {{ \Carbon\Carbon::parse($email->created_at)->format('d M Y h:i A') }}</h5>
                        <div>
                            <a href="javascript:void(0);" class="text-primary btn-reply" title="send reply" data-bs-toggle="offcanvas"
                            data-bs-target="#offcanvasRightSendEmail"
                            data-from-email="{{ $settings['email_to_customer'] ?? 'customercare@smartmediaiq.com' }}"
                            data-to-email="{{ $email->to_email }}"
                            data-subject="{{ $email->subject }}"
                            data-body="On {{ $email->date }} wrote: {{ $email->body }}">
                                <h3><i class="bx bx-envelope"></i></h3>
                            </a>
                        </div>
                    </div>
                </div>
                <div>
                    <p>{{ $email->subject }}</p>
                    <p>{!! $email->body !!}</p>

                    <div>
                        <a href="javascript:void(0);" class="text-primary btn-view" title="view email"
                            data-bs-toggle="offcanvas"
                            data-bs-target="#offcanvasRightViewEmail"
                            data-from-email="{{ $settings['email_to_customer'] ?? 'customercare@smartmediaiq.com' }}"
                            data-to-email="{{ $email->to_email }}"
                            data-subject="{{ $email->subject }}"
                            data-view_body="{{ $email->body }}"
                            data-id="{{ $email->id }}"
                            data-body="On {{ $email->date }} wrote: {{ $email->body }}">
                            <h5><i class="bx bx-eye"></i> View</h5>
                        </a>
                    </div>
                </div>
            </div>
        </div>

    @empty

    @endforelse

    @forelse($lead->leadSMS as $sms)
        <div class="d-flex gap-3 note-item mb-4">
            <div class="left d-flex flex-column gap-2 mt-2">
                <i class="bx bx-star"></i>
            </div>
            <div class="right">
                <div class="note-header">
                    <div class="title">
                        <h5>SMS sent on {{ \Carbon\Carbon::parse($sms->created_at)->format('d M Y h:i A') }}</h5>
                        <p><b>From:</b> {{ $sms->from }}</p>
                        <p><b>To:</b> {{ $sms->to }}</p>
                    </div>
                </div>
                <div>
                    <p>{{ $sms->message }}</p>
                </div>
            </div>
        </div>
    @empty
    @endif

    @forelse($lead->leadWhatsappSMS as $sms)
        <div class="d-flex gap-3 note-item mb-4">
            <div class="left d-flex flex-column gap-2 mt-2">
                <i class="bx bx-star"></i>
            </div>
            <div class="right">
                <div class="note-header">
                    <div class="title">
                        <h5>SMS sent on {{ \Carbon\Carbon::parse($sms->created_at)->format('d M Y h:i A') }}</h5>
                        <p><b>From:</b> {{ $sms->from }}</p>
                        <p><b>To:</b> {{ $sms->to }}</p>
                    </div>
                </div>
                <div>
                    <p>{{ $sms->message }}</p>
                </div>
            </div>
        </div>
    @empty
    @endif
</div>