add filter date and dealer on mutations and opnames

resources/js/warehouse_management/mutations/index.js

@@ -7,12 +7,147 @@ $(document).ready(function () {
         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...");
 
@@ -22,7 +157,7 @@ function initializeDataTable() {
     }
 
     // Initialize DataTable
-    var table = $("#mutations-table").DataTable({
+    const table = $("#mutations-table").DataTable({
         processing: true,
         serverSide: true,
         destroy: true,
@@ -30,9 +165,17 @@ function initializeDataTable() {
             url: $("#mutations-table").data("url"),
             type: "GET",
             data: function (d) {
-                console.log("DataTables request data:", d);
-                console.log("Order info:", d.order);
-                console.log("Columns info:", d.columns);
+                // 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) {
@@ -41,19 +184,9 @@ function initializeDataTable() {
             },
         },
         columnDefs: [
-            {
-                targets: 0, // No. column
-                width: "5%",
-            },
-            {
-                targets: 8, // Action column
-                width: "20%",
-                className: "text-center",
-            },
-            {
-                targets: [6, 7], // Total Items and Status columns
-                className: "text-center",
-            },
+            { 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: [
             {
@@ -67,36 +200,12 @@ function initializeDataTable() {
                 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: "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",
@@ -104,13 +213,84 @@ function initializeDataTable() {
                 searchable: false,
             },
         ],
-        order: [[1, "desc"]], // Order by mutation_number desc (which follows ID order)
+        order: [[1, "desc"]], // Order by mutation_number desc
         pageLength: 10,
         responsive: true,
-        ordering: true, // Enable column ordering
-        orderMulti: false, // Single column ordering only
+        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());
@@ -119,7 +299,7 @@ function initializeDataTable() {
     // Add loading indicator for ordering
     table.on("processing.dt", function (e, settings, processing) {
         if (processing) {
-            console.log("DataTable processing started (ordering/filtering)");
+            console.log("DataTable processing started");
         } else {
             console.log("DataTable processing finished");
         }
@@ -127,7 +307,7 @@ function initializeDataTable() {
 
     // Manual click handler for column headers (fallback)
     $("#mutations-table thead th").on("click", function () {
-        var columnIndex = $(this).index();
+        const columnIndex = $(this).index();
         console.log("Column header clicked:", columnIndex, $(this).text());
 
         // Skip if it's the first (No.) or last (Action) column
@@ -152,28 +332,8 @@ function initializeDataTable() {
 
     // Handle Cancel Button Click with SweetAlert
     $(document).on("click", ".btn-cancel", function () {
-        var mutationId = $(this).data("id");
-
-        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);
-                }
-            });
-        } else {
-            if (confirm("Apakah Anda yakin ingin membatalkan mutasi ini?")) {
-                cancelMutation(mutationId);
-            }
-        }
+        const mutationId = $(this).data("id");
+        handleCancelMutation(mutationId, table);
     });
 
     // Handle form submissions with loading state
@@ -186,25 +346,53 @@ function initializeDataTable() {
 
     // Validate quantity approved in receive modal
     $(document).on("input", 'input[name*="quantity_approved"]', function () {
-        var maxValue = parseFloat($(this).attr("max"));
-        var currentValue = parseFloat($(this).val());
-
-        if (maxValue && currentValue > maxValue) {
-            $(this).val(maxValue);
-            $(this).addClass("is-invalid");
-            if (!$(this).siblings(".invalid-feedback").length) {
-                $(this).after(
-                    '<div class="invalid-feedback">Quantity tidak boleh melebihi yang diminta</div>'
-                );
-            }
-        } else {
-            $(this).removeClass("is-invalid");
-            $(this).siblings(".invalid-feedback").remove();
-        }
+        validateQuantityInput($(this));
     });
 }
 
-function cancelMutation(mutationId) {
+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",
@@ -223,13 +411,14 @@ function cancelMutation(mutationId) {
             } else {
                 alert("Mutasi berhasil dibatalkan");
             }
-            // Get table instance
-            var table = $("#mutations-table").DataTable();
+
+            // Reload table
             table.ajax.reload();
         },
         error: function (xhr) {
-            var errorMsg =
+            const errorMsg =
                 xhr.responseJSON?.message || "Gagal membatalkan mutasi";
+
             if (typeof Swal !== "undefined") {
                 Swal.fire({
                     title: "Error!",