crm-summit/app/Views/contacts_view.php

<?php
$data = $contacts[0];
$contactid = $data['contactid'];
$name = $data['firstname'].' '.$data['lastname'];
$title = $data['title'];
$initial = $data['initial'];
$birthdate = $data['birthdate'];
$email_1 = $data['email_1'];
$email_2 = $data['email_2'];
$phone = $data['phone'];
$mobile_1 = $data['mobile_1'];
$mobile_2 = $data['mobile_2'];
$createdate = date('d-m-Y', strtotime($data['createdate']));

$totalCertificate = count($contacts);
?>
<div class="modal-header">
	<h4 class="modal-title" id="tooltipmodel">Contact Detail</h4>
	<button type="button" class="btn-close" data-bs-dismiss="modal" aria-hidden="true"></button>
</div>
<div class="modal-body">
	<div class='row'>
		<div class='col-3'>Contact ID</div>	<div class='col-9'>: <?=$contactid;?></div>
	</div>
	<div class='row'>
		<div class='col-3'>Name</div> <div class='col-9'>: <?=$name;?></div>
	</div>
	<div class='row'>
		<div class='col-3'>Title</div> <div class='col-9'>: <?=$title;?></div>
	</div>
	<div class='row'>
		<div class='col-3'>Initial</div> <div class='col-9'>: <?=$initial;?></div>
	</div>
	<div class='row'>
		<div class='col-3'>Birthdate</div> <div class='col-9'>: <?=$birthdate;?></div>
	</div>
	<div class='row'>
		<div class='col-3'>Email 1</div> <div class='col-9'>: <?=$email_1;?></div>
	</div>
	<div class='row'>
		<div class='col-3'>Email 2</div> <div class='col-9'>: <?=$email_2;?></div>
	</div>
	<div class='row'>
		<div class='col-3'>Phone</div> <div class='col-9'>: <?=$phone;?></div>
	</div>
	<div class='row'>
		<div class='col-3'>Mobile 1</div> <div class='col-9'>: <?=$mobile_1;?></div>
	</div>
	<div class='row'>
		<div class='col-3'>Mobile 2</div> <div class='col-9'>: <?=$mobile_2;?></div>
	</div>
	<div class='row'>
		<div class='col-3'>Create Date</div> <div class='col-9'>: <?=$createdate;?></div>
	</div>
	

	<?php if ( $contacts[0]['cert_name'] != null ) : ?>
	<div class="card shadow-sm border-0 mt-4"> <!-- Sertifikat -->

			<div class="card-header bg-white border-bottom pt-3 pb-2 d-flex justify-content-between align-items-center">
				<h6 class="fw-bold mb-0 text-dark">
					<i class="fa-solid fa-award text-primary mt-0 me-1"></i> Certificates
				</h6>
				<span class="badge bg-primary rounded-pill"><?=$totalCertificate;?> Files</span>
			</div>
				
			<div class="list-group list-group-flush">

				<?php foreach ( $contacts as $key => $value) : ?>
					
					<div class="list-group-item list-group-item-action d-flex justify-content-between align-items-center p-3">
						<div class="d-flex align-items-center gap-3">
							<div class="bg-light p-2 rounded text-center" style="width: 45px; height: 45px;">
								<i class="fa-solid fa-file-pdf text-danger fs-4 mt-1"></i>
							</div>
							
							<div>
								<h6 class="mb-1 fw-semibold text-dark text-truncate" >
									<?= $value['cert_name'] ?> 
								</h6>
								<small class="text-muted">
									<i class="fa-regular fa-calendar-alt me-1"></i> <?php echo (date('d M Y', strtotime($data['issued_date']))); ?> 
									<!-- &nbsp;&bull;&nbsp;  -->
									<!-- <i class="fa-solid fa-hard-drive me-1"></i> 2.4 MB -->
								</small>
							</div>
						</div>
						
						<div class="d-flex gap-2">
							<a href="<?= $value['file_url'] ?>" class="btn btn-sm btn-outline-secondary text-primary border-0 bg-light" target='_blank' title="Preview" data-bs-toggle="tooltip">
								<i class="fa-solid fa-eye"></i>
							</a>
							<a href="<?= $value['file_url'] ?>" download="<?= $value['cert_name'] ?>" class="btn btn-sm btn-outline-secondary text-success border-0 bg-light" title="Download" data-bs-toggle="tooltip">
								<i class="fa-solid fa-download"></i>
							</a>
						</div>
					</div>

				<?php endforeach ?>

			</div>
		</div>
	<?php endif ?>

</div>
<div class="modal-footer">
	<button type="button" class="btn btn-info waves-effect text-white" data-bs-dismiss="modal">Close</button>
</div>

<script>
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    })
</script>