@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 mx-1">
                    <div class="card mb-1">
                        <div class="card-body">
                            <div class="card-text fw-bold fs-3">PEMBERITAHUAN</div>
                            🔔 <strong>Harap lengkapi data karyawan terlebih dahulu</strong> (terutama email) agar dapat
                            mengirimkan link pengukuran seragam. Pengisian data hanya dapat dilakukan oleh user dengan role
                            <strong>HRD</strong>.
                        </div>
                    </div>
                    <div class="card">
                        <div class="row">
                            <div class="card-header col-md-auto">
                                <h5 class="mb-0">List {{ $title_menu }}</h5>
                            </div>
                            <div class="col">
                                {{-- alert --}}
                                @include('components.alert')
                            </div>
                        </div>

                        <div class="mb-3">
                            <label for="nama-departemen" class="form-label me-2" style="min-width: 150px;">Nama
                                Departemen<span class="text-danger">*</span></label>
                            <select name="nama_departemen" id="nama-departemen" class="form-select form-select-lg"
                                aria-label="Nama" required>
                                <option value="" selected>Pilih Departemen</option>
                                @foreach ($departemen as $dept)
                                    <option value="{{ $dept->id }}">
                                        {{ $dept->id }} - {{ $dept->nama }}
                                    </option>
                                @endforeach
                            </select>

                        </div>
                        <hr class="horizontal dark mt-0">
                        <div class="row px-4 py-2">
                            <div class="table-responsive">
                                <table class="table display" id="list_{{ $dmenu }}">
                                    <thead class="thead-light" style="background-color: #00b7bd4f;">
                                        <tr>
                                            <th>No</th>
                                            <th>NIK</th>
                                            <th>Departemen</th>
                                            <th>Nama</th>
                                            <th>Jabatan</th>
                                            <th>Email</th>
                                            <th>Action</th>
                                            {{-- <th style="display:none;">Link Form</th> --}}
                                        </tr>
                                    </thead>
                                    <tbody>
                                        {{-- @php
                                            $no = 1;
                                        @endphp
                                        @foreach ($karyawan as $dt)
                                            <tr>
                                                <td>{{ $no++ }}</td>
                                                <td>{{ $dt->nik }} <input type="text" name="nik_karyawan"
                                                        id="nik-karyawan" hidden value="{{ $dt->nik }}"></td>
                                                <td>{{ $dt->nama_departemen }}</td>
                                                <td>{{ $dt->nama_karyawan }} <input type="text" name="nama_karyawan"
                                                        id="nama_karyawan" hidden value="{{ $dt->nama_karyawan }}"></td>
                                                <td>{{ $dt->nama_jabatan }} <input type="text" name="tgl_lahir"
                                                        id="tgl-lahir" hidden value="{{ $dt->tgl_lahir }}"></td>
                                                <td>{{ $dt->email }}</td>

                                                <td>
                                                    @if (!is_null($dt->email) && $dt->email != '')
                                                        <button class="btn btn-warning btn-sm btn-link" id="btn-get-link"
                                                            onclick="getUrl('{{ $dt->nik }}', '{{ $dt->nama_karyawan }}', '{{ $dt->tgl_lahir }}')">
                                                            <i class="fas fa-paperclip"></i> Copy Link
                                                        </button>
                                                    @endif
                                                </td>

                                                <td style="display:none;">{{ $dt->link_form }}</td>

                                            </tr>
                                        @endforeach --}}
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="row px-4 py-2">
                            <div class="col-lg">
                                <div class="nav-wrapper" id="noted"><code>Note : <i aria-hidden="true"
                                            style="color: #ffc2cd;" class="fas fa-circle"></i> Data not active</code>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- check flag js on dmenu --}}
    @if ($jsmenu == '1')
        @if (view()->exists("js.{$dmenu}"))
            @push('addjs')
                {{-- file js in folder (resources/views/js) --}}
                @include('js.' . $dmenu);
            @endpush
        @else
            @push('addjs')
                <script>
                    Swal.fire({
                        title: 'JS Not Found!!',
                        text: 'Please Create File JS',
                        icon: 'error',
                        confirmButtonColor: '#028284'
                    });
                </script>
            @endpush
        @endif
    @endif
@endsection
@push('js')
    <script>
        let columnAbjad = '';
        $(document).ready(function() {
            $('#nama-departemen').select2({
                placeholder: "Nama Departemen",
                allowClear: true,
                width: '100%'
            });

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

        });



        $('.dt-button').addClass('btn btn-secondary');
        $('.dt-button').removeClass('dt-button');

        // Event handler tombol copy
        $(document).on('click', '.btn-copy-link', function() {
            const nik = $(this).data('nik');
            const nama = $(this).data('nama');
            const tgl = $(this).data('tgl');

            getUrl(nik, nama, tgl); // panggil fungsi AJAX untuk ambil link & copy
        });


        function getUrl(nik, nama_karyawan, tgl_lahir) {
            //console.log("getUrl dipanggil:", nik, nama_karyawan, tgl_lahir);
            $.ajax({
                url: "{{ URL::to('/') }}/mst_emp/copyLinkForm",
                type: 'GET',
                data: {
                    nik_karyawan: nik,
                    nama: nama_karyawan,
                    tgl_lahir: tgl_lahir
                },
                success: function(response) {
                    let url = response.link?.link || response.link;

                    // cek apakah browser mendukung API clipboard dan halaman aman
                    if (navigator.clipboard && window.isSecureContext) {
                        navigator.clipboard.writeText(url).then(() => {
                            Swal.fire({
                                position: "top-end",
                                icon: "success",
                                title: "Link Berhasil Disalin",
                                showConfirmButton: false,
                                timer: 1500
                            });
                        }).catch(err => {
                            Swal.fire({
                                position: "top-end",
                                icon: "error",
                                title: "Link Gagal Disalin",
                                showConfirmButton: false,
                                timer: 1500
                            });
                            console.error("Gagal menyalin link: ", err);
                        });
                    }
                    // jika ga mendukung api clipboard, bisa pakai cara lama yg tricky
                    else {
                        // create elemen text area
                        const tempInput = document.createElement("textarea");
                        // mengisi dengan url
                        tempInput.value = url;
                        document.body.appendChild(tempInput);
                        // select isian dan copy
                        tempInput.select();
                        tempInput.setSelectionRange(0, 99999);
                        document.execCommand("copy");
                        // dihapus (trickynya disini)
                        document.body.removeChild(tempInput);

                        Swal.fire({
                            position: "top-end",
                            icon: "success",
                            title: "Link Berhasil Disalin",
                            showConfirmButton: false,
                            timer: 1500
                        });
                    }

                }
            })
        }

        $(document).on('change', 'select[name="nama_departemen"]', function() {
            let tbody = $('#list_{{ $dmenu }} tbody');
            tbody.empty();
            let departemen = $(this).val();

            $.ajax({
                url: '{{ URL::to('/') }}/mst_emp/getKaryawan',
                method: 'POST',
                data: {
                    departemen: departemen
                },
                beforeSend: function() {
                    console.log("Mengirim data ke server...");
                },
                success: function(response) {
                    // Pastikan tabel di-reinit setelah data terisi
                    if ($.fn.DataTable.isDataTable('#list_{{ $dmenu }}')) {
                        $('#list_{{ $dmenu }}').DataTable().destroy();
                    }
                    let tbody = $('#list_{{ $dmenu }} tbody');
                    tbody.empty();
                    let no = 1;

                    response.data.forEach(function(item) {
                    let btnLink = '';
                    if (item.email && item.email !== '') {
                        btnLink = `
                            <button class="btn btn-warning btn-sm btn-copy-link"
                                    data-nik="${item.nik}"
                                    data-nama="${item.nama_karyawan}"
                                    data-tgl="${item.tgl_lahir ?? ''}">
                                <i class="fas fa-paperclip"></i> Copy Link
                            </button>`;
                    }

                    let row = `
                        <tr>
                            <td>${no++}</td>
                            <td>${item.nik || ''}</td>
                            <td>${item.nama_departemen || ''}</td>
                            <td>${item.nama_karyawan || ''}</td>
                            <td>${item.nama_jabatan || ''}</td>
                            <td>${item.email || ''}</td>
                            <td>${btnLink}</td>
                        </tr>`;
                    tbody.append(row);
                });




                    $('#list_{{ $dmenu }}').DataTable({
                        dom: 'Bfrtip',
                        buttons: [{
                            extend: 'excelHtml5',
                            text: '<i class="fas fa-file-excel me-1 text-lg text-success"></i> <span class="fw-bold">Export Excel</span>',
                            title: 'Data Karyawan',
                            sheetName: 'Karyawan',
                            autoFilter: true,
                            exportOptions: {
                                columns: [0, 1, 2, 3, 4, 5, 6],
                                format: {
                                    body: function(data, row, column, node) {
                                        const linkBtn = $(node).find('.btn-link');
                                        const link = linkBtn.data('link');

                                        if (column === 6 && link) {
                                            return `${link}`;
                                        }

                                        return data.replace(/<[^>]*>/g, '').trim();
                                    }
                                }
                            }
                        }],
                        language: {
                            search: "Cari :",
                            lengthMenu: "Tampilkan _MENU_ baris",
                            zeroRecords: "Maaf - Data tidak ada",
                            info: "Data _START_ - _END_ dari _TOTAL_",
                            infoEmpty: "Tidak ada data",
                            infoFiltered: "(pencarian dari _MAX_ data)"
                        },
                        responsive: true
                    });

                },
                error: function(xhr, status, error) {
                    console.error("Error AJAX:", xhr.responseText);
                    Swal.fire({
                        icon: 'error',
                        title: 'Server Error',
                        text: 'Tidak dapat mengirim data ke server.',
                    });
                }
            });
        });
    </script>
@endpush