@extends('frontend.template-login')
@section('title')
    Sahkan Akaun Anda
@endsection
@section('content')
    <div class="text-center">
        <div class="mb-6">
            <div class="mx-auto w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center mb-4">
                <svg class="w-8 h-8 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 3.26a2 2 0 001.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                </svg>
            </div>
            <h2 class="text-2xl font-bold text-gray-900 mb-2">Sahkan Akaun Anda</h2>
            <p class="text-gray-600 mb-4">Untuk menggunakan semua ciri sistem, sila sahkan alamat e-mel anda terlebih dahulu.</p>
        </div>

        @if(session('resent'))
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4" role="alert">
                <span class="block sm:inline text-sm">E-mel pengesahan telah dihantar semula!</span>
            </div>
        @endif

        @if($errors->any())
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4" role="alert">
                <ul class="list-disc list-inside">
                    @foreach($errors->all() as $error)
                        <li class="text-sm">{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mb-6">
            <div class="flex items-start">
                <svg class="w-5 h-5 text-yellow-600 mt-0.5 mr-3" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                </svg>
                <div class="text-left">
                    <p class="text-sm text-yellow-800">
                        E-mel pengesahan telah dihantar ke <strong>{{ Auth::user()->email }}</strong>.
                        Sila periksa peti masuk anda dan klik pautan untuk mengesahkan akaun.
                    </p>
                </div>
            </div>
        </div>

        <div class="space-y-3">
            <form action="{{ route('verification.resend') }}" method="POST">
                @csrf
                <button type="submit" class="block w-full text-white bg-orange-400 hover:bg-orange-500 focus:ring-4 focus:outline-none focus:ring-orange-300 font-medium rounded-md text-md px-7 py-3 text-center transition">
                    Hantar Semula E-mel Pengesahan
                </button>
            </form>

            <div class="flex space-x-3">
                <a href="/logout" class="flex-1 text-gray-600 hover:text-gray-700 font-medium text-sm py-2">
                    Log Keluar
                </a>
                <a href="/" class="flex-1 text-orange-600 hover:text-orange-700 font-medium text-sm py-2">
                    Kembali ke Laman Utama
                </a>
            </div>
        </div>
    </div>
@endsection