if (isset($_GET['id']) && $_GET['id'] != NULL) {
    $id = base64_decode($_GET['id']);
    $res = mysqli_query($conn, "SELECT * FROM `mobile` WHERE id='$id'");
    $data = mysqli_fetch_assoc($res);
}
?>
<head>
    <title>Finger Prints</title>
    <link rel="icon" href="https://privacymode.in/assets/images/favicon-32x32.png" type="image/png">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!-- <script src="jquery.js"></script> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.panzoom/3.2.2/jquery.panzoom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-mousewheel/1.0.5/mousewheel.js"></script>
    <style>
        body {
            background-color: black;
            color: white;
        }

        .fingerprint-layout {
            display: flex;
            flex-wrap: wrap; /* Allow wrapping of images if needed */
            justify-content: center; /* Center the images */
            margin-top: 30px;
            gap: 10px; /* Space between images */
        }

        .finger-row img {
            width: 50px; /* Adjusted size for better fit */
            height: 50px; /* Adjusted size for better fit */
            border: 2px solid white;
            border-radius: 50%;
            transition: transform 0.3s ease;
        }

        .finger-row img:hover {
            transform: scale(1.1);
        }

        .controls {
            text-align: center;
            margin: 20px 0;
        }

        .btn {
            margin: 5px;
        }
    </style>
</head>

<body>

<div class="container">
    <div id="page">
        <div class="row">
            <div class="col-md-12">
                <div class="page-header">
                    <h3 style="color: white">Name - <?php echo $data['name']; ?></h3>
                    <h3 style="color: white">Aadhaar Number - <?php echo $data['aadhaar_no']; ?></h3>
                    <h3 style="color: white">Mobile Number - <?php echo $data['mobile_no']; ?></h3>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-6">
                <a href="index.php" class="btn btn-primary btn-sm">Back To Dashboard</a>
                <button type="button" class="btn btn-outline-info btn-xs increase-brightness">
                    <span class="glyphicon glyphicon-plus"></span> +
                </button>
                <button type="button" class="btn btn-outline-info btn-xs decrease-brightness">
                    <span class="glyphicon glyphicon-minus"></span> -
                </button>
                <span id="pix"></span>
                <button type="button" class="btn btn-outline-info btn-sm" onclick="addsize()"><span class="glyphicon glyphicon-plus"></span></button>
                <button type="button" class="btn btn-outline-info btn-sm" onclick="subsize()"><span class="glyphicon glyphicon-minus"></span></button>
                <input type="range" min="1" max="1000" onchange="add(this.value)" value="" class="slider" id="myRange">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
        </div>

        <div class="row">
            <div class="col-md-12">
                <div id="imgDiv">
                    <div class="buttons">
                        <button type="button" class="zoom-out btn btn-default">
                            <span class="glyphicon glyphicon-minus"></span>
                        </button>
                        <button type="button" class="zoom-in btn btn-default">
                            <span class="glyphicon glyphicon-plus"></span>
                        </button>
                    </div>

                    <!-- Fingerprints in a horizontal layout -->
                    <div class="fingerprint-layout">
                        <img src="<?php echo $data['finger1']; ?>" alt="Fingerprint 1">
                        <img src="<?php echo $data['finger2']; ?>" alt="Fingerprint 2">
                        <img src="<?php echo $data['finger3']; ?>" alt="Fingerprint 3">
                        <img src="<?php echo $data['finger4']; ?>" alt="Fingerprint 4">
                        <img src="<?php echo $data['finger5']; ?>" alt="Fingerprint 5">
                    </div>
                </div>

                <div class="col-md-12" style="text-align:center;margin-top: 1em;margin-bottom: 1em;">
                    <button class="reset btn btn-primary">Reset Zoom</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>