@extends('layouts.table')

@section('header')
   <tr class="bg-gray-50 border-b border-gray-200">
        <th rowspan="2" class="px-6 py-3 font-semibold w-12">No</th>
        <th rowspan="2" class="px-6 py-3 font-semibold w-14"><i class="bi bi-three-dots text-2xl"></i></th>
        <th rowspan="2" class="px-6 py-3 font-semibold w-36">Waktu<br>Pengaduan</th>
        <th colspan="2" class="px-6 py-3 font-semibold">Pihak Teradu (Perusahaan)</th>
        <th rowspan="2" class="px-6 py-3 font-semibold">Kronologi</th>
        <th rowspan="2" class="px-6 py-3 font-semibold">status</th>
    </tr>
    <tr class="bg-gray-50 border-b border-gray-200">
        <th class="px-6 py-3 font-semibold">Nama/Brand</th>
        <th class="px-6 py-3 font-semibold w-40">Pimpinan</th>
    </tr>
@endsection

@section('button')
<!--
<button class="bg-blue-600 text-white px-4 py-2 rounded text-sm font-medium hover:bg-blue-700 shadow-sm" onclick="formAdd(this)" data-url="user/form.html">
    + Pengguna Baru
</button>
-->
@endsection

@section('column')
{ 
    data: 'DT_RowIndex', 
    name: 'DT_RowIndex', 
    orderable: false, 
    searchable: false,
    className: 'text-center w-12'
},
{
    data: 'action', 
    name: 'action',
    orderable: false, 
    searchable: false,
    render: function(data, type, row) {
        const listMenu = [
            { type: 'function', label: 'Periksa', icon: 'bi bi-file-text', functionName: 'periksa' },
            { type: 'link', label: 'Cetak', icon: 'bi bi-printer', url: `${row.url_pratinjau}`, target: '_blank' },
            { type: 'delete', label: 'Hapus', icon: 'bi bi-trash', url: `${row.url_hapus}` }
        ];
        return actionMenu(row.id, listMenu);
    }
},
{ 
    data: null, 
    render: function(data, type, row) {
        return `
            <span>${row.tanggal}</span><br/>
            <span class="text-[10px] text-gray-400">${row.waktu}</span>`;
    }
},
{
    data: null,
    render: function(data, type, row) {
        return `
            ${row.p_nama}
            <br><span class="px-2 py-0.5 bg-gray-100 rounded text-[11px] font-bold text-gray-500 uppercase">
                ${row.p_brand}
            </span>
        `;
    }
},
{ data: 'pimpinan' },
{ 
    data: 'kronologi', 
    name: 'kronologi',
    render: function(data, type, row) {
        if (!data) return '-';
        const words = data.split(/\s+/);
        
        if (words.length <= 10) {
            return data;
        }
        const shortText = words.slice(0, 10).join(' ') + ' ...';
        return `
            <div class="relative group cursor-pointer inline-block max-w-[250px]">
                <span class="text-gray-700">${shortText}</span>
                
                <div class="hidden group-hover:block absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 p-3 bg-gray-900 text-white text-xs rounded-lg shadow-xl z-50 transition-all duration-200">
                    <p class="leading-relaxed whitespace-normal break-words">${data}</p>
                    <div class="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900"></div>
                </div>
            </div>
        `;
    }
},
{ 
    data: 'status', 
    name: 'status',
    className: 'text-center w-28',
    render: function(data, type, row) {
        if (!data) return '-';
        const statusText = data.toUpperCase();

        if (statusText === 'DRAFT') {
            return `
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-amber-100 text-amber-700 whitespace-nowrap">
                    <i class="bi bi-pencil-square mr-1"></i> DRAFT
                </span>`;
        } else {
            return `
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-bold bg-green-100 text-green-700 whitespace-nowrap">
                    <i class="bi bi-check2-circle mr-1"></i> ${data}
                </span>`;
        }
    }
},
@endsection

@section('addonTable')

<div id="periksaModal" class="fixed inset-0 z-[100] bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 opacity-0 pointer-events-none transition-opacity duration-300 ease-out">
    
    <div id="modalContent" class="bg-white rounded-xl shadow-2xl w-full lg:min-w-[1024px] max-w-5xl flex flex-col max-h-[90vh] opacity-0 translate-y-4 transform transition-all duration-300 ease-out">

       <div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between bg-gray-50 rounded-t-xl">
            <div class="flex items-center gap-2">
                <i class="bi bi-file-earmark-text text-xl text-blue-600"></i>
                <h3 class="text-base font-bold text-gray-800">Periksa Pengaduan</h3>
            </div>
            
            <div class="flex items-center gap-4">
                <div class="text-right hidden sm:block">
                    <span class="block text-[10px] font-bold text-gray-400 uppercase tracking-wider">Waktu Pengaduan</span>
                    <span id="previewTanggal" class="text-xs font-semibold text-gray-600">-</span> &nbsp; 
                    <span id="previewWaktu" class="text-xs font-semibold text-gray-600">-</span>
                </div>

                <button id="btnCloseTop" class="text-gray-400 hover:text-gray-600 p-1.5 hover:bg-gray-100 rounded-lg transition-colors cursor-pointer">
                    <i class="bi bi-x-lg text-lg"></i>
                </button>
            </div>
        </div>
        <div class="p-6 overflow-y-auto space-y-6 text-left">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                <div class="border-r-2">
                    <span class="block text-xl font-semibold text-gray-800 uppercase tracking-wider mb-1">Pihak Pengadu</span>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3">
                        <div>
                            <span class="block text-xs text-gray-400 mb-0.5">Nama</span>
                            <span id="previewNama" class="text-sm font-semibold text-gray-700">-</span>
                        </div>
                        <div>
                            <span class="block text-xs text-gray-400 mb-0.5">Jenis Kelamin</span>
                            <span id="previewJk" class="text-sm font-semibold text-gray-700">-</span>
                        </div>
                        <div>
                            <span class="block text-xs text-gray-400 mb-0.5">NIK</span>
                            <span id="previewNik" class="text-sm font-medium text-gray-700">-</span>
                            <div id="keteranganNik" class="text-xs text-blue-500 mt-1">
                                Klik NIK di atas untuk melihat/menyembunyikan
                            </div>
                        </div>
                        <!--
                        <div class="block text-xs text-gray-400 mb-0.5">
                            <span class="block text-xs text-gray-400 mb-0.5">Tempat/Tanggal Lahir</span>
                            <span id="previewTtl" class="text-sm font-medium text-gray-700">-</span>
                        </div>
                        -->
                        <div>
                            <span class="block text-xs text-gray-400 mb-0.5">Email</span>
                            <span id="previewEmail" class="text-sm font-semibold text-gray-700">-</span>
                        </div>
                        <div>
                            <span class="block text-xs text-gray-400 mb-0.5">Whatsapp</span>
                            <span id="previewWhatsapp" class="text-sm font-semibold text-gray-700">-</span>
                        </div>
                    </div>
                </div>
                <div class="pl-[20px] flex flex-col">
                    <span class="block text-xl font-semibold text-green-600 uppercase tracking-wider text-red-800 mb-1">Pihak Teradu (Perusahaan)</span>
                    
                    <span class="block text-xs text-gray-400 mt-3 mb-0.5">Nama Perusahaan</span>
                    <span id="previewPerusahaan" class="text-sm font-semibold text-gray-700">-</span>

                    <span class="block text-xs text-gray-400 mt-3 mb-0.5">Brand</span>
                    <span id="previewBrand" class="text-sm font-semibold text-gray-700">-</span>

                    <span class="block text-xs text-gray-400 mt-3 mb-0.5">Pimpinan</span>
                    <span id="previewPimpinan" class="text-sm font-medium text-gray-700">-</span>
                </div>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-2 border-t-2">

                <div class="pt-5 pr-5">
                    <h4 class="text-xs font-bold text-gray-800 uppercase tracking-wider mb-2 flex items-center gap-1.5">
                        <i class="bi bi-chat-left-text"></i> Pengungkapan
                    </h4>
                    <p id="previewPengungkapan" class="text-sm text-gray-600 leading-relaxed whitespace-pre-line">
                        -
                    </p>
                </div>
                <div class="pt-5 pl-5">
                    <h4 class="text-xs font-bold text-gray-800 uppercase tracking-wider mb-2 flex items-center gap-1.5">
                        <i class="bi bi-chat-left-text"></i> Kronologi Kejadian / Isi Pengaduan
                    </h4>
                    <p id="previewKronologi" class="text-sm text-gray-600 leading-relaxed whitespace-pre-line">
                        -
                    </p>
                </div>
            </div>
        </div>

        <div class="px-6 py-4 border-t border-gray-100 flex justify-between items-center bg-gray-50 rounded-b-xl">
            <button id="btnCloseFooter" class="px-4 py-2 bg-white border border-gray-200 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-50 transition-colors cursor-pointer">
                Tutup
            </button>
            
            <div class="flex gap-2">
                <button onclick="alert('Aksi lanjutan tolak')" class="px-4 py-2 bg-red-600 text-white text-sm font-medium rounded-lg hover:bg-red-700 shadow-sm transition-colors cursor-pointer">
                    <i class="bi bi-x-circle mr-1"></i> Tolak
                </button>

                <button onclick="alert('Aksi lanjutan proses')" class="px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 shadow-sm transition-colors cursor-pointer">
                    <i class="bi bi-check2 mr-1"></i> Proses Pengaduan
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@section('tableScripts')
<script>
  function tiketScrollManual(direction) {
    const container = document.getElementById('scrollAreaTiket');
    const jarakGeser = 350; 
    
    if (container) {
        container.scrollBy({
            left: direction === 'left' ? -jarakGeser : jarakGeser,
            behavior: 'smooth'
        });
    }
}

function periksa(id) {
    if (!id) {
        errorAlert('ID tidak valid atau tidak ditemukan.');
        return;
    }

    $.ajax({
        url: '{{ url("tiket/data") }}/' + id,
        type: 'GET',
        dataType: 'json',
        success: function(result) {
            if (result.success) {
                const tiket = result.data;
                const pelapor = tiket.pelapor;
                const perusahaan = tiket.perusahaan;
                const gender = {
                    "1": "Laki-laki",
                    "2": "Perempuan",
                };

                let nikAsli = pelapor.nik || '-';
                let nikMasking = '-';
                if (nikAsli !== '-' && nikAsli.length > 5) {
                    nikMasking = nikAsli.slice(0, -5) + 'XXXXX';
                } else {
                    nikMasking = nikAsli;
                }

                $('#previewNama').text(pelapor.nama);
                $('#previewJk').text(gender[pelapor.jk] || '-');
                $('#previewEmail').text(pelapor.email);
                $('#previewWhatsapp').text(pelapor.wa);

                $('#previewNik')
                    .text(nikMasking)
                    .attr('data-asli', nikAsli)
                    .attr('data-masking', nikMasking)
                    .css('cursor', 'pointer'); 

                if ($('#keteranganNik').length === 0) {
                    $('#previewNik').after('<div id="keteranganNik" class="text-xs text-gray-400 mt-1">Klik nomor NIK di atas untuk melihat/menyembunyikan</div>');
                }
                
                $('#previewNik').off('click').on('click', function() {
                    let currentText = $(this).text();
                    let asli = $(this).attr('data-asli');
                    let masking = $(this).attr('data-masking');

                    if (currentText === masking) {
                        $(this).text(asli);
                    } else {
                        $(this).text(masking);
                    }
                });

                $('#previewAlamat').text(pelapor.alamat);
                $('#previewWaktu').text(tiket.waktu);
                $('#previewTanggal').text(tiket.tanggal);
            
                $('#previewPerusahaan').text(perusahaan.nama);
                $('#previewBrand').text(perusahaan.brand);
                $('#previewPimpinan').text(perusahaan.pimpinan);
                $('#previewKronologi').text(tiket.kronologi);
                $('#previewPengungkapan').text(tiket.pengungkapan);
                
                $('#periksaModal').removeClass('opacity-0 pointer-events-none').addClass('opacity-100');
                $('#modalContent').removeClass('opacity-0 translate-y-4').addClass('opacity-100 translate-y-0');
            } else {
                errorAlert('Gagal mengambil data: ' + (result.message || 'Terjadi kesalahan.'));
            }
        },
        error: function(xhr, status, error) {
            console.error(error);
            errorAlert('Terjadi kesalahan sistem saat mengambil data.');
        }
    });
}

function closeModal() {
    $('#periksaModal').removeClass('opacity-100').addClass('opacity-0 pointer-events-none');
    $('#modalContent').removeClass('opacity-100 translate-y-0').addClass('opacity-0 translate-y-4');
}

$('#btnCloseTop, #btnCloseFooter').on('click', function() {
    closeModal();
});

$('#periksaModal').on('click', function(e) {
    if ($(e.target).is('#periksaModal')) {
        closeModal();
    }
});
</script>
@endsection