@extends('layouts.app')

@section('title', 'Sign in - ERAS')

@section('content')
<section class="py-12 sm:py-16">
    <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="mx-auto max-w-md">
            <a href="{{ route('home') }}" class="inline-flex items-center gap-1 text-sm text-emerald-700 hover:text-emerald-800">
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
                Back
            </a>

            <div class="mt-4 rounded-xl border border-white/30 bg-white/60 backdrop-blur-md p-6 sm:p-7 shadow-sm">
                <div class="flex items-center gap-3">
                    <div class="flex h-9 w-9 items-center justify-center rounded-md bg-gray-900 text-white ring-1 ring-black/10">
                        <span class="text-sm tracking-tight font-semibold">ER</span>
                    </div>
                    <div>
                        <div class="text-base tracking-tight font-semibold leading-tight">ERAS</div>
                        <div class="text-[11px] text-gray-500 leading-none">Edo Revenue Access Service</div>
                    </div>
                </div>

                <h1 class="mt-5 text-3xl sm:text-4xl tracking-tight font-semibold text-gray-900">Sign in</h1>
                <p class="mt-1 text-sm text-gray-600">Access your dashboard with your credentials.</p>

                {{-- Display error messages --}}
                @if(session('message'))
                    <div class="mt-4 rounded-md bg-red-50 border border-red-200 p-3">
                        <div class="flex items-start">
                            <svg class="h-4 w-4 text-red-400 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <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" />
                            </svg>
                            <p class="ml-2 text-sm text-red-700">{{ session('message') }}</p>
                        </div>
                    </div>
                @endif

                @if(isset($error))
                    <div class="mt-4 rounded-md bg-red-50 border border-red-200 p-3">
                        <div class="flex items-start">
                            <svg class="h-4 w-4 text-red-400 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <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" />
                            </svg>
                            <p class="ml-2 text-sm text-red-700">{{ $error }}</p>
                        </div>
                    </div>
                @endif

                @if(isset($errors) && $errors->any())
                    <div class="mt-4 rounded-md bg-red-50 border border-red-200 p-3">
                        <ul class="list-disc list-inside text-sm text-red-700 space-y-1">
                            @foreach($errors->all() as $error)
                                <li>{{ $error }}</li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <form id="loginForm" class="mt-6 space-y-4" method="POST" action="#">
                    @csrf

                    {{-- Hidden return URL field --}}
                    <input type="hidden" name="returnUrl" value="{{ $loginViewModel->returnUrl ?? '' }}">

                    <div>
                        <label for="userType" class="block text-xs text-gray-600 mb-1">User Type</label>
                        <div class="relative">
                            <svg class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" 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>
                            <select id="userType" name="user_type" required class="w-full rounded-md border border-gray-200 bg-white pl-9 pr-3 py-2 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-emerald-500/40 focus:border-emerald-500 transition appearance-none cursor-pointer @error('user_type') border-red-300 @enderror">
                                <option value="">Select user type</option>
                                <option value="individual">Tax Payer - Individual</option>
                                <option value="company">Tax Payer - Company</option>
                                <option value="government">Tax Payer - Government</option>
                                <option value="admin">Admin Access</option>
                                <option value="staff">Staff Access</option>
                                <option value="partner">Partner Access</option>
                                <option value="submitters">Data Submitters</option>
                            </select>
                            <div class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2">
                                <svg class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                                </svg>
                            </div>
                        </div>
                        @error('user_type')
                            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    {{-- Dynamic input field for RIN or Email based on user type --}}
                    <div id="identifierField">
                        <label for="identifier" class="block text-xs text-gray-600 mb-1">
                            <span id="identifierLabel">Email address or RIN</span>
                        </label>
                        <div class="relative">
                            <svg id="identifierIcon" class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                            </svg>
                            <input id="identifier" name="identifier" type="text" placeholder="Enter your credential" autocomplete="username" required class="w-full rounded-md border border-gray-200 bg-white pl-9 pr-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-emerald-500/40 focus:border-emerald-500 transition @error('RIN') border-red-300 @enderror @error('EmailAddress') border-red-300 @enderror" value="{{ old('RIN', old('EmailAddress', $loginViewModel->RIN ?? $loginViewModel->EmailAddress ?? '')) }}">
                        </div>
                        @error('RIN')
                            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                        @enderror
                        @error('EmailAddress')
                            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div>
                        <div class="flex items-center justify-between mb-1">
                            <label for="loginPassword" class="block text-xs text-gray-600">Password</label>
                            <a href="#" class="text-xs text-emerald-700 hover:text-emerald-800">Forgot password?</a>
                        </div>
                        <div class="relative">
                            <svg class="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                            </svg>
                            <input id="loginPassword" name="Password" type="password" placeholder="••••••••" autocomplete="current-password" required class="w-full rounded-md border border-gray-200 bg-white pl-9 pr-10 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-emerald-500/40 focus:border-emerald-500 transition @error('Password') border-red-300 @enderror">
                            <button type="button" onclick="togglePassword()" class="absolute right-2 top-1/2 -translate-y-1/2 inline-flex items-center justify-center rounded-md p-1.5 text-gray-500 hover:text-gray-700 hover:bg-gray-50 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/30" aria-label="Toggle password visibility">
                                <svg id="eyeIcon" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                                </svg>
                            </button>
                        </div>
                        @error('Password')
                            <p class="mt-1 text-xs text-red-600">{{ $message }}</p>
                        @enderror
                    </div>

                    <div class="flex items-center">
                        <input id="rememberMe" name="RememberMe" type="checkbox" value="1" class="h-4 w-4 rounded border-gray-300 text-emerald-600 focus:ring-emerald-500/40" {{ old('RememberMe', $loginViewModel->RememberMe ?? false) ? 'checked' : '' }}>
                        <label for="rememberMe" class="ml-2 text-sm text-gray-700">Remember me</label>
                    </div>

                    <button type="submit" class="w-full inline-flex items-center justify-center gap-2 rounded-md bg-emerald-600 text-white px-3.5 py-2.5 text-sm font-medium hover:bg-emerald-700 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-500/40">
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1" />
                        </svg>
                        Sign in
                    </button>

                    <div class="relative my-2">
                        <div class="absolute inset-0 flex items-center">
                            <div class="w-full border-t border-gray-200"></div>
                        </div>
                        <div class="relative flex justify-center">
                            <span class="bg-white px-2 text-[11px] text-gray-500">New to ERAS?</span>
                        </div>
                    </div>

                    <a href="#" class="w-full inline-flex items-center justify-center gap-2 rounded-md border border-gray-200 bg-white px-3.5 py-2.5 text-sm text-gray-900 hover:bg-gray-50 transition">
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z" />
                        </svg>
                        Create account
                    </a>

                    <p class="text-xs text-gray-500">By continuing, you agree to the terms and acknowledge our privacy notice.</p>
                </form>
            </div>
        </div>
    </div>
</section>

@push('scripts')
<script>
// Route mapping for each user type
const userTypeRoutes = {
    'individual': '{{ route("login.individual.post") }}',
    'company': '{{ route("login.company.post") }}',
    'government': '{{ route("login.government.post") }}',
    'admin': '{{ route("login.admin.post") }}',
    'staff': '{{ route("login.staff.post") }}',
    'partner': '{{ route("login.partner.post") }}',
    'submitters': '{{ route("login.datasubmitter.post") }}'
};

// Field configurations for each user type
const userTypeConfig = {
    'individual': {
        field: 'RIN',
        label: 'RIN (Revenue Identification Number)',
        placeholder: 'Enter your RIN',
        icon: 'id-card'
    },
    'company': {
        field: 'RIN',
        label: 'RIN (Registration Identification Number)',
        placeholder: 'Enter your RIN',
        icon: 'id-card'
    },
    'government': {
        field: 'RIN',
        label: 'RIN (Registration Identification Number)',
        placeholder: 'Enter your RIN',
        icon: 'id-card'
    },
    'admin': {
        field: 'EmailAddress',
        label: 'Email Address',
        placeholder: 'Enter your email address',
        icon: 'email'
    },
    'staff': {
        field: 'EmailAddress',
        label: 'Email Address',
        placeholder: 'Enter your email address',
        icon: 'email'
    },
    'partner': {
        field: 'EmailAddress',
        label: 'Email Address',
        placeholder: 'Enter your email address',
        icon: 'email'
    },
    'submitters': {
        field: 'EmailAddress',
        label: 'Email Address',
        placeholder: 'Enter your email address',
        icon: 'email'
    }
};

// Icon SVG paths
const icons = {
    'email': '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />',
    'id-card': '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2" />'
};

document.addEventListener('DOMContentLoaded', function() {
    const userTypeSelect = document.getElementById('userType');
    const loginForm = document.getElementById('loginForm');
    const identifierInput = document.getElementById('identifier');
    const identifierLabel = document.getElementById('identifierLabel');
    const identifierIcon = document.getElementById('identifierIcon');
    const passwordInput = document.getElementById('loginPassword');

    // Update form based on user type selection
    userTypeSelect.addEventListener('change', function() {
        const selectedType = this.value;

        if (selectedType && userTypeRoutes[selectedType]) {
            // Update form action
            loginForm.action = userTypeRoutes[selectedType];

            // Update identifier field configuration
            const config = userTypeConfig[selectedType];
            identifierInput.name = config.field;
            identifierLabel.textContent = config.label;
            identifierInput.placeholder = config.placeholder;
            identifierIcon.innerHTML = icons[config.icon];

            // Focus on identifier field
            identifierInput.focus();
        } else {
            loginForm.action = '#';
        }
    });

    // Form validation before submit
    loginForm.addEventListener('submit', function(e) {
        const userType = userTypeSelect.value;
        const identifier = identifierInput.value.trim();
        const password = passwordInput.value.trim();

        if (!userType) {
            e.preventDefault();
            alert('Please select a user type');
            userTypeSelect.focus();
            return false;
        }

        if (!identifier) {
            e.preventDefault();
            const config = userTypeConfig[userType];
            alert('Please enter your ' + (config.field === 'RIN' ? 'RIN' : 'email address'));
            identifierInput.focus();
            return false;
        }

        if (!password) {
            e.preventDefault();
            alert('Please enter your password');
            passwordInput.focus();
            return false;
        }
    });

    // Auto-focus on identifier field when page loads if user type is already selected
    if (userTypeSelect.value) {
        const selectedType = userTypeSelect.value;
        loginForm.action = userTypeRoutes[selectedType];
        const config = userTypeConfig[selectedType];
        identifierInput.name = config.field;
        identifierLabel.textContent = config.label;
        identifierInput.placeholder = config.placeholder;
        identifierIcon.innerHTML = icons[config.icon];

        if (!identifierInput.value) {
            identifierInput.focus();
        }
    }
});

// Toggle password visibility
function togglePassword() {
    const passwordInput = document.getElementById('loginPassword');
    const eyeIcon = document.getElementById('eyeIcon');

    if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        eyeIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />';
    } else {
        passwordInput.type = 'password';
        eyeIcon.innerHTML = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />';
    }
}
</script>
@endpush
@endsection