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

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

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

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

function initializeSelect2() {
    console.log("Initializing Select2...");

    // Initialize Select2 for dealer filter
    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");
    }
}

function initializeDatepickers() {
    console.log("Initializing datepickers...");

    // Initialize start date picker
    $("#date_from").datepicker({
        dateFormat: "yy-mm-dd",
        changeMonth: true,
        changeYear: true,
        maxDate: new Date(),
        yearRange: "-5:+0",
        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();

    // Backup: Listen to change event
    setupChangeEventHandlers();
}

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({
        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);
}

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

function addCalendarIcons() {
    // Remove any existing icons first
    $(".input-icon").remove();

    // Add calendar icons with just the classes, no inline styles
    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");
}

function setupIconClickHandlers() {
    $(document).on("click", ".input-icon", function () {
        const input = $(this).prev("input");
        if (!input.prop("disabled")) {
            input.datepicker("show");
        }
    });
}

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

function initializeDataTable() {
    console.log("Initializing DataTable...");

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

    // Initialize DataTable
    const table = $("#mutations-table").DataTable({
        processing: true,
        serverSide: true,
        destroy: true,
        ajax: {
            url: $("#mutations-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: "5%" }, // No. column
            { targets: 8, width: "20%", className: "text-center" }, // Action column
            { targets: [6, 7], className: "text-center" }, // Total Items and Status columns
        ],
        columns: [
            {
                data: "DT_RowIndex",
                name: "DT_RowIndex",
                orderable: false,
                searchable: false,
            },
            {
                data: "mutation_number",
                name: "mutation_number",
                orderable: true,
            },
            { data: "created_at", name: "created_at", orderable: true },
            { data: "from_dealer", name: "from_dealer", orderable: true },
            { data: "to_dealer", name: "to_dealer", orderable: true },
            { data: "requested_by", name: "requested_by", orderable: true },
            { data: "total_items", name: "total_items", orderable: true },
            { data: "status", name: "status", orderable: true },
            {
                data: "action",
                name: "action",
                orderable: false,
                searchable: false,
            },
        ],
        order: [[1, "desc"]], // Order by mutation_number desc
        pageLength: 10,
        responsive: true,
        ordering: true,
        orderMulti: false,
    });

    // Setup filter button handlers
    setupFilterHandlers(table);

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

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,
            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();
        }
    });

    // 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();
    });
}

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");
}

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

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

    // Manual click handler for column headers (fallback)
    $("#mutations-table thead th").on("click", function () {
        const columnIndex = $(this).index();
        console.log("Column header clicked:", columnIndex, $(this).text());

        // Skip if it's the first (No.) or last (Action) column
        if (columnIndex === 0 || columnIndex === 8) {
            console.log("Non-sortable column clicked, ignoring");
            return;
        }

        // Check if DataTables is handling the click
        if (
            $(this).hasClass("sorting") ||
            $(this).hasClass("sorting_asc") ||
            $(this).hasClass("sorting_desc")
        ) {
            console.log("DataTables should handle this click");
        } else {
            console.log("DataTables not handling click, manual trigger needed");
            // Force DataTables to handle the ordering
            table.order([columnIndex, "asc"]).draw();
        }
    });

    // Handle Cancel Button Click with SweetAlert
    $(document).on("click", ".btn-cancel", function () {
        const mutationId = $(this).data("id");
        handleCancelMutation(mutationId, table);
    });

    // Handle form submissions with loading state
    $(document).on("submit", ".approve-form", function () {
        $(this)
            .find('button[type="submit"]')
            .prop("disabled", true)
            .html("Memproses...");
    });

    // Validate quantity approved in receive modal
    $(document).on("input", 'input[name*="quantity_approved"]', function () {
        validateQuantityInput($(this));
    });
}

function handleCancelMutation(mutationId, table) {
    if (typeof Swal !== "undefined") {
        Swal.fire({
            title: "Batalkan Mutasi?",
            text: "Apakah Anda yakin ingin membatalkan mutasi ini?",
            icon: "warning",
            showCancelButton: true,
            confirmButtonColor: "#d33",
            cancelButtonColor: "#3085d6",
            confirmButtonText: "Ya, Batalkan",
            cancelButtonText: "Batal",
        }).then((result) => {
            if (result.isConfirmed) {
                cancelMutation(mutationId, table);
            }
        });
    } else {
        if (confirm("Apakah Anda yakin ingin membatalkan mutasi ini?")) {
            cancelMutation(mutationId, table);
        }
    }
}

function validateQuantityInput(input) {
    const maxValue = parseFloat(input.attr("max"));
    const currentValue = parseFloat(input.val());

    if (maxValue && currentValue > maxValue) {
        input.val(maxValue);
        input.addClass("is-invalid");

        if (!input.siblings(".invalid-feedback").length) {
            input.after(
                '<div class="invalid-feedback">Quantity tidak boleh melebihi yang diminta</div>'
            );
        }
    } else {
        input.removeClass("is-invalid");
        input.siblings(".invalid-feedback").remove();
    }
}

function cancelMutation(mutationId, table) {
    $.ajax({
        url: "/warehouse/mutations/" + mutationId + "/cancel",
        type: "POST",
        data: {
            _token: $('meta[name="csrf-token"]').attr("content"),
        },
        success: function (response) {
            if (typeof Swal !== "undefined") {
                Swal.fire({
                    title: "Berhasil!",
                    text: "Mutasi berhasil dibatalkan",
                    icon: "success",
                    timer: 2000,
                    showConfirmButton: false,
                });
            } else {
                alert("Mutasi berhasil dibatalkan");
            }

            // Reload table
            table.ajax.reload();
        },
        error: function (xhr) {
            const errorMsg =
                xhr.responseJSON?.message || "Gagal membatalkan mutasi";

            if (typeof Swal !== "undefined") {
                Swal.fire({
                    title: "Error!",
                    text: errorMsg,
                    icon: "error",
                });
            } else {
                alert("Error: " + errorMsg);
            }
        },
    });
}