<?php $__env->startSection('content'); ?>
<div class="auth-container" style="background: linear-gradient(135deg, #6B73FF 0%, #000DFF 100%);">
    <div class="row justify-content-center align-items-center min-vh-100">
        <div class="col-lg-5 col-md-8">
            <div class="auth-card" style="background: rgba(255, 255, 255, 0.95); border-radius: 15px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.3); overflow: hidden;">
                <div class="auth-header text-center py-4" style="background: linear-gradient(90deg, #6B73FF, #000DFF); color: white;">
                    <h2 style="font-weight: 700; margin-bottom: 5px;"><i class="fas fa-user-plus me-2"></i>Create Account</h2>
                    <p style="opacity: 0.9; margin-bottom: 0;">Join our community today</p>
                </div>

                <div class="auth-body p-4 p-md-5">
                    <form method="POST" action="<?php echo e(route('register')); ?>">
                        <?php echo csrf_field(); ?>
                        <div class="mb-4">
                            <label for="name" class="form-label" style="font-weight: 600; color: #555;">Full Name</label>
                            <div class="input-group">
                                <span class="input-group-text" style="background: #f8f9fa; border-right: none;">
                                    <i class="fas fa-user" style="color: #6B73FF;"></i>
                                </span>
                                <input id="name" type="text" class="form-control <?php $__errorArgs = ['name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                                       name="name" value="<?php echo e(old('name')); ?>" required autocomplete="name" autofocus
                                       style="padding: 12px 15px; border-radius: 0 8px 8px 0; border-left: none;">
                            </div>
                            <?php $__errorArgs = ['name'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                <div class="invalid-feedback d-block" style="color: #ff4757;">
                                    <i class="fas fa-exclamation-circle me-1"></i><?php echo e($message); ?>

                                </div>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                        </div>

                        <div class="mb-4">
                            <label for="email" class="form-label" style="font-weight: 600; color: #555;">Email Address</label>
                            <div class="input-group">
                                <span class="input-group-text" style="background: #f8f9fa; border-right: none;">
                                    <i class="fas fa-envelope" style="color: #6B73FF;"></i>
                                </span>
                                <input id="email" type="email" class="form-control <?php $__errorArgs = ['email'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                                       name="email" value="<?php echo e(old('email')); ?>" required autocomplete="email"
                                       style="padding: 12px 15px; border-radius: 0 8px 8px 0; border-left: none;">
                            </div>
                            <?php $__errorArgs = ['email'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                <div class="invalid-feedback d-block" style="color: #ff4757;">
                                    <i class="fas fa-exclamation-circle me-1"></i><?php echo e($message); ?>

                                </div>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                        </div>

                        <div class="mb-4 position-relative">
                            <label for="password" class="form-label" style="font-weight: 600; color: #555;">Password</label>
                            <div class="input-group">
                                <span class="input-group-text" style="background: #f8f9fa; border-right: none;">
                                    <i class="fas fa-lock" style="color: #6B73FF;"></i>
                                </span>
                                <input id="password" type="password" class="form-control <?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?> is-invalid <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>"
                                       name="password" required autocomplete="new-password"
                                       style="padding: 12px 15px; border-radius: 0 8px 8px 0; border-left: none;">
                                <span class="password-toggle" style="position: absolute; right: 10px; top: 38px; cursor: pointer; color: #6B73FF;">
                                    <i class="fas fa-eye"></i>
                                </span>
                            </div>
                            <?php $__errorArgs = ['password'];
$__bag = $errors->getBag($__errorArgs[1] ?? 'default');
if ($__bag->has($__errorArgs[0])) :
if (isset($message)) { $__messageOriginal = $message; }
$message = $__bag->first($__errorArgs[0]); ?>
                                <div class="invalid-feedback d-block" style="color: #ff4757;">
                                    <i class="fas fa-exclamation-circle me-1"></i><?php echo e($message); ?>

                                </div>
                            <?php unset($message);
if (isset($__messageOriginal)) { $message = $__messageOriginal; }
endif;
unset($__errorArgs, $__bag); ?>
                        </div>

                        <div class="mb-4 position-relative">
                            <label for="password-confirm" class="form-label" style="font-weight: 600; color: #555;">Confirm Password</label>
                            <div class="input-group">
                                <span class="input-group-text" style="background: #f8f9fa; border-right: none;">
                                    <i class="fas fa-lock" style="color: #6B73FF;"></i>
                                </span>
                                <input id="password-confirm" type="password" class="form-control"
                                       name="password_confirmation" required autocomplete="new-password"
                                       style="padding: 12px 15px; border-radius: 0 8px 8px 0; border-left: none;">
                                <span class="password-toggle" style="position: absolute; right: 10px; top: 38px; cursor: pointer; color: #6B73FF;">
                                    <i class="fas fa-eye"></i>
                                </span>
                            </div>
                        </div>

                        <button type="submit" class="btn w-100 py-3 mb-4"
                                style="background: linear-gradient(90deg, #6B73FF, #000DFF); color: white; font-weight: 600; border: none; border-radius: 8px; transition: all 0.3s;">
                            <i class="fas fa-user-plus me-2"></i>Register
                        </button>

                        <div class="divider my-4" style="display: flex; align-items: center; color: #777;">
                            <span style="padding: 0 10px;">Already have an account?</span>
                        </div>

                        <a href="<?php echo e(route('login')); ?>" class="btn btn-outline-primary w-100 py-2"
                           style="border: 2px solid #6B73FF; color: #6B73FF; font-weight: 600; border-radius: 8px; transition: all 0.3s;">
                            <i class="fas fa-sign-in-alt me-2"></i>Login
                        </a>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<?php $__env->startSection('styles'); ?>
<style>
    body {
        font-family: 'Poppins', sans-serif;
        overflow-x: hidden;
    }

    .auth-container {
        min-height: 100vh;
        padding: 2rem;
        background-size: 400% 400%;
        animation: gradientBG 15s ease infinite;
    }

    .auth-card {
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .auth-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25);
    }

    .form-control:focus {
        box-shadow: 0 0 0 0.2rem rgba(107, 115, 255, 0.25);
        border-color: #6B73FF;
    }

    .btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(107, 115, 255, 0.4);
    }

    .btn-outline-primary:hover {
        background: #6B73FF !important;
        color: white !important;
    }

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

    .divider::before {
        margin-right: 1rem;
    }

    .divider::after {
        margin-left: 1rem;
    }

    .input-group-text {
        border-radius: 8px 0 0 8px !important;
    }

    @keyframes gradientBG {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }

    @media (max-width: 768px) {
        .auth-container {
            padding: 1rem;
        }

        .auth-body {
            padding: 1.5rem !important;
        }
    }
</style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('scripts'); ?>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Toggle password visibility for both fields
        document.querySelectorAll('.password-toggle').forEach(toggle => {
            const input = toggle.closest('.position-relative').querySelector('input');
            toggle.addEventListener('click', function() {
                const type = input.getAttribute('type') === 'password' ? 'text' : 'password';
                input.setAttribute('type', type);
                this.classList.toggle('fa-eye');
                this.classList.toggle('fa-eye-slash');
            });
        });
    });
</script>
<?php $__env->stopSection(); ?>
<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.app', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH C:\xampp\htdocs\library\resources\views/auth/register.blade.php ENDPATH**/ ?>