@extends('layouts.dashboard')

@section('content')
<!-- Loader Overlay -->
<div id="ajax-loader" style="
    display:none;
    position:fixed;
    top:0; left:0;
    width:100%; height:100%;
    background:rgba(255,255,255,0.7);
    z-index:9999;
    text-align:center;
    padding-top:20%;
    font-size:20px;
    font-weight:bold;
    color:#333;
">
    Loading... Please wait
</div>


<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1>Verify Failures</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">Verify Failures</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">
                        <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="report-table" class="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th>Sr No.</th>
                                        <th>Date</th>
                                        <th>Name</th>
                                        <th>Mobile</th>
                                        <th>Employee ID</th>
                                        <th>Status</th>
                                        <th>Location</th>
                                        <th>Score</th>
                                        <th>Reg 1</th>
                                        <th>Reg 2</th>
                                        <th>Ver 1</th>
                                        <th>Failure Reason</th>
                                        <th>Late Reason</th>
                                        <th>Approval</th>
                                    </tr>
                                </thead>
                                <tbody></tbody>
                            </table>
                        </div>
                    </div>
                    <!-- /.card-body -->
                </div>
                <!-- /.card -->
            </div>
        </div>
        <!-- /.row -->

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

@endsection



@push('scripts')
<script>

      // jQuery global events
$(document).on({
    ajaxStart: function() {
        $("#ajax-loader").show();  // Show overlay when any ajax starts
    },
    ajaxStop: function() {
        $("#ajax-loader").hide();  // Hide overlay when all ajax requests complete
    }
});

    $(function() {

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

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

    });

    $('#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('verify-failure') }}", // 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: 'name',
                name: 'name'
            },
            {
                data: 'mobile_number',
                name: 'mobile_number'
            },
            {
                data: 'employee_id',
                name: 'employee_id'
            },
            {
                data: 'status',
                name: 'status'
            },
            {
                data: 'location',
                name: 'location'
            },
            {
                data: 'score',
                name: 'score'
            },
            {
                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'
            },
            {
                data: 'late_reason',
                name: 'late_reason'
            },
            
            {
                data: 'attendance_approve_toggle',
                name: 'attendance_approve_toggle',
                orderable: false,
                searchable: false
            },
        ],

        drawCallback: function() {
        // Reinitialize bootstrapToggle for dynamically loaded checkboxes
        $('.chkToggle').bootstrapToggle();

        // Remove old handlers and bind new one
        $('.chkToggle').off('change').on('change', function() {
          const checkbox = $(this);
          const id = checkbox.data('id');
          const checked = checkbox.prop('checked');

          Swal.fire({
            title: "Are you sure to change the status?",
            showDenyButton: true,
            denyButtonText: "No",
            confirmButtonText: "Yes",
          }).then((result) => {
            if (result.isConfirmed) {
              $.ajax({
                type: "POST",
                url: "{{ route('verify.attendance') }}",
                data: {
                  "_token": "{{ csrf_token() }}",
                  'id': id
                },
                success: function(data) {
                  if (data.status === "success") {
                    Swal.fire("Status changed successfully!", "", "success");
                  } else {
                    Swal.fire("Not able to change status!", "", "info");
                  }
                },
                error: function() {
                  Swal.fire("Error changing status!", "", "error");
                }
              });
            } else if (result.isDenied) {
              // Undo the checkbox state
              checkbox.bootstrapToggle('toggle');
              Swal.fire("Action cancelled", "", "info");
            }
          });
        });
      },
        columnDefs: [{
                targets: '_all',
                className: 'text-left'
            }, // Align text properly
            {
                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) {
                    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() {
        $('#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