@extends('layouts.app')

@section('content')
<div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 py-12 px-4 sm:px-6 lg:px-8">
    <div class="max-w-md w-full space-y-8">
        <!-- Logo/Brand Section -->
        <div class="text-center">
            <div class="mx-auto h-16 w-16 bg-gradient-to-br from-blue-600 to-indigo-600 rounded-2xl flex items-center justify-center shadow-lg mb-4">
                <svg class="h-10 w-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <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"></path>
                </svg>
            </div>
            <h1 class="text-3xl font-extrabold bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900 bg-clip-text text-transparent">
                Welcome Back
            </h1>
            <p class="mt-2 text-sm text-gray-600">Sign in to access your account</p>
        </div>

        <!-- Login Card -->
        <div class="bg-white rounded-2xl shadow-2xl p-8 border border-gray-100 backdrop-blur-sm">
            <form class="space-y-6" action="{{ route('login') }}" method="POST" id="loginForm">
                @csrf
                
                <!-- Account Type Selection -->
                <div class="space-y-4" id="accountTypeSection">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-3">
                            Select Account Type
                        </label>
                        <div class="grid grid-cols-2 gap-3">
                            <label class="relative flex cursor-pointer rounded-xl border-2 p-4 transition-all duration-200 hover:shadow-md group {{ old('account_type') == 'company' || !old('account_type') ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-blue-300' }}" id="companyTypeLabel">
                                <input type="radio" name="account_type" value="company" class="sr-only" {{ old('account_type') == 'company' || !old('account_type') ? 'checked' : '' }} onchange="handleAccountTypeChange()">
                                <div class="flex flex-1 items-center justify-between">
                                    <div class="flex flex-col">
                                        <span class="block text-sm font-semibold text-gray-900">Company</span>
                                        <span class="mt-1 text-xs text-gray-500">Company user</span>
                                    </div>
                                    <svg class="h-5 w-5 text-blue-600 {{ old('account_type') == 'company' || !old('account_type') ? '' : 'hidden' }}" id="companyCheckIcon" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                            </label>
                            <label class="relative flex cursor-pointer rounded-xl border-2 p-4 transition-all duration-200 hover:shadow-md group {{ old('account_type') == 'tenant' ? 'border-blue-500 bg-blue-50' : 'border-gray-200 hover:border-blue-300' }}" id="tenantTypeLabel">
                                <input type="radio" name="account_type" value="tenant" class="sr-only" {{ old('account_type') == 'tenant' ? 'checked' : '' }} onchange="handleAccountTypeChange()">
                                <div class="flex flex-1 items-center justify-between">
                                    <div class="flex flex-col">
                                        <span class="block text-sm font-semibold text-gray-900">Tenant</span>
                                        <span class="mt-1 text-xs text-gray-500">Tenant user</span>
                                    </div>
                                    <svg class="h-5 w-5 text-blue-600 {{ old('account_type') == 'tenant' ? '' : 'hidden' }}" id="tenantCheckIcon" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
                                    </svg>
                                </div>
                            </label>
                        </div>
                        @error('account_type')
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    <!-- Company Selection -->
                    <div id="companySelection" class="transition-all duration-300" style="display: {{ old('account_type') == 'tenant' || old('account_type') == 'company' ? 'block' : 'none' }};">
                        <label for="company_id" class="block text-sm font-semibold text-gray-700 mb-2">
                            Select Company
                        </label>
                        <div class="relative">
                            <select id="company_id" name="company_id" required
                                class="appearance-none relative block w-full px-4 py-3 pl-10 border border-gray-300 text-gray-900 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm transition duration-150 bg-white hover:border-gray-400 shadow-sm">
                                <option value="">-- Select Company --</option>
                                @foreach($companies as $company)
                                    <option value="{{ $company->id }}" {{ old('company_id') == $company->id ? 'selected' : '' }}>
                                        {{ $company->name }}
                                    </option>
                                @endforeach
                            </select>
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
                                </svg>
                            </div>
                        </div>
                        @error('company_id')
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>

                    <!-- Tenant Selection -->
                    <div id="tenantSelection" class="transition-all duration-300" style="display: {{ old('account_type') == 'tenant' ? 'block' : 'none' }};">
                        <label for="tenant_id" class="block text-sm font-semibold text-gray-700 mb-2">
                            Select Tenant
                        </label>
                        <div class="relative">
                            <select id="tenant_id" name="tenant_id"
                                class="appearance-none relative block w-full px-4 py-3 pl-10 border border-gray-300 text-gray-900 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm transition duration-150 bg-white hover:border-gray-400 shadow-sm">
                                <option value="">-- Select Tenant (Optional) --</option>
                                @if(old('company_id'))
                                    @foreach($tenants->where('company_id', old('company_id')) as $tenant)
                                        <option value="{{ $tenant->id }}" {{ old('tenant_id') == $tenant->id ? 'selected' : '' }}>
                                            {{ $tenant->full_name }} ({{ $tenant->email ?? $tenant->phone }})
                                        </option>
                                    @endforeach
                                @endif
                            </select>
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <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"></path>
                                </svg>
                            </div>
                        </div>
                        @error('tenant_id')
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                </div>

                <!-- Login Credentials -->
                <div class="space-y-4 transition-all duration-300" id="loginCredentialsSection" style="display: {{ old('account_type') && old('company_id') ? 'block' : 'none' }};">
                    <div>
                        <label for="email" class="block text-sm font-semibold text-gray-700 mb-2">
                            {{ __('messages.email') ?? 'Email Address' }}
                        </label>
                        <div class="relative">
                            <input id="email" name="email" type="email" required autocomplete="email"
                                class="appearance-none relative block w-full px-4 py-3 pl-10 border border-gray-300 placeholder-gray-400 text-gray-900 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm transition duration-150 shadow-sm hover:border-gray-400" 
                                placeholder="{{ __('messages.email') ?? 'Enter your email' }}" value="{{ old('email') }}">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"></path>
                                </svg>
                            </div>
                        </div>
                        @error('email')
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                    
                    <div>
                        <label for="password" class="block text-sm font-semibold text-gray-700 mb-2">
                            {{ __('messages.password') ?? 'Password' }}
                        </label>
                        <div class="relative">
                            <input id="password" name="password" type="password" required autocomplete="current-password"
                                class="appearance-none relative block w-full px-4 py-3 pl-10 border border-gray-300 placeholder-gray-400 text-gray-900 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 sm:text-sm transition duration-150 shadow-sm hover:border-gray-400" 
                                placeholder="{{ __('messages.password') ?? 'Enter your password' }}">
                            <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                                <svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <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"></path>
                                </svg>
                            </div>
                        </div>
                        @error('password')
                            <p class="mt-2 text-sm text-red-600 flex items-center">
                                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
                                </svg>
                                {{ $message }}
                            </p>
                        @enderror
                    </div>
                </div>

                <!-- Remember Me & Forgot Password -->
                <div class="flex items-center justify-between transition-all duration-300" id="rememberSection" style="display: {{ old('account_type') && old('company_id') ? 'flex' : 'none' }};">
                    <div class="flex items-center">
                        <input id="remember" name="remember" type="checkbox" 
                            class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded cursor-pointer">
                        <label for="remember" class="ml-2 block text-sm text-gray-700 cursor-pointer">
                            {{ __('messages.remember_me') ?? 'Remember me' }}
                        </label>
                    </div>
                    <div class="text-sm">
                        <a href="#" class="font-medium text-blue-600 hover:text-blue-700 transition duration-150 hover:underline">
                            {{ __('messages.forgot_password') ?? 'Forgot password?' }}
                        </a>
                    </div>
                </div>

                <!-- Submit Button -->
                <div class="transition-all duration-300" id="submitSection" style="display: {{ old('account_type') && old('company_id') ? 'block' : 'none' }};">
                    <button type="submit" 
                        class="group relative w-full flex justify-center items-center py-3.5 px-4 border border-transparent text-base font-semibold rounded-xl text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-lg hover:shadow-xl transform hover:-translate-y-0.5">
                        <span class="absolute left-0 inset-y-0 flex items-center pl-4">
                            <svg class="h-5 w-5 text-blue-200 group-hover:text-white transition duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <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"></path>
                            </svg>
                        </span>
                        {{ __('messages.login') ?? 'Sign In' }}
                    </button>
                </div>

                <!-- Register Link -->
                <div class="text-center pt-6 border-t border-gray-200">
                    <p class="text-sm text-gray-600 mb-3">Don't have an account?</p>
                    <a href="{{ route('register') }}" 
                        class="inline-flex items-center justify-center w-full py-3 px-4 border-2 border-blue-600 text-base font-semibold rounded-xl text-blue-600 bg-white hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 shadow-sm hover:shadow-md">
                        {{ __('messages.register') ?? 'Create Account' }}
                    </a>
                    <p class="text-xs text-gray-500 mt-4">
                        <a href="{{ route('admin.login') }}" class="text-purple-600 hover:text-purple-700 font-medium hover:underline inline-flex items-center">
                            Super Admin Login
                            <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                            </svg>
                        </a>
                    </p>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
function handleAccountTypeChange() {
    const accountType = document.querySelector('input[name="account_type"]:checked')?.value;
    const companySelection = document.getElementById('companySelection');
    const tenantSelection = document.getElementById('tenantSelection');
    const loginCredentialsSection = document.getElementById('loginCredentialsSection');
    const rememberSection = document.getElementById('rememberSection');
    const submitSection = document.getElementById('submitSection');
    const companyIdSelect = document.getElementById('company_id');
    const tenantIdSelect = document.getElementById('tenant_id');
    
    // Update visual selection
    const companyLabel = document.getElementById('companyTypeLabel');
    const tenantLabel = document.getElementById('tenantTypeLabel');
    const companyCheck = document.getElementById('companyCheckIcon');
    const tenantCheck = document.getElementById('tenantCheckIcon');
    
    if (accountType === 'company') {
        companyLabel.classList.add('border-blue-500', 'bg-blue-50');
        companyLabel.classList.remove('border-gray-200');
        companyCheck.classList.remove('hidden');
        tenantLabel.classList.remove('border-blue-500', 'bg-blue-50');
        tenantLabel.classList.add('border-gray-200');
        tenantCheck.classList.add('hidden');
        tenantSelection.style.display = 'none';
        tenantIdSelect.removeAttribute('required');
    } else if (accountType === 'tenant') {
        tenantLabel.classList.add('border-blue-500', 'bg-blue-50');
        tenantLabel.classList.remove('border-gray-200');
        tenantCheck.classList.remove('hidden');
        companyLabel.classList.remove('border-blue-500', 'bg-blue-50');
        companyLabel.classList.add('border-gray-200');
        companyCheck.classList.add('hidden');
        tenantSelection.style.display = 'block';
    }
    
    // Show company selection if account type is selected
    if (accountType) {
        companySelection.style.display = 'block';
        companyIdSelect.setAttribute('required', 'required');
    } else {
        companySelection.style.display = 'none';
        loginCredentialsSection.style.display = 'none';
        rememberSection.style.display = 'none';
        submitSection.style.display = 'none';
        companyIdSelect.removeAttribute('required');
    }
    
    // Trigger change on company select if already has value
    if (companyIdSelect.value) {
        handleCompanyChange();
    }
}

function handleCompanyChange() {
    const companyIdSelect = document.getElementById('company_id');
    const tenantIdSelect = document.getElementById('tenant_id');
    const loginCredentialsSection = document.getElementById('loginCredentialsSection');
    const rememberSection = document.getElementById('rememberSection');
    const submitSection = document.getElementById('submitSection');
    const accountType = document.querySelector('input[name="account_type"]:checked')?.value;
    const companyId = companyIdSelect.value;
    
    if (companyId && accountType === 'tenant') {
        // Load tenants for selected company via AJAX
        fetch(`/api/companies/${companyId}/tenants`)
            .then(response => response.json())
            .then(data => {
                tenantIdSelect.innerHTML = '<option value="">-- Select Tenant (Optional) --</option>';
                data.forEach(tenant => {
                    const option = document.createElement('option');
                    option.value = tenant.id;
                    option.textContent = `${tenant.first_name} ${tenant.last_name} (${tenant.email || tenant.phone})`;
                    tenantIdSelect.appendChild(option);
                });
            })
            .catch(error => console.error('Error loading tenants:', error));
    }
    
    // Show login credentials when company is selected
    if (companyId) {
        loginCredentialsSection.style.display = 'block';
        rememberSection.style.display = 'flex';
        submitSection.style.display = 'block';
    } else {
        loginCredentialsSection.style.display = 'none';
        rememberSection.style.display = 'none';
        submitSection.style.display = 'none';
    }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    handleAccountTypeChange();
    
    // Set initial border styles
    const accountType = document.querySelector('input[name="account_type"]:checked')?.value;
    if (accountType === 'company') {
        document.getElementById('companyTypeLabel').classList.add('border-blue-500', 'bg-blue-50');
        document.getElementById('companyCheckIcon').classList.remove('hidden');
    } else if (accountType === 'tenant') {
        document.getElementById('tenantTypeLabel').classList.add('border-blue-500', 'bg-blue-50');
        document.getElementById('tenantCheckIcon').classList.remove('hidden');
    }
    
    // Add event listener for company selection change (only once)
    const companyIdSelect = document.getElementById('company_id');
    if (companyIdSelect) {
        companyIdSelect.addEventListener('change', handleCompanyChange);
    }
});
</script>
@endsection