@php
    $disabled = $isAjax ? '' : 'disabled';
    $paddingClass = $isAjax ? "py-3" : "pb-3";
    // $loadMoreDataAttr = $isAjax ? 'onloadeddata="displayDuration(this)"' : '';
    $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';
        $callTypeText = 'Incoming Call';
        $callBoxColor = 'call-incoming-box-color';
        if($callDetails['Direction'] !== 'inbound')
        {
            $callTypeText = 'Outgoing Call';
            $numberToDisplay = $callDetails['To'];
            $inOutCallImage = 'images/svg/call-outgoing.svg';
            $callBoxColor = 'call-outgoing-box-color';
        }

        $audioType = $audioSrc = $recordingDuration = $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;

            $audioType = '';
            if(empty($token)) {
                $audioSrc = route('play-recording', ['recordingSid' => $recordingSid, 'ext' => 'mp3', 'type' => 'mpeg']);
            } else {
                $audioSrc = route('frontend.play-recording', ['token' => $token, 'recordingSid' => $recordingSid, 'ext' => 'mp3', 'type' => 'mpeg']);
            }

        } elseif(!empty($callDetails['missedCall'])) {
            $callTypeText = 'Missed Call';
            $callImageClass = 'call-missed-img';
            $inOutCallImage = 'images/svg/call-missed.svg';
            $callBoxColor = 'call-missed-box-color';
        }

    @endphp

    <div class="border-bottom {{$paddingClass}}">
        <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-4 pr-0">
                <span class="font-style phone-number">{{ $numberToDisplay }}</span>
                <div class="row">
                    @if(!empty($recordingDuration) && $recordingDuration > 0)
                        <div class="col">
                            <div id="audio-player-container-{{$key}}">
                                {{-- <audio id="audio-player-{{$key}}" controls preload="metadata" playsinline webkit-playsinline>
                                    <source src="{{ route('play-recording', ['recordingSid' => $recordingSid]) }}" type="audio/mpeg">
                                    <source src="{{ route('play-recording', ['recordingSid' => $recordingSid]) }}" type="audio/mp3">
                                    <source src="{{ route('play-recording', ['recordingSid' => $recordingSid]) }}" type="audio/wav">
                                    Your browser does not support the audio element.
                                </audio> --}}
                                <audio id="audio-player-{{$key}}" class="audio-player" data-index="{{$key}}" onended="audioEndEvent(this)" ontimeupdate="audioOnTimeUpdate(this.currentTime, {{$key}})" preload="metadata">
                                    {{-- src="{{ $callDetails['RecordingUrl'] }}" --}}
                                    <source src="{{$audioSrc}}" type="{{$audioType}}">
                                    {{-- <source src="{{ route('play-recording', ['recordingSid' => $recordingSid, 'ext' => 'mp3', 'type' => 'mp3']) }}" type="audio/mp3">
                                    <source src="{{ route('play-recording', ['recordingSid' => $recordingSid]) }}" type="audio/wav"> --}}
                                    Your browser does not support the audio element.
                                </audio>
                                <img id="play-icon-{{$key}}" onclick="audioController(this, {{$key}})" class="play-icon" width="15" src="{{asset('images/play-button.png')}}">
                                <span id="current-time-{{$key}}" class="align-middle pl-1">0:00</span>
                                <span>&nbsp;/&nbsp;</span>
                                <span id="duration-{{$key}}" class="recording-duration align-middle" data-index="{{$key}}" 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">{{$callTypeText}}</p>
                        {{-- </div> --}}
                    @endif
                </div>
            </div>

            <div class="col-6 pl-0 ml-auto">
                <span class="font-style call-time float-right"> {{$callDetails['Timestamp']}}</span>
                {{-- <span class="font-style call-time1 float-right"> {{date('d M Y, h:iA',strtotime($callDetails['Timestamp']))}}</span> --}}
            </div>
        </div>
    </div>
    @php
        $paddingClass = "py-3";
        $key++;
    @endphp
  @endforeach
@endif