@extends('layouts.app')
@section('title', 'Sign Up Here! — JOBES')

@section('content')
<div class="d-flex align-items-center justify-content-center" style="background:#ffffff; min-height:85vh; padding-top:4rem; padding-bottom:4rem;">
    <div class="container">
        
        <!-- Header Page Title -->
        <div class="text-center mb-5 animate__animated animate__fadeInDown">
            <h1 class="fw-900 text-dark mb-2" style="font-size:2.4rem; letter-spacing:-1px;">Sign Up Here!</h1>
            <div class="d-flex justify-content-center">
                <span style="width:6px; height:6px; background:#0d9488; border-radius:50%; display:block;"></span>
            </div>
        </div>

        <div class="row justify-content-center">
            <div class="col-lg-6 col-md-8 col-sm-10 col-12">
                
                <!-- White Custom Register Card -->
                <div class="card bg-white border p-5 rounded-4 shadow-xl animate__animated animate__fadeInUp" style="border-color:#e2e8f0 !important; box-shadow: 0 20px 40px rgba(0,0,0,0.03) !important;">
                    
                    @if($errors->any())
                    <div class="alert alert-danger border-0 rounded-3 mb-4 text-start" style="background:rgba(239,68,68,0.08); color:#ef4444; font-size:0.88rem; font-weight:600;">
                        <ul class="mb-0 ps-3">
                            @foreach($errors->all() as $e)
                                <li>{{ $e }}</li>
                            @endforeach
                        </ul>
                    </div>
                    @endif

                    <!-- Premium Custom Role Toggle Selector -->
                    <div class="d-flex gap-2 mb-4 p-1 mb-4" style="background:#f1f5f9; border-radius:12px;">
                        <label class="flex-fill text-center py-2.5 px-3 rounded-3 cursor-pointer fw-800 small transition-all-200" id="label-seeker" style="user-select:none;">
                            <input type="radio" name="role_toggle" value="job_seeker" hidden checked onchange="setRole(this.value)">
                            <i class="far fa-user me-2"></i>Job Seeker
                        </label>
                        <label class="flex-fill text-center py-2.5 px-3 rounded-3 cursor-pointer fw-800 small transition-all-200" id="label-recruiter" style="user-select:none;">
                            <input type="radio" name="role_toggle" value="recruiter" hidden onchange="setRole(this.value)">
                            <i class="far fa-building me-2"></i>Recruiter
                        </label>
                    </div>

                    <form method="POST" action="{{ route('register') }}">
                        @csrf
                        <input type="hidden" name="role" id="role-input" value="job_seeker">
                        
                        <!-- Full Name Input Block -->
                        <div class="mb-4 text-start">
                            <label class="form-label text-dark small fw-800" style="letter-spacing:0.3px;">Full Name*</label>
                            <div class="input-group align-items-center rounded-3 px-3 py-1 bg-white border" style="border-color:#cbd5e1 !important; transition:all 0.2s;" onfocusin="this.style.borderColor='#0d9488'" onfocusout="this.style.borderColor='#cbd5e1'">
                                <span class="text-muted pe-2" style="font-size:0.95rem; border-right:1px solid #e2e8f0;"><i class="far fa-user text-muted"></i></span>
                                <input type="text" name="name" value="{{ old('name') }}" class="form-control border-0 bg-transparent text-dark ps-3 focus-none py-2" placeholder="John Doe" required style="outline:none; box-shadow:none; font-weight:500;">
                            </div>
                        </div>

                        <!-- Email Input Block -->
                        <div class="mb-4 text-start">
                            <label class="form-label text-dark small fw-800" style="letter-spacing:0.3px;">Email Address*</label>
                            <div class="input-group align-items-center rounded-3 px-3 py-1 bg-white border" style="border-color:#cbd5e1 !important; transition:all 0.2s;" onfocusin="this.style.borderColor='#0d9488'" onfocusout="this.style.borderColor='#cbd5e1'">
                                <span class="text-muted pe-2" style="font-size:0.95rem; border-right:1px solid #e2e8f0;"><i class="far fa-envelope text-muted"></i></span>
                                <input type="email" name="email" value="{{ old('email') }}" class="form-control border-0 bg-transparent text-dark ps-3 focus-none py-2" placeholder="info@example.com" required style="outline:none; box-shadow:none; font-weight:500;">
                            </div>
                        </div>

                        <!-- Double password input Row -->
                        <div class="row g-3 mb-4">
                            <div class="col-md-6 col-12 text-start">
                                <label class="form-label text-dark small fw-800" style="letter-spacing:0.3px;">Password*</label>
                                <div class="input-group align-items-center rounded-3 px-3 py-1 bg-white border" style="border-color:#cbd5e1 !important; transition:all 0.2s;" onfocusin="this.style.borderColor='#0d9488'" onfocusout="this.style.borderColor='#cbd5e1'">
                                    <input type="password" name="password" id="regPass" class="form-control border-0 bg-transparent text-dark focus-none py-2" placeholder="••••••••" required style="outline:none; box-shadow:none; font-weight:500;">
                                    <span class="ps-2 cursor-pointer text-muted" onclick="togglePass('regPass')" style="font-size:0.95rem; border-left:1px solid #e2e8f0;">
                                        <i class="far fa-eye-slash" id="regPassIcon"></i>
                                    </span>
                                </div>
                            </div>
                            <div class="col-md-6 col-12 text-start">
                                <label class="form-label text-dark small fw-800" style="letter-spacing:0.3px;">Confirm Password*</label>
                                <div class="input-group align-items-center rounded-3 px-3 py-1 bg-white border" style="border-color:#cbd5e1 !important; transition:all 0.2s;" onfocusin="this.style.borderColor='#0d9488'" onfocusout="this.style.borderColor='#cbd5e1'">
                                    <input type="password" name="password_confirmation" id="regPassConfirm" class="form-control border-0 bg-transparent text-dark focus-none py-2" placeholder="••••••••" required style="outline:none; box-shadow:none; font-weight:500;">
                                </div>
                            </div>
                        </div>

                        <!-- Submit sign up button -->
                        <button type="submit" class="btn btn-primary-gradient w-100 py-3 fw-800 fs-6 rounded-3" style="letter-spacing:0.5px;">
                            Sign Up
                        </button>
                    </form>

                    <!-- Redirection to login page -->
                    <div class="text-center mt-4">
                        <p class="text-muted small mb-0 fw-600">Already have an account? <a href="{{ route('login') }}" class="text-teal-accent fw-800 text-decoration-none hover-teal">Sign In</a></p>
                    </div>

                </div>
            </div>
        </div>
        
    </div>
</div>
@endsection

@section('scripts')
<script>
function togglePass(id) {
    const input = document.getElementById(id);
    const icon = document.getElementById(id + 'Icon');
    if (input.type === 'password') {
        input.type = 'text';
        icon.className = 'far fa-eye';
    } else {
        input.type = 'password';
        icon.className = 'far fa-eye-slash';
    }
}

function setRole(role) {
    document.getElementById('role-input').value = role;
    
    // update seeker tab styling
    document.getElementById('label-seeker').style.background = role === 'job_seeker' ? '#0d9488' : 'transparent';
    document.getElementById('label-seeker').style.color      = role === 'job_seeker' ? '#ffffff' : '#64748b';
    
    // update recruiter tab styling
    document.getElementById('label-recruiter').style.background = role === 'recruiter' ? '#0d9488' : 'transparent';
    document.getElementById('label-recruiter').style.color      = role === 'recruiter' ? '#ffffff' : '#64748b';
}

// Initial state set
setRole('job_seeker');
</script>
@endsection

@section('styles')
<style>
    .fw-900 { font-weight: 900; }
    .fw-800 { font-weight: 800; }
    .focus-none:focus {
        outline: none !important;
        box-shadow: none !important;
    }
</style>
@endsection