@extends('layouts.app')

@section('content')

    {{-- Success Message --}}
    @if (session('success'))
        <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
            {{ session('success') }}
        </div>
    @endif

    {{-- Error Messages --}}
    @if ($errors->any())
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
            @foreach ($errors->all() as $error)
                <p>{{ $error }}</p>
            @endforeach
        </div>
    @endif

    <div class="max-w-3xl mx-auto p-6">
        @if ($isAdmin)
            <h1 class="text-2xl font-bold mb-6 text-center">Setup 2FA for Admin</h1>

            <form action="{{ url('/generate-2fa-create') }}" method="POST" class="bg-white shadow-md rounded-lg p-6">
                @csrf
                <div class="mb-4">
                    <label for="email" class="block text-gray-700 font-semibold mb-2">Admin Email</label>
                    <input type="email" id="email" name="email" required
                           class="w-full border rounded-lg px-3 py-2 focus:ring focus:ring-indigo-200 focus:outline-none">
                    @error('email')
                        <div class="text-red-600 text-sm mt-1">{{ $message }}</div>
                    @enderror
                </div>
                <button type="submit"
                        class="w-full bg-indigo-600 text-white py-2 px-4 rounded-lg hover:bg-indigo-700 transition">
                    Generate 2FA QR Code
                </button>
            </form>

            <h2 class="text-xl font-semibold mt-8 mb-4">Already Created QR Codes</h2>
            <div class="overflow-x-auto bg-white shadow-md rounded-lg">
                <table class="w-full border-collapse">
                    <thead class="bg-gray-100 border-b">
                        <tr>
                            <th class="px-4 py-2 text-left">Email</th>
                            <th class="px-4 py-2 text-left">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($qrCodes as $qrCode)
                            <tr class="border-b hover:bg-gray-50">
                                <td class="px-4 py-2">{{ $qrCode->email }}</td>
                                <td class="px-4 py-2">
                                    <button class="show-qr-btn bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition"
                                        data-qr="{{ urlencode($qrCode->qr_code_url) }}">
                                        Show QR Code
                                    </button>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <!-- Tailwind Modal -->
            <div id="qrModal"
                 class="fixed inset-0 bg-[0,0,0,0.8] bg-opacity-50 hidden items-center justify-center z-50">
                <div class="bg-white rounded-lg shadow-lg max-w-lg w-full p-6 relative">
                    <button id="closeModal"
                            class="absolute top-2 right-2 text-gray-600 hover:text-gray-900 text-xl font-bold">&times;</button>
                    <h5 class="text-lg font-semibold mb-4">QR Code</h5>
                    <div class="flex justify-center">
                        <img id="qrModalImg" src="" alt="QR Code" class="w-64 h-64 object-contain">
                    </div>
                </div>
            </div>
        @else
            <p class="text-center text-gray-600">You are not authorized to access this page.</p>
        @endif
    </div>

    <!-- JavaScript to handle modal QR update -->
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            const modal = document.getElementById("qrModal");
            const modalImg = document.getElementById("qrModalImg");
            const closeModal = document.getElementById("closeModal");

            document.querySelectorAll(".show-qr-btn").forEach(button => {
                button.addEventListener("click", function () {
                    const qrCodeUrl = this.getAttribute("data-qr");
                    modalImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=300x300&data=${qrCodeUrl}`;
                    modal.classList.remove("hidden");
                    modal.classList.add("flex");
                });
            });

            closeModal.addEventListener("click", function () {
                modal.classList.add("hidden");
                modal.classList.remove("flex");
            });

            modal.addEventListener("click", function (e) {
                if (e.target === modal) {
                    modal.classList.add("hidden");
                    modal.classList.remove("flex");
                }
            });
        });
    </script>
@endsection