@extends('layouts/blankLayout')

@section('title', 'Register')

@section('page-style')
<!-- Bootstrap 5 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<style>
    body {
        background-color: #f4f6f9;
    }

    .register-section {
        height: 100vh;
    }

    .register-form-box {
        background: #fff;
        padding: 60px 50px;
        border-radius: 16px;
        border: 1px solid #dee2e6;
        max-width: 520px;
    }

    .logo-img {
        height: 140px;
        width: auto;
    }

    .btn-primary {
        background-color: #22C55E;
        border-color: #22C55E;
        font-weight: 600;
        padding: 0.75rem;
    }

    .form-control-lg {
        border-radius: 0.5rem;
    }

    .auth-image {
        object-fit: cover;
        width: 100%;
        height: 100vh;
    }
</style>
@endsection

@section('content')
<div class="container-fluid px-0">
    <div class="row register-section g-0">
        <!-- Left Side: Registration Form -->
        <div class="col-lg-6 d-flex align-items-center justify-content-center">
            <div class="register-form-box w-100">
                <div class="text-center mb-4">
                    <img src="{{ asset('assets/img/logo.png') }}" alt="Logo" class="logo-img mb-3">
                    <h2>Register</h2>
                    <p class="text-muted">Create your admin account</p>
                </div>

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

                <form id="formAuthentication" action="{{ route('auth.register.basic.submit') }}" method="POST">
                    @csrf
                    <div class="mb-4">
                        <label for="username" class="form-label">Username</label>
                        <input type="text" class="form-control form-control-lg" id="username" name="username"
                               placeholder="Enter username" required autofocus>
                    </div>

                    <div class="mb-4">
                        <label for="email" class="form-label">Email</label>
                        <input type="text" class="form-control form-control-lg" id="email" name="email"
                               placeholder="Enter email" required>
                    </div>

                    <div class="mb-4">
                        <label for="password" class="form-label">Password</label>
                        <div class="input-group input-group-lg">
                            <input type="password" class="form-control" id="password" name="password"
                                   placeholder="Enter password" required>
                            <button type="button" class="btn btn-outline-secondary" id="togglePassword">
                                <i class="mdi mdi-eye-off-outline" id="eyeIcon"></i>
                            </button>
                        </div>
                    </div>

                    <div class="form-check mb-4">
                        <input class="form-check-input" type="checkbox" id="terms-conditions" name="terms" required>
                        <label class="form-check-label" for="terms-conditions">
                            I agree to the <a href="#">privacy policy & terms</a>
                        </label>
                    </div>

                    <div class="d-grid mb-3">
                        <button type="submit" class="btn btn-primary btn-md">Sign Up</button>
                    </div>

                    <p class="text-center mb-0">
                        Already have an account?
                        <a href="{{ url('auth/login-basic') }}">Sign in instead</a>
                    </p>
                </form>
            </div>
        </div>

        <!-- Right Side: Fintech Illustration -->
        <div class="col-lg-6 d-none d-lg-block">
            <img src="{{ asset('assets/img/fintech-portal.png') }}" alt="Fintech Illustration" class="auth-image">
        </div>
    </div>
</div>
@endsection

@section('page-script')
<script>
    document.getElementById('togglePassword').addEventListener('click', function () {
        const passwordInput = document.getElementById('password');
        const icon = document.getElementById('eyeIcon');
        if (passwordInput.type === 'password') {
            passwordInput.type = 'text';
            icon.classList.remove('mdi-eye-off-outline');
            icon.classList.add('mdi-eye-outline');
        } else {
            passwordInput.type = 'password';
            icon.classList.remove('mdi-eye-outline');
            icon.classList.add('mdi-eye-off-outline');
        }
    });
</script>
@endsection