$(document).ready(function () {

    $(document).on('change', '.select-option', function () {
        if ($('option:selected', this).val() == '') {
            $(".nama").css('display', 'none');
            $(".nopol").css('display', 'none');
            $(".nocard").css('display', 'none');
            $(".notrans").css('display', 'none');
            // $(".site").val('');
        } else if ($('option:selected', this).val() == 'nama') {
            $(".nama").css('display', 'block');
            $(".nopol").css('display', 'none');
            $(".nocard").css('display', 'none');
            $(".notrans").css('display', 'none');
            $(".input-default").val('');
        } else if ($('option:selected', this).val() == 'nopol') {
            $(".nama").css('display', 'none');
            $(".nopol").css('display', 'block');
            $(".nocard").css('display', 'none');
            $(".notrans").css('display', 'none');
            $(".input-default").val('');
        } else if ($('option:selected', this).val() == 'nocard') {
            $(".nama").css('display', 'none');
            $(".nopol").css('display', 'none');
            $(".nocard").css('display', 'block');
            $(".notrans").css('display', 'none');
            $(".input-default").val('');
        } else if ($('option:selected', this).val() == 'notrans') {
            $(".nama").css('display', 'none');
            $(".nopol").css('display', 'none');
            $(".nocard").css('display', 'none');
            $(".notrans").css('display', 'block');
            $(".input-default").val('');
        } else {
            $(".position").css('display', 'none');
            $(".level-area").css('display', 'none');
            $(".input-default").val('');
        }
    });
    
    var url = $('#example').data('url');

    $('#search-button').on('click', function () {
        // Ambil nilai dari selected option
        var option = $('.select-option').val();

        // Cek jika option yang dipilih bukan 'Pencarian Data...' yang berarti pilihan valid
        if (option && option !== '') {
            var inputField = $('.input-default:visible');

            // Periksa apakah input tersebut kosong
            if (inputField.length === 0 || inputField.val().trim() === '') {
                // Jika kosong, tampilkan alert
                alert('Harap masukkan ' + (option === 'nopol' ? 'No. Polisi' : option === 'nocard' ? 'No. Card' : option === 'nama' ? 'Nama' : option === 'notrans' ? 'No. Transaksi' : 'No. Transaksi'));
                inputField.focus();
                return; // Hentikan proses jika input kosong
            }
        }

        var formData = $('#search-form .input-default:visible').val();
        console.log(formData);
        
        $.ajax({
            url: url,
            type: "POST",
            // data: $('#search-form .input-default:visible').serialize(),
            data: $('#search-form').serialize(),
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            dataType: 'json',
            success: function (response) {
                var tbody = $('#example tbody');
                tbody.empty();

                if (response.length !== 0) {
                    // Kelompokkan data berdasarkan notrans
                    var groupedData = {};
                    response.forEach((element) => {
                        if (!groupedData[element.notrans]) {
                            groupedData[element.notrans] = [];
                        }
                        groupedData[element.notrans].push(element);
                    });

                    // Generate HTML
                    Object.keys(groupedData).forEach((notrans, index) => {
                        var rows = groupedData[notrans];
                        var rowspan = rows.length;

                        rows.forEach((element, rowIndex) => {
                            var rowHtml = `
                                <tr class="mb-2">
                                    ${rowIndex === 0 ? `<td rowspan="${rowspan}" class="p2" style="text-align: center;">${index + 1}</td>` : ''}
                                    ${rowIndex === 0 ? `<td rowspan="${rowspan}" class="p2" style="padding: 2px;">${element.notrans}</td>` : ''}
                                    ${rowIndex === 0 ? `<td rowspan="${rowspan}" style="padding: 2px;">${element.nama}</td>` : ''}
                                    ${rowIndex === 0 ? `<td rowspan="${rowspan}" style="padding: 2px;">${element.alamat}</td>` : ''}
                                    ${rowIndex === 0 ? `<td rowspan="${rowspan}" style="padding: 2px;">${element.telepon}</td>` : ''}
                                    ${rowIndex === 0 ? `<td rowspan="${rowspan}" style="padding: 2px;">${element.jmember}</td>` : ''}
                                    ${rowIndex === 0 ? `<td rowspan="${rowspan}" style="padding: 2px;">${element.dept}</td>` : ''}
                                    ${rowIndex === 0 ? `<td rowspan="${rowspan}" width="200" style="text-align: center; padding: 2px;">${element.awal} <br> ${element.akhir}</td>` : ''}
                                    ${rowIndex === 0 ? `<td rowspan="${rowspan}" class="p-2" style="padding: 2px;"> ${[...new Set(rows.map(r => `${r.nopol || 'No. Polisi tidak ada'} (${r.vehicle || ''})`))].join('<br>')} </td>` : ''}                                        
                                    ${rowIndex === 0 ? `<td rowspan="${rowspan}" style="padding: 2px;">${[...new Set(rows.map(r => r.no_card || 'Tidak ada kartu'))].join('<br>')}</td>` : ''}
                                    ${rowIndex === 0 ? `<td rowspan="${rowspan}" class="p-2" style="text-align: center;">
                                        <button class="btn btn-secondary btn-xs extend-button mb-1" data-id="${element.notrans}">Extend</button>
                                        <button class="btn btn-primary btn-xs edit-button mb-1" data-id="${element.notrans}">Edit</button>
                                        <button class="btn btn-danger btn-xs delete-button mb-1" data-id="${element.notrans}">Delete</button>
                                    </td>` : ''}
                                </tr>
                            `;
                            tbody.append(rowHtml);
                        });
                    });
                } else {
                    alert("Data tidak ditemukan.");
                    $('#example tbody').html(
                        `<tr>
                            <td colspan="11" style="text-align: center;"><p class="text-danger mt-3">Tidak ditemukan data</p></td>
                        <tr>`);
                }
            }
        })
    })
});