351 lines
21 KiB
PHP
351 lines
21 KiB
PHP
<?php
|
|
session_start();
|
|
if (!isset($_SESSION['user_id'])) {
|
|
header("Location: login.php");
|
|
exit;
|
|
}
|
|
include 'koneksi.php';
|
|
|
|
$accountId = isset($_GET['id']) ? intval($_GET['id']) : 0;
|
|
if (!$accountId) {
|
|
header("Location: operations_account.php");
|
|
exit;
|
|
}
|
|
|
|
$stmt = $pdo->prepare("
|
|
SELECT a.*, p.id_profile, p.email AS p_email, p.moto, p.provinsi, p.kabupaten, p.kecamatan, p.desa, p.kode_pos,
|
|
p.facebook, p.instagram, p.linkedin, p.whatsapp
|
|
FROM account a
|
|
LEFT JOIN profile p ON a.id_account = p.id_account
|
|
WHERE a.id_account = ?
|
|
");
|
|
$stmt->execute([$accountId]);
|
|
$user = $stmt->fetch(PDO::FETCH_ASSOC);
|
|
|
|
if (!$user) {
|
|
header("Location: operations_account.php");
|
|
exit;
|
|
}
|
|
|
|
$fotoSrc = (!empty($user['foto']) && file_exists($user['foto'])) ? $user['foto'] : 'images/faces/user.jpg';
|
|
$hasProfile = !empty($user['id_profile']);
|
|
|
|
include 'header.php';
|
|
?>
|
|
<div class="main-panel">
|
|
<div class="content-wrapper">
|
|
<div class="row">
|
|
<div class="col-md-12 grid-margin">
|
|
<div class="row">
|
|
<div class="col-12 col-xl-8 mb-4 mb-xl-0">
|
|
<h3 class="font-weight-bold">Dashboard Account</h3>
|
|
<h6 class="font-weight-normal mb-0">Detailed view of collected data for <span class="text-primary"><?= htmlspecialchars($user['name']) ?></span></h6>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12 grid-margin stretch-card">
|
|
<div class="card" style="border:1px solid #e5e9f0;box-shadow:none;border-radius:12px;">
|
|
<div class="card-body" style="padding: 32px;">
|
|
|
|
<!-- Header Row: Title & Fingerprint Registered -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<h4 class="font-weight-bold mb-0" style="color:#1a1a1a;">Account Detail Overview</h4>
|
|
<button class="pf-edit-btn" onclick="window.location.href='operations_account.php'"><i class="mdi mdi-arrow-left mr-1"></i>Back</button>
|
|
</div>
|
|
|
|
<!-- Top Section: Photo and Account Details separated -->
|
|
<div class="row mb-4">
|
|
<!-- Sub-Card 1: Photo/Summary -->
|
|
<div class="col-md-4 mb-4 mb-md-0 d-flex">
|
|
<div style="border:1px solid #e5e9f0; border-radius:10px; padding:32px; background:#fff; width:100%;">
|
|
<div class="text-center">
|
|
<div class="mb-4">
|
|
<img src="<?= htmlspecialchars($fotoSrc) ?>" alt="Profile image" class="img-fluid rounded-circle" style="width: 120px; height: 120px; object-fit: cover; border: 3px solid #e5e9f0; padding: 4px; cursor: pointer;"
|
|
onclick="previewPhoto('<?= htmlspecialchars(addslashes($fotoSrc)) ?>')">
|
|
</div>
|
|
<h4 class="mb-1 font-weight-bold" style="color:#1a1a1a; display:inline-flex; align-items:center; justify-content:center;"><?= htmlspecialchars($user['name']) ?>
|
|
<?php if ($user['status'] === 'approved'): ?>
|
|
<i class="mdi mdi-check-decagram" style="color: #1da1f2; font-size: 20px; margin-left: 6px;" title="Verified Approved"></i>
|
|
<?php endif; ?>
|
|
</h4>
|
|
<p class="text-muted mb-2">@<?= htmlspecialchars($user['username']) ?></p>
|
|
|
|
<?php if ($hasProfile && !empty($user['moto'])): ?>
|
|
<p class="text-muted mt-2 mb-4" style="font-style: italic; font-size: 13px;">"<?= htmlspecialchars($user['moto']) ?>"</p>
|
|
<?php endif; ?>
|
|
|
|
<div class="d-flex justify-content-center pt-3" style="gap:10px;">
|
|
<?php if (!empty($user['facebook'])): ?>
|
|
<a href="https://facebook.com/<?= htmlspecialchars($user['facebook']) ?>" target="_blank" class="soc-btn"><i class="fab fa-facebook-f text-primary"></i></a>
|
|
<?php else: ?>
|
|
<span class="soc-btn disabled" title="Facebook not set"><i class="fab fa-facebook-f"></i></span>
|
|
<?php endif; ?>
|
|
|
|
<?php if (!empty($user['instagram'])): ?>
|
|
<a href="https://instagram.com/<?= htmlspecialchars($user['instagram']) ?>" target="_blank" class="soc-btn"><i class="fab fa-instagram" style="background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent;"></i></a>
|
|
<?php else: ?>
|
|
<span class="soc-btn disabled" title="Instagram not set"><i class="fab fa-instagram"></i></span>
|
|
<?php endif; ?>
|
|
|
|
<?php if (!empty($user['linkedin'])): ?>
|
|
<a href="https://linkedin.com/in/<?= htmlspecialchars($user['linkedin']) ?>" target="_blank" class="soc-btn"><i class="fab fa-linkedin-in text-info"></i></a>
|
|
<?php else: ?>
|
|
<span class="soc-btn disabled" title="LinkedIn not set"><i class="fab fa-linkedin-in"></i></span>
|
|
<?php endif; ?>
|
|
|
|
<?php if (!empty($user['whatsapp'])): ?>
|
|
<a href="https://wa.me/<?= htmlspecialchars(preg_replace('/[^0-9]/','',$user['whatsapp'])) ?>" target="_blank" class="soc-btn"><i class="fab fa-whatsapp text-success"></i></a>
|
|
<?php else: ?>
|
|
<span class="soc-btn disabled" title="WhatsApp not set"><i class="fab fa-whatsapp"></i></span>
|
|
<?php endif; ?>
|
|
</div>
|
|
|
|
<!-- Security & Device Info below profile -->
|
|
<div class="pt-2 mt-2" style="border-top: 1px solid #f0f0f0;">
|
|
<div class="d-flex justify-content-between align-items-center" style="gap:12px;">
|
|
<div style="flex:1; text-align:center;">
|
|
<span class="d-block" style="font-size:10px; color:#888; font-weight:600; margin-bottom:2px;">Password</span>
|
|
<div class="d-flex align-items-center justify-content-center">
|
|
<span style="font-size:11px; font-weight:bold; letter-spacing:1px; margin-right:6px; color:#6c757d;">••••••</span>
|
|
<button class="btn btn-xs" style="padding:1px 5px; font-size:11px; border-radius:3px; font-weight:bold; color:#fff; background:#4b49ac; border:1px solid #4b49ac;" onclick="openPinVerifikasiModal('<?= $user['id_account']; ?>')" title="Reveal Password"><i class="mdi mdi-eye"></i></button>
|
|
</div>
|
|
</div>
|
|
<div style="flex:1; text-align:center;">
|
|
<span class="d-block" style="font-size:10px; color:#888; font-weight:600; margin-bottom:2px;">Fingerprint Device</span>
|
|
<span style="font-size:11px; color:#333; font-weight:500;"><?= !empty($user['finger_id']) && !empty($user['finger_device']) ? htmlspecialchars($user['finger_device']) : (!empty($user['finger_id']) ? 'Verified Device' : '<span style="color:#aaa; font-style:italic;">Unknown</span>') ?></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Sub-Card 1.5: Personal Information -->
|
|
<div class="col-md-8 d-flex">
|
|
<div style="border:1px solid #e5e9f0; border-radius:10px; padding:32px; background:#fff; width:100%;">
|
|
<h5 class="font-weight-bold mb-4"><i class="mdi mdi-card-account-details-outline mr-2 text-primary"></i>Personal Information</h5>
|
|
<div class="row">
|
|
<div class="col-md-6 mb-4">
|
|
<span class="d-block" style="font-size:12px; color:#888; font-weight:600; margin-bottom:4px;">Full Name</span>
|
|
<span style="font-size:14px; color:#333; font-weight:500;"><?= !empty($user['name']) ? htmlspecialchars($user['name']) : '<span class="text-muted" style="font-size:12px; font-style:italic;">Not provided</span>' ?></span>
|
|
</div>
|
|
<div class="col-md-6 mb-4">
|
|
<span class="d-block" style="font-size:12px; color:#888; font-weight:600; margin-bottom:4px;">Username</span>
|
|
<span style="font-size:14px; color:#333; font-weight:500;"><?= !empty($user['username']) ? htmlspecialchars($user['username']) : '<span class="text-muted" style="font-size:12px; font-style:italic;">Not provided</span>' ?></span>
|
|
</div>
|
|
<div class="col-md-6 mb-4">
|
|
<span class="d-block" style="font-size:12px; color:#888; font-weight:600; margin-bottom:4px;">Email Address</span>
|
|
<span style="font-size:14px; color:#333; font-weight:500;"><?= $hasProfile && !empty($user['p_email']) ? htmlspecialchars($user['p_email']) : '<span class="text-muted" style="font-size:12px; font-style:italic;">Not provided</span>' ?></span>
|
|
</div>
|
|
<div class="col-md-6 mb-4">
|
|
<span class="d-block" style="font-size:12px; color:#888; font-weight:600; margin-bottom:4px;">WhatsApp</span>
|
|
<span style="font-size:14px; color:#333; font-weight:500;"><?= $hasProfile && !empty($user['whatsapp']) ? htmlspecialchars($user['whatsapp']) : '<span class="text-muted" style="font-size:12px; font-style:italic;">Not provided</span>' ?></span>
|
|
</div>
|
|
<div class="col-md-6 mb-4">
|
|
<span class="d-block" style="font-size:12px; color:#888; font-weight:600; margin-bottom:4px;">Instagram</span>
|
|
<span style="font-size:14px; color:#333; font-weight:500;"><?= $hasProfile && !empty($user['instagram']) ? htmlspecialchars($user['instagram']) : '<span class="text-muted" style="font-size:12px; font-style:italic;">Not provided</span>' ?></span>
|
|
</div>
|
|
<div class="col-md-6 mb-4">
|
|
<span class="d-block" style="font-size:12px; color:#888; font-weight:600; margin-bottom:4px;">Facebook</span>
|
|
<span style="font-size:14px; color:#333; font-weight:500;"><?= $hasProfile && !empty($user['facebook']) ? htmlspecialchars($user['facebook']) : '<span class="text-muted" style="font-size:12px; font-style:italic;">Not provided</span>' ?></span>
|
|
</div>
|
|
<div class="col-md-6 mb-4">
|
|
<span class="d-block" style="font-size:12px; color:#888; font-weight:600; margin-bottom:4px;">LinkedIn</span>
|
|
<span style="font-size:14px; color:#333; font-weight:500;"><?= $hasProfile && !empty($user['linkedin']) ? htmlspecialchars($user['linkedin']) : '<span class="text-muted" style="font-size:12px; font-style:italic;">Not provided</span>' ?></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!-- Sub-Card 3: Address Details -->
|
|
<div style="border:1px solid #e5e9f0; border-radius:10px; padding:32px; background:#fff;">
|
|
<h5 class="font-weight-bold mb-4"><i class="mdi mdi-map-marker-outline mr-2 text-danger"></i>Address Details</h5>
|
|
<div class="d-flex" style="gap:16px; flex-wrap:nowrap;">
|
|
<div style="flex:1; min-width:0;">
|
|
<span class="d-block" style="font-size:11px; color:#888; font-weight:600; margin-bottom:3px;">Province</span>
|
|
<span style="font-size:12px; color:#333; font-weight:500;"><?= $hasProfile && !empty($user['provinsi']) ? htmlspecialchars($user['provinsi']) : '<span class="text-muted" style="font-style:italic;">-</span>' ?></span>
|
|
</div>
|
|
<div style="flex:1.5; min-width:0;">
|
|
<span class="d-block" style="font-size:11px; color:#888; font-weight:600; margin-bottom:3px;">Regency / City</span>
|
|
<span style="font-size:12px; color:#333; font-weight:500;"><?= $hasProfile && !empty($user['kabupaten']) ? htmlspecialchars($user['kabupaten']) : '<span class="text-muted" style="font-style:italic;">-</span>' ?></span>
|
|
</div>
|
|
<div style="flex:1; min-width:0;">
|
|
<span class="d-block" style="font-size:11px; color:#888; font-weight:600; margin-bottom:3px;">District</span>
|
|
<span style="font-size:12px; color:#333; font-weight:500;"><?= $hasProfile && !empty($user['kecamatan']) ? htmlspecialchars($user['kecamatan']) : '<span class="text-muted" style="font-style:italic;">-</span>' ?></span>
|
|
</div>
|
|
<div style="flex:1.5; min-width:0;">
|
|
<span class="d-block" style="font-size:11px; color:#888; font-weight:600; margin-bottom:3px;">Village</span>
|
|
<span style="font-size:12px; color:#333; font-weight:500;"><?= $hasProfile && !empty($user['desa']) ? htmlspecialchars($user['desa']) : '<span class="text-muted" style="font-style:italic;">-</span>' ?></span>
|
|
</div>
|
|
<div style="flex:0.5; min-width:0;">
|
|
<span class="d-block" style="font-size:11px; color:#888; font-weight:600; margin-bottom:3px;">Postal Code</span>
|
|
<span style="font-size:12px; color:#333; font-weight:500;"><?= $hasProfile && !empty($user['kode_pos']) ? htmlspecialchars($user['kode_pos']) : '<span class="text-muted" style="font-style:italic;">-</span>' ?></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==================== MODAL: VERIFY PIN ==================== -->
|
|
<div class="modal fade" id="modalVerifyPin" tabindex="-1">
|
|
<div class="modal-dialog modal-sm">
|
|
<div class="modal-content" style="border: none; border-radius: 6px; box-shadow: 0 8px 30px rgba(0,0,0,0.1);">
|
|
<div class="modal-header">
|
|
<h6 class="modal-title font-weight-bold"><i class="mdi mdi-lock mr-1 text-warning"></i> Verify PIN</h6>
|
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
|
</div>
|
|
<div class="modal-body text-center">
|
|
<i class="mdi mdi-shield-lock-outline" style="font-size:40px;color:#f59e0b;"></i>
|
|
<p class="mt-2 mb-3" style="font-size:12px;color:#666;">Enter 6-digit PIN to view the original password.</p>
|
|
<input type="hidden" id="verifyPinAccountId">
|
|
<input type="password" id="verifyPinInput" class="form-control text-center" maxlength="6" placeholder="● ● ● ● ● ●" style="letter-spacing:8px;font-size:18px;font-weight:700;">
|
|
<div id="verifyPinError" class="text-danger mt-2" style="display:none;font-size:12px;"><i class="mdi mdi-alert-circle mr-1"></i><span id="verifyPinErrorMsg"></span></div>
|
|
<button type="button" class="btn btn-primary btn-sm btn-block mt-3" id="btnVerifyPin" onclick="submitPinVerify()"><i class="mdi mdi-check mr-1"></i>Verify</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==================== MODAL: SHOW PASSWORD ==================== -->
|
|
<div class="modal fade" id="modalShowPassword" tabindex="-1">
|
|
<div class="modal-dialog modal-sm">
|
|
<div class="modal-content" style="border: none; border-radius: 6px; box-shadow: 0 8px 30px rgba(0,0,0,0.1);">
|
|
<div class="modal-header">
|
|
<h6 class="modal-title font-weight-bold"><i class="mdi mdi-key mr-1 text-success"></i> Original Password</h6>
|
|
<button type="button" class="close" data-dismiss="modal">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div style="display: flex; align-items: flex-start; gap: 8px; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 6px; padding: 10px 12px; font-size: 12px; color: #92400e; margin-bottom: 8px;">
|
|
<i class="mdi mdi-alert" style="color:#d97706;"></i>
|
|
<div style="color:#92400e;font-size:11px;">Do not share this password with anyone!</div>
|
|
</div>
|
|
<div class="input-group">
|
|
<input type="text" id="revealedPassword" class="form-control" readonly style="font-size:15px;font-weight:600;letter-spacing:1px;">
|
|
<div class="input-group-append"><span class="input-group-text" style="cursor:pointer;" onclick="copyRevealed()"><i class="fas fa-copy" id="btnCopyRevealed" style="color:#6c757d;"></i></span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==================== MODAL: PHOTO PREVIEW ==================== -->
|
|
<div class="modal fade" id="modalPhotoPreview" tabindex="-1" data-backdrop="static">
|
|
<div class="modal-dialog" style="max-width: 400px;">
|
|
<div class="modal-content" style="border-radius:12px; overflow:hidden;">
|
|
<div class="modal-header py-2" style="border-bottom: none; position:relative; background:#f8fafc;">
|
|
<h6 class="modal-title font-weight-bold" style="color:#1e293b;"><i class="mdi mdi-image-outline mr-1 text-primary"></i> Photo Preview</h6>
|
|
<button type="button" class="close" data-dismiss="modal" style="position:absolute; right:15px; top:10px; color:#64748b;">×</button>
|
|
</div>
|
|
<div class="modal-body text-center" style="padding:0 20px 20px 20px; background:#f8fafc;">
|
|
<img id="previewModalImage" src="" style="width:100%; max-height:350px; object-fit:cover; border-radius:8px; border:2px solid #e2e8f0; margin-bottom:15px; box-shadow:0 4px 12px rgba(0,0,0,0.05);">
|
|
<a id="btnDownloadPreview" href="#" download="Account_Photo.jpg" class="btn btn-sm btn-primary w-100" style="border-radius:8px; font-weight:bold; letter-spacing:0.5px; padding:10px;">
|
|
<i class="mdi mdi-download mr-1"></i>Download Photo
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==================== CSS ==================== -->
|
|
<style>
|
|
.soc-btn {
|
|
width: 36px; height: 36px; border-radius: 50%;
|
|
background: #f8f9fa; border: 1px solid #e2e8f0;
|
|
display: inline-flex; align-items: center; justify-content: center;
|
|
font-size: 16px; transition: all 0.2s;
|
|
text-decoration: none;
|
|
}
|
|
.soc-btn:hover:not(.disabled) {
|
|
background: #e9ecef;
|
|
transform: translateY(-2px);
|
|
text-decoration: none;
|
|
}
|
|
.soc-btn.disabled {
|
|
background: #f5f5f5; border-color: #d4d4d8; color: #333;
|
|
cursor: not-allowed; pointer-events: none; opacity: 0.8;
|
|
}
|
|
|
|
.pf-edit-btn {
|
|
font-size: 13px; font-weight: 500; color: #333; background: #fff;
|
|
border: 1px solid #d4d4d8; border-radius: 6px; padding: 6px 16px;
|
|
cursor: pointer; transition: all .15s; display: inline-flex; align-items: center;
|
|
}
|
|
.pf-edit-btn:hover {
|
|
background: #f5f5f5; border-color: #bbb; text-decoration:none;
|
|
}
|
|
</style>
|
|
|
|
<?php include 'footer.php'; ?>
|
|
|
|
<!-- ==================== JAVASCRIPT ==================== -->
|
|
<script>
|
|
function previewPhoto(url) {
|
|
document.getElementById('previewModalImage').src = url;
|
|
document.getElementById('btnDownloadPreview').href = url;
|
|
$('#modalPhotoPreview').modal('show');
|
|
}
|
|
|
|
function openPinVerifikasiModal(id) {
|
|
document.getElementById("verifyPinAccountId").value = id;
|
|
document.getElementById("verifyPinInput").value = '';
|
|
document.getElementById("verifyPinError").style.display = 'none';
|
|
$("#modalVerifyPin").modal("show");
|
|
}
|
|
|
|
function submitPinVerify() {
|
|
var id = document.getElementById("verifyPinAccountId").value;
|
|
var pin = document.getElementById("verifyPinInput").value;
|
|
var btn = document.getElementById("btnVerifyPin");
|
|
|
|
if (pin.length !== 6) {
|
|
document.getElementById("verifyPinErrorMsg").innerText = "PIN must be 6 digits";
|
|
document.getElementById("verifyPinError").style.display = "block";
|
|
return;
|
|
}
|
|
|
|
btn.innerHTML = '<i class="mdi mdi-loading mdi-spin mr-1"></i>Verifying...';
|
|
btn.disabled = true;
|
|
|
|
$.post("verify_pin_account.php", { id_account: id, pin: pin }, function(d) {
|
|
btn.innerHTML = '<i class="mdi mdi-check mr-1"></i>Verify';
|
|
btn.disabled = false;
|
|
|
|
if (d.status === "success") {
|
|
$("#modalVerifyPin").modal("hide");
|
|
document.getElementById("revealedPassword").value = d.password;
|
|
$("#modalShowPassword").modal("show");
|
|
} else {
|
|
document.getElementById("verifyPinErrorMsg").innerText = d.message || "Incorrect PIN!";
|
|
document.getElementById("verifyPinError").style.display = "block";
|
|
}
|
|
}, "json").fail(function() {
|
|
btn.innerHTML = '<i class="mdi mdi-check mr-1"></i>Verify';
|
|
btn.disabled = false;
|
|
document.getElementById("verifyPinErrorMsg").innerText = "Connection to server failed.";
|
|
document.getElementById("verifyPinError").style.display = "block";
|
|
});
|
|
}
|
|
|
|
function copyRevealed() {
|
|
var v = document.getElementById("revealedPassword").value;
|
|
var b = document.getElementById("btnCopyRevealed");
|
|
navigator.clipboard.writeText(v).then(function() {
|
|
b.classList.replace("fa-copy","fa-check");
|
|
if (typeof showCustomAlert === 'function') showCustomAlert('Password copied successfully!');
|
|
else alert('Password copied successfully!');
|
|
setTimeout(function(){ b.classList.replace("fa-check","fa-copy"); }, 2000);
|
|
});
|
|
}
|
|
</script>
|