@extends('layouts.app')

@section('title', 'Cari Undangan')

@section('content')
    <div class="animate-fade-in" style="animation-delay: 0.3s;">
        <x-section.card
            title="Cari Undangan Anda"
            subtitle="Masukkan Nomor KTP Anda untuk menemukan dan mengunduh undangan digital."
        >
            <form action="{{ route('invitations.download') }}" method="POST" class="space-y-6">
                @csrf
                <div class="space-y-2">
                    <label class="block text-sm font-medium text-white/90">Nomor KTP</label>
                    <input type="text"
                           name="noKtp"
                           placeholder="Masukkan 16 digit Nomor KTP"
                           class="w-full px-4 py-3 rounded-lg bg-white/10 border border-white/20 text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-white/50 focus:border-transparent transition-all-smooth backdrop-blur-sm"
                           autofocus
                           required>
                </div>

                <button type="submit"
                        class="w-full bg-white/20 hover:bg-white hover:text-gray-800 text-white font-medium py-3 px-6 rounded-lg transition-all-smooth transform hover:scale-105 hover:shadow-lg backdrop-blur-sm border border-white/30">
                    <span class="flex items-center justify-center gap-2">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                        </svg>
                        Unduh Undangan (PDF)
                    </span>
                </button>
            </form>
        </x-section.card>

        <div class="m-5">

            <div class="flex flex-col justify-content-center text-center text-white mb-5">
              <h1 class="text-xl">  Link Video Tutorial Games</h1>
            </div>

            <div class="flex flex-row justify-content-around align-items-start text-white gap-1 " style="">

                <div class=" flex flex-col items-center justify-center gap-2 ">
                    <img  src="{{asset('public/qr-tutorial-games/bing_generated_qrcode.png')}}">
                    <span class="text-center"> 
                        Untuk melihat tutorial games angry bird silahkan klik link dibawah ini 
                    </span>
                    <a href="https://www.google.com"> klik disini </a>
        
                </div>
                <div class=" flex flex-col items-center justify-center gap-2">
                    <img  src="{{asset('public/qr-tutorial-games/bing_generated_qrcode.png')}}">
                    <span class="text-center"> Untuk melihat tutorial games tetris  silahkan klik link dibawah ini </span>
                    <a href="https://www.google.com"> klik disini </a>
        
                </div>
                <div class=" flex flex-col items-center justify-center gap-2">
                    <img  src="{{asset('public/qr-tutorial-games/bing_generated_qrcode.png')}}">
                    <span class="text-center"> Untuk melihat tutorial games squid game  silahkan klik link dibawah ini </span>
                    <a href="https://www.google.com"> klik disini </a>
        
                </div>
            </div>
        </div>
    </div>

    
@endsection

<style>

</style>