@inject('comp_model', 'App\Models\ComponentsData')
@php
    $pageTitle = "Create Your Account | NADDC-CNG";
@endphp

@extends($layout)
@section('title', $pageTitle)

@section('content')
<div class="register-container">
    <div class="split-screen">
        {{-- Left Side - Registration Form --}}
        <div class="left-panel">
            <div class="form-container">
                <div class="form-header">
                    <a href="{{ url()->previous() }}" class="back-button">
                        <i class="material-icons">arrow_back</i>
                    </a>
                    <div class="header-content">
                        <img src="{{ asset('images/logo.png') }}" alt="NADDC Logo" class="form-logo">
                        <h1>Create Your Account</h1>
                        <p>Join Nigeria's CNG conversion network</p>
                    </div>
                </div>

                {{-- Payment Notice --}}
                <div class="payment-notice">
                    <div class="notice-icon">
                        <i class="material-icons">account_balance_wallet</i>
                    </div>
                    <div class="notice-content">
                        <h4>Payment Information</h4>
                        <p>After registration, you can make payments directly through your dashboard via the <strong>Remita Payment Gateway</strong></p>
                        <span class="badge-important">
                            <i class="material-icons">info</i>
                            Required for all conversion workshops
                        </span>
                    </div>
                </div>

                {{-- Registration Form --}}
                <form id="registration-form"
                      class="modern-form"
                      action="{{ route('auth.register_store') }}"
                      method="post"
                      enctype="multipart/form-data"
                      novalidate>
                    @csrf

                    <div class="form-grid">
                        {{-- Username Field --}}
                        <div class="form-floating-group">
                            <input type="text"
                                   id="ctrl-username"
                                   name="username"
                                   class="form-control-modern ctrl-check-duplicate"
                                   placeholder=" "
                                   value="{{ get_value('username') }}"
                                   data-url="componentsdata/users_username_value_exist/"
                                   data-loading-msg="Checking availability..."
                                   data-available-msg="Available"
                                   data-unavailable-msg="Not available"
                                   required>
                            <label class="floating-label">
                                <i class="material-icons">person</i>
                                Username
                            </label>
                            <div class="input-underline"></div>
                            <div class="check-status"></div>
                        </div>

                        {{-- Email Field --}}
                        <div class="form-floating-group">
                            <input type="email"
                                   id="ctrl-email"
                                   name="email"
                                   class="form-control-modern ctrl-check-duplicate"
                                   placeholder=" "
                                   value="{{ get_value('email') }}"
                                   data-url="componentsdata/users_email_value_exist/"
                                   data-loading-msg="Checking availability..."
                                   data-available-msg="Available"
                                   data-unavailable-msg="Not available"
                                   required>
                            <label class="floating-label">
                                <i class="material-icons">email</i>
                                Email Address
                            </label>
                            <div class="input-underline"></div>
                            <div class="check-status"></div>
                        </div>

                        {{-- Password Field --}}
                        <div class="form-floating-group">
                            <input type="password"
                                   id="ctrl-password"
                                   name="password"
                                   class="form-control-modern password-strength"
                                   placeholder=" "
                                   value="{{ get_value('password') }}"
                                   required>
                            <label class="floating-label">
                                <i class="material-icons">lock</i>
                                Password
                            </label>
                            <div class="input-underline"></div>
                            <button type="button" class="toggle-password">
                                <i class="material-icons">visibility</i>
                            </button>
                            <div class="password-strength-indicator">
                                <div class="strength-bar"></div>
                                <div class="strength-text">Password Strength</div>
                            </div>
                        </div>

                        {{-- Confirm Password Field --}}
                        <div class="form-floating-group">
                            <input type="password"
                                   id="ctrl-password-confirm"
                                   name="confirm_password"
                                   class="form-control-modern password-confirm"
                                   placeholder=" "
                                   data-match="#ctrl-password"
                                   required>
                            <label class="floating-label">
                                <i class="material-icons">lock_outline</i>
                                Confirm Password
                            </label>
                            <div class="input-underline"></div>
                            <button type="button" class="toggle-password">
                                <i class="material-icons">visibility</i>
                            </button>
                            <div class="invalid-feedback">Passwords do not match</div>
                        </div>

                        {{-- Phone Field --}}
                        <div class="form-floating-group full-width">
                            <input type="tel"
                                   id="ctrl-phone"
                                   name="phone"
                                   class="form-control-modern"
                                   placeholder=" "
                                   value="{{ get_value('phone') }}"
                                   required>
                            <label class="floating-label">
                                <i class="material-icons">phone</i>
                                Phone Number
                            </label>
                            <div class="input-underline"></div>
                        </div>

                        {{-- Image Upload --}}
                        <div class="form-floating-group full-width">
                            <div class="modern-upload">
                                <input type="file"
                                       id="ctrl-image"
                                       name="image"
                                       accept=".jpg,.png,.gif,.jpeg"
                                       class="upload-input">
                                <label for="ctrl-image" class="upload-label">
                                    <div class="upload-icon">
                                        <i class="material-icons">cloud_upload</i>
                                    </div>
                                    <div class="upload-text">
                                        <span class="upload-title">Upload Company Logo</span>
                                        <span class="upload-subtitle">Click to browse or drag and drop</span>
                                        <span class="upload-formats">JPG, PNG, GIF (Max 3MB)</span>
                                    </div>
                                    <div class="upload-preview" id="image-preview"></div>
                                </label>
                            </div>
                        </div>
                    </div>

                    <div class="password-requirements">
                        <p class="requirements-title">Password Requirements:</p>
                        <div class="requirement-chips">
                            <span class="chip" data-requirement="length">
                                <i class="material-icons">check_circle</i>
                                6+ Characters
                            </span>
                            <span class="chip" data-requirement="caps">
                                <i class="material-icons">check_circle</i>
                                Capital Letter
                            </span>
                            <span class="chip" data-requirement="number">
                                <i class="material-icons">check_circle</i>
                                Number
                            </span>
                            <span class="chip" data-requirement="special">
                                <i class="material-icons">check_circle</i>
                                Symbol
                            </span>
                        </div>
                    </div>

                    <div class="form-actions">
                        <button type="submit" class="btn-submit">
                            <span class="btn-text">Create Account</span>
                            <i class="material-icons">arrow_forward</i>
                            <div class="btn-loader">
                                <div class="spinner"></div>
                            </div>
                        </button>

                        <div class="divider">
                            <span>OR</span>
                        </div>

                        <div class="login-link">
                            Already have an account?
                            <a href="{{ url('/') }}" class="link-primary">Sign In</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        {{-- Right Side - Information Panel --}}
        <div class="right-panel">
            <div class="info-container">
                <div class="info-header">
                    <h2>Join the CNG Revolution</h2>
                    <p>Be part of Nigeria's sustainable energy transformation</p>
                </div>

                <div class="benefits-section">
                    <div class="benefit-card">
                        <div class="benefit-icon">
                            <i class="material-icons">security</i>
                        </div>
                        <div class="benefit-content">
                            <h3>Secure Platform</h3>
                            <p>Your data is protected with industry-standard encryption</p>
                        </div>
                    </div>

                    <div class="benefit-card">
                        <div class="benefit-icon">
                            <i class="material-icons">speed</i>
                        </div>
                        <div class="benefit-content">
                            <h3>Fast Approval</h3>
                            <p>Quick verification and certification process</p>
                        </div>
                    </div>

                    <div class="benefit-card">
                        <div class="benefit-icon">
                            <i class="material-icons">support_agent</i>
                        </div>
                        <div class="benefit-content">
                            <h3>24/7 Support</h3>
                            <p>Dedicated support team ready to assist you</p>
                        </div>
                    </div>

                    <div class="benefit-card">
                        <div class="benefit-icon">
                            <i class="material-icons">payments</i>
                        </div>
                        <div class="benefit-content">
                            <h3>Easy Payments</h3>
                            <p>Seamless payment processing through Remita</p>
                        </div>
                    </div>
                </div>

                <div class="testimonial-section">
                    <div class="testimonial-card">
                        <div class="quote-icon">"</div>
                        <p class="testimonial-text">
                            The NADDC-CNG platform has streamlined our certification process.
                            The online payment system makes everything so convenient.
                        </p>
                        <div class="testimonial-author">
                            <img src="{{ asset('images/avatar-placeholder.png') }}" alt="User" class="author-avatar">
                            <div class="author-info">
                                <h4>John Adewale</h4>
                                <p>Certified Workshop Owner</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="stats-row">
                    <div class="stat-item">
                        <span class="stat-value" data-target="500">0</span>
                        <span class="stat-label">Workshops</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-value" data-target="10000">0</span>
                        <span class="stat-label">Conversions</span>
                    </div>
                    <div class="stat-item">
                        <span class="stat-value" data-target="98">0</span>
                        <span class="stat-label">% Satisfaction</span>
                    </div>
                </div>
            </div>

            <div class="floating-shapes">
                <div class="shape shape-1"></div>
                <div class="shape shape-2"></div>
                <div class="shape shape-3"></div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('pagecss')
<style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #2c3e50;
    --primary-dark: #1a252f;
    --primary-light: #34495e;
    --accent-color: #3498db;
    --success-color: #27ae60;
    --danger-color: #e74c3c;
    --warning-color: #f39c12;
    --text-dark: #2c3e50;
    --text-light: #7f8c8d;
    --bg-light: #ecf0f1;
    --white: #ffffff;
}

.register-container {
    min-height: 100vh;
    width: 100%;
    background: var(--bg-light);
}

.split-screen {
    display: flex;
    min-height: 100vh;
}

/* Left Panel - Form Section */
.left-panel {
    flex: 1.2;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    overflow-y: auto;
}

.form-container {
    width: 100%;
    max-width: 600px;
    animation: fadeInLeft 0.8s ease;
}

.form-header {
    margin-bottom: 30px;
    position: relative;
}

.back-button {
    position: absolute;
    left: -50px;
    top: 10px;
    width: 40px;
    height: 40px;
    background: var(--bg-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--text-dark);
    transition: all 0.3s ease;
}

.back-button:hover {
    background: var(--primary-color);
    color: var(--white);
    transform: translateX(-5px);
}

.header-content {
    text-align: center;
}

.form-logo {
    width: 80px;
    height: 80px;
    margin-bottom: 20px;
    animation: bounceIn 1s ease;
}

.header-content h1 {
    font-size: 2rem;
    color: var(--primary-color);
    margin-bottom: 10px;
    font-weight: 700;
}

.header-content p {
    color: var(--text-light);
    font-size: 1rem;
}

/* Payment Notice */
.payment-notice {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-light) 100%);
    border-radius: 15px;
    padding: 20px;
    margin-bottom: 30px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    position: relative;
    overflow: hidden;
    animation: slideInUp 0.8s ease;
}

.payment-notice::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.notice-icon {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notice-icon i {
    font-size: 24px;
    color: var(--white);
}

.notice-content {
    flex: 1;
}

.notice-content h4 {
    color: var(--white);
    margin-bottom: 8px;
    font-size: 1.1rem;
    font-weight: 600;
}

.notice-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    margin-bottom: 10px;
    line-height: 1.5;
}

.badge-important {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, 0.2);
    color: var(--white);
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
}

.badge-important i {
    font-size: 16px;
}

/* Form Styles */
.modern-form {
    width: 100%;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-bottom: 20px;
}

.form-floating-group {
    position: relative;
}

.form-floating-group.full-width {
    grid-column: span 2;
}

.form-control-modern {
    width: 100%;
    padding: 15px 15px 15px 45px;
    border: 2px solid var(--bg-light);
    border-radius: 10px;
    background: var(--white);
    font-size: 1rem;
    transition: all 0.3s ease;
}

.form-control-modern:focus {
    outline: none;
    border-color: var(--primary-color);
    background: var(--white);
}

.floating-label {
    position: absolute;
    left: 45px;
    top: 15px;
    color: var(--text-light);
    font-size: 1rem;
    pointer-events: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    background: var(--white);
    padding: 0 5px;
}

.floating-label i {
    position: absolute;
    left: -35px;
    color: var(--text-light);
    font-size: 20px;
}

.form-control-modern:focus ~ .floating-label,
.form-control-modern:not(:placeholder-shown) ~ .floating-label {
    top: -10px;
    left: 15px;
    font-size: 0.85rem;
    color: var(--primary-color);
}

.form-control-modern:focus ~ .floating-label i,
.form-control-modern:not(:placeholder-shown) ~ .floating-label i {
    color: var(--primary-color);
}

.input-underline {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transition: width 0.3s ease;
    border-radius: 2px;
}

.form-control-modern:focus ~ .input-underline {
    width: 100%;
}

/* Password Toggle */
.toggle-password {
    position: absolute;
    right: 15px;
    top: 15px;
    background: none;
    border: none;
    color: var(--text-light);
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 2;
}

.toggle-password:hover {
    color: var(--primary-color);
}

/* Password Strength Indicator */
.password-strength-indicator {
    margin-top: 5px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.form-control-modern:focus ~ .password-strength-indicator {
    opacity: 1;
}

.strength-bar {
    height: 4px;
    background: var(--bg-light);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}

.strength-bar::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0;
    background: var(--danger-color);
    transition: all 0.3s ease;
}

.strength-bar.weak::after {
    width: 33%;
    background: var(--danger-color);
}

.strength-bar.medium::after {
    width: 66%;
    background: var(--warning-color);
}

.strength-bar.strong::after {
    width: 100%;
    background: var(--success-color);
}

.strength-text {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-top: 5px;
}

/* Check Status */
.check-status {
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 0.85rem;
}

.check-status.available {
    color: var(--success-color);
}

.check-status.unavailable {
    color: var(--danger-color);
}

.check-status.checking {
    color: var(--text-light);
}

/* Modern Upload */
.modern-upload {
    width: 100%;
}

.upload-input {
    display: none;
}

.upload-label {
    display: block;
    padding: 30px;
    border: 2px dashed var(--bg-light);
    border-radius: 10px;
    background: var(--white);
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.upload-label:hover {
    border-color: var(--primary-color);
    background: var(--bg-light);
}

.upload-icon i {
    font-size: 48px;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.upload-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.upload-title {
    font-size: 1.1rem;
    color: var(--text-dark);
    font-weight: 600;
}

.upload-subtitle {
    font-size: 0.9rem;
    color: var(--text-light);
}

.upload-formats {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: 5px;
}

.upload-preview {
    display: none;
    margin-top: 15px;
}

.upload-preview img {
    max-width: 150px;
    max-height: 150px;
    border-radius: 8px;
}

/* Password Requirements */
.password-requirements {
    background: var(--bg-light);
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 25px;
}

.requirements-title {
    font-size: 0.9rem;
    color: var(--text-dark);
    margin-bottom: 10px;
    font-weight: 600;
}

.requirement-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: var(--white);
    border: 1px solid #ddd;
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--text-light);
    transition: all 0.3s ease;
}

.chip i {
    font-size: 16px;
    color: var(--text-light);
}

.chip.valid {
    background: var(--success-color);
    color: var(--white);
    border-color: var(--success-color);
}

.chip.valid i {
    color: var(--white);
}

/* Form Actions */
.form-actions {
    margin-top: 30px;
}

.btn-submit {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: var(--white);
    border: none;
    border-radius: 10px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(44, 62, 80, 0.3);
}

.btn-submit::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    transition: left 0.5s ease;
}

.btn-submit:hover::before {
    left: 100%;
}

.btn-loader {
    display: none;
    position: absolute;
}

.btn-submit.loading .btn-text,
.btn-submit.loading i {
    opacity: 0;
}

.btn-submit.loading .btn-loader {
    display: block;
}

.spinner {
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: var(--white);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Divider */
.divider {
    text-align: center;
    margin: 25px 0;
    position: relative;
}

.divider::before,
.divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 45%;
    height: 1px;
    background: var(--bg-light);
}

.divider::before {
    left: 0;
}

.divider::after {
    right: 0;
}

.divider span {
    background: var(--white);
    padding: 0 15px;
    color: var(--text-light);
    font-size: 0.9rem;
}

/* Login Link */
.login-link {
    text-align: center;
    color: var(--text-dark);
}

.link-primary {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.link-primary:hover {
    color: var(--accent-color);
    text-decoration: underline;
}

/* Right Panel - Info Section */
.right-panel {
    flex: 1;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    overflow: hidden;
}

.info-container {
    position: relative;
    z-index: 1;
    max-width: 500px;
    width: 100%;
    animation: fadeInRight 0.8s ease;
}

.info-header {
    text-align: center;
    margin-bottom: 40px;
}

.info-header h2 {
    font-size: 2.5rem;
    color: var(--white);
    margin-bottom: 10px;
    font-weight: 700;
}

.info-header p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.1rem;
}

/* Benefits Section */
.benefits-section {
    margin-bottom: 40px;
}

.benefit-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.benefit-card:hover {
    background: rgba(255, 255, 255, 0.15);
    transform: translateX(10px);
}

.benefit-icon {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefit-icon i {
    font-size: 24px;
    color: var(--white);
}

.benefit-content h3 {
    color: var(--white);
    font-size: 1.1rem;
    margin-bottom: 5px;
    font-weight: 600;
}

.benefit-content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Testimonial Section */
.testimonial-section {
    margin-bottom: 40px;
}

.testimonial-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.quote-icon {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.2);
    line-height: 1;
    margin-bottom: 10px;
}

.testimonial-text {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
    font-style: italic;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.author-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--white);
    padding: 2px;
}

.author-info h4 {
    color: var(--white);
    font-size: 1rem;
    margin-bottom: 2px;
}

.author-info p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
}

/* Stats Row */
.stats-row {
    display: flex;
    justify-content: space-around;
    text-align: center;
}

.stat-item {
    flex: 1;
}

.stat-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Floating Shapes */
.floating-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}

.shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
}

.shape-1 {
    width: 300px;
    height: 300px;
    background: var(--white);
    top: -150px;
    right: -150px;
    animation: float 20s ease-in-out infinite;
}

.shape-2 {
    width: 200px;
    height: 200px;
    background: var(--accent-color);
    bottom: -100px;
    left: -100px;
    animation: float 15s ease-in-out infinite reverse;
}

.shape-3 {
    width: 150px;
    height: 150px;
    background: var(--white);
    top: 50%;
    right: 10%;
    animation: float 25s ease-in-out infinite;
}

/* Animations */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    33% {
        transform: translateY(-30px) rotate(120deg);
    }
    66% {
        transform: translateY(30px) rotate(240deg);
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 1200px) {
    .split-screen {
        flex-direction: column;
    }

    .left-panel {
        padding: 30px 20px;
    }

    .right-panel {
        min-height: auto;
        padding: 40px 20px;
    }

    .back-button {
        position: static;
        margin-bottom: 20px;
        display: inline-flex;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-floating-group.full-width {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .info-header h2 {
        font-size: 2rem;
    }

    .benefits-section {
        display: none;
    }

    .testimonial-section {
        display: none;
    }

    .header-content h1 {
        font-size: 1.5rem;
    }

    .payment-notice {
        flex-direction: column;
        text-align: center;
    }

    .notice-icon {
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .left-panel {
        padding: 20px 15px;
    }

    .form-container {
        width: 100%;
    }

    .stats-row {
        flex-direction: column;
        gap: 20px;
    }
}

/* Invalid Feedback */
.invalid-feedback {
    display: none;
    color: var(--danger-color);
    font-size: 0.85rem;
    margin-top: 5px;
}

.form-control-modern.is-invalid ~ .invalid-feedback {
    display: block;
}

/* Focus States */
.form-control-modern:focus {
    box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);
}

.btn-submit:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.3);
}

/* Loading States */
.form-control-modern:disabled {
    background: var(--bg-light);
    cursor: not-allowed;
    opacity: 0.6;
}

.btn-submit:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}
</style>
@endsection

@section('pagejs')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Password Strength Checker
    const passwordInput = document.getElementById('ctrl-password');
    const strengthBar = document.querySelector('.strength-bar');
    const strengthText = document.querySelector('.strength-text');
    const requirementChips = document.querySelectorAll('.chip[data-requirement]');

    if (passwordInput) {
        passwordInput.addEventListener('input', function() {
            const password = this.value;
            let strength = 0;
            const requirements = {
                length: password.length >= 6,
                caps: /[A-Z]/.test(password),
                number: /[0-9]/.test(password),
                special: /[!@#$%^&*(),.?":{}|<>]/.test(password)
            };

            // Update requirement chips
            Object.keys(requirements).forEach(req => {
                const chip = document.querySelector(`.chip[data-requirement="${req}"]`);
                if (chip) {
                    if (requirements[req]) {
                        chip.classList.add('valid');
                        strength++;
                    } else {
                        chip.classList.remove('valid');
                    }
                }
            });

            // Update strength bar
            if (strengthBar) {
                strengthBar.classList.remove('weak', 'medium', 'strong');
                if (strength <= 2) {
                    strengthBar.classList.add('weak');
                    if (strengthText) strengthText.textContent = 'Weak Password';
                } else if (strength === 3) {
                    strengthBar.classList.add('medium');
                    if (strengthText) strengthText.textContent = 'Medium Strength';
                } else {
                    strengthBar.classList.add('strong');
                    if (strengthText) strengthText.textContent = 'Strong Password';
                }
            }
        });
    }

    // Password Match Validation
    const confirmPasswordInput = document.getElementById('ctrl-password-confirm');
    if (confirmPasswordInput) {
        confirmPasswordInput.addEventListener('input', function() {
            const password = passwordInput.value;
            const confirmPassword = this.value;

            if (confirmPassword && password !== confirmPassword) {
                this.classList.add('is-invalid');
            } else {
                this.classList.remove('is-invalid');
            }
        });
    }

    // Password Toggle
    const toggleButtons = document.querySelectorAll('.toggle-password');
    toggleButtons.forEach(button => {
        button.addEventListener('click', function() {
            const input = this.parentElement.querySelector('input');
            const icon = this.querySelector('i');

            if (input.type === 'password') {
                input.type = 'text';
                icon.textContent = 'visibility_off';
            } else {
                input.type = 'password';
                icon.textContent = 'visibility';
            }
        });
    });

    // File Upload Preview
    const fileInput = document.getElementById('ctrl-image');
    const previewDiv = document.getElementById('image-preview');

    if (fileInput) {
        fileInput.addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (file && file.type.startsWith('image/')) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    if (previewDiv) {
                        previewDiv.innerHTML = `<img src="${e.target.result}" alt="Preview">`;
                        previewDiv.style.display = 'block';
                    }
                };
                reader.readAsDataURL(file);
            }
        });
    }

    // Duplicate Check for Username and Email
    const duplicateCheckInputs = document.querySelectorAll('.ctrl-check-duplicate');
    duplicateCheckInputs.forEach(input => {
        let timeout;
        input.addEventListener('input', function() {
            clearTimeout(timeout);
            const statusDiv = this.parentElement.querySelector('.check-status');
            const value = this.value;
            const url = this.dataset.url;

            if (value.length < 3) {
                if (statusDiv) statusDiv.innerHTML = '';
                return;
            }

            if (statusDiv) {
                statusDiv.innerHTML = '<span class="checking">Checking...</span>';
                statusDiv.classList.add('checking');
            }

            timeout = setTimeout(() => {
                // Simulate availability check (replace with actual AJAX call)
                fetch(url + value)
                    .then(response => response.json())
                    .then(data => {
                        if (statusDiv) {
                            if (data.available) {
                                statusDiv.innerHTML = '<span class="available">✓ Available</span>';
                                statusDiv.classList.remove('checking', 'unavailable');
                                statusDiv.classList.add('available');
                            } else {
                                statusDiv.innerHTML = '<span class="unavailable">✗ Not available</span>';
                                statusDiv.classList.remove('checking', 'available');
                                statusDiv.classList.add('unavailable');
                            }
                        }
                    })
                    .catch(error => {
                        // For demo purposes, show as available
                        if (statusDiv) {
                            statusDiv.innerHTML = '<span class="available">✓ Available</span>';
                            statusDiv.classList.remove('checking', 'unavailable');
                            statusDiv.classList.add('available');
                        }
                    });
            }, 500);
        });
    });

    // Form Submission
    const form = document.getElementById('registration-form');
    const submitBtn = document.querySelector('.btn-submit');

    if (form && submitBtn) {
        form.addEventListener('submit', function(e) {
            // Add loading state
            submitBtn.classList.add('loading');
            submitBtn.disabled = true;

            // Validate password match
            if (passwordInput && confirmPasswordInput) {
                if (passwordInput.value !== confirmPasswordInput.value) {
                    e.preventDefault();
                    confirmPasswordInput.classList.add('is-invalid');
                    submitBtn.classList.remove('loading');
                    submitBtn.disabled = false;
                    return false;
                }
            }
        });
    }

    // Animated Counter
    const counters = document.querySelectorAll('.stat-value');
    const speed = 200;

    const animateCounter = (counter) => {
        const target = +counter.getAttribute('data-target');
        const increment = target / speed;

        const updateCounter = () => {
            const current = +counter.innerText;
            if (current < target) {
                counter.innerText = Math.ceil(current + increment);
                setTimeout(updateCounter, 10);
            } else {
                if (target === 98) {
                    counter.innerText = target + '%';
                } else {
                    counter.innerText = target.toLocaleString() + '+';
                }
            }
        };
        updateCounter();
    };

    // Trigger animation when element is in view
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                animateCounter(entry.target);
                observer.unobserve(entry.target);
            }
        });
    }, { threshold: 0.5 });

    counters.forEach(counter => {
        observer.observe(counter);
    });

    // Add smooth scroll behavior
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            const target = document.querySelector(this.getAttribute('href'));
            if (target) {
                target.scrollIntoView({
                    behavior: 'smooth',
                    block: 'start'
                });
            }
        });
    });
});
</script>
@endsection