$(document).ready(function() {
    $("#services_uid").selectize({
        valueField: 'uid',
        labelField: 'name',
        searchField: ['name', 'uid'],
        create:false,
        placeholder: "Cari pasien...",
        load:function(query, callback){
            if(!query.length) return callback();
            $.ajax({
                url:'/helper/get/getServices',
                data: {search: query},
                success: function (response){
                    if(response.error === 0 && Array.isArray(response.data)){
                        callback(response.data);
                    }else{
                        callback([])
                    }
                },
                error: function() {
                    callback([]);
                }
            });
        },
        render: {
            option: function(item, escape){
                console.log(item);

                return `
                    <div class="p-1">
                        <div class="fw-semibold" style="font-size: 0.85rem;">
                            ${escape(item.name)}
                        </div>
                    </div>`;
            },
            item: function(item, escape){
                return `<div> ${escape(item.name)} </div>`
            }
        },
        onChange: function(value) {
            var selectize = this;
            var selectedItem = selectize.options[value];

            if (selectedItem) {
                const tarif = selectedItem.tarif || 0;
                const formattedTarif = new Intl.NumberFormat('id-ID', {
                    style: 'currency',
                    currency: 'IDR',
                    minimumFractionDigits: 0
                }).format(tarif);

                $("#price").val(formattedTarif);
            } else {
                $("#price").val('');
            }

        }

    });

    $("#reg_uid").selectize({
        valueField: 'uid',
        labelField: 'name',
        searchField: ['name', 'uid'],
        create: false,
        placeholder: "Cari Pasien...",
        load: function(query, callback) {
            if (!query.length) return callback([]);
            $.ajax({
                url: '/helper/get/getRegistrasis',
                data: { search: query },
                success: function(response) {
                    if (response.error === 0 && Array.isArray(response.data)) {
                        callback(response.data);
                    } else {
                        callback([]);
                    }
                },
                error: function() {
                    callback([]);
                }
            });
        },
        render: {
            option: function(item, escape) {
                // Format tanggal created_at
                let createdAt = '-';
                if (item.created_at) {
                    const date = new Date(item.created_at);
                    const options = { year: 'numeric', month: 'short', day: 'numeric' };
                    createdAt = date.toLocaleDateString('id-ID', options);
                }

                return `
                    <div class="p-1">
                        <div class="fw-semibold" style="font-size: 0.9rem;">
                            ${escape(item.patient?.name || '')}
                        </div>
                        <div style="font-size: 0.75rem; color: gray;">
                            Tanggal Registrasi: ${escape(createdAt)}
                        </div>
                    </div>`;
            },
            item: function(item, escape) {
                let createdAt = '-';
                if (item.created_at) {
                    const date = new Date(item.created_at);
                    const options = { year: 'numeric', month: 'short', day: 'numeric' };
                    createdAt = date.toLocaleDateString('id-ID', options);
                }

                return `
                    <div>
                        ${escape(item.patient?.name || '')} (${escape(createdAt)})
                    </div>`;
            }
        },
    });

});