{{-- {{dd($data)}} --}}
<style>
    .profile-section .right-section .view-panel .ticket-section .name {
        font-family: "Roboto Medium";
        font-size: 1rem;
        line-height: 18px;
        color: #24292D;
        margin-bottom: 2px;
        margin-top: 10px;
    }
    .profile-section .right-section .view-panel .ticket-section .call-details-section .single-row .detail-list, .profile-section .right-section .view-panel .ticket-section .call-details-section .single-row .detail-box {
        margin-left: 35px;
        margin-top: 10px;
    }
    .profile-section .right-section .view-panel .ticket-section .call-details-section .top-row .time {
    margin-top: 12px;
    margin-left: auto;
    }
    .detail-list{
        margin-left: 45px;
        width: calc(100% - 46px);    
        
    }
    .sub-text time{
        margin-top:20px;
    }
    .detail-box{
        margin-top: 15px;
        margin-bottom:15px; 
    }
</style>
@if (@$comments['error'] != null)
    <div class="single-row">
        <center>Record Not Found </center>
    </div>
@else
    @foreach ($comments['comments'] as $item)
        {{-- {{dd($comments['comments'])}} --}}
        {{-- {{dd(@$item['via']['source']['from']['original_recipients'])}} --}}
        
        @if (@$item['via']['channel'] == 'whatsapp')
            <div class="detail-box">
                <div class="top-row">           
                    <div class="caller-details">
                        <p class="name">
                            @php
                            @$lines = explode("\n", @$item['body']);

                            // Get the first line
                            @$firstLine = @$lines[0];
                            @endphp
                            {{ @$firstLine}}<br>
                            <span style="font-size: 11px;">Via WhatsApp</span>
                        </p>
                            
                    
                    </div>
                </div>
            </div>
            <hr style="margin: 0px; padding:0px;">

        @elseif(@$item['via']['channel'] == 'chat_transcript')

                 


        
        @elseif(@$item['via']['channel'] == 'email')
       
        <div class="detail-box">
            <div class="top-row">
                <img src="{{ asset('backend') }}/lead-management/images/header/user-grey.svg" alt="user"
                    width="100%" height="100%">
                <div class="caller-details">
                    <p class="name"> {{GetNameByZenId(@$item['author_id'])}}</p>
                    {{-- <p class="text">{{ @$item['assignee_id']}}</p> --}}
                    <p class="sub-text">To :
                        @if(is_array(@$item['via']['source']['from']['original_recipients']))
                            @foreach ($item['via']['source']['from']['original_recipients'] as $recipient)
                                {{$recipient}}<br>
                            @endforeach
                        @else
                            {{@$item['via']['source']['from']['original_recipients']}}
                        @endif
                    </p>
                </div>
                <p class="sub-text time">{{ dateMonthTimeFormat(@$item['created_at']) }}</p>
            </div>
            <ul class="detail-list">

                @if (!empty(@$item['via']['source']['to']['phone']))
                    <li class="list-item">Call to: {{ @$item['via']['source']['to']['phone'] }}</li>
                @endif
                @if(!empty(@$item['via']['source']['from']['phone']))
                    <li class="list-item">Call From: {{ @$item['via']['source']['from']['phone'] }}</li>
                @endif
                @if(!empty(@$item['via']['source']['to']['name']))
                    <li class="list-item">Called By: {{ @$item['via']['source']['to']['name'] }}</li>
                @endif
                @if(!empty(@$item['html_body']))
                    <li class="list-item">{!! @$item['html_body'] !!}</li>
                @endif
                @if(!empty(@$item['attachments']))
                    <hr>
                    <h3>Attachments</h3>
                    @foreach($item['attachments'] as $attachments)
                    {{-- {{dd($attachments)}} --}}
                        <li class="list-item" style="display: flex; width:100%">
                            <span style="width:70%; overflow:hidden;">{!! @$attachments['file_name'] !!} 
                                @if (@$attachments['malware_scan_result'] == "malware_not_found") 
                            <img class="ml-1" src="{{ asset('/backend/lead-management/images/green-tick.svg') }}" title="verified" alt="green-tick" style="width: 10px !important; height:10px !important; margin-left:10px !important;" >@else @endif </span>
                            <div style="width: 30%; display:inline;">
                                {{-- <a class="btn btn-primary ml-1" style="width: 30%; font-size:10px; margin:0px !important; padding:3px; display:inline;" href="{{ @$attachments['content_url'] }}">View @if($attachments['size'] > 0){{ round(@$attachments['size']/1024/1024, 1) }}MB @endif</a> --}}

                               
 
                                <a class="btn btn-primary ml-1" style="width: 30%; font-size:10px;  margin:0px !important; margin-left:5px !important; padding:3px; display:inline;" href="{{@$attachments['content_url']}}" download="{{ @$attachments['file_name']}}">Download   @if($attachments['size'] > 0 ) {{round(@$attachments['size']/1024/1024, 1) }}MB @endif</a>
                            </div>
                            </li>
                    @endforeach
                    
                @endif
            </ul>
        </div>
        
        @elseif(@$item['via']['channel'] == "voice")
        {{-- {{dd($comments['comments'])}} --}}
        <div class="single-row">
            <div class="top-row">
                <img src="{{ asset('backend') }}/lead-management/images/header/user-grey.svg" alt="user"
                    width="100%" height="100%">
                <div class="caller-details">
                    <p class="name"> {{GetNameByZenId(@$item['author_id'])}}</p>
                    {{-- <p class="text">{{ @$item['assignee_id']}}</p> --}}
                    
                </div>
                <p class="sub-text time">{{ dateMonthTimeFormat(@$item['created_at']) }}</p>
            </div>
            <ul class="detail-list">
                
                @if(!empty(@$item['data']))
                    @if (!empty(@$item['data']['from']))
                        <li class="list-item">Call from: {{ @$item['data']['from'] }}</li>
                    @endif
                    @if (!empty(@$item['data']['to']))
                        <li class="list-item">Call to: {{ @$item['data']['to'] }}</li>
                    @endif
                    @if (!empty(@$item['data']['recording_url']))
                        <li class="list-item">Recording : 
                            <audio controls>
                                
                                <source src="{{ @$item['data']['recording_url'] }}" type="audio/mpeg">
                                Your browser does not support the audio element.
                            </audio>
                            
                            </li>
                    @endif
                    @if (!empty(@$item['data']['answered_by_id']))
                        <li class="list-item">answered_by_id: {{ @$item['data']['answered_by_id'] }}</li>
                    @endif  
                    @if (!empty(@$item['data']['started_at']))
                        <li class="list-item">Started: {{ @$item['data']['started_at'] }}</li>
                    @endif
                    @if (!empty(@$item['data']['answered_by_name']))
                        <li class="list-item">Answer Person: {{ @$item['data']['answered_by_name'] }}</li>
                    @endif

                    @if (!empty(@$item['data']['transcription_status']))
                        <li class="list-item">Transcription: {{ @$item['data']['transcription_status'] }}</li>
                    @endif
                @else
                    @if(!empty(@$item['html_body']))
                        <li class="list-item">{!! @$item['html_body'] !!}</li>
                    @endif
                @endif
                @if(!empty(@$item['attachments']))
                    @foreach($item['attachments'] as $attachments)
                    {{-- {{dd($attachments)}} --}}
                        <li class="list-item">File Name: {!! @$attachments['file_name'] !!} @if(@$attachments['malware_scan_result'] == "malware_not_found") <img src="{{ asset('/backend/lead-management/images/green-tick.svg') }}" title="verified" alt="green-tick" style="width: 10px !important; height:10px !important">@else @endif <a class="btn btn-primary" style="width: 100px; font-size:10px; margin:0px; padding:3px; display:inline;" href="{{@$attachments['content_url']}}" download="{{ @$attachments['file_name']}}">Download File  @if($attachments['size'] > 0 ) {{round(@$attachments['size']/1024/1024, 1) }}MB @endif</a></li>
                    @endforeach
                    
                @endif
                
                
                {{-- @if (!empty(@$item['data']['answered_by_name']))
                    <li class="list-item">Answer Person: {{ @$item['data']['answered_by_name'] }}</li>
                @endif --}}
               
            </ul>
        </div>

        @elseif(@$item['via']['channel'] == "VoiceComment")
        <div class="single-row">
            <div class="top-row">
                <img src="{{ asset('backend') }}/lead-management/images/header/user-grey.svg" alt="user"
                    width="100%" height="100%">
                <div class="caller-details">
                    <p class="name"> {{GetNameByZenId(@$item['author_id'])}}</p>
                </div>
                <p class="sub-text time">{{ dateMonthTimeFormat(@$item['created_at']) }}</p>
            </div>
            <ul class="detail-list">

                @if (!empty(@$item['data']['from']))
                    <li class="list-item">Call from: {{ @$item['data']['from'] }}</li>
                @endif
                @if (!empty(@$item['data']['to']))
                    <li class="list-item">Call to: {{ @$item['data']['to'] }}</li>
                @endif
                @if (!empty(@$item['data']['recording_url']))
                    <li class="list-item">Recording : <audio style="width: 60%;" src=" {{ @$item['data']['recording_url'] }}" ></audio></li>
                @endif
                @if (!empty(@$item['data']['Recording']))
                    <li class="list-item">Recording : <audio style="width: 60%;" src=" {{ @$item['data']['Recording'] }}" ></audio></li>
                @endif
                @if (!empty(@$item['data']['answered_by_id']))
                    <li class="list-item">answered_by_id: {{ @$item['data']['answered_by_id'] }}</li>
                @endif
                @if (!empty(@$item['data']['started_at']))
                    <li class="list-item">Started: {{ @$item['data']['started_at'] }}</li>
                @endif
                @if (!empty(@$item['data']['answered_by_name']))
                    <li class="list-item">Answer Person: {{ @$item['data']['answered_by_name'] }}</li>
                @endif

                @if (!empty(@$item['data']['transcription_status']))
                    <li class="list-item">Transcription: {{ @$item['data']['transcription_status'] }}</li>
                @endif
                @if(!empty(@$item['attachments']))
                    @foreach($item['attachments'] as $attachments)
                    {{-- {{dd($attachments)}} --}}
                        <li class="list-item">File Name: {!! @$attachments['file_name'] !!} @if(@$attachments['malware_scan_result'] == "malware_not_found") <img src="{{ asset('/backend/lead-management/images/green-tick.svg') }}" title="verified" alt="green-tick" style="width: 10px !important; height:10px !important">@else @endif <a class="btn btn-primary" style="width: 100px; font-size:10px; margin:0px; padding:3px; display:inline;" href="{{@$attachments['content_url']}}" download="{{ @$attachments['file_name']}}">Download File  @if($attachments['size'] > 0 ) {{round(@$attachments['size']/1024/1024, 1) }}MB @endif</a></li>
                    @endforeach
                    
                @endif     
            </ul>
        </div>
        @elseif(@$item['via']['channel'] == "api")
        {{-- {{dd($comments['comments'])}} --}}
        <div class="single-row">
            <div class="top-row">
                <img src="{{ asset('backend') }}/lead-management/images/header/user-grey.svg" alt="user"
                    width="100%" height="100%">
                <div class="caller-details">
                    <p class="name"> {{GetNameByZenId(@$item['author_id'])}}</p>
                    {{-- <p class="text">{{ @$item['assignee_id']}}</p> --}}
                    
                </div>
                <p class="sub-text time">{{ dateMonthTimeFormat(@$item['created_at']) }}</p>
            </div>
            <ul class="detail-list">
                
                @if(!empty(@$item['data']))
                    @if (!empty(@$item['data']['from']))
                        <li class="list-item">Call from: {{ @$item['data']['from'] }}</li>
                    @endif
                    @if (!empty(@$item['data']['to']))
                        <li class="list-item">Call to: {{ @$item['data']['to'] }}</li>
                    @endif
                    @if (!empty(@$item['data']['recording_url']))
                        <li class="list-item">Recording : 
                            <audio controls>
                                
                                <source src="{{ @$item['data']['recording_url'] }}" type="audio/mpeg">
                                Your browser does not support the audio element.
                            </audio>
                            
                            </li>
                    @endif
                    @if (!empty(@$item['data']['answered_by_id']))
                        <li class="list-item">answered_by_id: {{ @$item['data']['answered_by_id'] }}</li>
                    @endif  
                    @if (!empty(@$item['data']['started_at']))
                        <li class="list-item">Started: {{ @$item['data']['started_at'] }}</li>
                    @endif
                    @if (!empty(@$item['data']['answered_by_name']))
                        <li class="list-item">Answer Person: {{ @$item['data']['answered_by_name'] }}</li>
                    @endif

                    @if (!empty(@$item['data']['transcription_status']))
                        <li class="list-item">Transcription: {{ @$item['data']['transcription_status'] }}</li>
                    @endif
                @else
                    @if(!empty(@$item['html_body']))
                        <li class="list-item">{!! @$item['html_body'] !!}</li>
                    @endif
                @endif
                @if(!empty(@$item['attachments']))
                    @foreach($item['attachments'] as $attachments)
                    {{-- {{dd($attachments)}} --}}
                        <li class="list-item">File Name: {!! @$attachments['file_name'] !!} @if(@$attachments['malware_scan_result'] == "malware_not_found") <img src="{{ asset('/backend/lead-management/images/green-tick.svg') }}" title="verified" alt="green-tick" style="width: 10px !important; height:10px !important">@else @endif <a class="btn btn-primary" style="width: 100px; font-size:10px; margin:0px; padding:3px; display:inline;" href="{{@$attachments['content_url']}}" download="{{ @$attachments['file_name']}}">Download File  @if($attachments['size'] > 0 ) {{round(@$attachments['size']/1024/1024, 1) }}MB @endif</a></li>
                    @endforeach
                    
                @endif
                
                
                {{-- @if (!empty(@$item['data']['answered_by_name']))
                    <li class="list-item">Answer Person: {{ @$item['data']['answered_by_name'] }}</li>
                @endif --}}
               
            </ul>
        </div>

        @elseif(@$item['via']['channel'] == "web")
        {{-- {{dd($comments['comments'])}} --}}
        <div class="single-row">
            <div class="top-row">
                <img src="{{ asset('backend') }}/lead-management/images/header/user-grey.svg" alt="user"
                    width="100%" height="100%">
                <div class="caller-details">
                    <p class="name"> {{GetNameByZenId(@$item['author_id'])}} <span style="background: rgb(228, 165, 31); padding:4px; margin:0px; font-size:10px; color:white; border-radius:3px;">Internal</span></p>
 
                </div>
                <p class="sub-text time">{{ dateMonthTimeFormat(@$item['created_at']) }}</p>
            </div>
            <ul class="detail-list">
                @if(!empty(@$item['data']))
                    @if (!empty(@$item['data']['from']))
                        <li class="list-item">Call from: {{ @$item['data']['from'] }}</li>
                    @endif
                    @if (!empty(@$item['data']['to']))
                        <li class="list-item">Call to: {{ @$item['data']['to'] }}</li>
                    @endif
                    @if (!empty(@$item['data']['recording_url']))
                        <li class="list-item">Recording : 
                            <audio controls>
                                <source src="{{ @$item['data']['recording_url'] }}" type="audio/mpeg">
                                Your browser does not support the audio element.
                            </audio>
                        </li>
                    @endif
                    @if (!empty(@$item['data']['answered_by_id']))
                        <li class="list-item">answered_by_id: {{ @$item['data']['answered_by_id'] }}</li>
                    @endif  
                    @if (!empty(@$item['data']['started_at']))
                        <li class="list-item">Started: {{ @$item['data']['started_at'] }}</li>
                    @endif
                    @if (!empty(@$item['data']['answered_by_name']))
                        <li class="list-item">Answer Person: {{ @$item['data']['answered_by_name'] }}</li>
                    @endif

                    @if (!empty(@$item['data']['transcription_status']))
                        <li class="list-item">Transcription: {{ @$item['data']['transcription_status'] }}</li>
                    @endif
                @else
                    @if(!empty(@$item['html_body']))
                        <li class="list-item">{!! @$item['html_body'] !!}</li>
                    @endif
                @endif

                @if(!empty(@$item['attachments']))
                    @foreach($item['attachments'] as $attachments)
                    {{-- {{dd($attachments)}} --}}
                        <li class="list-item">File Name: {!! @$attachments['file_name'] !!} 
                            @if(@$attachments['malware_scan_result'] == "malware_not_found") <img src="{{ asset('/backend/lead-management/images/green-tick.svg') }}" title="verified" alt="green-tick" style="width: 10px !important; height:10px !important">
                            @endif
                             <a class="btn btn-primary" style="width: 100px; font-size:10px; margin:0px; padding:3px; display:inline;" href="{{@$attachments['content_url']}}" download="{{ @$attachments['file_name']}}">Download File  
                                @if($attachments['size'] > 0 ) {{round(@$attachments['size']/1024/1024, 1) }}MB @endif
                            </a>
                        </li>
                    @endforeach
                @endif
                
                
               
               
            </ul>
        </div>
        @else
        <div class="single-row">
            <div class="top-row">
                <img src="{{ asset('backend') }}/lead-management/images/header/user-grey.svg" alt="user"
                    width="100%" height="100%">
                <div class="caller-details">
                    <p class="name"> {{GetNameByZenId(@$item['author_id'])}}</p>
                    {{-- <p class="text">{{ @$item['assignee_id']}}</p> --}}
                    
                </div>
                <p class="sub-text time">{{ dateMonthTimeFormat(@$item['created_at']) }}</p>
            </div>
            <ul class="detail-list">

                @if (!empty(@$item['via']['source']['to']['phone']))
                    <li class="list-item">Call to: {{ @$item['via']['source']['to']['phone'] }}</li>
                @endif
                @if(!empty(@$item['via']['source']['from']['phone']))
                    <li class="list-item">Call From: {{ @$item['via']['source']['from']['phone'] }}</li>
                @endif
                @if(!empty(@$item['via']['source']['to']['name']))
                    <li class="list-item">Called By: {{ @$item['via']['source']['to']['name'] }}</li>
                @endif
                @if(!empty(@$item['html_body']))
                    <li class="list-item">{!! @$item['html_body'] !!}</li>
                @endif
                @if(!empty(@$item['attachments']))
                    <hr>
                    <h3>Attachments</h3>
                    @foreach($item['attachments'] as $attachments)
                    {{-- {{dd($attachments)}} --}}
                        <li class="list-item"><span style="width:150px; overflow:hidden;" File Name: {!! @$attachments['file_name'] !!} @if (@$attachments['malware_scan_result'] == "malware_not_found")  <img class="ml-1" src="{{ asset('/backend/lead-management/images/green-tick.svg') }}" title="verified" alt="green-tick" style="width: 10px !important; height:10px !important; margin-left:10px !important;" >@else @endif <a class="btn btn-primary ml-1" style="width: 100px; font-size:10px;  margin-left:10px !important; padding:3px; display:inline;" href="{{@$attachments['content_url']}}" download="{{ @$attachments['file_name']}}">Download File  @if($attachments['size'] > 0 ) {{round(@$attachments['size']/1024/1024, 1) }}MB @endif</a></li>
                    @endforeach
                    
                @endif
            </ul>
        </div>
        @endif
    @endforeach



@endif


    {{-- <div class="single-row">
        <div class="top-row">
            <img src="{{ asset('backend') }}/lead-management/images/header/user-grey.svg"
                    alt="user" width="100%" height="100%">
            <div class="caller-details">
                <p class="name">Lisa</p>
                <p class="text">Assign</p>
                <p class="sub-text">To +911458456982</p>
            </div>
            <p class="sub-text time">Today 04:54</p>
        </div>

        <div class="detail-box">
            <audio class="recording" controls>
                <source src="horse.ogg" type="audio/ogg">
                <source src="horse.mp3" type="audio/mpeg">
                Your browser does not support the audio element.
            </audio>
            <p class="show-detail">Show Call Details</p>
        </div>
    </div> --}}