{{-- Input tanggal: kalender kustom Indonesia, klik = pilih (bukan ketik), nilai submit Y-m-d --}}
<script>
(function () {
    if (window.__dateIdInit) return;
    window.__dateIdInit = true;

    var BULAN = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni',
                 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
    var HARI = ['Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab', 'Min'];

    function pad(n) { return String(n).padStart(2, '0'); }
    function iso(d) { return d.getFullYear() + '-' + pad(d.getMonth() + 1) + '-' + pad(d.getDate()); }
    function sama(a, b) { return a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); }
    function parseIso(v) {
        var m = String(v || '').match(/^(\d{4})-(\d{1,2})-(\d{1,2})$/);
        return m ? new Date(+m[1], +m[2] - 1, +m[3]) : null;
    }

    var terbuka = null; // fungsi tutup panel yang sedang terbuka

    function konversi(el) {
        var namaAsli = el.name;
        var wajib = el.hasAttribute('required');
        var awal = parseIso(el.value || el.getAttribute('value'));

        // hidden pembawa nilai Y-m-d untuk form
        var hid = document.createElement('input');
        hid.type = 'hidden';
        hid.name = namaAsli;
        hid.value = awal ? iso(awal) : '';
        el.parentNode.insertBefore(hid, el.nextSibling);

        // display teks readonly (klik = buka kalender)
        el.removeAttribute('name');
        el.setAttribute('type', 'text');
        el.setAttribute('autocomplete', 'off');
        el.readOnly = true;
        el.style.cursor = 'pointer';
        el.style.backgroundColor = '#fffef2';
        el.placeholder = 'Klik untuk pilih tanggal';
        if (!wajib) el.removeAttribute('required');
        if (awal) el.value = awal.getDate() + ' ' + BULAN[awal.getMonth()] + ' ' + awal.getFullYear();

        var wrap = document.createElement('div');
        wrap.style.position = 'relative';
        el.parentNode.insertBefore(wrap, el);
        wrap.appendChild(el);

        var panel = document.createElement('div');
        panel.className = 'id-date-panel';
        panel.style.cssText = 'display:none;position:absolute;z-index:2000;background:#fff;border:1px solid #ccc;' +
            'border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.25);padding:8px;width:236px;font-size:12px;';
        wrap.appendChild(panel);

        function tutup() {
            panel.style.display = 'none';
            terbuka = null;
            document.removeEventListener('mousedown', diLuar, true);
        }

        function diLuar(e) {
            if (panel.contains(e.target) || e.target === el) return;
            tutup();
        }

        function render() {
            var thn = tampil.getFullYear(), bln = tampil.getMonth();
            var terpilih = parseIso(hid.value);

            var html = '<div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;">' +
                '<button type="button" class="dp-nav" data-nav="-1" style="border:0;background:none;cursor:pointer;font-size:16px;line-height:1;padding:2px 10px;">&#8249;</button>' +
                '<strong style="font-size:13px;">' + BULAN[bln] + ' ' + thn + '</strong>' +
                '<button type="button" class="dp-nav" data-nav="1" style="border:0;background:none;cursor:pointer;font-size:16px;line-height:1;padding:2px 10px;">&#8250;</button>' +
                '</div>';

            html += '<table style="width:100%;border-collapse:collapse;"><tr>';
            HARI.forEach(function (h) {
                html += '<th style="padding:3px 0;color:#888;font-weight:600;">' + h + '</th>';
            });
            html += '</tr><tr>';

            var awalHari = (new Date(thn, bln, 1).getDay() + 6) % 7; // Senin = 0
            var jmlHari = new Date(thn, bln + 1, 0).getDate();
            var sel = awalHari;
            var hariIni = new Date();

            for (var i = 1; i <= jmlHari; i++) {
                if (i === 1 && sel > 0) html += '<td colspan="' + sel + '"></td>';
                var dObj = new Date(thn, bln, i);
                var stl = '';
                if (sama(dObj, hariIni)) stl += 'background:#eef5ff;';
                if (terpilih && sama(dObj, terpilih)) stl += 'background:#007bff;color:#fff;font-weight:bold;';
                html += '<td data-hari="' + i + '" style="text-align:center;padding:5px 0;cursor:pointer;border-radius:4px;' + stl + '">' + i + '</td>';
                sel = (sel + 1) % 7;
                if (sel === 0 && i < jmlHari) html += '</tr><tr>';
            }
            html += '</tr></table>';

            html += '<div style="display:flex;justify-content:space-between;margin-top:6px;">' +
                '<button type="button" class="dp-aksi" data-aksi="hari-ini" style="border:1px solid #ddd;background:#f8f9fa;border-radius:4px;cursor:pointer;font-size:11px;padding:3px 8px;">Hari Ini</button>' +
                '<button type="button" class="dp-aksi" data-aksi="hapus" style="border:1px solid #ddd;background:#f8f9fa;border-radius:4px;cursor:pointer;font-size:11px;padding:3px 8px;">Hapus</button>' +
                '</div>';

            panel.innerHTML = html;

            panel.querySelectorAll('td[data-hari]').forEach(function (td) {
                td.addEventListener('click', function () {
                    pilih(new Date(thn, bln, +td.getAttribute('data-hari')));
                });
            });
            panel.querySelector('[data-nav="-1"]').addEventListener('click', function () {
                tampil.setMonth(tampil.getMonth() - 1); render();
            });
            panel.querySelector('[data-nav="1"]').addEventListener('click', function () {
                tampil.setMonth(tampil.getMonth() + 1); render();
            });
            panel.querySelector('[data-aksi="hari-ini"]').addEventListener('click', function () { pilih(new Date()); });
            panel.querySelector('[data-aksi="hapus"]').addEventListener('click', function () {
                hid.value = ''; el.value = ''; tutup();
                hid.dispatchEvent(new Event('change', { bubbles: true }));
            });
        }

        function pilih(d) {
            hid.value = iso(d);
            el.value = d.getDate() + ' ' + BULAN[d.getMonth()] + ' ' + d.getFullYear();
            tutup();
            hid.dispatchEvent(new Event('change', { bubbles: true }));
            el.dispatchEvent(new Event('change', { bubbles: true }));
        }

        function buka() {
            if (terbuka && terbuka !== tutup) terbuka();
            var t = parseIso(hid.value);
            tampil = t ? new Date(t.getFullYear(), t.getMonth(), 1) : (function () { var x = new Date(); x.setDate(1); return x; })();
            render();
            panel.style.display = 'block';
            terbuka = tutup;
            document.addEventListener('mousedown', diLuar, true);
        }

        var tampil = new Date(); tampil.setDate(1);

        el.addEventListener('click', function () {
            if (panel.style.display === 'block') tutup(); else buka();
        });
        el.addEventListener('keydown', function (e) {
            if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (panel.style.display !== 'block') buka(); }
        });

        if (wajib) {
            var form = el.closest('form');
            if (form) {
                form.addEventListener('submit', function (ev) {
                    if (!hid.value) {
                        ev.preventDefault();
                        el.style.borderColor = '#dc3545';
                        try { el.scrollIntoView({ block: 'center', behavior: 'smooth' }); } catch (e2) {}
                        window.alert('Silakan pilih tanggal terlebih dahulu.');
                    }
                });
            }
        }
    }

    function boot() {
        var jumlah = 0;
        document.querySelectorAll('input[type=date]').forEach(function (el) {
            if (el.getAttribute('data-id-date') === '1') return;
            el.setAttribute('data-id-date', '1');
            try { konversi(el); jumlah++; } catch (err) {
                if (window.console) console.warn('Konversi tanggal gagal:', err);
            }
        });
        if (window.console) console.log('[date-id] v7 aktif, dikonversi:', jumlah);
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', boot);
    } else {
        boot();
    }
})();
</script>