JezK

Edit File: packages.php

<?php
include "sidemenu-start.php"
?>
<div class="container-fluid">

<div class="row">
        <div class="col-lg-4">
            <h1> Care Club</h1>
        </div>
        <div class="col-lg-8 d-flex justify-content-end align-items-center">
            <div class="mt-2 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> <a href="addpackage.php" type="button" class="text-uppercase de-btn-small">Add Care Club</a>
        </div>
    </div>
    <div class="row mt-4" id="appendData">

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

<div class="modal fade" id="addpackage" 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">
                <h5 class="modal-title" id="exampleModalLabel">Add Package</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form>
                    <div class="mb-3">
                        <label for="title" class="form-label">Title</label>
                        <input type="text" class="form-control" id="title">
                    </div>
                    <div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        <textarea class="form-control" id="description" rows="3"></textarea>
                    </div>
                    <div class="mb-3">
                        <div class="d-flex justify-content-between">
                            <h6>Services</h6>

<button type="button" class="de-btn-small">Add</button>
                        </div>
                    </div>
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="service" id="service1" value="option1">
                            <label class="form-check-label" for="service1">
                                Express Washing </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="service" id="service2" value="option2">
                            <label class="form-check-label" for="service2">
                                Express Washing
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="service" id="service3" value="option3">
                            <label class="form-check-label" for="service3">
                                Express Washing
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="service" id="service4" value="option4">
                            <label class="form-check-label" for="service4">
                                Express Washing
                            </label>
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="dropdown" class="form-label">Month</label>
                        <select class="form-select" id="dropdown">
                            <option selected>Select an option</option>
                            <option value="option1">January</option>
                            <option value="option2">February</option>
                            <option value="option3">March</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="textField1" class="form-label">Amount</label>
                        <input type="text" class="form-control" id="textField1">
                    </div>
                    <div class="mb-3">
                        <label for="textField2" class="form-label">Points</label>
                        <input type="text" class="form-control" id="textField2">
                    </div>
                    <div class="mb-3">
                        <label for="textField3" class="form-label">Phone Number</label>
                        <input type="text" class="form-control" id="textField3">
                    </div>
                    <div class="mb-3">
                        <label for="imageUpload" class="form-label">Image Upload</label>
                        <div class="file-upload">

<div class="image-upload-wrap">
                                <input class="file-upload-input" type='file' onchange="readURL(this);"
                                    accept="image/*" />
                                <div class="drag-text">
                                    <h3>Browse Image</h3>
                                </div>
                            </div>
                            <div class="file-upload-content">
                                <img class="file-upload-image" src="#" alt="your image" />
                                <div class="image-title-wrap">
                                    <button type="button" onclick="removeUpload()" class="remove-image">Remove <span
                                            class="image-title">Uploaded Image</span></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>

</div>
            <div class="modal-footer">
                <button type="button" class="de-btn-small">Add</button>
            </div>
        </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="deletePackage(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="servicesModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content de-modal-content">

</div>
            <div class="modal-footer">

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

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

function readyFunction(type) {

// 1- All,2-Pending,3-Public,4-Unpiblic

$.ajax({
        type: 'POST',
        url: baseUrl + 'admin/app/packages.php',
        data: {
            getData: 'getData',
            type: type
        },
        success: function(data) {
            $('#appendData').html('') // Removing html code
            // console.log(data)
            myDiv = document.getElementById("appendData");
            myDiv.innerHTML += data; // Assigning html code
        }
    })

}

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

function acceptPackage(id) {
    let pacakgeId = id
    $.ajax({
        type: 'POST',
        url: baseUrl + 'admin/app/packages.php',
        data: {
            accept: 'status',
            id: pacakgeId,
        },
        success: function(data) {

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

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

function declinePackage(id) {
    let pacakgeId = id
    $.ajax({
        type: 'POST',
        url: baseUrl + 'admin/app/packages.php',
        data: {
            decline: 'status',
            id: pacakgeId,
        },
        success: function(data) {

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

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

function changePacakgeStatus(id) {
    let Id = id
    let packageStatus = $('#' + Id).val();

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

$.ajax({
        type: 'POST',
        url: baseUrl + 'admin/app/packages.php',
        data: {
            status: 'status',
            id: pacakgeId,
            key: packageStatus
        },
        success: function(data) {

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

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

}

function getPackageId(id) {
    $('.yes').val(id);
}

function viewServices(packageId) {

$.ajax({
        type: 'POST',
        url: baseUrl + 'admin/app/packages.php',
        data: {
            services: 'get',
            packageId: packageId
        },
        success: function(data) {
            $('#servicesAppend').html(data)
        }
    })
}
</script>