@extends('layouts.app', ['class' => 'g-sidenav-show bg-gray-100'])
{{-- section content --}}
@section('content')
    @include('layouts.navbars.auth.topnav', ['title' => ''])
    <div class="card shadow-lg mx-4">
        <div class="card-body p-3">
            <div class="row gx-4">
                <div class="col-lg">
                    <div class="nav-wrapper">
                        {{-- check authorize add --}}
                        @if ($authorize->add == '1')
                            {{-- button execute --}}
                            <button class="btn btn-primary mb-0" id="executeButton">
                                <i class="fas fa-bolt me-1"></i><span class="font-weight-bold">Execute</span>
                            </button>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container-fluid py-4">
        <div class="row">
            <div class="col-lg-5">
                <div class="card">
                    <form role="form" method="POST" action="{{ URL::to($url_menu) }}" id="{{ $dmenu }}-form">
                        @csrf
                        <div class="card-body">
                            <p class="text-uppercase text-sm">Filter {{ $title_menu }}</p>
                            <hr class="horizontal dark mt-0">
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label for="karyawan" class="form-control-label">Karyawan</label>
                                        <div class="d-flex align-items-center mt-1">
                                            <div class="input-group" style="flex-grow: 1;">
                                                <input type="text" name="nik_display" class="form-control"
                                                    id="karyawan_display">
                                                <input type="hidden" name="nik" id="hidden_nik">
                                                <span class="input-group-text bg-primary text-light" data-bs-toggle="modal"
                                                    data-bs-target="#karyawanModal"
                                                    style="border-left:3px solid #d2d6da;cursor: pointer;">
                                                    <i class="fas fa-search"></i>
                                                </span>
                                            </div>

                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label class="col-sm-4 col-form-label">Periode</label>
                                        <div class="col-sm-8">
                                            <div class="d-flex align-items-center">
                                                <input type="text" class="form-control me-2" name="periodeFrom"
                                                    id="periodeFrom" placeholder="MM/YYYY">
                                                <span> - </span>
                                                <input type="text" class="form-control ms-2" name="periodeTo"
                                                    id="periodeTo" placeholder="MM/YYYY">
                                            </div>
                                        </div>
                                    </div>
                                    <code>
                                        *) Pilih salah satu filter (Karyawan atau Periode) untuk menampilkan data.
                                    </code>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal untuk menampilkan data karyawan -->
    <div class="modal fade" id="karyawanModal" tabindex="-1" aria-labelledby="karyawanModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="karyawanModalLabel">List Prolanis</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table id="myTable" class="table table-bordered table-striped" style="width:100%">
                            <thead style="background-color: #daecff;">
                                <tr>
                                    <th scope="col">Action</th>
                                    <th scope="col">NIK</th>
                                    <th scope="col">Nama</th>
                                    <th scope="col">Tgl Lahir</th>
                                    <th scope="col">Umur</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($karyawan as $k)
                                    <tr>
                                        <td scope="row">
                                            <span class="btn badge bg-success"
                                                onclick="select_pro_krywn('{{ $k->nik }}', '{{ $k->nama }}', '{{ $k->tgl_lahir }}')">
                                                <i class="fa fa-check-circle-o me-1"></i>
                                                Select
                                            </span>
                                        </td>
                                        <td>{{ $k->nik }}</td>
                                        <td>{{ $k->nama }}</td>
                                        <td class="tgl-lahir" data-tgl="{{ $k->tgl_lahir }}">
                                            {{ $k->tgl_lahir }}</td>
                                        <td class="umur-dinamis"></td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Area untuk menampilkan PDF -->
    <div class="container mt-4">
        <iframe id="pdfFrame" style="width: 0%; height: 0vh; display: none;" frameborder="0"></iframe>
    </div>
@endsection

@push('js')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            $('#myTable').DataTable({
                "language": {
                    "search": "Cari :",
                    "lengthMenu": "Tampilkan _MENU_ baris",
                    "zeroRecords": "Maaf - Data tidak ada",
                    "info": "Halaman _PAGE_ dari _PAGES_",
                    "infoEmpty": "Tidak ada data",
                    "infoFiltered": "(pencarian dari _MAX_ data)"
                },
                responsive: true,
            });
        });

        function updateSelected() {
            var selected = [];
            document.querySelectorAll('.selectItem:checked').forEach(function(checkbox) {
                selected.push(checkbox.getAttribute('data-nik') + ' - ' + checkbox.getAttribute('data-nama'));
            });
            document.getElementsByName('nik_display')[0].value = selected.join(', '); // Untuk menampilkan NIK - Nama
            document.getElementsByName('nik')[0].value = selected.map(function(item) {
                return item.split(' - ')[0]; // Ambil hanya NIK dari NIK - Nama
            }).join(', '); // Kirim hanya NIK ke server
        }

        function select_pro_krywn(nik, nama, tgl_lahir) {
            document.getElementsByName('nik_display')[0].value = nik + ' - ' + nama; // Tampilkan NIK - Nama
            document.getElementsByName('nik')[0].value = nik; // Hanya NIK ke server
            // Tutup modal
            document.getElementById('karyawanModal').querySelector('.btn-close').click();
        }

        function hitungUmur(tglLahir) {
            const today = new Date();
            const birthDate = new Date(tglLahir);
            let age = today.getFullYear() - birthDate.getFullYear();
            const m = today.getMonth() - birthDate.getMonth();
            if (m < 0 || (m === 0 && today.getDate() < birthDate.getDate())) {
                age--;
            }
            return age;
        }

        $(document).ready(function() {
            var table = $('#myTable').DataTable();

            // Jalankan saat pertama kali load
            $('.tgl-lahir').each(function() {
                const tglLahir = $(this).data('tgl');
                const umur = hitungUmur(tglLahir);
                $(this).closest('tr').find('.umur-dinamis').text(umur);
            });

            // Jalankan ulang setiap kali DataTable di-draw (misal: pagination/sorting)
            table.on('draw.dt', function() {
                $('.tgl-lahir').each(function() {
                    const tglLahir = $(this).data('tgl');
                    const umur = hitungUmur(tglLahir);
                    $(this).closest('tr').find('.umur-dinamis').text(umur);
                });
            });
        });

        document.getElementById('executeButton').addEventListener('click', function() {
            let selectedNik = document.getElementById('hidden_nik').value;
            let periodeFrom = document.getElementById('periodeFrom').value;
            let periodeTo = document.getElementById('periodeTo').value;

            if (selectedNik === '' && periodeFrom === '' && periodeTo === '') {
                Swal.fire({
                    icon: 'warning',
                    title: 'Filter Kosong!',
                    text: 'Harap mengisi filter terlebih dahulu sebelum mengeksekusi.'
                });
            } else {
                document.getElementById('{{ $dmenu }}-form').submit();
            }
        });
    </script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Konfigurasi flatpickr untuk periodeFrom
            flatpickr("#periodeFrom", {
                dateFormat: "m/Y", // Format internal
                altInput: true,
                altFormat: "F Y", // Format yang ditampilkan di input
                allowInput: true,
                locale: "id", // Setel lokal Bahasa Indonesia
                clickOpens: true, // Menampilkan kalender saat input diklik
                placeholder: "MM/YYYY" // Placeholder untuk menunjukkan format
            });

            // Konfigurasi flatpickr untuk periodeTo
            flatpickr("#periodeTo", {
                dateFormat: "m/Y", // Format internal
                altInput: true,
                altFormat: "F Y", // Format yang ditampilkan di input
                allowInput: true,
                locale: "id", // Setel lokal Bahasa Indonesia
                clickOpens: true, // Menampilkan kalender saat input diklik
                placeholder: "MM/YYYY" // Placeholder untuk menunjukkan format
            });
        });
    </script>
@endpush