@extends('layouts.app')

@section('title', 'Login HADIRKU')

@section('content')
<div class="min-h-screen flex items-center justify-center p-4 relative overflow-hidden">

    <!-- Background Decoration -->
    <div class="absolute top-0 left-0 w-72 h-72 bg-primary opacity-10 rounded-full blur-3xl -translate-x-1/2 -translate-y-1/2"></div>
    <div class="absolute bottom-0 right-0 w-72 h-72 bg-secondary opacity-10 rounded-full blur-3xl translate-x-1/2 translate-y-1/2"></div>

    <div class="bg-white/80 backdrop-blur-md w-full max-w-sm p-8 rounded-3xl shadow-xl border border-white/50 relative z-10">
        <div class="text-center mb-8">
            <div class="inline-flex items-center justify-center w-16 h-16 bg-green-100 text-primary rounded-2xl mb-4 shadow-sm animate-pulse">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
            </div>
            <h1 class="text-3xl font-bold text-gray-800 tracking-tight">HADIRKU</h1>
            <p class="text-sm text-gray-500 mt-2 font-light">Silakan login untuk melanjutkan</p>
        </div>

        <!-- Radio Pilihan Role (Pegawai / Admin) -->
        <div class="grid grid-cols-2 gap-3 mb-8">
            <!-- Radio Pegawai (Default Checked) -->
            <label class="cursor-pointer relative group">
                <input type="radio" name="login_type" value="employee" checked onchange="toggleForm('employee')" class="peer sr-only">
                <div class="p-3 rounded-2xl border-2 border-gray-100 peer-checked:border-primary peer-checked:bg-emerald-50 transition-all text-center hover:bg-gray-50">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto mb-2 text-gray-400 peer-checked:text-primary transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                    </svg>
                    <span class="text-xs font-bold text-gray-500 peer-checked:text-primary">Pegawai</span>
                </div>
                <!-- Checkmark Indicator -->
                <div class="absolute -top-2 -right-2 w-5 h-5 bg-primary text-white rounded-full flex items-center justify-center opacity-0 peer-checked:opacity-100 transition-opacity shadow-md">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                    </svg>
                </div>
            </label>

            <!-- Radio Admin -->
            <label class="cursor-pointer relative group">
                <input type="radio" name="login_type" value="admin" onchange="toggleForm('admin')" class="peer sr-only">
                <div class="p-3 rounded-2xl border-2 border-gray-100 peer-checked:border-primary peer-checked:bg-emerald-50 transition-all text-center hover:bg-gray-50">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 mx-auto mb-2 text-gray-400 peer-checked:text-primary transition-colors" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
                    </svg>
                    <span class="text-xs font-bold text-gray-500 peer-checked:text-primary">Admin</span>
                </div>
                <div class="absolute -top-2 -right-2 w-5 h-5 bg-primary text-white rounded-full flex items-center justify-center opacity-0 peer-checked:opacity-100 transition-opacity shadow-md">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                    </svg>
                </div>
            </label>
        </div>

        <form action="{{ route('login.post') }}" method="POST" class="space-y-5">
            @csrf

            <!-- Alert Error -->
            @if ($errors->any())
                <div class="bg-red-50 border-l-4 border-red-500 text-red-700 p-3 rounded-lg text-sm flex items-center" role="alert">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                    {{ $errors->first() }}
                </div>
            @endif

            <!-- Input Identitas (NIDN/NUP atau Username) -->
            <div>
                <label class="block text-xs font-semibold text-gray-600 mb-1 uppercase" id="label-identifier">NIDN / NUP</label>
                <input type="text" name="identifier" required class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-green-100 outline-none transition-all bg-gray-50 focus:bg-white placeholder-gray-400" placeholder="Masukkan NIDN/NUP">
            </div>

            <!-- Input Password (Hanya Muncul untuk Admin) -->
            <div id="password-field" class="hidden">
                <label class="block text-xs font-semibold text-gray-600 mb-1 uppercase">Password</label>
                <input type="password" name="password" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-green-100 outline-none transition-all bg-gray-50 focus:bg-white placeholder-gray-400" placeholder="Masukkan Password">
            </div>

            <!-- Button Submit -->
            <button type="submit" class="w-full bg-primary hover:bg-secondary text-white font-bold py-3.5 rounded-xl shadow-lg shadow-green-200 hover:shadow-green-300 transform hover:-translate-y-0.5 transition-all duration-300 mt-2">
                Masuk Aplikasi
            </button>
        </form>
    </div>
</div>

<script>
    function toggleForm(type) {
        const labelIdentifier = document.getElementById('label-identifier');
        const passwordField = document.getElementById('password-field');
        const inputIdentifier = document.querySelector('input[name="identifier"]');

        if (type === 'admin') {
            // Ubah Label jadi Username
            labelIdentifier.innerText = "Username";
            inputIdentifier.placeholder = "Masukkan Username";

            // Tampilkan Password
            passwordField.classList.remove('hidden');
        } else {
            // Ubah Label jadi NIDN/NUP
            labelIdentifier.innerText = "NIDN / NUP";
            inputIdentifier.placeholder = "Masukkan NIDN/NUP";

            // Sembunyikan Password dan Kosongkan isinya (agar tidak terkirim)
            passwordField.classList.add('hidden');
            document.querySelector('input[name="password"]').value = "";
        }
    }
</script>
@endsection