@extends('face_rekognition.face_auth_layout')
@section('face_auth_content')


    <!-- Full-Page Employee Info Overlay -->
    <div id="employeeOverlay">
        <div id="employeeInfoCard">
            <span id="closeEmployeeOverlay">✖</span>
            <img id="employeeProfilePic" src="https://via.placeholder.com/100" alt="Profile">
            <h3 id="employeeName">Employee Name</h3>
            <div id="employeeDetails">
                <p id="employeeDept">Department: N/A</p>
                <p id="employeeCode">Code: N/A</p>
            </div>
        </div>
    </div>

    <div class="card shadow-lg p-4 rounded">
        <h1 class="text-center mb-4">Employee Login</h1>

        <!-- Camera Section -->
        <div class="camera-container text-center mt-4">
            <div class="border rounded bg-light p-3 position-relative">
                <video id="cameraFeed" autoplay muted class="rounded" style="width: 100%; max-height: 250px;"></video>
                <div id="photoPreview" class="d-flex flex-wrap justify-content-center mt-3"></div>
            </div>
        </div>

        <!-- Buttons -->
        <div class="d-grid gap-3 mt-4">
            <button type="button" id="loginCapture" class="btn btn-primary">Start Capture</button>
            <button type="button" class="btn btn-success" id="loginEmployee">Login</button>
        </div>
    </div>
@endsection