@extends('layouts.dashboard')

@section('content')
    <div class="breadcrumbs">
        <div class="col-sm-4">
            <div class="page-header float-left">
                <div class="page-title">
                    <h1>Demo Logs</h1>
                </div>
            </div>
        </div>
    </div>

    <div class="content mt-3">
        <div class="animated fadeIn">
            <div class="row">

                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <strong class="card-title">List</strong>

                        </div>
                        <div class="card-body">
                            <table id="api-log" class="table table-striped table-bordered table-responsive"
                                style="width:100%">
                                <thead>
                                    <tr>
                                        <th style="width:15%">Name</th>
                                        <th>Mobile Number</th>
                                        <th>Reg Url 1</th>
                                        <th>Reg Url 2</th>
                                        <th>Location</th>
                                        <th>Response</th>
                                        <th>AI Engine</th>
                                        <th>IP Address</th>
                                        <th>Status</th>
                                        <th>Created Date</th>
                                        <th>Action</th>

                                    </tr>
                                </thead>
                                <tbody>
                                    @forelse ($registers as $registeration)
                                        <tr class="main-row" data-id="{{ $registeration->id }}">
                                            <td>{{ $registeration->name }}</td>
                                            <td>{{ $registeration->mobile_number }}</td>
                                            <td>
                                                @isset($registeration->reg_url_1)
                                                    {{-- <audio controls>
                                                        <source
                                                            src="{{ asset('uploads/recordings') . '/' . $registeration->reg_url_1 }}"
                                                            type="audio/wav">
                                                        Your browser does not support the audio element.
                                                    </audio> --}}

                                                    <audio id="audio_{{$registeration->id}}" src="{{ asset('uploads/recordings') . '/' .$registeration->reg_url_1 }} " type="audio/wav"></audio>

                                                    <div class="text-center">
                                                        <button class="border-0 bg-transparent" id="playPauseButton_{{$registeration->id}}"><i class="fa fa-play text-dark"></i></button>
                                                        <a href="{{ asset('uploads/recordings') . '/' . $registeration->reg_url_1 }}" download>
                                                            <button class="border-0 bg-transparent"><i class="fa fa-download text-dark"></i></button>
                                                        </a>
                                                    </div>

                                                    @else
                                                    -
                                                @endisset
                                            </td>
                                            <td>
                                                @isset($registeration->reg_url_2)
                                                    <audio id="audio_{{$registeration->id}}" src="{{ asset('uploads/recordings') . '/' . $registeration->reg_url_2 }}"  type="audio/wav"></audio>
                                                    <div class="text-center">
                                                        <button class="border-0 bg-transparent" id="playPauseButton_{{$registeration->id}}"><i class="fa fa-play text-dark" ></i></button>
                                                        <a href="{{ asset('uploads/recordings') . '/' . $registeration->reg_url_2 }}" download>
                                                            <button class="border-0 bg-transparent"><i class="fa fa-download text-dark"></i></button>
                                                        </a>
                                                    </div>

                                                    @else
                                                    -

                                                @endisset
                                            </td>
                                            <td>{{ ($registeration->location)?$registeration->location:'-' }}</td>
                                            <td>
                                                @if ($registeration->data !== null)
                                                    <i class="fa fa-info-circle response-info" aria-hidden="true"
                                                        data-id={{ $registeration->id }} style="cursor:pointer"></i>
                                                @else
                                                    -
                                                @endif
                                                @php
                                                    $response = json_decode($registeration->data, true);

                                                    if (isset($response['data']['status_details'])) {
                                                        $arr = str_replace(
                                                            'Array',
                                                            '',
                                                            print_r($response['data']['status_details'], true),
                                                        );
                                                        $arr = str_replace('(', '', print_r($arr, true));
                                                        $arr = str_replace(')', '', print_r($arr, true));

                                                        echo '<pre style="white-space:pre-wrap">';
                                                        echo str_replace(')', '', print_r($arr, true));
                                                        echo '</pre>';
                                                    }

                                                @endphp
                                            </td>
                                            <td>{{ ($registeration->ai_engine)?$registeration->ai_engine:'-' }}</td>
                                            <td>{{ ($registeration->ip_address)?$registeration->ip_address:'-' }}</td>
                                            <td> @if($registeration->is_voice_registered == 2) {{ 'Provisioned'}}
                                                 @elseif ($registeration->is_voice_registered == 1) {{ 'Success'}}
                                                 @else {{ 'Failed'}}
                                                @endif</td>
                                            <td>{{ date('d-m-Y',strtotime($registeration->created_at))}}</td>
                                            <td>
                                                @if($registeration->payload != null)
                                                <button type="button" class="btn btn-info open-modal"
                                                    data-id={{ $registeration->id }}>Payload</button>
                                                 @endif
                                                        <button class="expand-btn btn btn-success mt-1" data-id="{{ $registeration->id }}">Verifications</button>
                                                    </td>
                                        </tr>

                                        <tr id="expand-row-{{ $registeration->id }}" style="display: none;">
                                            <td colspan="10">
                                                <div class="expanded-content-{{ $registeration->id }}"></div>
                                            </td>
                                        </tr>

                                    @empty
                                        <tr>
                                            <td colspan="8" class="text-center"> No data Found</td>
                                        </tr>
                                    @endforelse
                                </tbody>
                            </table>
                            <div class="link">
                                {{ $registers->onEachSide(2)->links() }}
                            </div>
                        </div>
                    </div>
                </div>


            </div>
        </div><!-- .animated -->
    </div><!-- .content -->



    <!-- Payload Modal -->
    <div class="modal fade" id="payloadModal" tabindex="-1" role="dialog" aria-labelledby="payloadModalTitle"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content" style="width: auto">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">API Request Payload</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="modal-info"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Response Modal -->
    <div class="modal fade" id="responsedModal" tabindex="-1" role="dialog" aria-labelledby="responseModalTitle"
        aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content" style="width: auto">
                <div class="modal-header">
                    <h5 class="modal-title">API Response</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p id="response-info"></p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        $(document).ready(function() {



            $(document).on('click','button[id^="playPauseButton_"]',function(){
            // Get the button's full ID (e.g., "playPauseButton_1")
            var fullId = $(this).attr('id');

            // Extract the numeric part after the underscore
            var id = fullId.split('_')[1];
            // Get the corresponding audio element and icon
            const player = document.getElementById('audio_' + id);
            var icon = $(this).find('i');

            // Pause any other audio tracks
            $('audio').each(function() {
                if (this.id !== 'audio_' + id) {
                    this.pause();
                    this.currentTime = 0; // Reset to the beginning
                }
            });

            // Reset all icons to play
            $('button[id^="playPauseButton_"] i').removeClass('fa-pause').addClass('fa-play');

            // Toggle play/pause for the selected audio
            if (player.paused) {
                player.play();
                icon.removeClass('fa-play').addClass('fa-pause');
            } else {
                player.pause();
                icon.removeClass('fa-pause').addClass('fa-play');
            }

             // Add 'ended' event listener to reset icon when audio finishes
             player.onended = function() {
                    icon.removeClass('fa-pause').addClass('fa-play');
                };
          });



            $('.open-modal').on('click', function() {
                var id = $(this).data('id');

                $.ajax({
                    url: '/get-modal-content/' + id,
                    data: { 'type' : 'reg'},
                    method: 'GET',
                    success: function(data) {
                        $('#modal-info').text(data.info);
                        $('#payloadModal').modal('show');
                    }
                });
            });

            $('.response-info').on('click', function() {
                var id = $(this).data('id');

                $.ajax({
                    url: '/get-response-content/' + id,
                    method: 'GET',
                    data: { 'type' : 'reg'},
                    success: function(data) {
                        $('#response-info').text(data.info);
                        $('#responsedModal').modal('show');
                    }
                });
            });
        });

//         $(document).on('click','button[id^="playPauseButton_"]',function(){
//             // Get the button's full ID (e.g., "playPauseButton_1")
//             var fullId = $(this).attr('id');

//             // Extract the numeric part after the underscore
//             var id = fullId.split('_')[1];
//             console.log("Extracted ID:", id);
//             // Get the corresponding audio element and icon
//             const player = document.getElementById('audio_' + id);
//             var icon = $(this).find('i');

//             // Pause any other audio tracks
//             $('audio').each(function() {
//                 if (this.id !== 'audio_' + id) {
//                     this.pause();
//                     this.currentTime = 0; // Reset to the beginning
//                 }
//             });

//             // Reset all icons to play
//             $('button[id^="playPauseButton_"] i').removeClass('fa-pause').addClass('fa-play');

//             // Toggle play/pause for the selected audio
//             if (player.paused) {
//                 player.play();
//                 icon.removeClass('fa-play').addClass('fa-pause');
//             } else {
//                 player.pause();
//                 icon.removeClass('fa-pause').addClass('fa-play');
//             }

//              // Add 'ended' event listener to reset icon when audio finishes
//              player.onended = function() {
//                     icon.removeClass('fa-pause').addClass('fa-play');
//                 };
// });

        $(document).on('click','.verification-payload-modal-button', function() {
                var id = $(this).data('id');
                console.log('id',id);
                $.ajax({
                    url: '/get-modal-content/' + id,
                    method: 'GET',
                    data: { 'type' : 'ver'},
                    success: function(data) {
                        $('#modal-info').text(data.info);
                        $('#payloadModal').modal('show');
                    }
                });
            });


            $(document).on('click','.response-info-ver' ,function() {
                var id = $(this).data('id');

                $.ajax({
                    url: '/get-response-content/' + id,
                    data: { 'type' : 'ver'},
                    method: 'GET',
                    success: function(data) {
                        $('#response-info').text(data.info);
                        $('#responsedModal').modal('show');
                    }
                });
            });


        $(document).on('click', '.expand-btn', function() {
            var regId = $(this).data('id');
            var expandRow = $('#expand-row-' + regId);
            var expandedContent = $('.expanded-content-' + regId);

            if (expandRow.is(':visible')) {
                expandRow.hide(); // Collapse if already visible
            } else {
                if (expandedContent.html() === '') {
                    $.ajax({
                        url: '/demo-log-verifications/' + regId, // URL to the Laravel route
                        type: 'GET',
                        success: function(response) {
                            expandedContent.html(response); // Populate data
                            expandRow.show(); // Show expanded row
                        },
                        error: function() {
                            alert('Failed to fetch data.');
                        }
                    });
                } else {
                    expandRow.show(); // Just show the row if data is already loaded
                }
            }
        });
    </script>
@endpush