phpcrud/ajax.js

function showToast(message){

    $("#toastMsg").text(message);

    let toast = new bootstrap.Toast(document.getElementById('liveToast'));
    toast.show();

}

$(document).ready(function(){

    let currentPage = 1;
    let currentSort = "id";
    let currentOrder = "desc";

    function updateSortIcons(){

    // reset all icons
    $(".sort-icon")
        .removeClass("bi-arrow-up bi-arrow-down")
        .addClass("bi-arrow-down-up");

    // set active icon
    let icon = currentOrder === "asc" ? "bi-arrow-up" : "bi-arrow-down";

    $(`.sort[data-column='${currentSort}'] .sort-icon`)
        .removeClass("bi-arrow-down-up")
        .addClass(icon);
}


/* ---------------- LOAD TABLE FUNCTION ---------------- */
function loadData(status="", search="", page=currentPage)
{
    currentPage = page;


    $.ajax({
        url: "fetch_records.php",
        type: "GET",
        data: {
            status: status,
            search: search,
            page: page,
            sort: currentSort,
            order: currentOrder
        },
        success: function(response)
        {
            $("#table-data").html(response);
            if(bulkMode)
            {
            $(".select-column").removeClass("d-none");
            }
        }
        
    });
}

/* ----------- CENTRAL RELOAD FUNCTION (IMPORTANT) ----------- */
function reloadTable(){
    let status = $("#statusFilter").val();
    let search = $("#searchInput").val();
    loadData(status, search, currentPage);
}

/* ----------- LOAD DATA WHEN PAGE OPENS ----------- */
reloadTable();


/* ---------------- STATUS FILTER ---------------- */
$(document).on("change","#statusFilter",function(){
    currentPage = 1;
    reloadTable();
});


/* ---------------- LIVE GLOBAL SEARCH ---------------- */
$(document).on("keyup","#searchInput",function(){
    currentPage = 1;
    reloadTable();
});


/* ---------------- CHANGE STATUS BUTTON ---------------- */
$(document).on("click",".changeStatus",function(){

    let id=$(this).data("id");

    $.post("status_update.php",{id:id},function(){
        reloadTable();
    });

});


/* ---------------- SELECT ALL ---------------- */
$(document).on("click","#checkAll",function(){
    $(".rowcheck").prop("checked",this.checked);
});


/* ---------------- DELETE SINGLE ---------------- */
$(document).on("click",".deleteBtn",function(){

    if(confirm("Delete this record?")){
        let id=$(this).data("id");

        $.post("delete_record.php",{id:id},function(){
            reloadTable();
        });
    }

});


/* ---------------- OPEN EDIT MODAL ---------------- */
$(document).on("click",".editBtn",function(){
    let id=$(this).data("id");

    $("#editContent").load("edit_modal.php?id="+id,function(){
        $("#editModal").modal("show");
    });
});


/* ---------------- BULK DELETE ---------------- */
$("#bulkDelete").click(function(){

    let ids=[];
    $(".rowcheck:checked").each(function(){
        ids.push($(this).val());
    });

    $.post("bulk_delete.php",{ids:ids},function(){
        reloadTable();
    });

});




/* ---------------- UPDATE RECORD ---------------- */
$(document).on("click","#updateRecord",function(){

    let fields=[];
    $(".edit_field").each(function(){
        fields.push($(this).val());
    });

    $.post("update_record.php",{
        id:$("#edit_id").val(),
        name:$("#edit_name").val(),
        email:$("#edit_email").val(),
        phone:$("#edit_phone").val(),
        category:$("#edit_category").val(),
        description:$("#edit_description").val(),
        fields:fields
    },function(){

        $("#editModal").modal("hide");
        reloadTable();

    });


});


/* ---------------- ADD NEW FIELD ---------------- */
$(document).on("click","#addField",function(){

    $("#editFieldContainer").append(`
    <div class="input-group mb-2 fieldRow">
        <input type="text" class="form-control edit_field">
        <button class="btn btn-danger removeField">X</button>
    </div>
    `);

});


/* ---------------- REMOVE FIELD ---------------- */
$(document).on("click",".removeField",function(){
    $(this).closest(".fieldRow").remove();
});

// RESTORE RECORD
$(document).on("click",".restoreBtn",function(){

    let id=$(this).data("id");

    $.post("restore_record.php",{id:id},function(){

        reloadTable();
        showToast("Data restored successfully");

    });

});

let bulkMode = false;

$("#bulkToggle").click(function(){

    bulkMode = !bulkMode;

    if(bulkMode){
        $(".select-column").removeClass("d-none");
        $("#bulkDelete").removeClass("d-none");
        $("#bulkToggle").text("Cancel Select");
    }else{
        $(".select-column").addClass("d-none");
        $("#bulkDelete").addClass("d-none");
        $(".rowcheck").prop("checked", false);
        $("#checkAll").prop("checked", false);
        $("#bulkToggle").text("Bulk Select");
    }

});


// PAGINATION CLICK
$(document).on("click",".page-btn",function(e){
    e.preventDefault();

    let page=$(this).data("page");
    let status=$("#statusFilter").val();
    let search=$("#searchInput").val();
    currentPage = page;
    loadData(status,search,page);
});

// SORT CLICK
$(document).on("click",".sort",function(){

    let column=$(this).data("column");

    if(currentSort==column){
        currentOrder = currentOrder=="asc" ? "desc":"asc";
    }else{
        currentSort=column;
        currentOrder="asc";
    }

    currentPage=1;
    reloadTable();
});



});