JezK

Edit File: mypackages.php

<?php
include "header.php";
$id = $_SESSION['id'];
$numbers = intval(preg_replace('/[^0-9]/', '', $id));
$count = $user->getTotalMyPackages($numbers);
?>
<style>
/*Generic*/
.wrapper {
    margin: 60px auto;
    text-align: center;
}

/*Specific styling*/
#content {
    padding: 15px;
    border: solid 1px #eee;
    max-width: 660px;
    margin: auto;
    border-radius: 4px;
}

</style>
<input type="hidden" id="id1" value="<?php echo $numbers; ?>">
<section class="dark-bg">
    <h1 class="text-white">My Care Club</h1>
</section>
<section class="py-4">
    <div class="container">
           <span><a style="color:#00adef" href="http://localhost/detailing_edition_web/home.php">« Back to Home</a></span>
        <h2 class="text-center mb-4">Simple and transparent pricing</h2>
        <p class="text-center ">Straight to the point pricing plans. No surprises or hidden charges. All is clear.</p>

</div>

</div>
</section id="packages">
<div class="container">
    <div class="container">
        <div class="row my-3" id="appendData">
        </div>

</div>
    <div class="row row-cols-md-5" id="mypackageData">

</div>
    <div class="wrapper">
        <div class="container">
            <p id="pagination-here"></p>
        </div>
    </div>

<div class="mypackage-box">
        <div class="row mt-5">
            <div class="col-sm-3 col-md-4">
                <img src="./images/service.png" class="img-fluid">
            </div>
             <div class="col-sm-7 col-md-6">
                <div class="row mt-4">
                    <div class="col-6">
                        <label class="de-check"> Battery Water Top Up
                            <input type="checkbox" disabled checked="checked">
                            <span class="checkmark"></span>
                        </label>
                        <label class="de-check">Wiper Fluid Replacement
                            <input type="checkbox" disabled checked="checked">
                            <span class="checkmark"></span>
                        </label>
                        <label class="de-check">Car Wash
                            <input type="checkbox" disabled checked="checked">
                            <span class="checkmark"></span>
                        </label>
                        <label class="de-check"> Engine oil replacement
                            <input type="checkbox" disabled checked="checked">
                            <span class="checkmark"></span>
                        </label>
                        <label class="de-check"> Air filter cleaning
                            <input type="checkbox" disabled checked="checked">
                            <span class="checkmark"></span>
                        </label>
                    </div>
                    <div class="col-6">
                        <div class="form-check">
                            <label class="de-check"> Air filter cleaning
                                <input type="checkbox" checked="checked">
                                <span class="checkmark"></span>
                            </label>
                            <label class="de-check"> Air filter cleaning
                                <input type="checkbox" checked="checked">
                                <span class="checkmark"></span>
                            </label>
                            <label class="de-check"> Air filter cleaning
                                <input type="checkbox" checked="checked">
                                <span class="checkmark"></span>
                            </label>
                        </div>
                    </div>
                </div>

</div>
            <div class="col-sm-2 col-md-2">
                <p class="mp-text"> 1000 Points</p>
            </div>

</div>
    <div class="mypackage-box">
        <div class="row mt-5">
            <div class="col-sm-3 col-md-4">
                <img src="./images/service.png" class="img-fluid">
            </div>
            <div class="col-sm-7 col-md-6">
                <div class="row mt-4">
                    <div class="col-6">
                        <label class="de-check"> Battery Water Top Up
                            <input type="checkbox" disabled checked="checked">
                            <span class="checkmark"></span>
                        </label>
                        <label class="de-check">Wiper Fluid Replacement
                            <input type="checkbox" disabled checked="checked">
                            <span class="checkmark"></span>
                        </label>
                        <label class="de-check">Car Wash
                            <input type="checkbox" disabled checked="checked">
                            <span class="checkmark"></span>
                        </label>
                        <label class="de-check"> Engine oil replacement
                            <input type="checkbox" disabled checked="checked">
                            <span class="checkmark"></span>
                        </label>
                        <label class="de-check"> Air filter cleaning
                            <input type="checkbox" disabled checked="checked">
                            <span class="checkmark"></span>
                        </label>
                    </div>
                    <div class="col-6">
                        <div class="form-check">
                            <label class="de-check"> Air filter cleaning
                                <input type="checkbox" checked="checked">
                                <span class="checkmark"></span>
                            </label>
                            <label class="de-check"> Air filter cleaning
                                <input type="checkbox" checked="checked">
                                <span class="checkmark"></span>
                            </label>
                            <label class="de-check"> Air filter cleaning
                                <input type="checkbox" checked="checked">
                                <span class="checkmark"></span>
                            </label>
                        </div>
                    </div>
                </div>

</div>
            <div class="col-sm-2 col-md-2">
                <p class="mp-text"> 1000 Points</p>
            </div>

</div>
        <div class="row">
            <div class="col-4">
                <div class="row">
                    <div class="col-md-5">
                        <p class="fw-bold">Basic Service</p>
                        <p class="">Service: 2/6</p>
                    </div>
                    <div class="col-md-7">
                        <p class="">Expired on:
                            <span class="de-primary-color fw-bold">02-05-2023</span>
                        </p>
                        <p class="">Issued on: <span class="de-primary-color fw-bold">02-04-2023</span></p>
                    </div>
                </div>
            </div>
            <div class="col-8">
                <div class="d-flex justify-content-end">
                    <button class="de-btns de-blue-btn">View History</button>
                </div>
            </div>
        </div>
    </div>
</div>
<?php include "footer.php" ?>
<script>
let width = $(window).width();
let recordsPerPage;
if (width < 768) {
    recordsPerPage = 3; // set 3 records per page for small screens
} else {
    recordsPerPage = 4; // set 4 records per page for larger screens
}
$(document).ready(function() {
    let id = $('#id1').val();
    $.ajax({
        url: 'App/mypackages.php',
        type: "POST",
        data: {
            limit: recordsPerPage,
            offset: 0,
            id: id
        },
        success: function(data) {
            data1 = JSON.parse(data);
            $('#appendData').html(data1.mypackageData);
        }
    })
    $('#p1').click(function() {
        location.replace('packages.php');
    })
});
let pgCount = $('#pgCount').val();

let page_count = Math.ceil(pgCount / recordsPerPage);

$('#pagination-here').bootpag({
    total: page_count,
    page: 1,
    maxVisible: page_count,
    leaps: true,
    wrapClass: 'pagination',
    activeClass: 'active',
    disabledClass: 'disabled',
})

//page click action
$('#pagination-here').on("page", function(event, num) {
    $('#pgNum').val(num);
    var min = num * recordsPerPage - recordsPerPage;
    let id = $('#id1').val();
    $.ajax({
        url: 'App/mypackages.php',
        type: "POST",
        data: {
            limit: recordsPerPage,
            offset: min,
            id: id
        },
        success: function(data) {
            data1 = JSON.parse(data);
            $('#appendData').html(data1.mypackageData);
            $('#pgCount').val(data1.count);
        }
    })
});
</script>