I have an custom object called ProductDetail__c where i am trying to fetch the data from apex method using @wire as function as shown in the screenshot and after clicking view details button , i want to navigate to the record detail page but it is not happening.

Can someone help me with this please and how to put the debug statements inorder to debug on my own.

Sorry i am new to LWC.

Apex class
============================================
public with sharing class ProductManager {
    @AuraEnabled(cacheable=True)
    public static List<ProductDetail__c> fetchProductData(){
       
        List<ProductDetail__c> ProdList=new List<ProductDetail__c>();
        ProdList=[select Id,Name,Product_Family__c,Product_Description__c,Product_Code__c from
                    ProductDetail__c where IsActive__c = True];
        return ProdList;
    }
}
==========================================
import { LightningElement, wire } from 'lwc';
import  fetchProductData  from '@salesforce/apex/ProductManager.fetchProductData';
export default class ServerProductData extends LightningElement {
    ProductDetails;
    ProductId;
    errorDetails;
    @wire(fetchProductData)
    ProductDetailInfo({error,data})
    {
        if (data)
        {
            this.ProductDetails= data;
        }
       
        else if(error){
            this.errorDetails= error;
        }
    }
    navigateDetails(event){
        this.ProductId = event.target.value;
        this[NavigationMixin.Navigate]({
            type:'standard__recordPage',
            attributes:{
                recordId:this.ProductId,
                objectApiName:'ProductDetail__c',
                actionName:'view'
            }
        });
    }
}
=================================================

<template>
    <div class="slds-box">
        <template if:true={ProductDetails}>
            <div class="slds-grid slds-wrap slds-gutters">
                <template for:each={ProductDetails} for:item="Prod">
                    <div class="slds-col slds-large-size_4-of-12 slds-medium-size_1-of-12 slds-size_1-of-12 slds-p-around_small" key={Prod.Id}>
                        <lightning-card title={Prod.Name}>
                            <lightning-button label="View Details" variant="success" slot="actions" onclick={navigateDetails} value={Prod.Id}>
                            </lightning-button>
                            <div class="slds-var-p-around_small">
                                <p>{Prod.Product_Description__c}</p>
                                <p>{Prod.Product_Code__c}</p>
                            </div>
                        </lightning-card>
                    </div>
                </template>
            </div>
        </template>
    </div>
</template>
=================================================