<?php
session_start();
if (!isset($_SESSION['role_id']) || $_SESSION['role_id'] != 1) {
    header("Location: ../../index.php");
    exit();
}

include('../../includes/config.php');

if (!isset($_GET['id']) || !is_numeric($_GET['id'])) {
    die("Invalid user ID");
}

$user_id = (int)$_GET['id'];

$sql = "SELECT u.*, r.role_name FROM users u LEFT JOIN roles r ON u.role_id = r.id WHERE u.id = ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("i", $user_id);
$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows === 0) die("User not found");

$user = $result->fetch_assoc();
$stmt->close();
$conn->close();

// Company
$companyName = "LapTrack Digital Solutions";
$companyLogo = "/digital_pos/images/logo111.png";

// Profile
$profilePic = $user['profile_picture'] && $user['profile_picture'] !== 'default_profile.png'
    ? "/digital_pos/uploads/" . htmlspecialchars($user['profile_picture'])
    : "/digital_pos/images/logo111.png";

// ID Prefix
$prefixMap = [
    'Cashier' => 'KTC-00',
    'Manager' => 'KTM-00',
    'Accountant' => 'KTA-00',
    'Admin' => 'KTA-10'
];
$prefix = $prefixMap[$user['role_name']] ?? 'KTX-00';
$employeeId = $prefix . $user['id'];

// QR Code
$qrData = urlencode("ID: $employeeId\nName: {$user['first_name']} {$user['last_name']}\nRole: {$user['role_name']}");
$qrCodeUrl = "https://api.qrserver.com/v1/create-qr-code/?data=$qrData&size=80x80";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ID Card – <?= htmlspecialchars($user['first_name'] . ' ' . $user['last_name']) ?></title>
<style>
    * { box-sizing: border-box; }
    body {
        margin: 0;
        padding: 40px;
        background: url('../../images/profile.jpg') no-repeat center center fixed;
        background-size: cover;
        font-family: 'Segoe UI', sans-serif;
        color: white;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 40px;
    }
    .id-card {
        width: 320px;
        height: 500px;
        background: rgba(255,255,255,0.08);
        backdrop-filter: blur(12px);
        border-radius: 16px;
        padding: 20px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.45);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
        border: 1px solid rgba(255,255,255,0.2);
    }
    .company-logo {
        width: 50px;
        display: block;
        margin: 0 auto 10px;
    }
    .company-name {
        text-align: center;
        font-size: 1rem;
        font-weight: bold;
        color: #ff6f00;
        margin-bottom: 10px;
        letter-spacing: 1px;
    }
    .photo img {
        width: 90px;
        height: 90px;
        object-fit: cover;
        border-radius: 50%;
        display: block;
        margin: 0 auto;
    }
    .details {
        text-align: center;
        font-size: 0.9rem;
        margin-top: 12px;
    }
    .details h3 {
        font-size: 1.2rem;
        margin: 5px 0;
    }
    .employee-id {
        font-size: 0.85rem;
        color: #ffd180;
        text-align: center;
        font-weight: bold;
    }
    .qr, .signature {
        text-align: center;
        margin-top: 10px;
    }
    .signature {
        border-top: 1px dashed #aaa;
        font-size: 0.75rem;
        color: #ccc;
        padding-top: 5px;
    }
    #printBtn {
        position: fixed;
        top: 20px;
        right: 30px;
        background: #ff6f00;
        color: white;
        padding: 10px 18px;
        border: none;
        border-radius: 10px;
        cursor: pointer;
        font-weight: bold;
        z-index: 1000;
    }
    #printBtn:hover {
        background: #e65c00;
    }

    /* BACK SIDE STYLING */
    .back {
        text-align: center;
        font-size: 0.88rem;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .back h2 {
        font-size: 1rem;
        color: #ff6f00;
        margin-bottom: 10px;
    }
    .back p {
        margin: 5px 0;
        color: #eee;
        line-height: 1.5;
    }
    .contact {
        margin-top: 20px;
        font-size: 0.8rem;
        color: #ccc;
    }

    @media print {
        body {
            background: url('../../images/profile.jpg') no-repeat center center fixed;
            background-size: cover;
            padding: 0;
        }
        #printBtn {
            display: none;
        }
    }
</style>
</head>
<body>

<!-- Print Button -->
<button id="printBtn" onclick="window.print()">Print</button>

<!-- FRONT SIDE -->
<div class="id-card">
    <div>
        <img src="<?= $companyLogo ?>" class="company-logo" alt="Logo">
        <div class="company-name"><?= $companyName ?></div>
    </div>

    <div class="photo">
        <img src="<?= $profilePic ?>" alt="Profile Picture">
    </div>

    <div class="details">
        <h3><?= htmlspecialchars($user['first_name'] . ' ' . $user['last_name']) ?></h3>
        <p><strong>Role:</strong> <?= htmlspecialchars($user['role_name']) ?></p>
        <p><strong>Email:</strong> <?= htmlspecialchars($user['email']) ?></p>
        <p><strong>Phone:</strong> <?= htmlspecialchars($user['phone_number']) ?></p>
    </div>

    <div class="employee-id">Employee ID: <?= $employeeId ?></div>

    <div class="qr">
        <img src="<?= $qrCodeUrl ?>" alt="QR Code">
    </div>

    <div class="signature">Authorized Signature</div>
</div>

<!-- BACK SIDE -->
<div class="id-card">
    <div class="back">
        <h2><?= $companyName ?></h2>
        <p>This ID card is the property of <?= $companyName ?>.</p>
        <p>If found, please return to the nearest branch or contact the admin office.</p>
        <div class="contact">
            Phone: +265 999 123 456<br>
            Email: info@laptrackmw.com<br>
            Website: www.laptrackmw.com
        </div>
    </div>
</div>

</body>
</html>
