@extends('layouts.dashboard')

@section('content')
    <div class="breadcrumbs">
        <div class="col-sm-4">
            <div class="page-header float-left">
                <div class="page-title">
                    <h1>MIS Reports</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>
                             <span class="float-right">
                                Name <input name="name" id="name" value="{{ Request::get('name') }}">
                                From <input name="from" id="from" data-date-end-date="0d"
                                    value="{{ Request::get('from') }}">
                                To <input name="to" id="to" data-date-end-date="0d"
                                    value="{{ Request::get('to') }}">
                                    <select id="status" name="status">
                                        <option value="1">Select Status</option>
                                        <option value="1">Success</option>
                                        <option value="0">Failure</option>
                                    </select>
                                <button type="button" id="filter" class="btn btn-primary">Filter</button>
                                {{-- <button id="reset" class="btn btn-secondary">Reset</button> --}}
                            </span>
                        </div>
                        <div class="card-body">
                            <table id="mis-report-table" class="table table-striped table-bordered table-responsive" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Sr No.</th>
                                        <th>Session Id</th>
                                        <th>Date/Time</th>
                                        <th>Name</th>
                                        <th>Mobile</th>
                                        <th>Status</th>
                                        <th>Score</th>
                                        <th>Location</th>
                                        <th>Reg 1</th>
                                        <th>Reg 2</th>
                                        <th>Ver 1</th>
                                        <th>Failure Reason</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {{-- @forelse ($logs as $log)
                                        <tr>
                                          <td>{{ $loop->iteration }} </td>
                                            <td>{{ isset(App\Models\ApiRequestLog::getModelData($log->type,$log->model_id)['verify_time'])?App\Models\ApiRequestLog::getModelData($log->type,$log->model_id)['verify_time']:'-' }}</td>
                                            <td>{{ isset(App\Models\ApiRequestLog::getModelData($log->type,$log->model_id)['name'])?App\Models\ApiRequestLog::getModelData($log->type,$log->model_id)['name']:'-' }}</td>
                                            <td>{{ isset(App\Models\ApiRequestLog::getModelData($log->type,$log->model_id)['mobile_number'])?App\Models\ApiRequestLog::getModelData($log->type,$log->model_id)['mobile_number']:'-' }}</td>
                                            <td style="color:{{ isset(App\Models\ApiRequestLog::getModelData($log->type,$log->model_id)['status'])?App\Models\ApiRequestLog::getModelData($log->type,$log->model_id)['color']:'-' }}"><b>{{ isset(App\Models\ApiRequestLog::getModelData($log->type,$log->model_id)['status'])?App\Models\ApiRequestLog::getModelData($log->type,$log->model_id)['status']:'-' }}</b></td>
                                            <td>{{ isset(App\Models\ApiRequestLog::getModelData($log->type,$log->model_id)['score'])?App\Models\ApiRequestLog::getModelData($log->type,$log->model_id)['score']:'N/A' }}</td>
                                            <td>{{ isset(App\Models\ApiRequestLog::getModelData($log->type,$log->model_id)['location'])?App\Models\ApiRequestLog::getModelData($log->type,$log->model_id)['location']:'-' }}</td>
                                            <td>
                                                @isset(App\Models\ApiRequestLog::getModelData($log->type,$log->model_id)['reg_url_1'])
                                                    <audio id="audio_{{$log->id}}" src="{{ asset('uploads/recordings') . '/' .App\Models\ApiRequestLog::getModelData($log->type,$log->model_id)['reg_url_1']}}" type="audio/wav"></audio>
                                                    <div class="text-center">
                                                        <button class="border-0 bg-transparent" id="playPauseButton_{{$log->id}}"><i class="fa fa-play text-dark" ></i></button>
                                                        <a href="{{ asset('uploads/recordings') . '/' .App\Models\ApiRequestLog::getModelData($log->type,$log->model_id)['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(App\Models\ApiRequestLog::getModelData($log->type,$log->model_id)['reg_url_2'])
                                                    <audio id="audio_{{$log->id}}" src="{{ asset('uploads/recordings') . '/' .App\Models\ApiRequestLog::getModelData($log->type,$log->model_id)['reg_url_2']}}" type="audio/wav"></audio>
                                                    <div class="text-center">
                                                        <button class="border-0 bg-transparent" id="playPauseButton_{{$log->id}}"><i class="fa fa-play text-dark" ></i></button>
                                                        <a href="{{ asset('uploads/recordings') . '/' .App\Models\ApiRequestLog::getModelData($log->type,$log->model_id)['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>
                                                @isset(App\Models\ApiRequestLog::getModelData($log->type,$log->model_id)['ver_url_1'])
                                                    <audio id="audio_{{$log->id}}" src="{{ asset('uploads/recordings') . '/' .App\Models\ApiRequestLog::getModelData($log->type,$log->model_id)['ver_url_1']}}" type="audio/wav"></audio>
                                                    <div class="text-center">
                                                        <button class="border-0 bg-transparent" id="playPauseButton_{{$log->id}}"><i class="fa fa-play text-dark" ></i></button>
                                                        <a href="{{ asset('uploads/recordings') . '/' .App\Models\ApiRequestLog::getModelData($log->type,$log->model_id)['ver_url_1']}}" download>
                                                            <button class="border-0 bg-transparent"><i class="fa fa-download text-dark"></i></button>
                                                          </a>
                                                    </div>
                                                    @else
                                                    -
                                                @endisset
                                            </td>

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


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




@endsection

@push('scripts')
    <script>
        $('#from').datepicker({
            format: 'dd-mm-yyyy',
            todayHighlight: true,
        });

        $('#to').datepicker({
            format: 'dd-mm-yyyy',
            todayHighlight: true,
        });

     $('#mis-report-table').DataTable({
         processing: true,
         serverSide: true,
        "bLengthChange": false,
       order: [[0, "desc"]],
       pageLength: 15,

    // columnDefs: [
    //     {
    //         targets: [0],
    //         orderData: [0, 1]
    //     },
    //     {
    //         targets: [1],
    //         orderData: [1, 0]
    //     },
    //     {
    //         targets: [4],
    //         orderData: [4, 0]
    //     }
    // ],
        dom: 'Bfrtip',
        // buttons: [
        //     { extend: 'csv' },
        //     { extend: 'excel' },
        //     { extend: 'pdf', title: 'Turant AMS' },

        // ],

        buttons: [
            {
                extend: 'csvHtml5',
                text: 'CSV',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4,5,6,7,8,9,10], // Include Name and Mobile Number
                    format: {
                        body: function (data, row, column) {
                            // Extract audio URLs
                            if (data.includes('<audio')) {
                                const url = $(data).attr('src');
                                return url || 'N/A';
                            }
                            return data;
                        }
                    }
                }
            },
            {
                extend: 'excelHtml5',
                text: 'Excel',
                exportOptions: {
                    columns: [0, 1, 2, 3, 4,5,6,7,8,9,10], // Include all columns
                    format: {
                        body: function (data, row, column) {
            // Ensure data is treated as a string
            if (typeof data === 'string' && data.includes('<audio')) {
                // Create a temporary DOM element to parse the HTML
                const tempDiv = document.createElement('div');
                tempDiv.innerHTML = data;
                const audioElement = tempDiv.querySelector('audio');
                if (audioElement) {
                    return audioElement.src || 'N/A';
                }
            }
            return data; // Return the original data if not an audio element
        }
                    }
                }
            },
            /** {
                extend: 'pdfHtml5',
                text: 'Pdf',
                exportOptions: {
                    orientation: 'landscape',  // Optional: Set orientation to landscape for more width
                    pageSize: 'A4',  // Set page size (A4 is default)
                    columns: [0, 1, 2, 3, 4,5,6,7,8,9], // Include all columns
                    format: {
                        body: function (data, row, column) {
                            // Extract audio URLs
                            if (data.includes('<audio')) {
                                const url = $(data).attr('src');
                                return url || 'N/A';
                            }
                            return data;
                        }
                    }
                },
                customize: function (doc) {
                    doc.content[1].table.body.forEach(function (row, rowIndex) {
                        row.forEach(function (cell, colIndex) {
                            if (typeof cell === 'string' && cell.startsWith('http')) {
                                // Make URLs clickable in the PDF
                                row[colIndex] = { text: cell, link: cell };
                            }
                        });
                    });
                }
            } **/
        ],
        ajax: {
            url: '/mis-report', // Backend route
            data: function (d) {
                // Add custom filters to the request
                d.name = $('#name').val();
                d.from_date = $('#from_date').val();
                d.to_date = $('#to_date').val();
                d.status = $('#status').val();
            }
        },
        columns: [
            { data: 'id', name: 'id' },
            { data: 'session_id', name: 'session_id' },
            { data: 'date_time', name: 'date_time' },
            { data: 'name', name: 'name' },
            { data: 'mobile_number', name: 'mobile_number' },
            { data: 'status', name: 'status' },
            { data: 'score', name: 'score' },
            { data: 'location', name: 'location' },
            { data: 'reg_url_1', name: 'reg_url_1' },
            { data: 'reg_url_2', name: 'reg_url_2' },
            { data: 'ver_url_1', name: 'ver_url_1' },
            { data: 'failure_reason', name: 'failure_reason' },
        ],
    //     rowCallback: function(row, data, index) {
    //     // Example: Change text color based on a condition
    //     if (data[4]) {
    //         $('td', row).css('color', 'red'); // Change text color for the entire row
    //     }
    // },
        columnDefs: [

            {
            targets: 5, // Specify the column index (e.g., 0 = first column)
            createdCell: function(td, cellData, rowData, row, col) {
                $(td).css({'color': rowData.color, 'font-weight': 'bold' }); // Apply custom color to this cell
            }
        },
                    {
                        targets: 8,
                        render: function(data, type, row) {

                            return `<audio id="audio_reg1_${row.id}" src="${data}" type="audio/wav"></audio>
                                        <div class="text-center">
                                            <button class="border-0 bg-transparent" id="playPauseButton_reg1_${row.id}"><i class="fa fa-play text-dark" ></i></button>
                                            <a href="${data}" download>
                                                <button class="border-0 bg-transparent"><i class="fa fa-download text-dark"></i></button>
                                            </a>
                                        </div>`;
                        }
                    },
                    {
                        targets: 9,
                        render: function(data, type, row) {
                            return `<audio id="audio_reg2_${row.id}" src="${data}" type="audio/wav"></audio>
                                        <div class="text-center">
                                            <button class="border-0 bg-transparent" id="playPauseButton_reg2_${row.id}"><i class="fa fa-play text-dark" ></i></button>
                                            <a href="${data}" download>
                                                <button class="border-0 bg-transparent"><i class="fa fa-download text-dark"></i></button>
                                            </a>
                                        </div>`;
                        }
                    },
                    {
                        targets: 10,
                        render: function(data, type, row) {
                            return `<audio id="audio_ver1_${row.id}" src="${data}" type="audio/wav"></audio>
                                        <div class="text-center">
                                            <button class="border-0 bg-transparent" id="playPauseButton_ver1_${row.id}"><i class="fa fa-play text-dark" ></i></button>
                                            <a href="${data}" download>
                                                <button class="border-0 bg-transparent"><i class="fa fa-download text-dark"></i></button>
                                            </a>
                                        </div>`;
                        }
                    }
                ]
});

        $("#filter").on('click', function() {
            var toDate = "";
            var fromDate = "";
            var url = "";
            var name = ""; var status = "";
            toDate = $("#to").val();
            fromDate = $("#from").val();
            name = $("#name").val();
            status = $('#status').val();

            var uri = window.location.toString();
            if (uri.indexOf("?") > 0) {
                var clean_uri = uri.substring(0, uri.indexOf("?"));
                window.history.replaceState({}, document.title, clean_uri);
            }

            url = window.location.href + "?from=" + fromDate + "&to=" + toDate+ "&name=" + name+ "&status=" + status;
            window.location.href = url;
        });

        $(document).on('click', 'button[id^="playPauseButton_"]', function () {
            var fullId = $(this).attr('id');
            var parts = fullId.split('_');
            var prefix = parts[0] + '_' + parts[1]; // e.g., "playPauseButton_reg1"
            var id = parts[2]; // The unique ID (e.g., $log->id)

            // Get the audio player element
            const player = document.getElementById('audio_' + prefix.split('playPauseButton_')[1] + '_' + id);

            // Check if the audio element exists
            if (!player) {
                console.error('Audio element not found for id:', id, 'and prefix:', prefix);
                return;
            }

            // Get the icon element inside the button
            var icon = $(this).find('i');

            // Check if the icon exists
            if (!icon.length) {
                console.error('Icon element not found inside button:', fullId);
                return;
            }

            // Pause all other audio tracks and reset their icons
            $('audio').each(function () {
                if (this.id !== player.id) {
                    this.pause();
                    this.currentTime = 0; // Reset to the beginning
                }
            });

            // Reset all play/pause 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');
            }

            // Reset icon when the audio ends
            player.removeEventListener('ended', resetIcon); // Ensure no duplicate listeners
            player.addEventListener('ended', resetIcon);

            function resetIcon() {
                icon.removeClass('fa-pause').addClass('fa-play');
            }
});


    </script>
@endpush