JezK

Edit File: services.php

<?php
include "sidemenu-start.php";
?>
<div class="container-fluid">
    <div class="row">
        <div class="col-12 col-lg-6">
            <h1>Services</h1>
        </div>
        <div class="col-12 col-lg-6 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" id="searchService">
                <div class="cs-form form">

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

<div class="modal fade" id="addservice" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content de-modal-content">
            <form id="serviceAddForm">
                <div class="modal-header de-mh">
                    <h5 class="modal-title" id="exampleModalLabel">Add Service</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="title" name="title">
                        <p class="error name_error"></p>
                    </div>

<div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        <input type="text" class="form-control" id="description" name="description">
                        <p class="error description_error"></p>
                    </div>

<div class="mb-3">
                        <label for="sedan_amount" class="form-label">Amount for Sedan</label>
                        <input type="number" class="form-control" id="sedan_amount" name="sedan_amount">
                        <p class="error sedan_amount_error"></p>
                    </div>

<div class="mb-3">
                        <label for="suv_amount" class="form-label">Amount for SUV</label>
                        <input type="number" class="form-control" id="suv_amount" name="suv_amount">
                        <p class="error suv_amount_error"></p>
                    </div>

<div class="mb-3">
                        <label for="muv_amount" class="form-label">Amount for MUV</label>
                        <input type="number" class="form-control" id="muv_amount" name="muv_amount">
                        <p class="error muv_amount_error"></p>
                    </div>
                    
                    <div class="mb-3">
                        <label for="hb_amount" class="form-label">Amount for HatchBack</label>
                        <input type="number" class="form-control" id="hb_amount" name="hb_amount">
                        <p class="error hb_amount_error"></p>
                    </div>

<div class="mb-3">
                        
                        <div class="file-upload">
                            <div class="">
                                <input class="file-upload-input" type='file' id="serviceImage" name="serviceImage" onchange="imageValidation(1)" accept="image/*" />

</div>
                <div class="modal-footer">
                    <button type="submit" class="de-btn-small" onclick="return validateServiceByAdmin()">Add</button>
                </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="deleteService(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="editservice" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content de-modal-content">
            <form id="serviceEditForm">
                <div class="modal-header de-mh">
                    <h5 class="modal-title" id="exampleModalLabel">Edit Service</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

<div class="modal-body">
                    <div class="mb-3">
                        <label for="edittitle" class="form-label">Service Name</label>
                        <input type="text" class="form-control" id="edittitle" name="edittitle">
                        <p class="error edit_name_error"></p>
                    </div>
                    <div class="mb-3">
                        <label for="editdescription" class="form-label">Description</label>
                        <textarea class="form-control" id="editdescription" name="editdescription" rows="3" style="resize: vertical;"></textarea>
                        <p class="error edit_description_error"></p>
                    </div>
                    <div class="mb-3">
                        <label for="edit_sedan_amount" class="form-label">Sedan Amount</label>
                        <input type="number" class="form-control" id="edit_sedan_amount" name="edit_sedan_amount">
                        <p class="error edit_sedan_amount_error"></p>
                    </div>

<div class="mb-3">
                        <label for="edit_muv_amount" class="form-label">MUV Amount</label>
                        <input type="number" class="form-control" id="edit_muv_amount" name="edit_muv_amount">
                        <p class="error edit_muv_amount_error"></p>
                    </div>

<div class="mb-3">
                        <label for="edit_suv_amount" class="form-label">SUV Amount</label>
                        <input type="number" class="form-control" id="edit_suv_amount" name="edit_suv_amount">
                        <p class="error edit_suv_amount_error"></p>
                    </div>

<div class="mb-3">
                        <label for="edit_hb_amount" class="form-label">HatchBack Amount</label>
                        <input type="number" class="form-control" id="edit_hb_amount" name="edit_hb_amount">
                        <p class="error edit_hb_amount_error"></p>
                    </div>

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

$(document).ready(function() {
        readyFunction(1)
    })

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

function readyFunction(type) {

// 1- All,2-Pending,3-Public,4-Unpiblic
        $.ajax({
            type: 'POST',
            url: 'app/services.php',
            data: {
                getData: 'getData',
                type: type
            },
            success: function(data) {
                $('#appendData').html('') // Removing html code
                myDiv = document.getElementById("appendData");
                myDiv.innerHTML += data; // Assigning html code
            }
        })

}

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('serviceImage');
        } else {
            imgFile = document.getElementById('editserviceImage');
        }

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

function removeUpload() {
        $('.file-upload-content').hide();
        $('.image-upload-wrap').show();
    }

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

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

formData = new FormData($('#serviceAddForm')[0]),

$.ajax({
                type: 'POST',
                url: 'app/services.php',
                data: formData,
                processData: false,
                contentType: false,
                cache: false,
                success: function(data) {

if (data == 1) {
                        mySelect = $('#mySelect').val();
                        readyFunction(mySelect)
                        toastr.success('Service Added');
                        $('#addservice').modal('toggle');
                        document.getElementById("serviceAddForm").reset();
                        $('.file-upload-image').attr('src', '<?php echo $baseUrl; ?>images/imageUpload.png');
                    } else if (data == 2) {
                        toastr.warning('Unable to upload file');
                        $('#addservice').modal('toggle');
                        document.getElementById("serviceAddForm").reset();
                        $('.file-upload-image').attr('src', '<?php echo $baseUrl; ?>images/imageUpload.png');
                    } else {
                        toastr.warning('Unable to upload file');
                        $('#addservice').modal('toggle');
                        document.getElementById("serviceAddForm").reset();
                        $('.file-upload-image').attr('src', '<?php echo $baseUrl; ?>images/imageUpload.png');
                    }

}
            })

})

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

formData = new FormData($('#serviceEditForm')[0]),

if (data == 1) {
                        readyFunction(1); // passing 1 for get all data
                        toastr.success('Service Updated');
                        $('#editservice').modal('toggle');
                    } else if (data == 0) {
                        toastr.warning('Unable to upload file');
                        $('#editservice').modal('toggle');
                        document.getElementById("serviceAddForm").reset();

} else {
                        toastr.warning('Unable to upload file');
                        $('#editservice').modal('toggle');
                        document.getElementById("serviceAddForm").reset();

}

}
            })

})

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

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

$.ajax({
            type: 'POST',
            url: 'app/services.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 changeServiceStatus(id) {

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

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

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

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

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

}

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

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

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

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

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

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

function getServiceDetails(id) {
        let serviceId = id;
        $.ajax({
            type: 'POST',
            url: 'app/services.php',
            data: {
                'getServiceDetails': 'getServiceDetails',
                id: serviceId,
            },
            success: function(data) {

serviceDetails = JSON.parse(data);
                $('#edittitle').val(serviceDetails.name)
                $('#editdescription').val(serviceDetails.description)
                $('#edit_sedan_amount').val(serviceDetails.sedan_amount);
                $('#edit_muv_amount').val(serviceDetails.muv_amount);
                $('#edit_suv_amount').val(serviceDetails.suv_amount);
                $('#edit_hb_amount').val(serviceDetails.hb_amount);
                $('#expiry1').val(serviceDetails.expiry)
                $('#duration1').val(serviceDetails.duration)
                $('.efile-upload-image').attr('src', serviceDetails.image_name);
                $('#eimage-title').html(serviceDetails.image_name);
                $('#editServiceId').val(serviceDetails.service_id);
            }
        })
    }
</script>