[go: up one dir, main page]
Scribd
Upload
17 views79 pages

CAFECODEFILE

Uploaded by

manikandan1905213
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
17 views79 pages

CAFECODEFILE

Uploaded by

manikandan1905213
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 79

BASE.

HTML:

<!DOCTYPE html>
<html>
<head>
<title>{% block head_title %}{% endblock %}</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl
7+AMvyTG2x" crossorigin="anonymous">
<style>
.form-group {
margin-top: 10px;
}
</style>
{% block extra_head %}
{% endblock %}
</head>
<body>
{% block body %}

{% if messages %}
<div class="p-2">
{% for message in messages %}
<div class="text-center border-bottom">{{message}}</div>
{% endfor %}
</div>
{% endif %}
<div class="p-3 mb-3 bg-dark">
<div class="container d-flex justify-content-between">
{% if user.is_authenticated %}
<div><a class="text-light" href="{% url 'account_email' %}">Change E-
mail</a></div>
<div><a class="text-light" href="{% url 'home' %}">Home</a></div>
<div><a class="text-light" href="{% url 'account_logout' %}">Sign
Out</a></div>
{% else %}
<div><a class="text-light" href="{% url 'account_login' %}">Sign
In</a></div>
<div><a class="text-light" href="{% url 'account_signup' %}">Sign
Up</a></div>
{% endif %}
</div>
</div>
{% block content %}
{% endblock %}
{% endblock %}
{% block extra_body %}
{% endblock %}

<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.j
s"
integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehd
s+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>

LOGIN.HTML:

{% extends "account/base.html" %}

{% load i18n %}
{% load account socialaccount %}

{% load crispy_forms_filters %}

{% block head_title %}{% trans "Sign In" %}{% endblock %}

{% block content %}

<div class="text-center">
<h1>{% trans "Sign In" %}</h1>

{% get_providers as socialaccount_providers %}

{% if socialaccount_providers %}
<p>{% blocktrans with site.name as site_name %}Please sign in with one
of your existing third party accounts.<br>Or, <a href="{{ signup_url }}">sign
up</a>
for a {{ site_name }} account and sign in below:{% endblocktrans %}</p>

<div class="socialaccount_ballot">

<div class="socialaccount_providers">
{% include "socialaccount/snippets/provider_list.html" with process="login"
%}
</div>

<div class="login-or border-top border-bottom my-3">{% trans 'OR' %}</div>

</div>

{% include "socialaccount/snippets/login_extra.html" %}

{% else %}
<p>{% blocktrans %}If you have not created an account yet, then please
<a href="{{ signup_url }}">sign up</a> first.{% endblocktrans %}</p>
{% endif %}
</div>
<div class="row">
<div class="col-md-6 offset-md-3">
<form class="login" method="POST" action="{% url 'account_login' %}">
{% csrf_token %}

{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}"
value="{{ redirect_field_value }}" />
{% endif %}
<div class="d-grid">
<button class="primaryAction mt-3 btn btn-dark" type="submit">{% trans
"Sign In" %}</button><br>
<a class="button secondaryAction text-dark text-center" href="{% url
'account_reset_password' %}">{% trans "Forgot Password?" %}</a>
</div>
</form>
</div>
</div>
{% endblock %}

SIGNUP.HTML:

{% extends "account/base.html" %}

{% load i18n %}

{% load crispy_forms_filters %}

{% block head_title %}{% trans "Signup" %}{% endblock %}

{% block content %}
<div class="text-center">
<h1>{% trans "Sign Up" %}</h1>

<p>{% blocktrans %}Already have an account? Then please <a


href="{{ login_url }}">sign in</a>.{% endblocktrans %}</p>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">
<form class="signup" id="signup_form" method="post" action="{% url
'account_signup' %}">
{% csrf_token %}
{{ form|crispy }}
{% if redirect_field_value %}
<input type="hidden" name="{{ redirect_field_name }}"
value="{{ redirect_field_value }}" />
{% endif %}
<div class="d-grid mt-3">
<button class="btn btn-dark" type="submit">{% trans "Sign Up" %}</button>
</div>
</form>
</div>
</div>
{% endblock %}

ADD CATEGORY.HTML:

{% extends 'admin/base.html' %}

{% block title %}
Add Category
{% endblock %}

{% block breadcrumb %}
<div class="row mb-4 mt-2" style="height: 110px; background: linear-
gradient(90deg, #4B4B4B, #2C3E50);">
<div class="col-lg-8 mt-5">
<h2 style="font-size: 28px;font-weight: 700;color: #ffffff;" class="ml-
5"><b>Add Category</b></h2>
</div>
<div class="col-lg-3 mt-4">
<ul class="breadcrumb" style="background-color: #06A245;">
<li class="breadcrumb-item"><a href="{% url 'admin_page'
%}"><b>Admin</b></a></li>
<li class="breadcrumb-item"><a href="{% url 'categories'
%}"><b>Category</b></a></li>
<li style="color: rgb(187, 186, 183);" class="breadcrumb-item active"><b>Add
category</b></li>
</ul>
</div>
</div>
{% endblock %}

{% block content %}
<div class="container mt-4">
<div class="row justify-content-center">
<div class="col-md-8">
<form method="post" enctype="multipart/form-data" id="category-form">
{% csrf_token %}

<div class="form-group col-md-6">


<label for="id_name">Name:</label>
{{ form.name }}
{% if form.name.errors %}
<ul class="errorlist">
{% for error in form.name.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>

<div class="form-group col-md-6">


<label for="id_description">Description:</label>
{{ form.description }}
{% if form.description.errors %}
<ul class="errorlist">
{% for error in form.description.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>

<div class="form-group col-md-6">


<label for="id_image">Image:</label>
{{ form.image }}
{% if form.image.errors %}
<ul class="errorlist">
{% for error in form.image.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>

<div class="card" style="width: 44rem;">


<div class="card-body">
<h5 class="card-title">Image Preview</h5>
<div class="image_container">
<img id="blah" src="#" alt="Preview image" style="max-width: 100%;">
</div>
</div>
</div>

<button type="button" class="btn hvr-hover mt-3" id="crop_button">Crop


Image</button>
<button type="button" class="btn hvr-hover mt-3" id="submit-form">Create
Category</button>
</form>
</div>
</div>

</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.11/cropper.min.js"></
script>
<script>
// Function to preview selected image
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#blah').attr('src', e.target.result);
setTimeout(initCropper, 1000); // Initialize Cropper after image is loaded
};
reader.readAsDataURL(input.files[0]);
}
}

// Function to initialize Cropper


function initCropper() {
var image = document.getElementById('blah');
var cropper = new Cropper(image, {
aspectRatio: 1 / 1, // Set your desired aspect ratio (square in this case)
crop: function(e) {
console.log(e.detail.x);
console.log(e.detail.y);
}
});

// On crop button clicked


document.getElementById('crop_button').addEventListener('click', function() {
var imgurl = cropper.getCroppedCanvas().toDataURL();
var img = document.createElement("img");
img.src = imgurl;
document.getElementById("blah").src = imgurl; // Update preview with
cropped image
document.getElementById("id_image").value = imgurl; // Set cropped image
data to form field (hidden in Django forms)
});
}
// Submit the form via AJAX
$('#submit-form').on('click', function() {
var formData = new FormData($('#category-form')[0]);

$.ajax({
url: '{% url "create_category" %}',
method: 'POST',
data: formData,
processData: false,
contentType: false,
success: function(response) {
Swal.fire({
title: 'Success!',
text: response.message,
icon: 'success',
showConfirmButton: false,
timer: 1500
}).then(() => {
window.location.href = '{% url "categories" %}'; // Redirect to categories page
after success
});
},
error: function(xhr, status, error) {
Swal.fire({
title: 'Error!',
text: 'An error occurred while creating the category.',
icon: 'error',
showConfirmButton: true
});
}
});
});
</script>
{% endblock %}

ADD PRODUCT.HTML:

{% extends 'admin/base.html' %}
{% block breadcrumb %}
<div class="row mb-4 mt-2" style="height: 110px; background: linear-
gradient(90deg, #4B4B4B, #2C3E50);">
<div class="col-lg-8 mt-5">
<h2 style="font-size: 28px;font-weight: 700;color: #ffffff;" class="ml-
5"><b>Add Product</b></h2>
</div>
<div class="col-lg-3 mt-4">
<ul class="breadcrumb" style="background-color: #06A245;">
<li class="breadcrumb-item"><a href="{% url 'admin_page'
%}"><b>Admin</b></a></li>
<li class="breadcrumb-item"><a href="{% url 'products'
%}"><b>Product</b></a></li>
<li style="color: rgb(187, 186, 183);" class="breadcrumb-item active"><b>Add
product</b></li>
</ul>
</div>
</div>
{% endblock %}
{% block content %}
<div class="container mt-4">
<div class="row justify-content-center">
<div class="col-md-10">

<!-- Form for adding a product and product locations -->


<form method="POST" enctype="multipart/form-data" id="product-form">
{% csrf_token %}
<div class="form-row">
<div class="form-group col-md-6">
{{ productForm.name.label_tag }} {{ productForm.name }}
{% if productForm.name.errors %}
<ul class="errors">
{% for error in productForm.name.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
<div class="form-group col-md-6">
{{ productForm.category.label_tag }} {{ productForm.category }}
{% if productForm.category.errors %}
<ul class="errors">
{% for error in productForm.category.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>
<div class="form-group">
{{ productForm.description.label_tag }} {{ productForm.description }}
{% if productForm.description.errors %}
<ul class="errors">
{% for error in productForm.description.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
<div class="form-row">
<div class="form-group col-md-6">
{{ productForm.price.label_tag }} {{ productForm.price }}
{% if productForm.price.errors %}
<ul class="errors">
{% for error in productForm.price.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
<div class="form-group col-md-6">
{{ productForm.selling_price.label_tag }} {{ productForm.selling_price }}
{% if productForm.selling_price.errors %}
<ul class="errors">
{% for error in productForm.selling_price.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>
<div class="form-group">
{{ productForm.primary_image.label_tag }} {{ productForm.primary_image }}
{% if productForm.primary_image.errors %}
<ul class="errors">
{% for error in productForm.primary_image.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
<div class="form-group">
{{ productForm.unit_type.label_tag }} {{ productForm.unit_type }}
{% if productForm.unit_type.errors %}
<ul class="errors">
{% for error in productForm.unit_type.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>

<!-- Secondary Images -->


<div class="form-group">
<label for="secondary_images">Secondary Images</label>
<input type="file" name="secondary_images" multiple>
</div>

<!-- Render location checkboxes and corresponding quantity inputs -->


<div class="form-group">
<label for="locations">Select Locations and Enter Quantities:</label>
{% for location in locations %}
<div class="form-check mb-2">
<!-- Checkbox for the location -->
<input type="checkbox" name="locations" value="{{ location.id }}"
class="form-check-input" id="location-{{ location.id }}">
<label for="location-{{ location.id }}" class="form-check-
label">{{ location.name }}</label>

<!-- Quantity input for the location -->


<div class="quantity-input-container">
<input type="number" name="quantity_{{ location.id }}" class="form-control"
placeholder="Quantity" disabled>
</div>
</div>
{% endfor %}
</div>

<!-- Submit button -->


<button style="border-radius: .375rem;" type="submit" class="btn hvr-
hover">Add Product</button>
</form>
</div>
</div>
</div>
<script>
// JavaScript to enable or disable quantity inputs based on the
// selection of location checkboxes
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('product-form');
const checkboxes = document.querySelectorAll('input[type="checkbox"]
[name="locations"]');
const quantityInputs = document.querySelectorAll('.quantity-input-container
input[type="number"]');

// Add event listener to checkboxes


checkboxes.forEach(checkbox => {
const quantityInput = form.querySelector(`input[name="quantity_$
{checkbox.value}"]`);

checkbox.addEventListener('change', function() {
quantityInput.disabled = !this.checked;
if (!this.checked) {
quantityInput.value = ''; // Reset quantity input when checkbox is unchecked
}
});

// Initialize the state of the quantity input based on whether the checkbox is
checked
quantityInput.disabled = !checkbox.checked;
});
});
</script>
{% endblock %}

PRODUCT.HTML:

{% extends 'admin/base.html' %}

{% block title %}
Admin Panel
{% endblock %}
{% block breadcrumb %}
<div class="row mb-4 mt-2" style="height: 110px; background: linear-
gradient(90deg, #4B4B4B, #2C3E50);">
<div class="col-lg-8 mt-5">
<h2 style="font-size: 28px;font-weight: 700;color: #ffffff;" class="ml-
5"><b>Products</b></h2>
</div>
<div class="col-lg-2 mt-4">
<ul class="breadcrumb" style="background-color: #06A245;">
<li class="breadcrumb-item"><a href="{% url 'admin_page'
%}"><b>Admin</b></a></li>
<li style="color: rgb(187, 186, 183);" class="breadcrumb-item
active"><b>Products</b></li>
</ul>
</div>
<div class="col-2 mt-4">
<a href="{% url 'add_product' %}" style="border-radius: .375rem;" class="btn
hvr-hover mt-2">Add Product</a>
</div>
</div>
{% endblock %}
{% block content %}
<div class="container">
<table class="table">
<thead style="color: white; background-color: #7755A2;">
<tr>
<th scope="col">Name</th>
<th scope="col">Category</th>
<th scope="col">Price</th>
<th scope="col">Discount</th>
<th scope="col">Selling Price</th>
<th scope="col">Quantity</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody id="product-table-body">
{% for product in products %}
<tr class="table-success">
<td>
<div>{{ product.name }}</div>
<div>
<img src="{{ product.primary_image.url }}" alt="{{ product.name }}"
style="max-width: 80px;">
{% for image in product.secondaryimage_set.all %}
<img src="{{ image.image.url }}" alt="{{ product.name }}" class="img-
thumbnail" style="max-width: 50px;">
{% endfor %}
</div>
</td>
<td>{{ product.category }}</td>
<td>{{ product.price }}</td>
<td>{{ product.discount }}</td>
<td>{{ product.selling_price }}</td>
<td>
<div class="dropdown show">
<a class="btn btn-secondary dropdown-toggle" href="#" role="button"
id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-
expanded="false">
{{ product.total_quantity }}
</a>
<div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<table class="table table-bordered">
<thead>
<tr>
<th>Location</th>
<th>Quantity</th>
</tr>
</thead>
<tbody>
{% for product_location in product.productlocations_set.all %}
<tr>
<td>{{ product_location.location.name }}</td>
<td>{{ product_location.quantity }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</td>
<td>
<a href="{% url 'edit_product' product.id %}" class="btn hvr-hover"><i
class="fa-regular fa-pen-to-square"></i></a>
<a style="background-color: red;" href="{% url 'delete_product' product.id %}"
class="btn hvr-hover"><i class="fa-solid fa-trash"></i></a>
</td>
</tr>
{% endfor %}
</tbody>
</table>

<!-- Pagination Controls -->


<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center" id="pagination-controls">
<!-- Pagination items will be injected by JavaScript -->
</ul>
</nav>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
const itemsPerPage = 4;
const $productTableBody = $('#product-table-body');
const $paginationControls = $('#pagination-controls');
const $productRows = $productTableBody.children('tr');
const totalItems = $productRows.length;
const totalPages = Math.ceil(totalItems / itemsPerPage);

function showPage(page) {
const start = (page - 1) * itemsPerPage;
const end = start + itemsPerPage;

$productRows.hide();
$productRows.slice(start, end).show();

$paginationControls.empty();

if (page > 1) {
$paginationControls.append(`<li class="page-item"><a class="page-link"
href="#" data-page="${page - 1}">&laquo;</a></li>`);
} else {
$paginationControls.append(`<li class="page-item disabled"><span
class="page-link">&laquo;</span></li>`);
}

for (let i = 1; i <= totalPages; i++) {


if (i === page) {
$paginationControls.append(`<li class="page-item active"><span class="page-
link">${i}</span></li>`);
} else {
$paginationControls.append(`<li class="page-item"><a class="page-link"
href="#" data-page="${i}">${i}</a></li>`);
}
}

if (page < totalPages) {


$paginationControls.append(`<li class="page-item"><a class="page-link"
href="#" data-page="${page + 1}">&raquo;</a></li>`);
} else {
$paginationControls.append(`<li class="page-item disabled"><span
class="page-link">&raquo;</span></li>`);
}
}

$paginationControls.on('click', 'a', function(e) {


e.preventDefault();
const page = $(this).data('page');
showPage(page);
});

showPage(1);
});
</script>
{% endblock %}

EDIT_CATEGORY.HTML:

{% extends 'admin/base.html' %}

{% block breadcrumb %}
<div class="row mb-4 mt-2" style="height: 110px; background: linear-
gradient(90deg, #4B4B4B, #2C3E50);">
<div class="col-lg-8 mt-5">
<h2 style="font-size: 28px;font-weight: 700;color: #ffffff;" class="ml-
5"><b>Edit Category</b></h2>
</div>
<div class="col-lg-3 mt-4">
<ul class="breadcrumb" style="background-color: #06A245;">
<li class="breadcrumb-item"><a href="{% url 'admin_page'
%}"><b>Admin</b></a></li>
<li class="breadcrumb-item"><a href="{% url 'categories'
%}"><b>Category</b></a></li>
<li style="color: rgb(187, 186, 183);" class="breadcrumb-item active"><b>Edit
category</b></li>
</ul>
</div>
</div>
{% endblock %}

{% block content %}
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<form method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="form-group">
{{ form.name.label_tag }}
{{ form.name }}
{% if form.name.errors %}
<div class="alert alert-danger">
{% for error in form.name.errors %}
<p>{{ error }}</p>
{% endfor %}
</div>
{% endif %}
</div>
<div class="form-group">
{{ form.image.label_tag }}
{{ form.image }}
{% if form.image.errors %}
<div class="alert alert-danger">
{% for error in form.image.errors %}
<p>{{ error }}</p>
{% endfor %}
</div>
{% endif %}
</div>
<div class="form-group">
{{ form.description.label_tag }}
{{ form.description }}
{% if form.description.errors %}
<div class="alert alert-danger">
{% for error in form.description.errors %}
<p>{{ error }}</p>
{% endfor %}
</div>
{% endif %}
</div>
<button style="border-radius: .375rem;" type="submit" class="btn hvr-
hover">Save changes</button>
</form>
</div>
</div>
</div>

{% endblock %}

EDIT_PRODUCT.HMTL:

{% extends 'admin/base.html' %}
{% block breadcrumb %}
<div class="row mb-4 mt-2" style="height: 110px; background: linear-
gradient(90deg, #4B4B4B, #2C3E50);">
<div class="col-lg-8 mt-5">
<h2 style="font-size: 28px;font-weight: 700;color: #ffffff;" class="ml-
5"><b>Edit Product</b></h2>
</div>
<div class="col-lg-3 mt-4">
<ul class="breadcrumb" style="background-color: #06A245;">
<li class="breadcrumb-item"><a href="{% url 'admin_page'
%}"><b>Admin</b></a></li>
<li class="breadcrumb-item"><a href="{% url 'products'
%}"><b>Product</b></a></li>
<li style="color: rgb(187, 186, 183);" class="breadcrumb-item active"><b>Edit
product</b></li>
</ul>
</div>
</div>
{% endblock %}
{% block content %}
<div class="container mt-4">
<div class="row justify-content-center">
<div class="col-md-10">
<!-- Form for editing a product and product locations -->
<form method="POST" enctype="multipart/form-data" id="product-form">
{% csrf_token %}
<div class="form-row">
<div class="form-group col-md-6">
{{ productForm.name.label_tag }} {{ productForm.name }}
</div>
<div class="form-group col-md-6">
{{ productForm.category.label_tag }} {{ productForm.category }}
</div>
</div>
<div class="form-group">
{{ productForm.description.label_tag }} {{ productForm.description }}
{% if productForm.name.errors %}
<ul class="errors">
{% for error in productForm.name.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
<div class="form-row">
<div class="form-group col-md-6">
{{ productForm.price.label_tag }} {{ productForm.price }}
{% if productForm.price.errors %}
<ul class="errors">
{% for error in productForm.price.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
<div class="form-group col-md-6">
{{ productForm.selling_price.label_tag }} {{ productForm.selling_price }}
{% if productForm.selling_price.errors %}
<ul class="errors">
{% for error in productForm.selling_price.errors %}
<li>{{ error }}</li>
{% endfor %}
</ul>
{% endif %}
</div>
</div>
<div class="form-group">
{{ productForm.primary_image.label_tag }} {{ productForm.primary_image }}

</div>
<div class="form-group">
{{ productForm.unit_type.label_tag }} {{ productForm.unit_type }}
</div>
<div class="form-group">
<label for="secondary_images">Secondary Images</label>
<input type="file" name="secondary_images" multiple>
</div>

<!-- Render location checkboxes and corresponding quantity inputs -->


<div class="form-group">
<label for="locations">Select Locations and Enter Quantities:</label>
{% for location in locations %}
<div class="form-check mb-2">
<!-- Checkbox for the location -->
<input type="checkbox" name="locations" value="{{ location.id }}"
class="form-check-input" id="location-{{ location.id }}" {% if location.id in
product_locations %}checked{% endif %}>
<label for="location-{{ location.id }}" class="form-check-
label">{{ location.name }}</label>

<!-- Quantity input for the location -->


<div class="quantity-input-container">
<input type="number" name="quantity_{{ location.id }}" class="form-control"
placeholder="Quantity" value="{{ product_quantities|get_item:location.id }}"
{% if location.id not in product_locations %}disabled{% endif %}>
</div>
</div>
{% endfor %}
</div>

<!-- Submit button -->


<button style="border-radius: .375rem;" type="submit" class="btn hvr-
hover">Save Changes</button>
</form>
</div>
</div>
</div>
<!-- Inside the form -->
<div class="form-group">
<label for="secondary_images">Secondary Images</label>
{% for secondary_image in secondary_images %}
<div>
<img src="{{ secondary_image.image.url }}" alt="Secondary Image" style="
width: 100px;">
<form action="{% url 'delete_secondary_image' product.id secondary_image.id
%}" method="post">
{% csrf_token %}
<button type="submit">Delete</button>
</form>
</div>
{% endfor %}
</div>

<script>
// JavaScript to enable or disable quantity inputs based on the
// selection of location checkboxes
document.addEventListener('DOMContentLoaded', function() {
const form = document.getElementById('product-form');
const checkboxes = document.querySelectorAll('input[type="checkbox"]
[name="locations"]');
const quantityInputs = document.querySelectorAll('.quantity-input-container
input[type="number"]');

// Add event listener to checkboxes


checkboxes.forEach(checkbox => {
const quantityInput = form.querySelector(`input[name="quantity_$
{checkbox.value}"]`);

checkbox.addEventListener('change', function() {
quantityInput.disabled = !this.checked;
if (!this.checked) {
quantityInput.value = ''; // Reset quantity input when checkbox is unchecked
}
});

// Initialize the state of the quantity input based on whether the checkbox is
checked
quantityInput.disabled = !checkbox.checked;
});
});
</script>

{% endblock %}

CUSTOMERS.HTML:

{% extends 'admin/base.html' %}
{% block title %}
Customers - Admin Panel
{% endblock %}

{% block breadcrumb %}
<div class="row mb-4 mt-2" style="height: 110px; background: linear-
gradient(90deg, #4B4B4B, #2C3E50);">
<div class="col-lg-8 mt-5">
<h2 style="font-size: 28px;font-weight: 700;color: #ffffff;" class="ml-
5"><b>Customers</b></h2>
</div>
<div class="col-lg-3 mt-4">
<ul class="breadcrumb" style="background-color: #06A245;">
<li class="breadcrumb-item"><a href="{% url 'admin_page'
%}"><b>Admin</b></a></li>
<li style="color: rgb(187, 186, 183);" class="breadcrumb-item
active"><b>Customers</b></li>
</ul>
</div>
</div>
{% endblock %}

{% block content %}
<div class="container">
<table class="table">
<thead style="background-color: #7755A2; color: white;">
<tr>
<th scope="col">Username</th>
<th scope="col">Email</th>
<th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody id="customer-table-body">
{% for customer in customers %}
<tr class="table-success">
<td>{{ customer.username }}</td>
<td>{{ customer.email }}</td>
<td>
{% if customer.is_blocked == False %}
<p>Active</p>
{% else %}
<p>Blocked</p>
{% endif %}
</td>
<td>
<form method="post" action="{% url 'customers' customer.id %}">
{% csrf_token %}
{% if customer.is_blocked == False %}
<button style="background-color: red;" class="btn hvr-hover" type="submit"
name="status" value="blocked">Block</button>
{% else %}
<button class="btn hvr-hover" type="submit" name="status"
value="active">Unblock</button>
{% endif %}
</form>
</td>
</tr>
{% endfor %}
</tbody>
</table>

<!-- Pagination Controls -->


<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center" id="pagination-controls">
<!-- Pagination items will be injected by JavaScript -->
</ul>
</nav>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
const itemsPerPage = 7;
const $customerTableBody = $('#customer-table-body');
const $paginationControls = $('#pagination-controls');
const $customerRows = $customerTableBody.children('tr');
const totalItems = $customerRows.length;
const totalPages = Math.ceil(totalItems / itemsPerPage);

function showPage(page) {
const start = (page - 1) * itemsPerPage;
const end = start + itemsPerPage;

$customerRows.hide();
$customerRows.slice(start, end).show();
$paginationControls.empty();

if (page > 1) {
$paginationControls.append(`<li class="page-item"><a class="page-link"
href="#" data-page="${page - 1}">&laquo;</a></li>`);
} else {
$paginationControls.append(`<li class="page-item disabled"><span
class="page-link">&laquo;</span></li>`);
}

for (let i = 1; i <= totalPages; i++) {


if (i === page) {
$paginationControls.append(`<li class="page-item active"><span class="page-
link">${i}</span></li>`);
} else {
$paginationControls.append(`<li class="page-item"><a class="page-link"
href="#" data-page="${i}">${i}</a></li>`);
}
}

if (page < totalPages) {


$paginationControls.append(`<li class="page-item"><a class="page-link"
href="#" data-page="${page + 1}">&raquo;</a></li>`);
} else {
$paginationControls.append(`<li class="page-item disabled"><span
class="page-link">&raquo;</span></li>`);
}
}
$paginationControls.on('click', 'a', function(e) {
e.preventDefault();
const page = $(this).data('page');
showPage(page);
});

showPage(1);
});
</script>
{% endblock %}

DASHBOARD.HTML:

{% extends 'admin/base.html' %}

{% block title %}Sales Reports - 2024{% endblock %}


{% block breadcrumb %}
<div class="row mb-4 mt-2" style="height: 110px; background: linear-
gradient(90deg, #4B4B4B, #2C3E50);">
<div class="col-lg-8 mt-5">
<h2 style="font-size: 28px;font-weight: 700;color: #ffffff;" class="ml-
5"><b>Dashboard</b></h2>
</div>
<div class="col-sm-3 mt-4">
<ul class="breadcrumb" style="background-color: #06A245;">
<li class="breadcrumb-item"><a href="{% url 'admin_page'
%}"><b>Admin</b></a></li>
<li style="color: rgb(187, 186, 183);" class="breadcrumb-item
active"><b>Dashboard</b></li>
</ul>
</div>
</div>
{% endblock %}
{% block content %}
<style>
body {
background-color: rgb(37, 34, 37);
}
.header {
background-color: #7755A2;
color: white;
padding: 10px;
text-align: center;
margin-bottom: 20px;
}
.card {
background-color: #c2a7e5;
color: black;
border-radius: 8px;
padding: 16px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.card h2 {
color: black;
margin-bottom: 15px;
}
.list-group {
list-style: none;
padding: 0;
}
.list-group-item {
background-color: #7755A2;
color: white;
padding: 10px;
border-bottom: 1px solid #ddd;
}
.list-group-item:last-child {
border-bottom: none;
}
.serial-number {
width: 30px;
display: inline-block;
text-align: center;
margin-right: 10px;
color: #06A245;
}
.float-end {
float: right;
}
.chart-container {
position: relative;
height: 400px;
width: 100%;
}
</style>

<div class="header">
<h1>Sales Reports - 2024</h1>
</div>

<div class="container mt-4">


<h1>Dashboard</h1>
<div class="form-group">
<label for="timeframe">Select Timeframe:</label>
<select id="timeframe" class="form-control">
<option value="weekly">Weekly</option>
<option value="monthly">Monthly</option>
<option value="yearly">Yearly</option>
</select>
</div>
<div class="row">
<div class="col-md-6 chart-container">
<canvas id="ordersChart"></canvas>
</div>
<div class="col-md-6 chart-container">
<canvas id="revenueChart"></canvas>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="card">
<h2>Best Selling Products</h2>
<ul class="list-group">
{% for product in best_selling_product %}
<li class="list-group-item">
<span class="serial-number">{{ forloop.counter }}</span>
<span>{{ product.product__product }}</span>
<span class="float-end">{{ product.total_quantity }}</span>
</li>
{% endfor %}
</ul>
</div>
</div>
<div class="col-md-6">
<div class="card">
<h2>Top 10 Categories</h2>
<ul class="list-group">
{% for category in category_sales %}
<li class="list-group-item">
<span class="serial-number">{{ forloop.counter }}</span>
<span>{{ category.product__category }}</span>
<span class="float-end">{{ category.total_quantity }}</span>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
const timeframeSelect = document.getElementById('timeframe');

timeframeSelect.addEventListener('change', updateCharts);

function updateCharts() {
const timeframe = timeframeSelect.value;

fetch(`/vgadmin/dashboard/data/?timeframe=${timeframe}`)
.then(response => response.json())
.then(data => {
updateChart(ordersChart, data.orders_data, 'Total Orders');
updateChart(revenueChart, data.revenue_data, 'Total Revenue');
});
}

function updateChart(chart, data, label) {


chart.data.labels = data.map(item => item.date);
chart.data.datasets[0].data = data.map(item => item.total);
chart.data.datasets[0].label = label;
chart.update();
}

const ordersCtx = document.getElementById('ordersChart').getContext('2d');


const revenueCtx = document.getElementById('revenueChart').getContext('2d');

const ordersChart = new Chart(ordersCtx, {


type: 'bar',
data: {
labels: [],
datasets: [{
label: 'Total Orders',
data: [],
borderColor: '#06A245',
backgroundColor: '#06A245',
borderWidth: 2,
barThickness: 60,
hoverBackgroundColor: 'rgba(6, 162, 69, 0.8)'
}]
},
options: {
scales: {
x: {
ticks: {
color: 'black',
font: {
size: 14,
weight: 'bold'
}
},
grid: {
color: 'rgba(255, 255, 255, 0.1)'
}
},
y: {
ticks: {
color: 'black',
font: {
size: 14,
weight: 'bold'
}
},
grid: {
color: 'rgba(255, 255, 255, 0.1)'
}
}
}
}
});

const revenueChart = new Chart(revenueCtx, {


type: 'bar',
data: {
labels: [],
datasets: [{
label: 'Total Revenue',
data: [],
borderColor: '#7755A2',
backgroundColor: '#7755A2',
borderWidth: 2,
barThickness: 60,
hoverBackgroundColor: 'rgba(119, 85, 162, 0.8)'
}]
},
options: {
scales: {
x: {
ticks: {
color: 'black',
font: {
size: 14,
weight: 'bold'
}
},
grid: {
color: 'rgba(255, 255, 255, 0.1)'
}
},
y: {
ticks: {
color: 'black',
font: {
size: 14,
weight: 'bold'
}
},
grid: {
color: 'rgba(255, 255, 255, 0.1)'
}
}
}
}
});

updateCharts();
});
</script>
{% endblock %}

REPORT.HTML:

{% extends 'admin/base.html' %}

{% block title %} Report page {% endblock %}


{% block breadcrumb %}
<div class="row mb-4 mt-2" style="height: 110px; background: linear-
gradient(90deg, #4B4B4B, #2C3E50);">
<div class="col-lg-8 mt-5">
<h2 style="font-size: 28px;font-weight: 700;color: #ffffff;" class="ml-
5"><b>Report </b></h2>
</div>
<div class="col-lg-2 mt-4">
<ul class="breadcrumb" style="background-color: #06A245;">
<li class="breadcrumb-item"><a href="{% url 'admin_page'
%}"><b>Admin</b></a></li>
<li style="color: rgb(187, 186, 183);" class="breadcrumb-item
active"><b>Report</b></li>
</ul>
</div>
</div>
{% endblock %}
{% block content %}
<div class="container mt-5 col-6">
<h2>Select Report Type</h2>
<form method="POST" action="">
{% csrf_token %}
<div class="mb-3">
<div class="form-check">
<input type="radio" class="form-check-input" name="report_type"
value="daily" id="daily" checked>
<label class="form-check-label" for="daily">Daily</label>
</div>

<div class="form-check">
<input type="radio" class="form-check-input" name="report_type"
value="weekly" id="weekly">
<label class="form-check-label" for="weekly">Weekly</label>
</div>

<div class="form-check">
<input type="radio" class="form-check-input" name="report_type"
value="monthly" id="monthly">
<label class="form-check-label" for="monthly">Monthly</label>
</div>

<div class="form-check">
<input type="radio" class="form-check-input" name="report_type"
value="yearly" id="yearly">
<label class="form-check-label" for="yearly">Yearly</label>
</div>

<div class="form-check">
<input type="radio" class="form-check-input" name="report_type"
value="custom" id="custom">
<label class="form-check-label" for="custom">Custom Date Range</label>
</div>
</div>

<div class="mb-9" id="custom-date-range" style="display: none;">


<label for="custom_start_date">From:</label>
<input type="date" class="form-control" name="custom_start_date"
id="custom_start_date">

<label for="custom_end_date" class="mt-2">To:</label>


<input type="date" class="form-control" name="custom_end_date"
id="custom_end_date">
</div>
{% if msg %}
<div class="form-control">
<p class="danger">{{ msg }}</p>
</div>
{% endif %}
<button type="submit" class="btn btn-primary">Generate Report</button>
</form>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
const reportTypeInputs =
document.querySelectorAll('input[name="report_type"]');
const customDateRange = document.getElementById('custom-date-range');
reportTypeInputs.forEach(input => {
input.addEventListener('change', function() {
if (this.value === 'custom') {
customDateRange.style.display = 'block';
} else {
customDateRange.style.display = 'none';
}
});
});
});
</script>

{% endblock %}

ORDERS.HTML:

{% extends 'customer/base.html' %}
{% load static %}
{% block breadcrumb %}
<div class="all-title-box">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>My Account</h2>
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="{% url 'home_page'
%}">Shop</a></li>
<li class="breadcrumb-item"><a href="{% url 'user_profile' %}">My
account</a></li>
<li class="breadcrumb-item active">Order</li>
</ul>
</div>
</div>
</div>
</div>
{% endblock %}
{% block content %}

<div class="container mt-4">


<h1 class="text-center">Order Details</h1>
<div id="orders-container">
{% for order in orders %}
<div class="order-item card mb-3 border-0" style="box-shadow: 5px 5px 10px
#888888;">
<div class="card-header py-2" style="background-color: #7755A2; color:
white;">
Order ID: {{ order.id }}
</div>
<div class="card-body py-2">
<div class="row">
<div class="col-md-6">
<h5 class=""><b>Order Date: </b>{{ order.created_at }}</h5>
<h5 class=""><b>Payment Method:</b>{{ order.payment_method }}</h5>
</div>
<div class="col-md-6">
<h5 class=""><b>Total Price: </b>{{ order.total_price }}</h5>
<h5 class=""><b>Payment Status: </b>{{ order.order_payment_status }}</h5>
</div>
</div>
<div class="row mt-2">
<div class="col-md-12">
<p class=""><b>Address:</b><br>
<strong>Name:</strong> {{ order.address_info.firstname }}
{{ order.address_info.lastname }}
<strong>Phone:</strong> {{ order.address_info.phone_number }}<br>
<strong>Address:</strong> {{ order.address_info.street_address }},
{{ order.address_info.city }}, {{ order.address_info.state }},
{{ order.address_info.pincode }}<br>
<strong>Landmark:</strong> {{ order.address_info.landmark }}
</p>
</div>
</div>
</div>
<div class="card-footer py-2 text-muted" style="background-color: #06A245;
display: flex; justify-content: space-between; align-items: center;">
<a href="{% url 'order_detail' order.id %}" class="btn hvr-hover">More
Details</a>
{% if order.order_payment_status == 'pending' or order.order_payment_status
== 'failed' %}
{% if order.total_price > 0 %}<a href="{% url 'failed_payment' order.id %}"
class="btn hvr-hover">Pay now</a> {% endif %}

{% endif %}
</div>
</div>
{% endfor %}
</div>
<nav aria-label="Page navigation example">
<ul class="pagination justify-content-center" id="pagination">
<!-- Pagination items will be added here by JavaScript -->
</ul>
</nav>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
const rowsPerPage = 3;
const ordersContainer = document.getElementById('orders-container');
const pagination = document.getElementById('pagination');
const orderItems = ordersContainer.querySelectorAll('.order-item');
const totalPages = Math.ceil(orderItems.length / rowsPerPage);
let currentPage = 1;

function displayOrders(page) {
ordersContainer.innerHTML = '';
const start = (page - 1) * rowsPerPage;
const end = start + rowsPerPage;
const ordersArray = Array.from(orderItems);
const ordersToDisplay = ordersArray.slice(start, end);
ordersToDisplay.forEach(order => ordersContainer.appendChild(order));
}

function updatePagination() {
pagination.innerHTML = '';
for (let i = 1; i <= totalPages; i++) {
const li = document.createElement('li');
li.classList.add('page-item');
if (i === currentPage) li.classList.add('active');
const a = document.createElement('a');
a.classList.add('page-link');
a.style.backgroundColor = '#06A245'; // Change the button color
a.style.color = '#fff'; // Set the text color
a.textContent = i;
a.href = '#';
a.addEventListener('click', (e) => {
e.preventDefault();
currentPage = i;
displayOrders(currentPage);
updatePagination();
});
li.appendChild(a);
pagination.appendChild(li);
}
}

displayOrders(currentPage);
updatePagination();
});
</script>

{% endblock %}
PAYMENT.HTML:

{% extends 'home/index.html' %}

{% block content %}
<div style="align-content: center;">
<form style="margin-left: 45%;" action="{% url 'verify_payment' %}"
method="POST" id="payment-form">
{% csrf_token %}
<input type="hidden" name="razorpay_payment_id"
id="razorpay_payment_id">
<input type="hidden" name="razorpay_order_id" id="razorpay_order_id">
<input type="hidden" name="razorpay_signature" id="razorpay_signature">
<input type="hidden" name="order_id" value="{{ order_id }}">
<button class="hover hvr-hover" id="rzp-button1" type="button">Pay
Now</button>
</form>
</div>

<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
var options = {
key: "{{ key_id }}", // Your Razorpay key ID
amount: "{{ amount }}", // Amount in paise (make sure it is an integer)
currency: "INR",
name: "VegiGo", // Your business name
description: "Order Payment",
order_id: "{{ order_id }}", // Order ID from backend
handler: function(response) {
// Set the response data to the hidden form inputs
document.getElementById('razorpay_payment_id').value =
response.razorpay_payment_id;
document.getElementById('razorpay_order_id').value =
response.razorpay_order_id;
document.getElementById('razorpay_signature').value =
response.razorpay_signature;

// Submit the form to verify the payment


document.getElementById('payment-form').submit();
},
prefill: {
// Optional: Prefill customer information
name: "{{ request.user.username }}",
email: "{{ request.user.email }}"
},
theme: {
color: "#F37254" // Customize the color of the Razorpay interface
}
};

var rzp1 = new Razorpay(options);


document.getElementById('rzp-button1').onclick = function(e) {
rzp1.open();
e.preventDefault();
};
</script>
{% endblock %}
ORDER DETAIL.HTML:

{% extends 'customer/base.html' %}

{% block breadcrumb %}
<div class="all-title-box">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>My Account</h2>
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="{% url 'home_page' %}">Shop</a></li>
<li class="breadcrumb-item"><a href="{% url 'orders_page' %}">Orders</a></li>
<li class="breadcrumb-item active">Order Details</li>
</ul>
</div>
</div>
</div>
</div>
{% endblock %}

{% block content %}

<style>
.gradient-custom {
background: #7755A2;
}
</style>
<h1> Order details</h1>

<section class="h-100 gradient-custom">


<div class="container py-4 h-100">
<div class="row d-flex justify-content-center align-items-center h-100">
<div class="col-lg-12 col-xl-9">
<div class="card" style="border-radius: 10px;">
<div class="card-header">
<h5 class="text-muted mb-0">Thanks for your Order, <span style="color:
#06A245;">{{ order.user.username }}</span>!</h5>
</div>
<div class="card-body">
<div class="card shadow-0 border mb-4 mt-1">
<div class="card-body">
{% for item in items %}
<div class="row mt-2">
<div class="col-md-2">
<img src="{{ item.image.url }}" class="img-fluid" alt="Product Image">
</div>
<div class="col-md-2 text-center d-flex justify-content-center align-items-center">
<p class="text-muted mb-0"><b>{{ item.product.product }}</b></p>
</div>
<div class="col-md-2 text-center d-flex justify-content-center align-items-center">
<p class="text-muted mb-0 small">Qty: {{ item.quantity }}</p>
</div>
<div class="col-md-2 text-center d-flex justify-content-center align-items-center">
<p class="text-muted mb-0 small">{{ item.subtotal }}</p>
</div>
</div>

<div class="row d-flex align-items-center">


<div class="col-md-2">
<p class="text-muted mb-0 small">Track Order</p>
</div>
<div class="col-md-10">
<div class="d-flex justify-content-around mb-1">
<p class="text-muted mt-1 mb-0 small ms-xl-5">{{ item.payment_status }}</p>
<p>{{ item.status }}</p>
{% if item.status == 'delivered' %}
<a href="{% url 'return_request' item.id %}" class="btn hvr-hover">Return</a>
{% elif item.status == 'Return Requested' %}
<p>Return requested</p>
{% elif item.status == 'completed' %}
<p>Completed</p>
{% elif item.status == 'returned' %}
<p>{{ item.status }}</p>
{% elif item.status != 'cancelled' %}
<button type="button" class="btn hvr-hover" data-toggle="modal" data-
target="#exampleModal{{ item.id }}">
Cancel
</button>
{% endif %}

<!-- Modal -->


<div class="modal fade" id="exampleModal{{ item.id }}" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel{{ item.id }}" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel{{ item.id }}">Cancel Order</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to cancel this order item?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<a class="btn hvr-hover" href="{% url 'user_order_cancel' item.id %}">Confirm</a>
</div>
</div>
</div>
</div>
<!-- Modal end -->
</div>
</div>
</div>
<hr class="mb-4" style="background-color: #06A245; opacity: 1;">
{% endfor %}
</div>
</div>
<div class="d-flex justify-content-between pt-2">
<p class="fw-bold mb-0">Order Details</p>
<p class="text-muted mb-0"><span class="fw-bold me-4">Total</span> {{ order.total_price }}</p>
</div>
<div class="d-flex justify-content-between pt-2">
<p class="text-muted mb-0">Order Number: {{ order.id }}</p>
<p class="text-muted mb-0"><span class="fw-bold me-4">Discount</span>
{{ order.total_discount }}</p>
</div>
<div class="d-flex justify-content-between mb-5">
<p class="text-muted mb-0">Download invoice:
<a href="{% url 'download_invoice' order.id %}">Download Invoice</a>
</p>
<p class="text-muted mb-0"><span class="fw-bold me-4">Delivery Charges</span> Free</p>
</div>
</div>
<div class="card-footer border-0 px-4 py-5" style="background-color: #06A245; border-bottom-left-
radius: 10px; border-bottom-right-radius: 10px;">
<h5 class="d-flex align-items-center justify-content-end text-white text-uppercase mb-0">Total paid:
<span class="h2 mb-0 ms-2">{{ order.total_price }}</span></h5>
</div>
</div>
</div>
</div>
</div>
</section>
{% endblock %}

ADDRESS.HTML:

{% extends 'customer/base.html' %}

{% block title %}
Address
{% endblock %}

{% block breadcrumb %}
<div class="all-title-box">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>My Account</h2>
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="{% url 'home_page' %}">Home</a></li>
<li class="breadcrumb-item active">{% if user.is_authenticated %}
<a href="{% url 'user_profile' %}"> My Account</a>
{% endif %}</li>
<li class="breadcrumb-item active">Address</li>
</ul>
</div>
</div>
</div>
</div>
{% endblock %}

{% block content %}
<div class="card text-center">
<div class="card-body">
<div class="card-header">
Manage Address
</div>
<div class="card-footer text-muted ml-5">
{% if userAddress %}
<div class="alert alert-info" role="alert">
<div id="address-list">
{% for address in addresses %}
<div class="d-flex justify-content-between align-items-center address-row" style="border: 1px solid
#7755A2; text-align: left; margin-top: 5px;">
<div class="col-8">
<div class="col-2 mt-2" style="background-color: #06A245; color: white;">
<b>{{ address.address_type }}</b>
</div>
<p>Name: <b>{{ address.firstname }} {{ address.lastname }}</b> | Phone: <b>{{ address.phone_number
}}</b></p>
<p>Full Address: {{ address.street_address }} </p>
<p>{{ address.city }} {{ address.district }} {{ address.pincode }} ({{ address.landmark }})</p>
</div>
<div>
<!-- Dropdown menu links -->
<a class="btn hvr-hover" href="{% url 'edit_address' address.id %}?return_url=user_address"><i
class="fa-regular fa-pen-to-square"></i></a>
<!-- Button trigger modal -->
<button type="button" style="background-color: red;" class="btn hvr-hover" data-toggle="modal" data-
target="#deleteModal{{ address.id }}">
<i class="fa-solid fa-trash"></i>
</button>

<!-- Modal -->


<div class="modal fade" id="deleteModal{{ address.id }}" tabindex="-1" role="dialog" aria-
labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Delete Address</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<h1>Are you sure you want to delete this address?</h1>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<a class="btn hvr-hover" style="background-color: red; margin-right: 5px;" href="{% url 'delete_address'
address.id %}">Confirm</a>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>

<!-- Pagination Controls -->


<nav aria-label="Page navigation">
<ul class="pagination justify-content-center" id="pagination-controls">
<!-- Pagination links will be inserted here by JavaScript -->
</ul>
</nav>
</div>
{% else %}
<div class="alert alert-info" role="alert">
There is no address
</div>
{% endif %}
</div>
</div>
</div>
<h1>Add Address</h1>
<form method="POST" id="edit-address-form" class="custom-form">
{% csrf_token %}
{% if form.non_field_errors %}
<div class="alert alert-danger">
{% for error in form.non_field_errors %}
<p>{{ error }}</p>
{% endfor %}
</div>
{% endif %}
<div class="form-row">
<div class="form-group col-md-6">
<label for="firstname" class="primary-color">First Name:</label>
{{ form.firstname }}
{% if form.firstname.errors %}
<div class="text-danger">
{% for error in form.firstname.errors %}
<p>{{ error }}</p>
{% endfor %}
</div>
{% endif %}
</div>
<div class="form-group col-md-6">
<label for="lastname" class="primary-color">Last Name:</label>
{{ form.lastname }}
{% if form.lastname.errors %}
<div class="text-danger">
{% for error in form.lastname.errors %}
<p>{{ error }}</p>
{% endfor %}
</div>
{% endif %}
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="phone_number" class="primary-color">Phone Number:</label>
{{ form.phone_number }}
{% if form.phone_number.errors %}
<div class="text-danger">
{% for error in form.phone_number.errors %}
<p>{{ error }}</p>
{% endfor %}
</div>
{% endif %}
</div>
<div class="form-group col-md-6">
<label for="street_address" class="primary-color">Street Address:</label>
{{ form.street_address }}
{% if form.street_address.errors %}
<div class="text-danger">
{% for error in form.street_address.errors %}
<p>{{ error }}</p>
{% endfor %}
</div>
{% endif %}
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="city" class="primary-color">City:</label>
{{ form.city }}
{% if form.city.errors %}
<div class="text-danger">
{% for error in form.city.errors %}
<p>{{ error }}</p>
{% endfor %}
</div>
{% endif %}
</div>
<div class="form-group col-md-6">
<label for="state" class="primary-color">District:</label>
{{ form.district }}
{% if form.district.errors %}
<div class="text-danger">
{% for error in form.district.errors %}
<p>{{ error }}</p>
{% endfor %}
</div>
{% endif %}
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="landmark" class="primary-color">Landmark:</label>
{{ form.landmark }}
{% if form.landmark.errors %}
<div class="text-danger">
{% for error in form.landmark.errors %}
<p>{{ error }}</p>
{% endfor %}
</div>
{% endif %}
</div>
<div class="form-group col-md-6">
<label for="pincode" class="primary-color">Pincode:</label>
{{ form.pincode }}
{% if form.pincode.errors %}
<div class="text-danger">
{% for error in form.pincode.errors %}
<p>{{ error }}</p>
{% endfor %}
</div>
{% endif %}
</div>
</div>
<div class="form-group">
<label class="primary-color">Location:</label><br>
{{ form.address_type }}
{% if form.address_type.errors %}
<div class="text-danger">
{% for error in form.address_type.errors %}
<p>{{ error }}</p>
{% endfor %}
</div>
{% endif %}
</div>

<button type="submit" class="btn btn-primary">Submit</button>


</form>
{% endblock %}

<script>
document.addEventListener('DOMContentLoaded', function() {
const itemsPerPage = 2;
const addressList = document.querySelectorAll('.address-row');
const paginationControls = document.getElementById('pagination-controls');

function showPage(page) {
const start = (page - 1) * itemsPerPage;
const end = start + itemsPerPage;
addressList.forEach((item, index) => {
if (index >= start && index < end) {
item.style.display = 'flex';
} else {
item.style.display = 'none';
}
});
}

function createPaginationControls(totalItems, itemsPerPage) {


const totalPages = Math.ceil(totalItems / itemsPerPage);
paginationControls.innerHTML = '';
for (let i = 1; i <= totalPages; i++) {
const pageLink = document.createElement('li');
pageLink.className = 'page-item';
pageLink.innerHTML = `<a class="page-link" href="#">${i}</a>`;
pageLink.addEventListener('click', (e) => {
e.preventDefault();
showPage(i);
document.querySelectorAll('.page-item').forEach(item => item.classList.remove('active'));
pageLink.classList.add('active');
});
paginationControls.appendChild(pageLink);
}

if (totalPages > 0) {
paginationControls.firstChild.classList.add('active');
}
}

createPaginationControls(addressList.length, itemsPerPage);
showPage(1);
});
</script>

PROFILE.HTML:

{% extends 'home/index.html' %}

{% load static %}

{% block content %}

<!-- Start All Title Box -->


<div class="all-title-box">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>My Account</h2>
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="{% url 'home_page' %}">Home</a></li>
<li class="breadcrumb-item active">My account</li>
</ul>
</div>
</div>
</div>
</div>
<!-- End All Title Box -->
<div style="justify-content: center;display:flex;">
<div class="card col-md-8">
<div class="card-header">
<b style="color: #7755A2; font-size: 36px;">My dashboard</b>
</div>
<div class="card-body">
<h4><b>Hello {{ customer.username }}, </b></h4>
<p>From your My Account Dashboard you have the ability to view a snapshot of your recent account
activity and update your account information. Select a link below to view or edit information.</p>
<BR></BR>
<h4><b>ACCOUNT INFORMATION</b></h4>
<table class="table">
<thead style="background-color: #7755A2; color: white;">
<tr>
<td scope="col">Contact Information</td>
<td scope="col">Default Address</td>
</tr>
</thead>
<tbody>
<tr class="table-success">
<td><p>{{customer.first_name}} {{customer.last_name}}</p>
<p>{{ customer.username }},</p>
<p>{{ customer.email }}</p>

</td>
<td >sivasialamadom</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>

<!-- Start My Account -->


<div class="my-account-box-main">
<div class="container">
<div class="my-account-page">
<div class="row">
<div class="col-lg-4 col-md-12">
<div class="account-box">
<div class="service-box">
<div class="service-icon">
{% if user.is_authenticated %}
<a href="{% url 'orders_page' %}"> <i class="fa fa-gift"></i> </a>
{% else %}
<a href="#"> <i class="fa fa-gift"></i> </a>
{% endif %}

</div>
<div class="service-desc">
<h4>Your Orders</h4>
<p>Track, return, or buy things again</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12">
<div class="account-box">
<div class="service-box">
<div class="service-icon">
{% if user.is_authenticated %}
<a href="{% url 'edit_profile' %}"><i class="fa fa-lock"></i></a>

{% else %}
<a href=""><i class="fa fa-user s_color"></i> My Account</a>
{% endif %}
</div>
<div class="service-desc">
<h4>User profile</h4>
<p>Edit login, name, and gmail</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12">
<div class="account-box">
<div class="service-box">
<div class="service-icon">
{% if user.is_authenticated %}
<a href="{% url 'address_page' %}"> <i class="fa fa-location-arrow"></i></a>

{% endif %}</li>
</div>
<div class="service-desc">
<h4>Your Addresses</h4>
<p>Edit addresses for orders and gifts</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12">
<div class="account-box">
<div class="service-box">
<div class="service-icon">
<a href="{% url 'wallet_page' %}"> <i class="fa fa-credit-card"></i> </a>
</div>
<div class="service-desc">
<h4>Wallet</h4>
<p>See your wallet</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12">
<div class="account-box">
<div class="service-box">
<div class="service-icon">
<a href="{% url 'cart_page' %}"> <i class="fa fa-credit-card"></i> </a>
</div>
<div class="service-desc">
<h4>Cart</h4>
<p>Go to cart</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-12">
<div class="account-box">
<div class="service-box">
<div class="service-icon">
<a href="{% url 'wishlist_page' %}"> <i class="fa fa-credit-card"></i> </a>
</div>
<div class="service-desc">
<h4>Wishlist</h4>
<p>See your wishlist</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End My Account -->
{% endblock %}

CART.HTML:

{% extends 'customer/base.html' %}

{% load static %}
{% block breadcrumb %}
<div class="all-title-box">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>My Account</h2>
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="{% url 'shop_page' %}">Shop</a></li>
<li class="breadcrumb-item"><a href="{% url 'user_profile' %}">My Account</a></li>
<li class="breadcrumb-item active">Cart</li>
</ul>
</div>
</div>
</div>
</div>
{% endblock %}

{% block content %}

<!-- Start Cart -->


<div class="cart-box-main">
<div class="container">
<form id="branch-select-form" method="POST" action="{% url 'update_cart_location' %}">
{% csrf_token %}
<div class="form-group">
<label for="branch-select">Select Branch:</label>
<select name="branch_id" id="branch-select" class="form-control">
<option value="{{ cart.location.id }}" >{{ cart.location.name }}</option>
{% for branch in branches %}
<option value="{{ branch.id }}">{{ branch.name }}</option>
{% endfor %}
</select>
<input type="hidden" name="cart_id" value="{{ cart.id }}">
<button type="submit" style="display: none;">Submit</button> <!-- Hidden submit button -->
</div>
</form>

<div class="cart-box-main">
<div class="container">

<input type="hidden" name="cart_id" value="{{ cart.id }}">


<div class="row">
<div class="col-lg-12">
<div class="table-main table-responsive">
<table class="table" style="background-color: white;">
<thead>
<tr>
<th>Images</th>
<th>Product Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Unit</th>
<th>Total</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
{% if items %}
{% for item in items %}
<tr>
<td class="thumbnail-img">
<a href="#">
<img class="img-fluid" src="{{ item.product.primary_image.url }}" alt="{{ item.product.name }}" />
</a>
</td>
<td class="name-pr">
<a href="{% url 'product_shop_page' item.product.id %}">{{ item.product.name }}</a>
</td>
<td class="price-pr">{{item.product.special_discount|floatformat:2}} </td>
<td>
{% if item.max_quantity > 0 %}

<button class="minus-button"><i class="fa-solid fa-minus"></i></button>


<input style="width: 45px; text-align: center;"
type="text"
name="quantity_{{ item.product.id }}"
id="quantity_{{ item.product.id }}"
data-cart-id="{{ cart.id }}"
min="1"
max="{{ item.max_quantity }}"
value="{{ item.quantity }}"
>
<button class="plus-button"><i class="fa-solid fa-plus"></i></button>

{% elif item.max_quantity == 0 %}
<span>Out of Stock</span>
{% endif %}
<span id="quantity-error_{{ item.product.id }}" style="color: red;"></span>
</td>
<td>{{ item.product.unit_type }}</td>
<td class="total-pr">
<p>{{ item.total_price|floatformat:2 }}</p>
</td>
<td class="remove-pr">
<a href="{% url 'remove_cart_item' item.id %}"><i class="fas fa-times"></i></a>
</td>
</tr>
{% endfor %}
{% else %}
<tr>
<td colspan="6">
<h1>There are no cart items</h1>
</td>
</tr>
{% endif %}
</tbody>
</table>
</div>
</div>

<!-- Other cart content -->


</div>
</div>

{% if cartId %}
<div class="row my-5">
<div class="col-lg-8 col-sm-12"></div>
<div class="col-lg-4 col-sm-12">
<div class="order-box">
<h3>Order summary</h3>
<div class="d-flex">
<h4>Sub Total</h4>
<div class="ml-auto font-weight-bold">{{ total_price|floatformat:2 }} &#8377;</div>
</div>
<div class="d-flex">
<h4>Discount</h4>
<div class="ml-auto font-weight-bold"> {{ total_discount|floatformat:2 }} &#8377;</div>
</div>
<hr class="my-1">

<div class="d-flex">
<h4>Delivery Charge</h4>
<div class="ml-auto font-weight-bold"> Free </div>
</div>
<hr>
<div class="d-flex gr-total">
<h5>Grand Total</h5>
<div class="ml-auto h5">{{ cart.sub_total|floatformat:2 }} &#8377;</div>
</div>
<hr> </div>
</div>
<input type="hidden" name="" id="cart-id-ch" value="{{ cartId }}" disabled>
<div class="col-12 d-flex shopping-box">
<a href="#" id="checkout-btn" class="ml-auto btn hvr-hover">Checkout</a>
</div>
{% endif %}
</div>
</div>
</div>

</div>
<!-- End Cart -->

{% endblock %}

{% block javascript %}

<!-- Add this code inside your HTML file where the checkout button is located -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$('#checkout-btn').click(function(event) {
event.preventDefault(); // Prevent the default action of the button

var cartId = $('#cart-id-ch').val(); // Get the cartId from the data attribute of the button

// Send an AJAX request to checkout


$.ajax({
type: 'GET', // Assuming GET method for checkout
url: `/customer/checkout/${cartId}/`, // URL for the checkout view
success: function(response) {
if (response.error) {
// Show error message using SweetAlert if there's an error
Swal.fire({
icon: 'error',
title: 'Checkout Failed',
text: response.error
});
} else {
// Redirect to the checkout success page if all products are in stock
window.location.href = `/customer/checkout/${cartId}/`; // Replace with your actual success page URL
}
},
});
});
});
</script>

<script>
$(document).ready(function() {
// Handle plus button click
$('.plus-button').on('click', function() {
const input = $(this).prev('input');
const currentQuantity = parseInt(input.val());
const newQuantity = currentQuantity + 1;
const cartId = input.data('cart-id');
const productId = input.attr('name').split('_')[1];
const branchId = $('#branch-select').val(); // Get the selected branch ID

updateCartItem(cartId, productId, newQuantity, input, branchId); // Pass the branch ID to the function
});

// Handle minus button click


$('.minus-button').on('click', function() {
const input = $(this).next('input');
const currentQuantity = parseInt(input.val());
const newQuantity = currentQuantity - 1;
const cartId = input.data('cart-id');
const productId = input.attr('name').split('_')[1];
const branchId = $('#branch-select').val(); // Get the selected branch ID

if (newQuantity > 0) {
updateCartItem(cartId, productId, newQuantity, input, branchId); // Pass the branch ID to the function
}
});

// Function to update cart item


function updateCartItem(cartId, productId, newQuantity, input, branchId) {
const csrfToken = $('input[name="csrfmiddlewaretoken"]').val();
$.ajax({
url: `/customer/cart/update/`,
method: 'POST',
data: {
csrfmiddlewaretoken: csrfToken,
cart_id: cartId,
product_id: productId,
new_quantity: newQuantity,
branch_id: branchId // Include branch ID in the data sent to the backend
},
success: function(response) {
// Handle success response
input.val(response.new_quantity);
const totalPriceElement = input.closest('tr').find('.total-pr p');
totalPriceElement.text(response.item_total);
const totalCartPriceElement = $('#cart-total-price');
totalCartPriceElement.text(response.cart_total);
const grandTotalElement = $('#grand-total');
grandTotalElement.text(response.grand_total);
},
error: function(response) {
// Handle error response with sweet alert
const errorMessage = response.responseJSON.error;
Swal.fire({
icon: 'error',
title: 'Error',
text: errorMessage
});
}
});
}
});

</script>
<script>
$(document).ready(function() {
// Event listener for branch dropdown change
$('#branch-select').on('change', function() {
// Submit the form when branch selection changes
$('#branch-select-form').submit();
});
});

</script>

{% endblock javascript %}

WISHLIST.HTML:

{% extends 'customer/base.html' %}
{% block breadcrumb %}
<div class="all-title-box">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>My Account</h2>
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="{% url 'home_page' %}">Home</a></li>
<li class="breadcrumb-item"><a href="{% url 'user_profile' %}">My account</a></li>
<li class="breadcrumb-item active">Wishlist</li>
</ul>
</div>
</div>
</div>
</div>
{% endblock %}
{% block content %}

<div class="card-footer text-muted ml-5">


{% if wishlistItems %}
<div class="alert alert-info" role="alert">
{% for item in wishlistItems %}
<div class="d-flex justify-content-between align-items-center" style="border: 1px solid #7755A2; text-
align: left; margin-top: 5px;">
<div class="col-8">
<img src="{{ item.product.primary_image.url }}" style="height: 75px; width: 75px;" alt="">
<p>Name: <b>{{ item.product.name }}</b> </p>
<p>{{ item.product.description }} </p>
<p><b>{{ item.product.special_discount }}</b><del>{{ item.product.price }}</del></p>
</div>
<div>
<a class="btn hvr-hover" type="POST" href="{% url 'add_to_cart_wishlist' item.product.id %}">Add to
cart</a>
<!-- Button trigger modal -->
<button type="button" style="background-color: red;" class="btn hvr-hover" data-toggle="modal" data-
target="#exampleModalCenter{{ item.id }}">
<i class="fa-solid fa-trash"></i>
</button>

<!-- Modal -->


<div class="modal fade" id="exampleModalCenter{{ item.id }}" tabindex="-1" role="dialog" aria-
labelledby="exampleModalCenterTitle{{ item.id }}" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle{{ item.id }}">Delete Item</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
Are you sure you want to delete this item from your wishlist?
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<a class="btn hvr-hover" style="background-color: red; margin-right: 5px;" href="{% url 'delete_wishlist'
item.product.id %}">Confirm</a>
</div>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
{% else %}
<div class="alert alert-info" role="alert">
There are no items.
</div>
{% endif %}
</div>

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
// Check if there's a message passed from the server
var msg = "{{ msg|escapejs }}";

if (msg) {
// Show SweetAlert notification based on the message
Swal.fire({
title: msg,
icon: msg.includes('already exists') ? 'warning' : 'success',
confirmButtonText: 'OK'
});
}
</script>

{% endblock %}

You might also like