Hello there I have certification system management and I want to show a footer or a section at the bottom of my page on the last page, I tried to fix the section but it shows in I tried some javascript codes but it still gave me the problem so how can I resolve this problem?
this enter image description here is an example of how I want to stick the selected red area to be in the yellow era and only show it on the last page in the footer but not show it in all pages
what I want to do is print the signature on the last page and at the bottom of the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="{{ asset('css/withMarks.css') }}">
<title>Certification
@if (isset($student))
{{ $student->name }}
@endif
</title>
</head>
<body style="position: relative;">
<button class="non-print-view btn btn-primary">
<a href="{{ route('admin.students') }}">زڤرین</a>
</button>
<button type="button" onclick="printView()" id="printButton" class="non-print-view btn btn-primary">
چاپكرن
</button>
<section id="printSection">
@php
$head = 10;
$mark = 0.6; // init value
$noteSpace = 0.4;
$otherMargin = 5;
$totalSpace = $head;
$break = true;
@endphp
<header class="container">
<div class="header-left">
<img src="{{ asset('assets/images/logo.png') }}" alt="">
<div>
<h1>زانـکـۆیـا دهـوك</h1>
<p>رێڤەبەریا تومارکرنا گشتی</p>
</div>
</div>
<div class="header-right">
کومارا ئیراقێ، هەرێما کوردستانێ <br>
سەروکاتیا جڤاتا وەزیران <br>
وەزارەتا خواندنێن باڵا و ڤەکولینێت زانستی
</div>
</header>
<section class="transcript-head container">
<div class="transcript-head-date">
<div class="row">
<div class="row-head">ژمارە: </div>
@php
$englishLettersToArabic = [
'B' => 'ب',
'M' => 'م',
'D' => 'د',
'C' => 'چ',
];
$newCertificateUniqueId = strtr($certificate->certificate_unique_id, $englishLettersToArabic);
@endphp
<div>{{ $newCertificateUniqueId }}</div>
</div>
<div class="row">
<div class="row-head">مێژوو: </div>
<div>
<span>{{ date('Y/m/d') }} م</span>
<span>{{ getKurdishYear('ku') }} ك</span>
</div>
</div>
</div>
{{-- <div class="transcript-head-title">
<h2>بەلگەناما نمرا</h2>
</div> --}}
<div class="transcript-head-image">
<img src="{{ asset('storage/photos/students/' . $student->image) }}" alt="">
</div>
</section>
<section class="transcript container">
<h2>بەلگەناما نمرا</h2>
@if (isset($transcript))
@if (str_contains($transcript, $student->getNameByLang('ku')))
{!! str_replace(
$student->getNameByLang('ku'),
'<strong>' . $student->getNameByLang('ku') . '</strong>',
$transcript,
) !!}
@endif
@endif
</section>
<section class="marks container">
@foreach ($StudentSubjects as $year => $courses)
@if ($loop->iteration > 2 && $loop->iteration % 2 == 1 || $loop->iteration > 3 && $loop->iteration % 6 == 0)
<div style="page-break-after: always;"></div>
<script>
var header = document.querySelector('.transcript-head');
header.style.paddingTop = '2cm';
</script>
@endif
{{-- <div style="page-break-after: always;"></div>
@endif --}}
@php
// Determine the number of subjects for each course
$subjectsCounts = array_map('count', $courses);
$maxRows = max($subjectsCounts); // Find the course with the most subjects
@endphp
{{-- {{var_dump($totalSpace >= 16, $totalSpace)}}
@if ($totalSpace >= 27 && $break)
<div style="page-break-after: always;"></div>
@php $break = false; @endphp
<div style="padding-top: 1cm;"></div>
@endif --}}
<h3>سالا
{{ numToText($loop->iteration, 'krd') }} {{changeYearToDoubleYear($year)}}</h3>
@if (count($courses) == 2)
<div class="mark-row">
@endif
@foreach ($courses as $course => $subjects)
@php
$totalSpace += count($subjects) * $mark;
@endphp
<div>
<h4> وەرزێ {{ numToText($loop->iteration, 'krd') }}</h4>
<table>
<thead>
<th>بابه‌ت</th>
<th>ژمارا یه‌كا</th>
<th>ب هەژمار</th>
<th>ب نڤیسین</th>
<th>پلە</th>
</thead>
<tbody>
@foreach ($subjects as $subject)
<tr>
<td>{{ $subject['subject'] }}</td>
<td>{{ $subject['unit'] }}</td>
<td>{{ $subject['attempt'] == 1 ? '' : '+' }}
{{ $subject['mark'] }}</td>
<td>{{ changeStudentMarkFigureToText($subject['mark'], 'krd') }}</td>
<td>{{ changeMarkToGrade($subject['mark'], 'krd') }}</td>
</tr>
@endforeach
@php
// Calculate how many empty rows are needed to match the course with more subjects
$emptyRowsNeeded = $maxRows - count($subjects);
@endphp
@for ($i = 0; $i < $emptyRowsNeeded; $i++)
<tr>
<td colspan="5"> </td>
</tr>
@endfor
</tbody>
</table>
</div>
@endforeach
@if (count($courses) == 2)
</div>
@endif
@endforeach
</section>
@php
$totalSpace += count($notes) * $noteSpace + $otherMargin;
$signatureMargin = 59 - $totalSpace;
@endphp
<section class="notes container">
<div>
<h3>تێبینی</h3>
<ul>
<li>
<pre>پله: 50-59 په‌سه‌ند 60-69 ناڤنجی 70-79 باش 80-89 زۆر باش 90-100 هه‌ره باش</pre>
</li>
@foreach ($notes as $note)
<li>{{ $note }}</li>
@endforeach
</ul>
</div>
<div class="qrCode">
<div id="qrcode">
</div>
</div>
</section>
<section class="avgMarks container">
<h3>تێکرا هوسا دهێتە دەرئێخستن:</h3>
<ul>
<li>
<div>ساڵا ئێکێ 10٪</div>
<div>ساڵا دووێ 20٪</div>
<div>ساڵا سیێ 30٪</div>
<div>ساڵا چوارێ 40٪</div>
</li>
</ul>
</section>
{{var_dump($signatureMargin)}}
<section style="margin-top: {{$signatureMargin}}cm;" class="signature container">
<div>
<h2>پ.هـ.د. نه‌به‌ز ابراهیم محمد</h2>
<p>هاریكارێ سه‌رۆكێ زانكویێ بۆ كاروبارێن قوتابیان</p>
</div>
<div>
<h2>ديار هاشم مالو</h2>
<p>توماركارێ زانكویێ</p>
</div>
</section>
<footer>
<div>[email protected]</div>
<div>www.uod.ac</div>
</footer>
<img src="{{ asset('assets/images/logo1.png') }}" alt="" class="watermark">
</section>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/qr-code-styling.js"></script>
<script>
const qrCode = new QRCodeStyling({
width: 120,
height: 120,
data: "{{ route('admin.qr', ['token' => $certificate->token]) }}",
type: "image",
image: "{{ asset('assets/images/logo.png') }}",
dotsOptions: {
color: "#005baa",
type: "rounded"
},
imageOptions: {
crossOrigin: "anonymous",
margin: 0,
imageSize: 0.8
}
});
qrCode.append(document.getElementById("qrcode"));
</script>
<script type="text/javascript">
var replaceDigits = function() {
var map = ["٠", "١", "٢", "٣", "٤", "٥", "٦", "٧",
"٨", "٩"
];
document.body.innerHTML = document.body.innerHTML.replace(/d(?=[^<>]*(<|$))/g, function($0) {
return map[$0];
});
}
window.onload = replaceDigits;
</script>
<script>
function printSection() {
const printContents = document.getElementById('printSection').innerHTML;
const originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
// print button
document.querySelector('button').addEventListener('click', printSection);
function printView() {
window.print();
}
</script>
</body>
</html>
@media print {
.non-print-view {
display: none;
}
footer {
display: flex;
position: fixed;
bottom: 0;
left: 0;
right: 0;
justify-content: space-between;
padding: 5px 1cm;
background-color: #c2c3c5;
}
.for-print {
display: block;
}
@page {
size: A4;
margin: 0mm;
}
.watermark {
background-repeat: no-repeat !important;
background-position: center !important;
position: fixed !important;
opacity: 0.1 !important;
top: 50% !important;
left: 50% !important;
max-width: 440px;
max-height: 540px;
transform: translate(-50%, -50%) !important;
z-index: 9999 !important;
display: block !important;
}
.qrCode {
align-self: end;
padding-left: 10px !important;
}
}
@font-face {
font-family: 'AKFont';
src: url("{{ asset('assets/fonts/public/assets/fonts/arabic.ttf') }}");
}
/* --------------- Start: Signature --------------- */
.signature {
display: flex;
justify-content: space-between;
margin: 2cm 1cm;
padding: 1cm 0;
}
.signature h2 {
font-size: 15px;
font-weight: bold;
}
.signature p {
font-size: 14px;
font-weight: bold;
}
/* --
I have tried to fit it with javascript or CSS but I was not able to solve this problem so if there is anyone to help me I would be glad