@extends('layouts.dashboard')

@section('content')


<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Reports</h1>
            </div>
            <div class="col-sm-6">
                <ol class="breadcrumb float-sm-right">
                    <li class="breadcrumb-item"><a href="/">Home</a></li>
                    <li class="breadcrumb-item active">Reports</li>
                </ol>
            </div>
        </div>
    </div><!-- /.container-fluid -->
</section>


<section class="content">
    <div class="container-fluid">

        @if (Session::has('message'))
        <div class="col-sm-12">
            <div class="alert  {{ Session::get('alert-class', 'alert-info') }} alert-dismissible fade show"
                role="alert">
                {{ Session::get('message') }}
            </div>
        </div>
        @endif

        <!-- /.row -->
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        {{-- <h3 class="card-title">Fixed Header Table</h3> --}}
                        <div class="card-tools">
                            <div class="input-group">

                                <input type="text" class="form-control ml-2" id="fromDate" name="from_date" placeholder="Select From Date">
                                <div class="input-group-append">
                                    <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                                </div>

                                <input type="text" class="form-control ml-2" id="toDate" name="to_date" placeholder="Select To Date">
                                <div class="input-group-append">
                                    <span class="input-group-text"><i class="fas fa-calendar-alt"></i></span>
                                </div>
                                <button type="button" id="filter" class="btn uniqbtn-btn btn-sm float-right ml-2">Filter</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12">
                <div class="card">
                    <!-- /.card-header -->
                    <div class="card-body  p-2">
                        <div class="table-responsive">
                            <table id="mis-report-table" class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>Sr No.</th>
                                        <th>Date</th>
                                        <th>Session ID</th>
                                        <th>Name</th>
                                        @if(auth()->user()->id != 18)
                                        <th>Login ETA</th>
                                        @endif
                                        <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>
                                        @if(auth()->user()->id != 18)
                                        <th>Late Reason</th>
                                        @endif
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
        </div>
        <!-- /.row -->

    </div><!-- /.container-fluid -->
</section>

@endsection



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

        $("#fromDate").datepicker({
            dateFormat: "dd-mm-yy",
            todayHighlight: true,
        });

        $("#toDate").datepicker({
            dateFormat: "dd-mm-yy",
            todayHighlight: true,
        });

    });

    $('#mis-report-table').DataTable({
        processing: true,
        serverSide: true,
        "bLengthChange": false,
        order: [
            [0, "desc"]
        ],
        pageLength: 15,
        dom: "<'row '<'col-sm-12 col-md-6'f><'col-sm-12 col-md-6'B>>" +
             "<'row '<'col-sm-12'tr>>" +
             "<'row mt-2 mb-2'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 d-flex justify-content-end'p>>",
        buttons: [{
            extend: 'excelHtml5',
            text: 'Excel',
            className:'uniqbtn-btn border',
            exportOptions: {
                columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12,13], // Include all columns
                modifier: {
                    page: 'all' // This ensures all data (not just the current page) is exported
                },
                format: {
                    body: function(data, row, column) {
                        // Extract audio URLs
                        if (data.includes('<audio')) {
                            const url = $(data).attr('src');
                            return url || 'N/A';
                        }
                        return data;
                    }
                }
            }
        }, ],
        ajax: {
            url: '{{ route("mis-report") }}', // Backend route
            data: function(d) {
                // Add custom filters to the request
                d.from = $('#fromDate').val();
                d.to = $('#toDate').val();
            }
        },
        columns: [{
                data: 'DT_RowIndex',
                name: 'DT_RowIndex',
                orderable: false,
                searchable: false
            }, // Auto index
            {
                data: 'date_time',
                name: 'date_time'
            },
            {
                data: 'session_id',
                name: 'session_id'
            },
            {
                data: 'name',
                name: 'name'
            },
            @if(auth()->user()->id != 18)
            {
                data: 'login_eta',
                name: 'login_eta'
            },
            @endif
            {
                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: 'verify_fail_reason',
                name: 'verify_fail_reason'
            },
            @if(auth()->user()->id != 18)
            {
                data: 'late_reason',
                name: 'late_reason'
            },
            @endif
        ],
        columnDefs: [{
                targets: '_all',
                className: 'text-left'
            }, // Align text properly
            {
                targets: 6, // 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: 9,
                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: 10,
                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: 11,
                render: function(data, type, row) {
console.log(data);
                    if (!data) {
        // If data is null, undefined, or empty string
        return `-`;
    }
                    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() {
        $('#mis-report-table').DataTable().ajax.reload(); // Reload the table with new filter data
    });


    $(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