@extends('layouts.auth')

@section('title', 'Register')

@push('styles')
<style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

    html, body {
        height: 100%;
        font-family: 'Poppins', sans-serif;
        background-color: #fff;
        overflow: hidden;
    }

    .register-card {
        border: 1px solid #FEBD21;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        transition: 0.3s ease;
    }

    .register-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
    }

    .logo-text span:last-child {
        color: #FEBD21;
    }

    .password-toggle {
        position: absolute;
        top: 50%;
        right: 1rem;
        transform: translateY(-50%);
        cursor: pointer;
        color: #aaa;
    }

    .divider {
        display: flex;
        align-items: center;
        text-align: center;
        margin: 1.5rem 0;
    }

    .divider::before,
    .divider::after {
        content: '';
        flex: 1;
        border-bottom: 1px solid #dee2e6;
    }

    .divider span {
        padding: 0 1rem;
        font-size: 0.85rem;
        color: #6c757d;
    }
</style>
@endpush

@section('content')
<div class="d-flex align-items-center justify-content-center h-100">
    <div class="register-card p-4 p-md-5 bg-white" style="max-width: 600px; width: 100%;">
        {{-- Logo --}}
        <div class="text-center mb-4">
            <div class="d-flex align-items-center justify-content-center gap-2 mb-2">
                <img src="{{ asset('logo.png') }}" alt="FlareSend Logo" class="me-2" style="height: 28px;">
                <span class="logo-text fw-bold fs-5 text-dark">
                    <span>Flare</span><span>Send</span>
                </span>
            </div>
            {{-- <h4 class="fw-bold mb-1">Create Account</h4> --}}
            <p class="text-muted small mb-0">Reach customers directly on WhatsApp</p>
        </div>

        {{-- Alerts --}}
        @if(session('success'))
            <div class="alert alert-success">{{ session('success') }}</div>
        @endif
        @if(session('error'))
            <div class="alert alert-danger">{{ session('error') }}</div>
        @endif

        @if ($errors->any())
            <div class="alert alert-danger">
                <ul class="mb-0">
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif


        {{-- Registration Form --}}
        <form method="POST" action="{{ route('register.post') }}" class="mt-3">
            @csrf
            
            <div class="row mb-3">
                <div class="col-md-6 mb-3 mb-md-0">
                    <input type="text" name="firstname" class="form-control @error('firstname') is-invalid @enderror" 
                           placeholder="First name" value="{{ old('firstname') }}" required>
                </div>
                <div class="col-md-6">
                    <input type="text" name="lastname" class="form-control @error('lastname') is-invalid @enderror" 
                           placeholder="Last name" value="{{ old('lastname') }}" required>
                </div>
            </div>

            <div class="mb-3">
                <input type="email" name="email" class="form-control @error('email') is-invalid @enderror" 
                       placeholder="Email address" value="{{ old('email') }}" required>
            </div>

            <div class="row mb-3">
                <div class="col-md-6 position-relative mb-3 mb-md-0">
                    <input type="password" name="password" class="form-control password-field @error('password') is-invalid @enderror" id="password" placeholder="Password" required>
                    <i class="fas fa-eye password-toggle" id="togglePassword"></i>
                </div>
                <div class="col-md-6 position-relative">
                    <input type="password" name="password_confirmation" class="form-control password-field @error('password_confirmation') is-invalid @enderror" id="confirmPassword" 
                           placeholder="Confirm password" required>
                    <i class="fas fa-eye password-toggle" id="toggleConfirmPassword"></i>
                </div>
            </div>

           <div class="form-check mb-3">
                <input type="checkbox" name="terms" class="form-check-input" id="terms" required>
                <label class="form-check-label small" for="terms">
                    I agree to the 
                    <a href="{{ route('landing.terms') }}" class="text-decoration-none" style="color: #FEBD21; font-weight: 600;">Terms</a> 
                    and 
                    <a href="{{ route('landing.privacy') }}" class="text-decoration-none" style="color: #FEBD21; font-weight: 600;">Privacy Policy</a>
                </label>
            </div>

            <div style="display:none;">
                <label for="contact_time">Contact Time (leave empty)</label>
                <input type="text" name="contact_time" id="contact_time" autocomplete="off">
            </div>


            <button type="submit" class="btn w-100 text-white" style="background-color: #FEBD21;">
                <i class="fas fa-user-plus me-2"></i>
                Create Account
            </button>

            {{-- Divider --}}
            {{-- <div class="divider">
                <span>or</span>
            </div>

            <button type="button" class="btn btn-outline-secondary w-100">
                <i class="fab fa-google me-2"></i> Sign up with Google
            </button> --}}

            <p class="text-center small mt-4 mb-0">
                Already have an account?
                <a href="{{ route('login') }}" class="text-decoration-none" style="color: #FEBD21; font-weight: 600;">Sign In</a>
            </p>
        </form>
    </div>
</div>
@endsection