JezK

Edit File: products.php

<?php
include "sidemenu-start.php";
?>

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-4">
            <h1>Loyalty Programs</h1>
        </div>
        <div class="col-lg-8 d-flex justify-content-end">
            <div class="mt-1 me-2">
                <select class="form-select pending-options" id="mySelect">
                    <option value="1" selected>All</option>
                    <option value="2">Pending</option>
                    <option value="3">Publish</option>
                    <option value="4">Un Publish</option>

</select>

</div>
            <form class="me-2">
                <div class="cs-form form">

<i class="fa fa-search"></i>
                    <input type="text" class="form-control cs-form" placeholder="Search" id="SearchKey">
                </div>
            </form><button type="button" data-bs-toggle="modal" data-bs-target="#addproduct" class="de-btn-small">Add Loyalty Program</button>
        </div>
    </div>
    <div class="row mt-5" id="appendData">

</div>
</div>

<div class="modal fade" id="addproduct" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content de-modal-content">
            <form id="productForm">
                <div class="modal-header de-mh">
                    <h5 class="modal-title" id="exampleModalLabel">Add Loyalty Program</h5>
                    <button type="button" id="fclose" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">

<div class="mb-1">
                        <label for="title" class="form-label">Loyalty Program Name</label>
                        <input type="text" class="form-control" id="title" name="title">
                        <p class="error title_error"></p>
                    </div>
                    <div class="mb-1">
                        <label for="description" class="form-label">Description</label>
                        <textarea class="form-control" id="description" name="description" rows="3"></textarea>
                        <p class="error description_error"></p>
                    </div>

<div id="loader" class="text-center" style="display: none;">
                        <div class="spinner-border" role="status">
                            <span class="sr-only">Loading...</span>
                        </div>
                    </div>

<div class="d-flex">
                        <div>
                            <label for="Expiry" class="form-lable">Expiry</label><br>
                            <div class="d-flex">
                                <input type="number" class="m-1 form-control1" name="expiry" id="expiry">
                                <select id="duration" class="m-1  form-control1" name="duration" required>
                                    <option value='0'>Select</option>
                                    <option value=1>Month(s)</option>
                                    <option value=2>Year(s)</option>
                                </select>
                            </div>

<div>
                            <label for="Expiry" class="form-lable">Warranty</label><br>
                            <div class="d-flex">
                                <input type="number" class="m-1 form-control1" name="warranty" id="warranty">
                                <select id="warranty_duration" class="m-1  form-control1" name="warranty_duration" required>
                                    <option value='0'>Select</option>
                                    <option value=1>Month(s)</option>
                                    <option value=2>Year(s)</option>
                                </select>
                            </div>

</div>

<div class="mb-1">
                        <label for="amount" class="form-label">Amount</label>
                        <input type="number" class="form-control" name="amount" id="amount">
                        <p class="error amount_error"></p>
                    </div>

<img id="img1" class="file-upload-image" src="../images/imageUpload.png" alt="your image" width="425px" height="150px" />
                                <span class="image-title d-none" id="image-title"></span>
                            </div>
                            <p class="error file_error"></p>
                        </div>
                    </div>
                    <div class="d-flex justify-content-center">
                        <button type="submit" class="de-btn-small" onclick="return validateProduct()">SUBMIT</button>
                    </div>
                </div>

</form>

</div>
    </div>
</div>

<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content de-modal-content">

<div class="modal-header de-mh">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <h1 class="modal-title text-center" id="exampleModalLabel">Do You want to Delete?</h1>
            </div>
            <div class="modal-footer">

<button type="button" class="de-btn-small yes" name="submit" onclick="deleteProduct(this.value)">Yes</button>
                <button type="button" class="close-btn" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="editproduct" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content de-modal-content">
            <form id="productEditForm">
                <div class="modal-header de-mh">
                    <h5 class="modal-title" id="exampleModalLabel">Edit Loyalty Program</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

<div class="mb-3">
                        <label for="title" class="form-label">Service Name</label>
                        <input type="text" class="form-control" id="edittitle" name="edittitle">
                        <p class="error name_edit_error"></p>
                    </div>

<div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        <textarea class="form-control" id="editdescription" name="editdescription" rows="3"></textarea>
                        <p class="error description_edit_error"></p>
                    </div>

<div class="mb-3">
                        <label for="textField1" class="form-label">Amount</label>
                        <input type="number" class="form-control" id="editamount" name="editamount">
                        <p class="error amount_edit_error"></p>
                    </div>

<div>
                        <label for="Expiry" class="form-lable">Expiry</label><br>
                        <input type="number" class="form-control1" name="expiry" id="expiry1">
                        <select id="duration1" class="form-control1" name="duration" required>
                            <option value=''>Select</option>
                            <option value=1>Month(s)</option>
                            <option value=2>Year(s)</option>
                        </select>
                        <p class="error expiry_edit_error"></p>
                    </div>

<div>
                        <label for="Expiry" class="form-lable">Warranty</label><br>
                        <div >
                            <input type="number" class="m-1 form-control1" name="warranty" id="warranty1">
                            <select id="warranty_duration1" class="m-1  form-control1" name="warranty_duration" required>
                                <option value='0'>Select</option>
                                <option value=1>Month(s)</option>
                                <option value=2>Year(s)</option>
                            </select>
                        </div>

<?php
include "sidemenu-end.php";
?>

function validateProduct() {
        $(".error").html("");

let title = $("#title").val().trim();

let description = $("#description").val().trim();

let amount = $("#amount").val().trim();

let image = $("#productImage").val();

let expiry = $("#expiry").val().trim();
        let duration = $("#duration").val();

let warranty = $("#warranty").val().trim();
        let warranty_duration = $("#warranty_duration").val();

if (title == "") {
            $(".title_error").html("Please Enter Product Name");
            return false;
        }

if (description == "") {
            $(".description_error").html("Please Enter Description");
            return false;
        }
        if (expiry == "" || expiry <= 0) {
            $(".expiry_error").html("Expiry Must Be Greater Than 0");
            return false;
        }

if (duration == "0") {
            $(".expiry_error").html("Please Select Duration");
            return false;
        }

if (warranty == "" || warranty <= 0) {
            $(".warranty_error").html("Warranty Must Be Greater Than 0");
            return false;
        }

if (warranty_duration == "0") {
            $(".warranty_error").html("Please Select Duration");
            return false;
        }

if (amount == "") {
            $(".amount_error").html("Please Enter Amount");
            return false;
        }

if (amount == "0") {
            $(".amount_error").html("Amount Must Be Greater Than 0");
            return false;
        }

if (image == "") {
            $(".file_error").html("Please Upload An Image");
            return false;
        }
        let imgregex = /#/;

if (imgregex.test(image)) {
            $(".file_error").html("The image name should not contain the '#' symbol.");
            return false;
        }

return true;
    }

let type = imgFile.type.split('/').pop().toLowerCase();

if (type != "jpeg" && type != "jpg" && type != "png") {
            $('.file_error').html('Please upload image like jpeg, jpg, png');

if (typeId == 1) {
                $('.file-upload-image').attr('src', '<?php echo $baseUrl; ?>images/imageUpload.png');
                $('#image-title').html("");
            } else {
                $('.efile-upload-image').attr('src', '<?php echo $baseUrl; ?>images/imageUpload.png');
                $('#eimage-title').html("");
            }
            return false;
        } else {
            readURL(typeId);
        }
    }

function readURL(typeId) {

if (typeId == 1) {
            imgFile = document.getElementById('productImage');
        } else {
            imgFile = document.getElementById('editProductImage');
        }

if (imgFile.files && imgFile.files[0]) {

let reader = new FileReader();

reader.onload = function(e) {

if (typeId == 1) {
                    $('.file-upload-image').attr('src', "");
                    $('.file-upload-image').attr('src', e.target.result);
                    $('#image-title').html(e.target.result);
                } else {
                    $('.efile-upload-image').attr('src', "");
                    $('.efile-upload-image').attr('src', e.target.result);
                    $('#eimage-title').html(e.target.result);
                }
            };

reader.readAsDataURL(imgFile.files[0]);

}
    }

$('.image-upload-wrap').bind('dragover', function() {
        $('.image-upload-wrap').addClass('image-dropping');
    });

$('.image-upload-wrap').bind('dragleave', function() {
        $('.image-upload-wrap').removeClass('image-dropping');
    });

$('#mySelect').change(function() {
        mySelect = $('#mySelect').val();
        readyFunction(mySelect)
    })

}

function getProductId(serviceId) {
        $('.yes').val(serviceId)
    }

$('#productForm').submit(function(event) {
        event.preventDefault();

// Show loader
    $('#loader').show();

// Disable submit button
    $('button[type=submit]').prop('disabled', true);

formData = new FormData($('#productForm')[0]);
            $.ajax({
                type: 'POST',
                url: 'app/products.php',
                data: formData,
                processData: false,
                contentType: false,
                cache: false,
                success: function(data) {
            // Hide loader
            $('#loader').hide();

// Enable submit button
            $('button[type=submit]').prop('disabled', false);

// Handle response
                    if (data == 1) {
                        // readyFunction(1); // passing 1 for get all data
                        toastr.success('Product Added');
                        $('#addproduct').modal('toggle');
                        document.getElementById("productForm").reset();
                        mySelect = $('#mySelect').val();
                        readyFunction(mySelect);
                        $('.file-upload-image').attr('src', '<?php echo $baseUrl; ?>images/imageUpload.png');
                    } else if (data == 2) {
                        toastr.warning('Unable to upload file');
                        $('#addproduct').modal('toggle');
                        document.getElementById("productForm").reset();
                    } else {
                        toastr.warning('Unable to upload file');
                        $('#addproduct').modal('toggle');
                        document.getElementById("productForm").reset();
                    }
        },
        error: function() {
            // Hide loader
            $('#loader').hide();
            
            // Enable submit button
            $('button[type=submit]').prop('disabled', false);
            
            // Handle error
            toastr.error('An error occurred while processing your request.');
        }
    });
});

$('#productEditForm').submit(function(event) {
        event.preventDefault();

formData = new FormData($('#productEditForm')[0]),
            $.ajax({
                type: 'POST',
                url: 'app/products.php',
                data: formData,
                processData: false,
                contentType: false,
                cache: false,
                success: function(data) {

if (data == 1) {
                        mySelect = $('#mySelect').val();
                        readyFunction(mySelect)
                        toastr.success('Product Updated');
                        $('#editproduct').modal('toggle');
                    } else if (data == 0) {
                        toastr.warning("You Haven't Change Anything");
                        $('#editproduct').modal('toggle');
                    } else {
                        toastr.warning("Unable To Update");
                        $('#editproduct').modal('toggle');
                    }

}
            })
    })

function changeProductStatus(id) {

let Id = id
        let serviceStatus = $('#' + Id).val();

matches = Id.match(/\d+/);
        let serviceId = matches[0];

$.ajax({
            type: 'POST',
            url: 'app/products.php',
            data: {
                status: 'status',
                id: serviceId,
                key: serviceStatus
            },
            success: function(data) {

mySelect = $('#mySelect').val();

if (data == 1) {
                    toastr.success('Product Updated')
                    readyFunction(mySelect)
                } else {
                    toastr.warning('Unable Update Service')
                }
            }
        })

}

function acceptChange(id) {
        let serviceId = id
        $.ajax({
            type: 'POST',
            url: 'app/products.php',
            data: {
                accept: 'status',
                id: serviceId,
            },
            success: function(data) {

mySelect = $('#mySelect').val();

if (data == 1) {
                    toastr.success('Product Updated')
                    readyFunction(mySelect)
                } else {
                    toastr.warning('Unable Update Product')
                }
            }
        })
    }

function declineChange(id) {
        let serviceId = id
        $.ajax({
            type: 'POST',
            url: 'app/products.php',
            data: {
                decline: 'status',
                id: serviceId,
            },
            success: function(data) {

mySelect = $('#mySelect').val();

if (data == 1) {
                    toastr.success('Product Deleted ')
                    readyFunction(mySelect)
                } else {
                    toastr.warning('Unable Update Service')
                }
            }
        })
    }

}

$('#SearchKey').keyup(function(event) {
        event.preventDefault();
        let searchKey = $('#SearchKey').val();

$.ajax({
            type: 'POST',
            url: 'app/products.php',
            data: {
                search: 'search',
                key: searchKey

},
            success: function(data) {
                $('#appendData').html('') // Removing html code
                // console.log(data)
                myDiv = document.getElementById("appendData");
                myDiv.innerHTML += data; // Assigning html code
            }
        })

})

function getProductDetails(id) {
        let serviceId = id;
        $.ajax({
            type: 'POST',
            url: 'app/products.php',
            data: {
                'getProductDetails': 'getProductDetails',
                id: serviceId,
            },
            success: function(data) {
                productDetails = JSON.parse(data);
                $('#edittitle').val(productDetails.name)
                $('#editamount').val(productDetails.amount)
                $('#editdescription').val(productDetails.description)
                $('#editProductId').val(productDetails.product_id)
                $('.efile-upload-image').attr('src', productDetails.image_name);
                $('#eimage-title').html(productDetails.image_name);
                console.log(productDetails.warranty)
                $('#warranty1').val(productDetails.warranty);
                $('#warranty_duration1').val(productDetails.warranty_duration);

$('#expiry1').val(productDetails.expiry);
                $('#duration1').val(productDetails.duration);

$('#warranty_duration1').html('');
                if (productDetails.warranty_duration_type == 2) {
                    $('#warranty_duration1').append('<option selected value=2>Year(s)</option><option value=1>Month(s)</option>');
                } else {
                    $('#warranty_duration1').append('<option selected value=1>Month(s)</option><option value=2>Year(s)</option>');
                }

}
        })
    }
    $("#fclose").click(function() {
        var form = document.getElementById("productForm");
        var image = document.getElementById('img1');
        image.src = '../images/imageUpload.png';
        form.reset();
    })
</script>