@push('styles')
    <style>
        input.input-custom:focus {
            outline: none;
            box-shadow: none;
        }

        @media (prefers-color-scheme: dark) {
            input.input-custom {
                background: none;
                color: var(--tw-gray-600);
            }
        }

        .status-custom {
            display: none
        }
    </style>
@endpush

@push('scripts')
    <script type="module">
        const element = document.querySelector('#kjpp-table');
        const apiUrl = element.getAttribute('data-api-url');
        const dataTableOptions = {
            apiEndpoint: apiUrl,
            columns: {
                no: {
                    title: 'No',
                    render: (item, data) => {
                        return data.numbernya;
                    }
                },
                nomor_kjpp: {
                    title: 'Nomor KJPP',
                    render: (item, data) => {
                        return `${data.kjpp.code}`
                    }
                },
                nama_kjpp: {
                    title: 'Nama KJPP',
                    render: (item, data) => {
                        return `${data.kjpp.name}`
                    }
                },
                email_kantor: {
                    title: 'Email Kantor',
                    render: (item, data) => {
                        let emails = new Set([data.kjpp.email_kantor]); // Always include the main email

                        // Check if there's a detail_email_kantor and try to parse it
                        if (data.kjpp.detail_email_kantor) {
                            try {
                                const detailEmails = JSON.parse(data.kjpp.detail_email_kantor);

                                // If the parsed result is an array, extract emails from each object and concatenate
                                if (Array.isArray(detailEmails)) {
                                    detailEmails.forEach(item => {
                                        emails.add(item);
                                    });
                                } else {
                                    // If it's a single object (not an array), just add the email
                                    if (detailEmails) {
                                        emails.add(detailEmails);
                                    }
                                }
                            } catch (e) {
                                console.error('Failed to parse detail_email_kantor:', e);
                                // Fallback to treating detail_email_kantor as a plain string
                                emails.push(data.kjpp.detail_email_kantor);
                            }
                        }

                        emails = Array.from(emails);

                        // Helper function for basic email validation (regex pattern)
                        const isValidEmail = (email) => {
                            const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
                            return emailRegex.test(email);
                        };

                        // Filter out invalid emails and join with line breaks
                        return emails
                            .filter(email => email && String(email).trim() && isValidEmail(email))
                            .map(email => String(email)
                                .trim()) // Ensure there are no accidental leading/trailing spaces
                            .join('<br>'); // Join the emails with line breaks for rendering
                    }
                },
                status: {
                    title: 'Status',
                    render: (item, data) => {
                        // Cek jika ada email log
                        if (data.penawaran.email_tender_log && data.penawaran.email_tender_log.length > 0) {
                            // Buat full string KJPP untuk matching
                            const kjppString = `${data.kjpp.code} | ${data.kjpp.name}`;

                            // Filter log berdasarkan string KJPP yang sesuai
                            const log = data.penawaran.email_tender_log.find(log =>
                                log.kjpp === kjppString
                            );

                            if (log) {
                                // Set warna badge berdasarkan status
                                const statusColors = {
                                    'success': 'badge-success',
                                    'failed': 'badge-danger'
                                };

                                const color = statusColors[log.status] || 'badge-secondary';

                                return `<span class="badge ${color} mb-1">${log.status}</span>`;
                            }
                        }

                        // Jika tidak ada log, tampilkan strip
                        return '<span class="badge">-</span>';
                    }
                },
                actions: {
                    title: 'Action',
                    render: (item, data) => {
                        return `<div class="flex justify-center items-center">
                        <a href="tender/penawaran/${data.penawaran.nomor_registrasi}/suratTenderKJPP/${data.kjpp.id}" title="Show Surat Tender" class="btn btn-sm btn-icon btn-clear btn-warning"><i class="ki-outline ki-eye"></i></a>
                        <a href="tender/penawaran/${data.penawaran.nomor_registrasi}/suratTenderKJPP/${data.kjpp.id}/kirimEmailKJPP" title="Kirim Email KJPP" class="btn btn-sm btn-icon btn-clear btn-primary"><i class="ki-outline ki-paper-plane"></i></a></div>`
                    }
                }
            }
        };

        let dataTable = new KTDataTable(element, dataTableOptions);
    </script>
@endpush
