<?php
require_once("public/connection.php");

/* =========================
   SCHOOL INFO
========================= */
$q = mysqli_query($connection, "SELECT * FROM administratives LIMIT 1");
$school = mysqli_fetch_assoc($q);

$school_name  = $school['school_name'] ?? 'SCHOOL NAME';
$school_logo  = $school['school_logo'] ?? '';
$school_stamp = $school['school_stamp'] ?? '';

/* =========================
   FETCH STAFF LIST
========================= */
$staffs = [];
$is_bulk = false;

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $staff_id = $_POST['staff_id'] ?? 'all';
    
    if ($staff_id === 'all') {
        $stmt = $connection->prepare("SELECT s.username, s.name, s.phone, s.email, s.state, s.passport, r.role_name 
                                      FROM staff s LEFT JOIN role r ON s.role = r.id ORDER BY s.name ASC");
    } else {
        $stmt = $connection->prepare("SELECT s.username, s.name, s.phone, s.email, s.state, s.passport, r.role_name 
                                      FROM staff s LEFT JOIN role r ON s.role = r.id WHERE s.username = ?");
        $stmt->bind_param("s", $staff_id);
    }
    $stmt->execute();
    $res = $stmt->get_result();
    while ($row = $res->fetch_assoc()) {
        $staffs[] = $row;
    }
    $is_bulk = true;
}

/* =========================
   FETCH ALL STAFF FOR DROPDOWN
========================= */
$all_staff = mysqli_query($connection, "SELECT username, name FROM staff ORDER BY name ASC");
?>

<style>
body { font-family: Poppins,sans-serif; background:#eef2f7; }
.no-print { margin-bottom: 20px; }

.id-card, .id-card-back {
    width: 430px;
    min-height: 260px;
    border-radius: 12px;
    margin: 20px auto;
    background:#fff;
    box-shadow:0 4px 10px rgba(0,0,0,.15);
    position: relative;
}

/* Watermark */
.id-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('../<?= htmlspecialchars($school_logo) ?>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 300px;
    opacity: 0.05;
    z-index: 0;
}

.id-card-header {
    background:#0d6efd;
    height:70px;
    border-radius:12px 12px 0 0;
    display:flex;
    align-items:center;
    padding-left:15px;
    gap:15px;
    z-index: 2;
    position: relative;
}
.id-card-header img { width:55px; height:55px; border-radius:6px; background:#fff; object-fit:cover; }
.header-text .name { color:#fff; font-size:18px; font-weight:700; }
.header-text small { color:#e8e8e8; }

.id-card-body {
    padding:15px 20px;
    display:flex;
    justify-content:space-between;
    position: relative;
    z-index: 2;
}
.passport-box { width:120px; height:140px; border:3px solid #0d6efd; border-radius:8px; overflow:hidden; }
.passport-box img { width:100%; height:100%; object-fit:cover; }

.id-card-back {
    background: linear-gradient(135deg,#0d6efd,#6ea8fe);
    color:#fff;
    text-align:center;
    padding:20px;
}
.qr-container img { background:#fff; padding:5px; border-radius:6px; width:90px; }
.signature-container img { width:100px; margin-top:10px; }

/* Print */
@media print {
    .no-print { display: none; }
    .id-card, .id-card-back { box-shadow: none; page-break-inside: avoid; }
}
</style>

<div class="container">
    <?php if (!$is_bulk): ?>
    <div class="no-print">
        <h4 class="text-center text-primary fw-bold mb-3">STAFF ID CARD GENERATOR</h4>
        <form method="POST" class="row g-3">
            <div class="col-md-8">
                <select name="staff_id" class="form-control">
                    <option value="all">All Staff</option>
                    <?php while($s = mysqli_fetch_assoc($all_staff)): ?>
                        <option value="<?= htmlspecialchars($s['username']) ?>"><?= htmlspecialchars($s['name']) ?></option>
                    <?php endwhile; ?>
                </select>
            </div>
            <div class="col-md-4">
                <button class="btn btn-primary w-100">View/Print</button>
            </div>
        </form>
    </div>
    <?php endif; ?>

    <div class="<?= $is_bulk ? 'd-flex flex-wrap justify-content-center' : 'row' ?>">
        <?php if (!empty($staffs)): ?>
            <?php foreach ($staffs as $staff):
                $name     = htmlspecialchars($staff['name']);
                $phone    = htmlspecialchars($staff['phone']);
                $role     = htmlspecialchars($staff['role_name'] ?: 'No Role');
                $passport = htmlspecialchars($staff['passport'] ?: 'default.jpg');
                $email    = htmlspecialchars($staff['email'] ?: 'Not Provided');
                $state    = htmlspecialchars($staff['state'] ?: 'Not Provided');
                $username = htmlspecialchars($staff['username']);

                $qr = "https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=" . urlencode($username);
            ?>

            <!-- FRONT -->
            <div class="id-card">
                <div class="id-card-header">
                    <img src="../<?= $school_logo ?>" alt="Logo">
                    <div class="header-text">
                        <div class="name"><?= $school_name ?></div>
                        <small>STAFF IDENTITY CARD</small>
                    </div>
                </div>

                <div class="id-card-body">
                    <div>
                        <p><b>Name:</b> <?= $name ?></p>
                        <p><b>Role:</b> <?= $role ?></p>
                        <p><b>Staff No:</b> <?= $phone ?></p>
                        <p><b>Email:</b> <?= $email ?></p>
                        <p><b>State:</b> <?= $state ?></p>
                    </div>
                    <div class="passport-box">
                        <img src="../<?= $passport ?>" alt="Passport">
                    </div>
                </div>
            </div>

            <!-- BACK -->
            <div class="id-card-back">
                <div class="qr-container">
                    <img src="<?= $qr ?>" alt="QR Code">
                </div>
                <div class="signature-container">
                    <img src="../<?= $school_stamp ?>" alt="Stamp">
                    <p>Authorized Signature</p>
                </div>
                <p style="font-size:12px; margin-top:10px;">
                    This ID card remains the property of <?= $school_name ?>.<br>
                    Lost cards should be reported immediately.
                </p>
            </div>

            <?php endforeach; ?>
    </div>

    <div class="text-center no-print mt-4">
        <button class="btn btn-success px-5" onclick="window.print()">Print ID Cards</button>
    </div>

        <?php elseif ($is_bulk): ?>
            <p class="text-danger fw-semibold text-center">No staff found.</p>
        <?php endif; ?>
</div>
