@extends('layouts.app')
<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%;
        }
    }
    /* Login CSS */
    .loginsection{
    position: relative;
    top: 25%;
    }
    .logincontainer{
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15%;
    }
    .loginsecleft{
    z-index: 20;
    }
    .loginsecimg{
    height: 75%;
    text-align: right;
    z-index: 20;
    position: relative;
    right: 0;
    }
    .loginsecimg img{
    max-width: 100%;
    max-height: 100%;
    float: right;
    }
    .loginseclogoimg{
    height: 45px;
    text-align: left;
    margin-top: 20px;
    margin-bottom: 20px;
    }
    .loginseclogoimg img{
    max-width: 100%;
    max-height: 100%;
    }
    .loginsechead h1{
    color: var(--branding-color-white);
    font-weight: 700;
    font-size: 26px;
    text-align: left;
    line-height: 35px;
    }
    .loginsechead p{
    color: var(--branding-color-white);
    font-weight: 400;
    font-size: 16px;
    text-align: left;
    line-height: 30px;
    margin-bottom: 0px;
    }
    .loginsechead a{
    text-decoration: none;
    color: var(--branding-color-medium);
    font-weight: 600;
    font-size: 18px;
    text-align: left;
    line-height: 26px;
    }
    .loginsecrightdiv{
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 30px;
    padding-bottom: 30px;
    }
    .loginformhead{
    margin-top: 90px;
    }
    .loginformhead h2{
    font-weight: 700;
    font-size: 22px;
    text-align: left;
    margin-bottom: 30px;
    letter-spacing: 0.7px;
    color: var(--branding-color-white);
    }
    .loginformhead p{
    color: var(--branding-color-gray);
    font-size: 14px;
    line-height: 25px;
    }
    .otcolor{
    background: linear-gradient(90deg, var(--branding-color-light), var(--branding-color-medium));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 35px;
    }
    .loginformhead .loginformpara{
    font-size: 14px;
    color: var(--branding-color-black);
    }
    .logformdiv{
    margin-bottom: 15px;
    }
    .logformdiv .input-icon-addon{
    padding-left: 10px;
    }
    .logformdiv .input-icon-addon i,.logformdiv .input-icon-addon i{
    color: var(--branding-color-white);
    font-size: 18px;
    }
    .logformdiv .uname,.logformdiv .upassword,.logformdiv .regname,.logformdiv .regemailid,.logformdiv .regpass,.logformdiv .regconpass,.logformdiv .forgetemail,
    .logformdiv .resetemail,.logformdiv .resetpass,.logformdiv .resetconpass{
    padding: 25px 20px;
    background-color: transparent !important;
    color: var(--branding-color-white) !important;
    border: 1px solid var(--branding-color-white);
    margin-bottom: 25px;
    border-radius: 15px;
    font-size: 18px;
    }
    input:-webkit-autofill {
    background-color: var(--bg-color) !important;
    color: var(--branding-color-white) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--bg-color) inset !important;
    -webkit-text-fill-color: var(--branding-color-white) !important;
    }
    input::placeholder {
    color: var(--branding-color-light-gray) !important;
    }
    .logformdiv input:focus{
    background-color: transparent !important;
    box-shadow: none;
    border-color: var(--branding-color-dark) !important;
    }
    .logformdiv label{
    color: var(--branding-color-white);
    margin-bottom: 0px;
    }
    .logformdivbtn {
    display: flex;
    justify-content: space-between;
    }
    .logformdivbtn button{
    background: linear-gradient(-90deg, var(--branding-color-medium), var(--branding-color-dark));
    color: var(--branding-color-white);
    border-radius: 15px !important;
    font-size: 20px;
    padding: 10px 60px !important;
    border: none;
    margin-top: 15px;
    font-weight: 600;
    text-transform: uppercase;
    }
    .logformdivbtn button:hover{
        background-color: var(--branding-color-medium);
    }
    .logformdivbtn a{
    color: var(--branding-color-white);
    text-decoration: none;
    margin-top: 28px;
    }
    .logformdivbtn a:hover{
    color: var(--branding-color-light);
    }
    .logformdiv input[type="checkbox"]{
    padding: 8px;
    background-color: transparent !important;
    border: 1px solid var(--branding-color-white);
    cursor: pointer;
    }
    .errmsg{
    color: var(--branding-color-error);
    }
    .bounce-img {
    animation: upDown 2s ease-in-out infinite;
    }

    @keyframes upDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    }
</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">Login</span> to your account</h2>
                        <!-- <h2 class="text_box">
                            <div class="text-wrapper">
                                <div class="letters">Login to your account</div>
                            </div>
                        </h2> -->
                    </div>
                    @if ($errors->any())
                        <div class="popuperrmsg col-xs-12 px-2">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                                <i class="fe fe-x" id="popuperrmsgclose"></i> 
                            </ul>
                        </div>
                    @endif
                    @if (session('status'))
                        <div class="popupsuccmsg col-xs-12 px-2">
                            <p>
                                <span>{{ session('status') }}</span><i class="fe fe-x" id="popupsuccmsgclose"></i>
                            </p>
                        </div>
                    @endif
                    <form method="POST" action="{{ route('login') }}">
                        @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 type="text" name="login"  id="login" class="uname form-control @error('login') border-red-500 @enderror" value="{{ old('login') }}" placeholder="Username/Email" required autofocus/>
                                    <!-- @error('login')
                                        <div class="text-sm text-red-600 mt-1 errmsg">{{ $message }}</div>
                                    @enderror -->
                                </div>
                            </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 type="password" name="password"  id="password" class="upassword form-control @error('password') border-red-500 @enderror" placeholder="Password" minlength="8" maxlength="8" required/>
                                    <!-- @error('password')
                                        <div class="text-sm text-red-600 mt-1 errmsg">{{ $message }}</div>
                                    @enderror -->
                                </div>
                            </div>
                        </div>
                        <div class="logformdiv col-lg-12 col-md-12 col-sm-12 col-xs-12 flex items-center">
                            <input type="checkbox" name="remember" id="remember" class="mr-2">
                            <label for="remember" class="text-sm">Remember me</label>
                        </div>
                        <div class="logformdivbtn col-lg-12 col-md-12 col-sm-12 col-xs-12">
                            <button type="submit" class="bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded">Login</button>
                            @if (Route::has('password.request'))
                                <a class="text-sm text-blue-500 hover:underline" href="{{ route('password.request') }}">
                                    Forgot your Password?
                                </a>
                            @endif
                        </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="loginsecleft col-lg-6 col-md-6 col-sm-12 col-xs-12 px-0">    
                <div class="loginsecleftdiv col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="loginsecimg col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <img src="{{asset('assets/img/login-bkg.png')}}" class="img-fluid" alt="ringim Logo"/>
                    </div>
                </div>
            </div>
            <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">  
                    <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="loginformhead col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <h2>Login</h2>
                    </div>
                    @if ($errors->any())
                        <div class="popuperrmsg col-xs-12 px-2">
                            <ul>
                                @foreach ($errors->all() as $error)
                                    <li>{{ $error }}</li>
                                @endforeach
                                <i class="fe fe-x" id="popuperrmsgclose"></i> 
                            </ul>
                        </div>
                    @endif
                    @if (session('status'))
                        <div class="popupsuccmsg col-xs-12 px-2">
                            <p>
                                <span>{{ session('status') }}</span><i class="fe fe-x" id="popupsuccmsgclose"></i>
                            </p>
                        </div>
                    @endif
                    <form method="POST" action="{{ route('login') }}">
                        @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">
                            <label for="login" class="form-label block text-sm font-medium">Username / Email</label>
                            <input id="login" 
                                class="w-full mt-1 p-2 border border-gray-300 rounded @error('login') border-red-500 @enderror"
                                type="text" 
                                name="login" 
                                value="{{ old('login') }}" 
                                required 
                                autofocus />
                            @error('login')
                                <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">
                            <label for="password" class="form-label block text-sm font-medium">Password</label>
                            <input type="password" name="password" id="password" class="w-full mt-1 p-2 border border-gray-300 rounded @error('password') border-red-500 @enderror" minlength="8" maxlength="8" required/>
                            @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 flex items-center">
                            <input type="checkbox" name="remember" id="remember" class="mr-2">
                            <label for="remember" class="text-sm">Remember me</label>
                        </div>
                        <div class="logformdivbtn col-lg-12 col-md-12 col-sm-12 col-xs-12 flex justify-between items-center">
                            <button type="submit" class="bg-green-600 hover:bg-green-700 text-white py-2 px-4 rounded">Submit</button>
                            @if (Route::has('password.request'))
                                <a class="text-sm text-blue-500 hover:underline" href="{{ route('password.request') }}">
                                    Forgot your Password?
                                </a>
                            @endif
                        </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>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        if ('geolocation' in navigator) {
            navigator.geolocation.getCurrentPosition(
                function (position) {
                    document.getElementById('latitude').value = position.coords.latitude;
                    document.getElementById('longitude').value = position.coords.longitude;
                },
                function (error) {
                    console.warn('Geolocation error:', error.message);
                }
            );
        }
    });

    $('#popupsuccmsgclose').click(function () {
        $('.popupsuccmsg').css('display', 'none');
    });

    $('#popuperrmsgclose').click(function () {
        $('.popuperrmsg').css('display', 'none');
    });
</script>
@endsection