@extends('layouts.app')
@include('includes.csslinks_common')
<style>
    body{
        overflow: hidden;
    }
    canvas {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    @keyframes gradient-animation {
        0% {
            background-position: 0% 50%;
        }
        50% {
            background-position: 100% 50%;
        }
        100% {
            background-position: 0% 50%;
        }
    }
</style>
@section('content')
<div class="mainsectionbg col-lg-12 col-md-12 col-sm-12 col-xs-12"></div>
<canvas id="canvas"></canvas>
<div class="mainsection col-lg-12 col-md-12 col-sm-12 col-xs-12">
    <div class="row">
        <div class="loginsecleft col-lg-5 col-md-5 col-sm-12 col-xs-12"> 
            <div class="logincontainer"> 
                <div class="loginseclogoimg col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <img src="{{asset('assets/img/logo-1.webp')}}" class="img-fluid" alt="ringim Logo"/>
                </div> 
                <div class="loginsecrightdiv col-lg-12 col-md-12 col-sm-12 col-xs-12">  
                    <div class="loginformhead col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <h2><span class="otcolor">Register</span> your account</h2>
                    </div>
                    <form method="POST" action="{{ route('register') }}">
                        @csrf
                        <input type="hidden" name="latitude" id="latitude">
                        <input type="hidden" name="longitude" id="longitude">
                        <div class="logformdiv col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="form-group">
                                <div class="input-icon">
                                    <span class="input-icon-addon">
                                        <i class="fe fe-user"></i>
                                    </span>
                                    <input id="name" name="name" type="text" value="{{ old('name') }}" class="regname form-control @error('name') border-red-500 @enderror" placeholder="Name" required autofocus/>
                                </div>
                                @error('name')
                                    <div class="text-sm text-red-600 mt-1 errmsg">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="logformdiv col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="form-group">
                                <div class="input-icon">
                                    <span class="input-icon-addon">
                                        <i class="fe fe-at-sign"></i>
                                    </span>
                                    <input id="email" name="email" type="email" value="{{ old('email') }}" class="regemailid form-control @error('email') border-red-500 @enderror" placeholder="Email" required/>
                                </div>
                                @error('email')
                                    <div class="text-sm text-red-600 mt-1 errmsg">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="logformdiv col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="form-group">
                                <div class="input-icon">
                                    <span class="input-icon-addon">
                                        <i class="fe fe-lock"></i>
                                    </span>
                                    <input id="password" name="password" type="password" class="regpass form-control @error('password') border-red-500 @enderror" minlength="8" maxlength="8" placeholder="Password" required/>
                                </div>
                                @error('password')
                                    <div class="text-sm text-red-600 mt-1 errmsg">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="logformdiv col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <div class="form-group">
                                <div class="input-icon">
                                    <span class="input-icon-addon">
                                        <i class="fe fe-lock"></i>
                                    </span>
                                    <input id="password_confirmation" name="password_confirmation" type="password" class="regconpass form-control @error('password_confirmation') border-red-500 @enderror" minlength="8" maxlength="8" placeholder="Confirm Password" required/>
                                </div>
                                @error('password_confirmation')
                                    <div class="text-sm text-red-600 mt-1 errmsg">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="logformdivbtn col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <a class="text-sm text-blue-500 hover:underline" href="{{ route('login') }}">
                                {{ __('Already registered?') }}
                            </a>
                            <button type="submit" class="bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded">
                                {{ __('Register') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="loginsecright col-lg-7 col-md-7 col-sm-12 col-xs-12 px-0">  
            <div class="loginsecimg col-lg-12 col-md-12 col-sm-12 col-xs-12 px-0">
                <img src="{{asset('assets/img/loginbg.webp')}}" class="img-fluid bounce-img" alt="ringim Logo"/>
            </div>
        </div>
    </div>
    <!-- <div class="loginsection col-lg-6 offset-lg-3 col-md-8 offset-md-2">
        <div class="row">
            <div class="loginsecright col-lg-6 col-md-6 col-sm-12 col-xs-12">
                <div class="loginsecrightdiv col-lg-12 col-md-12 col-sm-12 col-xs-12 py-4">   
                    <div class="loginformhead col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <h2>Register</h2>
                    </div>

                    <form method="POST" action="{{ route('register') }}">
                        @csrf

                        <div class="logformdiv col-lg-12 col-md-12 col-sm-12 col-xs-12 mt-2">
                            <label for="name" class="form-label block text-sm font-medium">Name</label>
                            <input id="name" name="name" type="text"
                                value="{{ old('name') }}"
                                required autofocus
                                class="w-full mt-1 p-2 border rounded border-gray-300 @error('name') border-red-500 @enderror" />
                                @error('name')
                                    <div class="text-sm text-red-600 mt-1 errmsg">{{ $message }}</div>
                                @enderror
                        </div>

                        <div class="logformdiv col-lg-12 col-md-12 col-sm-12 col-xs-12 mt-2">
                            <label for="email" class="form-label block text-sm font-medium">Email</label>
                            <input id="email" name="email" type="email"
                                value="{{ old('email') }}"
                                required
                                class="w-full mt-1 p-2 border rounded border-gray-300 @error('email') border-red-500 @enderror" />
                            @error('email')
                                <div class="text-sm text-red-600 mt-1 errmsg">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="logformdiv col-lg-12 col-md-12 col-sm-12 col-xs-12 mt-2">
                            <label for="password" class="form-label block text-sm font-medium">Password</label>
                            <input id="password" name="password" type="password"
                                required
                                class="w-full mt-1 p-2 border rounded border-gray-300 @error('password') border-red-500 @enderror" />
                            @error('password')
                                <div class="text-sm text-red-600 mt-1 errmsg">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="logformdiv col-lg-12 col-md-12 col-sm-12 col-xs-12 mt-2">
                            <label for="password_confirmation" class="form-label block text-sm font-medium">Confirm Password</label>
                            <input id="password_confirmation" name="password_confirmation" type="password"
                                required
                                class="w-full mt-1 p-2 border rounded border-gray-300 @error('password_confirmation') border-red-500 @enderror" />
                            @error('password_confirmation')
                                <div class="text-sm text-red-600 mt-1 errmsg">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="logformdivbtn col-lg-12 col-md-12 col-sm-12 col-xs-12 flex justify-between items-center mt-4">
                            <a class="text-sm text-blue-500 hover:underline" href="{{ route('login') }}">
                                {{ __('Already registered?') }}
                            </a>
                            <button type="submit" class="bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded">
                                {{ __('Register') }}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div> -->
</div>
@include('includes.jslinks_common')
<script>
    // Canvas Animation
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    let particles = [];
    const numberOfParticles = 200;
    const mouse = {
    x: null,
    y: null,
    radius: 150
    };
    // Define gradient colors array
    const gradientColors = ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96c93d"];
    class Particle {
    constructor() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.size = Math.random() * 2 + 0.5; // Slightly smaller particles
        this.baseX = this.x;
        this.baseY = this.y;
        this.density = Math.random() * 30 + 1;
        this.color =
        gradientColors[Math.floor(Math.random() * gradientColors.length)];
        this.alpha = Math.random() * 0.5 + 0.5; // Add transparency
    }
    draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fillStyle = this.color;
        ctx.globalAlpha = this.alpha;
        ctx.fill();
        ctx.globalAlpha = 1;
    }
    update() {
        let dx = mouse.x - this.x;
        let dy = mouse.y - this.y;
        let distance = Math.sqrt(dx * dx + dy * dy);
        let forceDirectionX = dx / distance;
        let forceDirectionY = dy / distance;
        let maxDistance = mouse.radius;
        let force = (maxDistance - distance) / maxDistance;
        let directionX = forceDirectionX * force * this.density;
        let directionY = forceDirectionY * force * this.density;

        if (distance < mouse.radius) {
            this.x -= directionX;
            this.y -= directionY;
        } else {
        if (this.x !== this.baseX) {
            let dx = this.x - this.baseX;
            this.x -= dx / 10;
        }
        if (this.y !== this.baseY) {
            let dy = this.y - this.baseY;
            this.y -= dy / 10;
        }
        }
    }
    }
    function init() {
    particles = [];
    for (let i = 0; i < numberOfParticles; i++) {
        particles.push(new Particle());
    }
    }
    function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (let i = 0; i < particles.length; i++) {
            particles[i].update();
            particles[i].draw();
    }
    requestAnimationFrame(animate);
    }
    window.addEventListener("mousemove", (e) => {
        mouse.x = e.x;
        mouse.y = e.y;
    });
    window.addEventListener("resize", () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    init();
    });
    window.addEventListener("mouseout", () => {
        mouse.x = undefined;
        mouse.y = undefined;
    });
    init();
    animate();
</script>
@endsection