@extends('layouts.dashboard')

@section('content')
    <div class="breadcrumbs">
        <div class="col-sm-4">
            <div class="page-header float-left">
                <div class="page-title">
                    <h1>Captcha 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%">Unique Id</th>
                                        <th>Session Id</th>
                                        <th>Captcha</th>
                                        <th>Reg Url 1</th>
                                        <th>Reg Url 2</th>
                                        <th>Response</th>
                                        <th>Action</th>

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

                                            </td>
                                            <td>
                                                @isset($registeration->reg_url_2)
                                                    <audio controls>
                                                        <source
                                                            src="{{ $url . '/' .('uploads/recordings/captcha') . '/' . $registeration->reg_url_2 }}"
                                                            type="audio/wav">
                                                        Your browser does not support the audio element.
                                                    </audio>
                                                @endisset
                                            </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>
                                                @if($registeration->payload != null)
                                                <button type="button" class="btn btn-info open-modal"
                                                    data-id={{ $registeration->id }}>Payload</button>
                                                 @endif
                                                    <button type="button" class="btn btn-success mt-1"> <a class="text-white"
                                                        href="{{ route('captcha-log.verifications', ['id' => $registeration->id]) }}">Verifications</a></button>

                                                    </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() {
            $('.open-modal').on('click', function() {
                var id = $(this).data('id');

                $.ajax({
                    url: '/captcha/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: '/captcha/get-response-content/' + id,
                    method: 'GET',
                    data: { 'type' : 'reg'},
                    success: function(data) {
                        $('#response-info').text(data.info);
                        $('#responsedModal').modal('show');
                    }
                });
            });
        });
    </script>
@endpush