$(document).ready(function() {

    var table = $('#verify-table').DataTable ({
        processing: false,
        serverSide: false,
        paging: false,
        order: [], 
        searching: false,
        lengthMenu: [20],
        ajax: $('#verify-table').data('url'),
        columns: [
            { data: 'DT_RowIndex',
              name: 'DT_RowIndex',
              orderable: false
            },
            { 
                data: 'id', 
                name: 'id',
                class: 'text-center'
            },
            { 
                data: 'no_pol',
                name: 'no_pol',
                class: 'text-center',
             },
            { 
                data: 'jenis_mobil',
                name: 'jenis_mobil',
                class: 'text-center',
            },
            { 
                data: 'waktu_masuk', 
                name: 'waktu_masuk',
                class: 'text-center',
                render: function(data, type, row) {
                    return moment(data).format("DD-MM-YYYY HH:mm:ss")
                }
            },
            { 
                data: 'waktu_keluar', 
                name: 'waktu_keluar',
                class: 'text-center',
                render: function(data, type, row) {
                    return moment(data).format("DD-MM-YYYY HH:mm:ss")
                }
            },
            { 
                data: 'id_pintu_masuk', 
                name: 'id_pintu_masuk',
                class: 'text-center' 
            },
            { 
                data: 'out_gate', 
                name: 'out_gate',
                class: 'text-center'
            },
            {
                data: 'status',
                name: 'status',
                render: function (data, type, row) {
                    if (data === 1) {
                        return '<span class="badge badge-secondary light badge-danger">Pending</span></td>';
                    } else {
                        return '';
                    }
                },
                class: 'text-center',
            },            
            // { data: 'id', name: 'id' },
            {
                data: 'id',
                render: function(data, type, row) {
                    return `
                        <div class="action-buttons d-flex justify-content-end">
							<a href="javascript:void(0);" class="btn btn-light view-images light mr-2" data-id="${data}" data-no_pol="${row.no_pol}">
								<svg xmlns="http://www.w3.org/2000/svg" class="svg-main-icon" width="24px" height="24px" viewBox="0 0 32 32" x="0px" y="0px">
                                    <g data-name="Layer 21">
                                        <path d="M29,14.47A15,15,0,0,0,3,14.47a3.07,3.07,0,0,0,0,3.06,15,15,0,0,0,26,0A3.07,3.07,0,0,0,29,14.47ZM16,21a5,5,0,1,1,5-5A5,5,0,0,1,16,21Z" fill="#000000" fill-rule="nonzero"></path>
                                        <circle cx="16" cy="16" r="3" fill="#000000" fill-rule="nonzero"></circle>
                                    </g>
                                </svg>
							</a>
                            <a href="javascript:void(0);" class="btn btn-secondary  verify-data light mr-2" data-id="${data}" data-no_pol="${row.no_pol}">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none">
                                    <path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
                                </svg>
                            </a>
                            <a href="javascript:void(0);" class="btn btn-danger remove-item light mr-2" data-id="${data}" data-no_pol="${row.no_pol}">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24" fill="none">
                                    <path d="M18 6L6 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    <path d="M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                </svg>
                            </a>
                        </div>`;
                        // <button class="btn btn-primary btn-xs view-images" data-id="${data}">View</button>
                        // <button class="btn btn-secondary btn-xs" edit-nopol data-id="${data}">Verify</button>
                },
                class: 'text-center' 
            }
        ],
        columnDefs: [
            {
                targets: '_all', // Mengatur semua kolom
                orderable: false // Tidak bisa diurutkan
            }
        ]
    });

    $('#verify-table tbody').on('click', '.view-images', function() {
        var id = $(this).data('id');
        var no_pol = $(this).data('no_pol');
        console.log(no_pol);
        $.ajax({
            // url: '/verify/' + id,
            url: '/verify/show',
            type: 'POST',
            data: {
                id: id,
                no_pol: no_pol,
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                console.log(response);
                if (response.pic_masuk && response.pic_masuk !== '') {
                    $('#pic_body_masuk').attr('src', 'data:image/jpeg;base64,' + response.pic_masuk).show();
                } else {
                    $('#pic_body_masuk').attr('src', '/images/no-image.jpeg').show();
                }
                if (response.driver_masuk && response.driver_masuk !== '') {
                    $('#pic_driver_masuk').attr('src', 'data:image/jpeg;base64,' + response.driver_masuk).show();
                } else {
                    $('#pic_driver_masuk').attr('src', '/images/no-image.jpeg').show();
                }
                if (response.pic_keluar && response.pic_keluar !== '') {
                    $('#pic_body_keluar').attr('src', 'data:image/jpeg;base64,' + response.pic_keluar).show();
                    // $('#pic_body_keluar').attr('src', imgData).show();
                } else {
                    $('#pic_body_keluar').attr('src', '/images/no-image.jpeg').show();
                }
                if (response.driver_keluar && response.driver_keluar !== '') {
                    $('#pic_driver_keluar').attr('src', 'data:image/jpeg;base64,' + response.driver_keluar).show();
                } else {
                    $('#pic_driver_keluar').attr('src', '/images/no-image.jpeg').show();
                }
                // $('#pic_body_masuk').attr('src', 'data:image/jpeg;base64,' + response.pic_masuk).show();
                // $('#time-in').text('Jam masuk : ' + data.waktu_masuk).show();
            },
            error: function(xhr, status, error) {
                console.log(status, error);
                alert('Gagal mengambil data gambar');
            }
        });
    });

    // $('#verify-table tbody').on('click', '.verify-data', function() {
    $('#verify-table tbody').on('click', '.verify-data, .remove-item', function() {

        var id = $(this).data('id');
        var no_pol = $(this).data('no_pol');
        // var veriCheckValue = $(this).hasClass('verify-data') ? 2 : 0;
        var veriCheckValue;
        if ($(this).hasClass('verify-data')) {
            veriCheckValue = 2;
        } else if ($(this).hasClass('remove-item')) {
            veriCheckValue = 0;
        }

        console.log(id, no_pol, veriCheckValue);
        $.ajax({
            url: '/verify/' + id,
            type: 'PUT', // Sesuaikan dengan metode HTTP yang Anda gunakan untuk update
            data: {
                // Data yang dikirim untuk update, sesuaikan dengan kebutuhan Anda
                // Misalnya:
                // status: 'verified',
                // veri_check: 2,
                veri_check: veriCheckValue,
                no_pol: no_pol,
                // _token: '{{ csrf_token() }}' // Token CSRF untuk keamanan
                _token: $('meta[name="csrf-token"]').attr('content')
            },
            success: function(data) {
                var message = veriCheckValue === 2 ? 'Data berhasil diverifikasi' : 'Kendaran tidak sesuai';
                // alert(message);
                // alert('Data berhasil diverifikasi');
                // Bisa tambahkan logika untuk refresh tabel atau mengupdate tampilan
                table.ajax.reload(null, false); // Reload data table tanpa mereset pagination
            },
            error: function() {
                alert('Gagal memverifikasi data');
            }
        });
    });
    
    function refreshTable() {
        table.ajax.reload(null, false); // Mengambil data baru tanpa reset paging
    }

    setInterval(refreshTable, 5000);
    // Menambahkan event listener untuk row click
    // $('#verify-table tbody').on('click', 'tr', function() {
    //     var data = table.row(this).data();
    //     console.log (data);
    //     if (data) {
    //         $.ajax({
    //             url: '/verify/' + data.id,
    //             // type: 'GET',
    //             success: function(response) {
    //                 // Menampilkan card-body saat data ditemukan
    //                 $('.card-body').slideDown(); 
    //             }
    //         });
    //     }
    // });
});