@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="row mb-2 mx-1">
                    <div class="card" style="min-height: 650px;">
                        <div class="card-header">
                            <div class="d-flex align-items-center">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>

                                {{-- button download word --}}
                                <button class="btn btn-success btn-sm mb-0 ms-2"
                                    style="padding: 4px 10px; line-height: 1.2; border-radius: 4px;" data-bs-toggle="tooltip"
                                    data-bs-placement="top" title="Instruksi Kerja Surat Peringatan"
                                    onclick="window.open('https://drive.google.com/file/d/17OXz7q4GYoJ5AZmi1GpanHb0L3DCMy6T/view?usp=drive_link', '_blank')">
                                    <i class="fas fa-info-circle"></i>
                                </button>
                            </div>
                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="col-12 mb-3">
                                {{-- <button class="btn btn-primary mb-0"
                                    onclick="window.location='{{ URL::to($url_menu . '/add') }}'"><i
                                        class="fas fa-plus me-1">
                                    </i><span class="font-weight-bold">Tambah</span></button> --}}
                                <button type="button" class="btn btn-primary mb-0" onclick="handleTambah()">
                                    <i class="fas fa-plus me-1"></i>
                                    <span class="font-weight-bold">Tambah</span>
                                </button>
                            </div>
                            <div class="table-responsive">
                                <table class="table display" id="tabel-surat-peringatan">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th>No</th>
                                            <th>ID Surat Peringatan</th>
                                            <th>Nomor Surat</th>
                                            <th>Jenis Surat</th>
                                            <th>Jenis Temuan</th>
                                            <th>Tanggal Temuan</th>
                                            {{-- <th>Saran</th> --}}
                                            <th>Keterangan Temuan</th>
                                            <th>Aksi</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($suratPeringatan as $surat)
                                            <tr>
                                                <td>{{ $loop->iteration }}</td>
                                                <td>{{ $surat->id_surat_peringatan }}</td>
                                                <td>{{ $surat->nomor_surat ?? '-' }}</td>
                                                <td>{{ $surat->jenis_surat }}</td>
                                                <td>{{ $surat->jenis_temuan }}</td>
                                                <td>{{ $surat->tanggal_temuan_indonesia }}</td>
                                                {{-- <td>{{ $surat->saran }}</td> --}}
                                                <td>{{ $surat->keterangan_temuan }}</td>
                                                {{-- Replace the existing action buttons section --}}
                                                <td class="text-sm font-weight-normal">
                                                    <div class="d-flex align-items-center gap-2">
                                                        <div class="btn-group dropright">
                                                            <button type="button" class="btn btn-primary btn-sm"
                                                                onclick="window.location='{{ url($url_menu . '/show/' . encrypt($surat->id_surat_peringatan)) }}'">
                                                                <i class="fas fa-eye"></i> View
                                                            </button>
                                                            <button type="button"
                                                                class="btn btn-primary btn-sm dropdown-toggle dropdown-toggle-split"
                                                                data-bs-toggle="dropdown" aria-expanded="false">
                                                                <span class="sr-only">Toggle Dropdown</span>
                                                            </button>
                                                            <div class="dropdown-menu">
                                                                @if ($authorize->edit == '1')
                                                                    <a class="dropdown-item"
                                                                        onclick="window.location='{{ url($url_menu . '/edit/' . encrypt($surat->id_surat_peringatan)) }}'"
                                                                        style="cursor: pointer;">
                                                                        <i class="fas fa-pen-to-square"></i>
                                                                        <span>Edit</span>
                                                                    </a>
                                                                @endif

                                                                @if ($authorize->delete == '1')
                                                                    <form
                                                                        action="{{ url($url_menu . '/' . encrypt($surat->id_surat_peringatan)) }}"
                                                                        method="POST" style="display: inline">
                                                                        @csrf
                                                                        @method('DELETE')
                                                                        <a class="dropdown-item"
                                                                            onclick="confirmDelete(event, '{{ $surat->id_surat_peringatan }}', this)"
                                                                            style="cursor: pointer;">
                                                                            <i class="fas fa-trash"></i> <span>Hapus</span>
                                                                        </a>
                                                                    </form>
                                                                @endif
                                                            </div>
                                                        </div>

                                                        {{-- Keep print button separate --}}
                                                        <button type="button" class="btn btn-sm btn-info" title="Print PDF"
                                                            data-logo="{{ $logo }}"
                                                            data-gambar1="{{ asset('storage/temuan_images/' . $surat->gambar_1) }}"
                                                            ,
                                                            data-gambar2="{{ asset('storage/temuan_images/' . $surat->gambar_2) }}"
                                                            ,
                                                            data-gambar3="{{ asset('storage/temuan_images/' . $surat->gambar_3) }}"
                                                            ,
                                                            data-gambar4="{{ asset('storage/temuan_images/' . $surat->gambar_4) }}"
                                                            onclick="generatePDF(
                                                                        JSON.stringify({
                                                                            id: '{{ $surat->id_surat_peringatan }}',
                                                                            nomorSurat: '{{ $surat->nomor_surat }}',
                                                                            jenisSurat: '{{ $surat->jenis_surat }}',
                                                                            jenisTemuan: '{{ str_replace(["\r\n", "\r", "\n"], "\\n", addslashes($surat->jenis_temuan)) }}',
                                                                            tanggal: '{{ $surat->tanggal_temuan_indonesia }}',
                                                                            shift: '{{ $surat->nama_shift }}',
                                                                            spke: '{{ $surat->spke }}',
                                                                            saran: '{{ str_replace(["\r\n", "\r", "\n"], "\\n", addslashes($surat->saran)) }}',
                                                                            keterangan: '{{ str_replace(["\r\n", "\r", "\n"], "\\n", addslashes($surat->keterangan_temuan)) }}',
                                                                            namaCatering: '{{ addslashes($surat->nama_catering) }}',
                                                                            logo: this.getAttribute('data-logo'),
                                                                            gambar1: '{{ $surat->gambar_1 ? asset('storage/temuan_images/' . $surat->gambar_1) : '' }}',
                                                                            gambar2: '{{ $surat->gambar_2 ? asset('storage/temuan_images/' . $surat->gambar_2) : '' }}',
                                                                            gambar3: '{{ $surat->gambar_3 ? asset('storage/temuan_images/' . $surat->gambar_3) : '' }}',
                                                                            gambar4: '{{ $surat->gambar_4 ? asset('storage/temuan_images/' . $surat->gambar_4) : '' }}'                                                                 
                                                                    }) )">
                                                            <i class="fas fa-print"></i>
                                                            <span class="font-weight-bold">Print</span>
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <input type="hidden" value="{{ count($temuan) }}" id="count-temuan">
    <script>
        function handleTambah() {
            const countTemuan = parseInt(document.getElementById('count-temuan').value);
            if (countTemuan === 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Data Temuan tidak ditemukan!',
                    text: 'Pastikan anda telah input form temuan terlebih dahulu.',
                    confirmButtonText: 'Mengerti'
                });
            } else {
                window.location = '{{ URL::to($url_menu . '/add') }}';
            }
        }

        $(document).ready(function () {
            $('#tabel-surat-peringatan').DataTable({
                "language": {
                    "search": "Cari:",
                    "lengthMenu": "Tampilkan _MENU_ data",
                    "zeroRecords": "Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Data tidak ditemukan",
                    "infoFiltered": "(pencarian dari _MAX_ data)",
                },
                "ordering": true,
                responsive: true,
            });
        });

        function confirmDelete(event, id, element) {
            event.preventDefault();
            Swal.fire({
                title: 'Konfirmasi Hapus',
                text: `Apakah anda yakin ingin menghapus surat peringatan ${id}?`,
                icon: 'warning',
                showCancelButton: true,
                confirmButtonColor: '#d33',
                cancelButtonColor: '#3085d6',
                confirmButtonText: 'Ya, Hapus!',
                cancelButtonText: 'Batal'
            }).then((result) => {
                if (result.isConfirmed) {
                    element.closest('form').submit();
                }
            });
            return false;
        }

        function capitalizeWords(str) {
            return str
                .toLowerCase()
                .split(' ')
                .map(word => word.charAt(0).toUpperCase() + word.slice(1))
                .join(' ');
        }

        async function getBase64FromUrl(url) {
            if (!url) return null; // jika null atau kosong

            try {
                const response = await fetch(url);
                const blob = await response.blob();

                return await new Promise((resolve, reject) => {
                    const reader = new FileReader();
                    reader.onloadend = () => resolve(reader.result);
                    reader.onerror = reject;
                    reader.readAsDataURL(blob);
                });
            } catch (error) {
                console.warn('Gagal ambil gambar dari URL:', url);
                return null; // jika gagal fetch
            }
        }


        // Add this to your existing script section
        async function generatePDF(dataString) {
            // Parse the JSON string
            const data = JSON.parse(dataString);
            // console.log('tanggal', data.tanggal);

            // Sanitize data
            const sanitizedData = {
                id: data.id || '',
                nomorSurat: data.nomorSurat || '',
                jenisSurat: data.jenisSurat || '',
                jenisTemuan: data.jenisTemuan || '',
                tanggal: data.tanggal || '',
                shift: data.shift || '',
                spke: data.spke || '',
                saran: data.saran || '',
                keterangan: data.keterangan || '',
                namaCatering: data.namaCatering || '',
                logo: data.logo || '',
                gambar1: data.gambar1 || '',
            };

            // Process saran into array
            const saranArray = sanitizedData.saran ?
                sanitizedData.saran
                    .split('\n') // penting: pakai \n langsung, bukan '\\n'
                    .map(item => item.trim()) // hilangkan spasi di awal/akhir
                    .filter(item => item.length > 0) // buang item kosong
                :
                [
                    'Lebih diperhatikan aspek Hygiene dalam pembersihan lauk',
                    'APD bagi penjinnah makanan',
                    'Memperhatikan kebersihan makanan'
                ];

            const temuanArray = sanitizedData.jenisTemuan ?
                sanitizedData.jenisTemuan
                    .split('\n') // penting: pakai \n langsung, bukan '\\n'
                    .map(item => item.trim()) // hilangkan spasi di awal/akhir
                    .filter(item => item.length > 0) // buang item kosong
                :
                [
                    'Lebih diperhatikan aspek Hygiene dalam pembersihan lauk',
                    'APD bagi penjinnah makanan',
                    'Memperhatikan kebersihan makanan'
                ];

            const gambar1Base64 = await getBase64FromUrl(data.gambar1); // jika ada
            const gambar2Base64 = await getBase64FromUrl(data.gambar2); // jika ada
            const gambar3Base64 = await getBase64FromUrl(data.gambar3); // jika ada
            const gambar4Base64 = await getBase64FromUrl(data.gambar4); // jika ada
            // console.log('gambar1', sanitizedData.logo);


            // Create a document definition
            const documentDefinition = {
                pageSize: 'A4',
                pageMargins: [45, 113.4, 40, 113.4],
                content: [
                    // {
                    //     image: sanitizedData.logo,
                    //     width: 100,
                    //     alignment: 'center',
                    //     margin: [0, 0, 0, 10]
                    // },
                    // {
                    //     canvas: [{
                    //         type: 'line',
                    //         x1: 0,
                    //         y1: 0,
                    //         x2: 515,
                    //         y2: 0,
                    //         lineWidth: 1.5
                    //     }],
                    //     margin: [0, 0, 0, 10]
                    // },
                    {
                        text: 'Surat Peringatan ' + sanitizedData.spke,
                        style: 'header',
                        alignment: 'center',
                        margin: [0, 0, 0, 20]
                    },
                    {
                        columns: [{
                            width: '*',
                            text: [{
                                text: 'Nomor: ',
                                bold: true
                            },
                            sanitizedData.nomorSurat || '-'
                            ]
                        },
                        {
                            width: 'auto',
                            stack: [{
                                text: `Sidoarjo, ${sanitizedData.tanggal}`,
                                alignment: 'left'
                            },
                            {
                                text: 'Kepada Yth.',
                                bold: true,
                                alignment: 'left'
                            },
                            {
                                text: `Catering ${capitalizeWords(sanitizedData.namaCatering)}`,
                                alignment: 'left'
                            },
                            {
                                text: 'di Tempat',
                                alignment: 'left'
                            }
                            ]
                        }
                        ],
                        margin: [0, 0, 0, 10]
                    },



                    // === ISI PARAGRAF ===
                    {
                        text: 'Dengan hormat,\n',
                        alignment: 'justify',
                        margin: [0, 0, 0, 10]
                    },

                    paragraph(
                        `Terkait penyediaan catering bagi karyawan di PT. Multi Spunindo Jaya, Tbk. oleh Catering ${capitalizeWords(sanitizedData.namaCatering)} pada tanggal ${sanitizedData.tanggal} (${sanitizedData.shift}), ditemukan :`
                    ),

                    {
                        ul: temuanArray,
                        margin: [20, 0, 0, 15]
                    },

                    paragraph(
                        `Atas kelalaian tersebut kepada Catering ${capitalizeWords(sanitizedData.namaCatering)} diberikan sanksi ${sanitizedData.jenisSurat} ${sanitizedData.spke}. Untuk selanjutnya beberapa hal yang perlu diperbaiki:`
                    ),

                    {
                        ul: saranArray,
                        margin: [20, 0, 0, 15]
                    },

                    paragraph(
                        `Demikian agar menjadi perhatian dan perbaikan untuk selanjutnya, terima kasih atas kerjasamanya.`
                    ),


                    // === TANDA TANGAN ===
                    {
                        columns: [{
                            width: '*',
                            text: ''
                        },
                        {
                            width: 'auto',
                            stack: [{
                                text: 'Hormat kami,\nPT. Multi Spunindo Jaya, Tbk.\n\n\n\n',
                                alignment: 'center'
                            },
                            {
                                text: 'Yohanes Bayu\n',
                                alignment: 'center',
                                bold: true
                            },
                            {
                                text: 'HRDGA Head',
                                alignment: 'center'
                            }
                            ]
                        }
                        ],
                        margin: [0, 30, 0, 0]
                    },

                    // === PAGE BREAK DAN LAMPIRAN ===
                    {
                        text: 'Lampiran Dokumentasi',
                        style: 'subheader',
                        pageBreak: 'before',
                        margin: [0, 0, 0, 10]
                    },
                    ...(gambar1Base64 ? [{
                        text: '1. Gambar Temuan 1',
                        margin: [0, 0, 0, 5]
                    }, {
                        image: gambar1Base64,
                        width: 250,
                        margin: [0, 0, 0, 15]
                    }] : []),

                    ...(gambar2Base64 ? [{
                        text: '2. Gambar Temuan 2',
                        margin: [0, 0, 0, 5]
                    }, {
                        image: gambar2Base64,
                        width: 250,
                        margin: [0, 0, 0, 15]
                    }] : []),



                ],
                styles: {
                    header: {
                        fontSize: 16,
                        bold: true
                    },
                    subheader: {
                        fontSize: 13,
                        bold: true
                    }
                },
                defaultStyle: {
                    fontSize: 11,
                    lineHeight: 1.4
                }
            };


            try {
                // Generate PDF dengan error handling
                pdfMake.createPdf(documentDefinition).open();
            } catch (error) {
                console.error('Error generating PDF:', error);
                alert('Terjadi kesalahan saat membuat PDF. Silakan coba lagi.');
            }
        }

        function paragraph(text, indentSize = 4) {
            const indent = '\u00A0'.repeat(indentSize); // bisa juga pakai ' ' biasa
            return {
                text: indent + text.trim(),
                alignment: 'justify',
                margin: [0, 0, 0, 10]
            };
        }
    </script>
@endsection