@extends('Admin.layout')
@section('content')

<div class="row align-items-center justify-content-between mb-3 mt-3">
    <div class="col-auto">
        <h5>
            <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                <a href="{{ route('attendance_list') }}">
                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                        stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                        <path d="M15 6l-6 6l6 6" />
                    </svg>
                </a>
            </button>
            Attendance QR Code
        </h5>
    </div>
</div>

<div class="card p-5 m-2 text-center">

    <p class="text-muted mb-4">
        Print this QR and display it at the gym entrance. Members scan it from the app to mark attendance.
    </p>

    <div id="qrWrapper" class="d-flex justify-content-center mb-4">
        {!! QrCode::size(280)->margin(2)->generate($qrValue) !!}
    </div>

    <p class="text-muted small mb-4">
        Code value: <code>{{ $qrValue }}</code>
    </p>

    <button onclick="window.print()" class="btn btn-primary">
        <i class="ti tabler-printer me-1"></i> Print QR Code
    </button>

</div>

<style>
    @media print {
        body * { visibility: hidden; }
        #qrWrapper, #qrWrapper * { visibility: visible; }
        #qrWrapper { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); }
    }
</style>

@endsection