CKB/resources/js/warehouse_management/opnames/index.js

$(document).ready(function () {
    console.log("Opnames index.js loaded");

    // Check if required libraries are available
    if (typeof $.fn.DataTable === "undefined") {
        console.error("DataTables not available!");
        return;
    }

    // Initialize components
    initializeSelect2();
    initializeDatepickers();

    // Wait for DOM to be fully ready before initializing DataTable
    setTimeout(function () {
        initializeDataTable();
    }, 100);
});

/**
 * Initialize Select2 for dealer filter
 */
function initializeSelect2() {
    console.log("Initializing Select2...");

    if (typeof $.fn.select2 !== "undefined") {
        $("#dealer_filter").select2({
            placeholder: "Pilih Dealer",
            allowClear: false,
            width: "100%",
            dropdownAutoWidth: true,
            minimumResultsForSearch: 5, // Show search box if more than 5 options
        });
    } else {
        console.warn("Select2 not available, using regular select");
    }
}

/**
 * Initialize date pickers with validation
 */
function initializeDatepickers() {
    console.log("Initializing datepickers...");

    // Initialize start date picker
    $("#date_from .datepicker").datepicker({
        dateFormat: "yyyy-mm-dd",
        changeMonth: true,
        changeYear: true,
        maxDate: new Date(),
        yearRange: "-5:+0",
        autoclose: true,
        todayHighlight: true,
        orientation: "bottom auto",
        language: "id",
        clearBtn: true,
        onSelect: function (selectedDate) {
            console.log("Start date selected:", selectedDate);
            enableEndDatePicker(selectedDate);
            $(this).datepicker("hide");
        },
        onClose: function (selectedDate) {
            if (selectedDate) {
                console.log("Start date closed with value:", selectedDate);
                enableEndDatePicker(selectedDate);
            }
        },
    });

    // Initialize end date picker (initially disabled)
    initializeEndDatePicker();

    // Initially disable end date input
    $("#date_to").prop("disabled", true);

    // Add calendar icons
    addCalendarIcons();

    // Setup calendar icon click handlers
    setupIconClickHandlers();

    // Setup change event handlers as backup
    setupChangeEventHandlers();
}

/**
 * Enable end date picker with minimum date constraint
 */
function enableEndDatePicker(startDate) {
    console.log("Enabling end date picker with min date:", startDate);

    // Enable the input
    $("#date_to").prop("disabled", false);

    // Destroy existing datepicker
    $("#date_to").datepicker("destroy");

    // Re-initialize with new minDate
    $("#date_to .datepicker").datepicker({
        dateFormat: "yy-mm-dd",
        changeMonth: true,
        changeYear: true,
        maxDate: new Date(),
        yearRange: "-5:+0",
        minDate: new Date(startDate), // Convert to Date object for proper comparison
        onSelect: function (selectedDate) {
            console.log("End date selected:", selectedDate);
            $(this).datepicker("hide");
        },
    });

    console.log("End date picker enabled with minDate:", startDate);
}

/**
 * Initialize end date picker without constraints
 */
function initializeEndDatePicker() {
    $("#date_to").datepicker({
        dateFormat: "yyyy-mm-dd",
        changeMonth: true,
        changeYear: true,
        maxDate: new Date(),
        yearRange: "-5:+0",
        onSelect: function (selectedDate) {
            console.log("End date selected:", selectedDate);
            $(this).datepicker("hide");
        },
    });
}

/**
 * Add calendar icons to date inputs
 */
function addCalendarIcons() {
    // Remove any existing icons first
    $(".input-icon").remove();

    // Add calendar icons with CSS classes
    const iconHtml = '<i class="fa fa-calendar input-icon"></i>';

    $("#date_from").after(iconHtml);
    $("#date_to").after(iconHtml);

    // Ensure parent containers have relative positioning
    $("#date_from, #date_to")
        .closest(".form-group")
        .css("position", "relative");
}

/**
 * Setup click handlers for calendar icons
 */
function setupIconClickHandlers() {
    $(document).on("click", ".input-icon", function () {
        const input = $(this).prev("input");
        if (!input.prop("disabled")) {
            input.datepicker("show");
        }
    });
}

/**
 * Setup change event handlers for date inputs
 */
function setupChangeEventHandlers() {
    $("#date_from").on("change", function () {
        const selectedDate = $(this).val();
        if (selectedDate) {
            console.log("Start date change event:", selectedDate);
            enableEndDatePicker(selectedDate);
        }
    });
}

/**
 * Initialize DataTable with server-side processing and filtering
 */
function initializeDataTable() {
    console.log("Initializing DataTable...");

    // Destroy existing table if any
    if ($.fn.DataTable.isDataTable("#opnames-table")) {
        $("#opnames-table").DataTable().destroy();
    }

    // Initialize DataTable
    const table = $("#opnames-table").DataTable({
        processing: true,
        serverSide: true,
        destroy: true,
        ajax: {
            url: $("#opnames-table").data("url"),
            type: "GET",
            data: function (d) {
                // Add filter parameters
                d.dealer_filter = $("#dealer_filter").val();
                d.date_from = $("#date_from").val();
                d.date_to = $("#date_to").val();

                console.log("AJAX data being sent:", {
                    dealer_filter: d.dealer_filter,
                    date_from: d.date_from,
                    date_to: d.date_to,
                });

                return d;
            },
            error: function (xhr, error, code) {
                console.error("DataTables AJAX error:", error, code);
                console.error("Response:", xhr.responseText);
            },
        },
        columnDefs: [
            { targets: 0, width: "15%" }, // Opname Date column
            { targets: 5, width: "15%", className: "text-center" }, // Action column
        ],
        columns: [
            {
                data: "created_at",
                name: "created_at",
                orderable: true,
            },
            {
                data: "opname_date",
                name: "opname_date",
                orderable: true,
            },
            {
                data: "dealer_name",
                name: "dealer.name",
                orderable: true,
            },
            {
                data: "user_name",
                name: "user.name",
                orderable: true,
            },
            {
                data: "status",
                name: "status",
                orderable: true,
            },
            {
                data: "action",
                name: "action",
                orderable: false,
                searchable: false,
            },
        ],
        order: [[4, "desc"]], // Order by created_at desc
        pageLength: 10,
        responsive: true,
        ordering: true,
        orderMulti: false,
    });

    // Setup filter button handlers
    setupFilterHandlers(table);

    // Setup other event handlers
    setupTableEventHandlers(table);
}

/**
 * Setup filter and reset button handlers
 */
function setupFilterHandlers(table) {
    // Handle Filter Search Button
    $("#kt_search").on("click", function () {
        console.log("Filter button clicked");

        const dealerFilter = $("#dealer_filter").val();
        const dateFrom = $("#date_from").val();
        const dateTo = $("#date_to").val();

        console.log("Filtering with:", {
            dealer: dealerFilter,
            dateFrom: dateFrom,
            dateTo: dateTo,
        });

        table.ajax.reload();
    });

    // Handle Filter Reset Button
    $("#kt_reset").on("click", function () {
        console.log("Reset button clicked");

        // Clear all filters
        $("#dealer_filter").val("").trigger("change"); // Reset Select2
        $("#date_from").val("");
        $("#date_to").val("");

        // Reset end date picker and disable it
        resetEndDatePicker();

        // Reload table
        table.ajax.reload();
    });

    // Handle Enter key on date inputs
    $("#date_from, #date_to").on("keypress", function (e) {
        if (e.which === 13) {
            // Enter key
            $("#kt_search").click();
        }
    });

    // Optional: Auto-filter when dealer selection changes
    $("#dealer_filter").on("change", function () {
        console.log("Dealer filter changed:", $(this).val());
        // Uncomment the line below if you want auto-filter on dealer change
        // table.ajax.reload();
    });
}

/**
 * Reset end date picker to initial state
 */
function resetEndDatePicker() {
    // Destroy existing datepicker
    $("#date_to").datepicker("destroy");

    // Re-initialize without minDate constraint
    initializeEndDatePicker();

    // Disable the input
    $("#date_to").prop("disabled", true);

    console.log("End date picker reset and disabled");
}

/**
 * Setup additional table event handlers
 */
function setupTableEventHandlers(table) {
    // Debug ordering events
    table.on("order.dt", function () {
        console.log("Order changed:", table.order());
    });

    // Add loading indicator for processing
    table.on("processing.dt", function (e, settings, processing) {
        if (processing) {
            console.log("DataTable processing started");
        } else {
            console.log("DataTable processing finished");
        }
    });

    // Handle any custom button clicks here if needed
    // Example: $(document).on('click', '.custom-btn', function() { ... });
}