@php
    $disabled = $isAjax ? '' : 'disabled';
    $key = $skip;
    $accountSid = config('services.twilio.accountSid');
    $authToken = config('services.twilio.auth_token');
@endphp
@if($callLogs)
    @foreach($callLogs as $callLog)
    @php
        // $notVoiceCallClass = 'not_voice_call_hide_show';
        $callDetails = $callLog->details;
        $callDate = date_create($callDetails['Timestamp']);
        $numberToDisplay = $callDetails['From'];
        $callImageClass = 'call-inout-img';
        $inOutCallImage = 'images/svg/call-incoming.svg';
        $inOutCallText = 'Incoming Call';
        $callBoxColor = 'call-incoming-box-color';
        if($callDetails['Direction'] !== 'inbound')
        {
            $inOutCallText = 'Outgoing Call';
            $numberToDisplay = $callDetails['To'];
            $inOutCallImage = 'images/svg/call-outgoing.svg';
            $callBoxColor = 'call-outgoing-box-color';
        }
        $recordingDuration = 0;
        $recordingSid = "";
        if(!empty($callDetails['RecordingUrl']))
        {
            // $notVoiceCallClass = '';
            $callImageClass = 'call-voice-img';
            $inOutCallImage = 'images/svg/call-voice-msg.svg';
            $callBoxColor = 'call-missed-box-color';

            // Parse the URL and extract the path
            $path = parse_url(urldecode($callDetails['RecordingUrl']), PHP_URL_PATH);
            // Split the path by slashes and get the last segment (RecordingSid)
            $pathSegments = explode('/', $path);
            // Log::info($pathSegments);
            $recordingSid = end($pathSegments);

            $recording = getRecordingDetails($recordingSid, $accountSid, $authToken);
            $recordingDuration = $recording->duration;

        }
        if(!($recordingDuration > 0)) {
            continue;
        }
    @endphp

    <div class="border-bottom py-3">
        <div class="row">

            <div class="col-2 pr-0 call-img">
                {{-- <img src="{{asset($inOutCallImage)}}" class="call-inout-img ajax-btn-call" data-phone-number="{{ $numberToDisplay }}"> --}}
                <div class="call-inout-box {{$callBoxColor}}">
                    <img src="{{asset($inOutCallImage)}}" class="{{$callImageClass}} ajax-btn-call" data-phone-number="{{ $numberToDisplay }}">
                </div>
            </div>

        <div class="col-5 pr-0">
                <span class="font-style phone-number">{{ $numberToDisplay }}</span>
                <div class="row">
                    @if(!empty($recordingDuration) && $recordingDuration > 0)
                        <div class="col">
                            <div id="voice-audio-player-container-{{$key}}">
                                {{-- <audio id="voice-audio-player-{{$key}}" data-index="{{$key}}" onloadeddata="voiceDisplayDuration(this)" onended="voiceAudioEndEvent(this)" ontimeupdate="voiceAudioOnTimeUpdate(this.currentTime, {{$key}})" src="{{ route('play-recording', ['recordingSid' => $recordingSid]) }}" preload="metadata"></audio> --}}
                                <audio id="voice-audio-player-{{$key}}" data-index="{{$key}}" onloadeddata="voiceDisplayDuration(this)" onended="voiceAudioEndEvent(this)" ontimeupdate="voiceAudioOnTimeUpdate(this.currentTime, {{$key}})" preload="metadata">
                                    <source src="{{ route('play-recording', ['recordingSid' => $recordingSid, 'ext' => 'mp3', 'type' => 'mpeg']) }}" type="audio/mpeg">
                                    Your browser does not support the audio element.
                                </audio>
                                <img id="voice-play-icon-{{$key}}" onclick="voiceAudioController(this, {{$key}})" class="play-icon" width="15" src="{{asset('images/play-button.png')}}">
                                <span id="voice-current-time-{{$key}}" class="align-middle pl-1">0:00</span>
                                <span>&nbsp;/&nbsp;</span>
                                <span id="voice-duration-{{$key}}" class="voice-recording-duration align-middle" data-duration="{{ $recordingDuration }}">0:00</span>
                                {{-- <audio src="{{ route('play-recording', ['recordingSid' => $recordingSid, 'ext' => 'mp3', 'type' => 'mpeg']) }}" preload="metadata" controls></audio> --}}
                            </div>
                        </div>
                    @else
                        {{-- <div class="col-4"> --}}
                            <p class="ml-3 mb-0 font-style outgoing-text">{{$inOutCallText}}</p>
                        {{-- </div> --}}
                    @endif
                </div>
            </div>

            <div class="col-5 ml-auto">
                <span class="font-style call-time float-right"> {{$callDetails['Timestamp']}}</span>
                {{-- <span class="font-style call-time float-right"> {{date('d M Y, H:iA',strtotime($callDetails['Timestamp']))}}</span> --}}
            </div>
        </div>
    </div>
    @php
        $key++;
    @endphp
  @endforeach
@endif
@if(count($callLogs) === 0)
    <div>No voice calls yet! Let's give it a spin.</div>
@endif