@extends('layouts.header_auth', ['title' => 'Login'])

@section('content')

@php
$login = (isset($_COOKIE['ckLogin'])) ? base64_decode($_COOKIE['ckLogin']) : '';
$pass = (isset($_COOKIE['ckPass'])) ? base64_decode($_COOKIE['ckPass']) : '';
$remember = (isset($_COOKIE['ckRemember'])) ? ($_COOKIE['ckRemember']) : '';
@endphp

@section('css')
<style type="text/css">
    @isset($evento)
    @php
        $bgImages = [
            'natal'             => '/images/eventos/natal.jpg',
            'ano_novo'          => '/images/eventos/ano_novo.jpg',
            'dia_maes'          => '/images/eventos/dia_maes.jpg',
            'dia_pais'          => '/images/eventos/dia_pais.jpg',
            'sao_joao'          => '/images/eventos/sao_joao.jpg',
            'dia_criancas'      => '/images/eventos/crianças.png',
            'dia_avos'          => '/images/eventos/dia_avos.jpg',
            'sexta_santa'       => '/images/eventos/sexta_santa.jpg',
            'dia_trabalho'      => '/images/eventos/dia_trabalho.jpg',
            'corpus_christi'    => '/images/eventos/corpus_christi.jpg',
            'dia_mulher'        => '/images/eventos/dia_mulher.jpg',
            'independencia'     => '/images/eventos/independencia.jpg',
            'consciencia_negra' => '/images/eventos/consciencia_negra.jpg',
            'proclamacao'       => '/images/eventos/proclamacao.jpg',
            'namorados'         => '/images/eventos/namorados.jpg',
            'carnaval'          => '/images/eventos/carnaval.jpg',
        ];
        $overlays = [
            'natal'             => 'linear-gradient(160deg, rgba(5,30,10,.72) 0%, rgba(10,40,15,.80) 100%)',
            'ano_novo'          => 'linear-gradient(160deg, rgba(5,5,30,.70) 0%, rgba(20,5,50,.82) 100%)',
            'dia_maes'          => 'linear-gradient(160deg, rgba(40,5,20,.68) 0%, rgba(80,10,40,.78) 100%)',
            'dia_pais'          => 'linear-gradient(160deg, rgba(5,15,35,.70) 0%, rgba(10,25,55,.80) 100%)',
            'sao_joao'          => 'linear-gradient(160deg, rgba(40,20,0,.68) 0%, rgba(80,35,0,.78) 100%)',
            'dia_criancas'      => 'linear-gradient(160deg, rgba(5,20,50,.65) 0%, rgba(10,40,80,.75) 100%)',
            'dia_avos'          => 'linear-gradient(160deg, rgba(20,15,5,.68) 0%, rgba(40,30,10,.78) 100%)',
            'sexta_santa'       => 'linear-gradient(160deg, rgba(20,10,5,.82) 0%, rgba(40,20,10,.90) 100%)',
            'dia_trabalho'      => 'linear-gradient(160deg, rgba(5,20,35,.70) 0%, rgba(10,35,55,.80) 100%)',
            'corpus_christi'    => 'linear-gradient(160deg, rgba(20,15,5,.70) 0%, rgba(40,30,10,.80) 100%)',
            'dia_mulher'        => 'linear-gradient(160deg, rgba(50,5,30,.68) 0%, rgba(90,10,50,.78) 100%)',
            'independencia'     => 'linear-gradient(160deg, rgba(0,30,10,.68) 0%, rgba(0,60,20,.78) 100%)',
            'consciencia_negra' => 'linear-gradient(160deg, rgba(10,5,20,.70) 0%, rgba(20,10,40,.80) 100%)',
            'proclamacao'       => 'linear-gradient(160deg, rgba(0,20,40,.70) 0%, rgba(0,40,70,.80) 100%)',
            'namorados'         => 'linear-gradient(160deg, rgba(50,5,20,.68) 0%, rgba(90,5,30,.78) 100%)',
            'carnaval'          => 'linear-gradient(160deg, rgba(30,0,40,.65) 0%, rgba(60,0,80,.75) 100%)',
        ];
        $accentColors = [
            'natal'             => '#4caf50',
            'ano_novo'          => '#9c6fff',
            'dia_maes'          => '#e91e8c',
            'dia_pais'          => '#2196f3',
            'sao_joao'          => '#ff9800',
            'dia_criancas'      => '#00bcd4',
            'dia_avos'          => '#d4af37',
            'sexta_santa'       => '#c8a96e',
            'dia_trabalho'      => '#1976d2',
            'corpus_christi'    => '#d4af37',
            'dia_mulher'        => '#e91e8c',
            'independencia'     => '#009c3b',
            'consciencia_negra' => '#9c27b0',
            'proclamacao'       => '#1565c0',
            'namorados'         => '#e91e63',
            'carnaval'          => '#ff6f00',
        ];
        $bgImg   = $bgImages[$evento['key']]   ?? $bgImages['natal'];
        $overlay = $overlays[$evento['key']]   ?? $overlays['natal'];
        $accent  = $accentColors[$evento['key']] ?? '#d4af37';
    @endphp
    .auth-page{
        background: url('{{ $bgImg }}') center/cover no-repeat fixed !important;
    }
    .auth-page::before{
        background: {{ $overlay }} !important;
    }
    .evento-badge{
        position:fixed;top:18px;right:22px;z-index:10;
        background:rgba(0,0,0,.55);
        border:1px solid {{ $accent }}88;
        border-radius:999px;padding:.4rem 1rem;
        font-size:14px;color:{{ $accent }};
        backdrop-filter:blur(10px);
        letter-spacing:.05em;
        box-shadow: 0 4px 20px rgba(0,0,0,.4);
        animation: badgePulse 3s ease-in-out infinite;
    }
    @keyframes badgePulse {
        0%,100%{ box-shadow: 0 4px 20px rgba(0,0,0,.4), 0 0 0 0 {{ $accent }}44; }
        50%    { box-shadow: 0 4px 20px rgba(0,0,0,.4), 0 0 0 8px {{ $accent }}00; }
    }
    .login-card{
        border-color: {{ $accent }}44 !important;
        box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 0 0 1px {{ $accent }}22 !important;
    }
    .neo-btn{
        background: linear-gradient(90deg, {{ $accent }}, {{ $accent }}bb) !important;
        box-shadow: 0 6px 24px {{ $accent }}55 !important;
        color: #fff !important;
    }
    @endisset
    .auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:url('/assets/images/unnamed333.jpg') center/cover no-repeat fixed;position:relative}
    .auth-page::before{content:"";position:fixed;inset:0;background:linear-gradient(180deg, rgba(8,10,20,.35), rgba(8,10,20,.45));pointer-events:none}
    .login-card{max-width:420px;width:100%;border:1px solid rgba(255,255,255,.22);border-radius:16px;box-shadow:0 14px 38px rgba(10,20,30,.32);position:relative;z-index:1;background:rgba(255,255,255,.12);backdrop-filter:blur(14px) saturate(150%);padding:1.25rem}
    @media (min-width: 768px){.login-card{padding:2rem}}
    .brand-logo{width:200px;margin:0 auto 8px auto;display:block}
    @media (max-width: 576px){.brand-logo{width:140px}}
    .subtitle{color:#1f2937}
    .subtitle{margin-bottom:.75rem !important}
    .auth-page .mb-3{margin-bottom:.7rem !important}
    .input-group .btn{border-top-left-radius:0;border-bottom-left-radius:0}
    .neo-btn{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1rem;border-radius:10px;background:linear-gradient(90deg,#7b5cff,#00d4ff);border:none;color:#fff;box-shadow:0 4px 16px rgba(0,212,255,.2)}
    .support-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.65rem 1rem;border-radius:12px;background:linear-gradient(90deg,#25D366,#128C7E);color:#fff;text-decoration:none;box-shadow:0 6px 20px rgba(18,140,126,.25)}
    .neo-eye{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15)}
    .login-card, .login-card label, .login-card h4, .login-card p{color:#0a0f1a}
    .login-card .form-control{color:#0a0f1a}
    .login-card .form-control::placeholder{color:#475569}
    .signup-prompt{color:#0a0f1a}
    .signup-link{background:linear-gradient(90deg,#7b5cff,#00d4ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;text-decoration:none;font-weight:700}
    .signup-link:hover{filter:brightness(1.1)}
</style>
@endsection
<div class="auth-page">
    @isset($evento)
    <div class="evento-badge">{{ $evento['emoji'] }} {{ $evento['nome'] }}</div>
    @if($evento['key'] === 'natal')
    <canvas id="neve-canvas" style="position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;"></canvas>
    @endif
    @if($evento['key'] === 'ano_novo')
    <canvas id="fogos-canvas" style="position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:2;"></canvas>
    @endif
    @endisset
    <div class="card login-card p-4 p-md-5">
        <img src="/logo.png" alt="logo" class="brand-logo">
        @if(env("APP_ENV") == "demo")
        <div class="alert alert-info">Acesse usuários pré configurados</div>
        <div class="row g-2 mb-3">
            <div class="col-6"><button class="btn btn-success w-100" onclick="login('slym@slym.com','123456')">SuperAdmin</button></div>
            <div class="col-6"><button class="btn btn-dark w-100" onclick="login('teste@teste.com','123456')">Empresa Teste</button></div>
        </div>
        @endif
        <h4 class="mb-1">Entrar</h4>
        <p class="subtitle mb-4">Digite seu email e senha para acessar.</p>
        <form method="POST" action="{{ route('login') }}" id="form-login">
            @csrf
            <div class="mb-3">
                <label class="form-label">Email</label>
                <input class="form-control" type="email" name="email" id="email" required value="{{ $login }}" placeholder="seu@email.com">
            </div>
            <div class="mb-3">
                <div class="d-flex justify-content-between align-items-center">
                    <label class="form-label mb-0">Senha</label>
                    <a href="{{ route('password.request') }}" class="text-muted"><small>Esqueceu?</small></a>
                </div>
                <div class="input-group">
                    <input class="form-control" type="password" name="password" required value="{{ $pass }}" id="password" placeholder="Digite sua senha">
                    <button class="btn neo-eye" type="button" id="togglePassword" aria-label="Mostrar senha"><i class="ri-eye-line" id="eyeIcon"></i></button>
                </div>
            </div>
            <div class="mb-3 form-check">
                <input name="remember" type="checkbox" {{ $remember ? 'checked' : '' }} class="form-check-input" id="checkbox-signin">
                <label class="form-check-label" for="checkbox-signin">Lembrar-me</label>
            </div>
            @if(Session::has('error'))
            <div class="alert alert-danger">{{ Session::get('error') }}</div>
            @endif
            @if(Session::has('success'))
            <div class="alert alert-success">{{ Session::get('success') }}</div>
            @endif
            <button class="btn neo-btn w-100" type="submit"><i class="ri-login-box-line"></i> Acessar</button>
        </form>
        <div class="mt-3">
            <a target="_blank" rel="noopener" href="https://wa.me/55{{env('APP_FONE')}}" class="support-btn w-100"><i class="ri-whatsapp-fill"></i><span>Suporte via WhatsApp</span></a>
        </div>
        @if(request()->auto_cadastro)
        <div class="text-center mt-3">
            <p class="signup-prompt">Não tem uma conta? <a href="{{ route('register') }}" class="signup-link ms-1">Inscrever-se</a></p>
        </div>
        @endif
    </div>
    @endsection

    @section('js')
    <script type="text/javascript">
        function login(email, senha){
            $('#email').val(email)
            $('#password').val(senha)
            $('#form-login').submit()
        }
        document.addEventListener('DOMContentLoaded',function(){
            var pwd=document.getElementById('password');
            var btn=document.getElementById('togglePassword');
            var icon=document.getElementById('eyeIcon');
            if(btn&&pwd){
                btn.addEventListener('click',function(){
                    var isText=pwd.type==='text';
                    pwd.type=isText?'password':'text';
                    if(icon){icon.className=isText?'ri-eye-line':'ri-eye-off-line'}
                });
            }
        });

        @isset($evento)
        @if($evento['key'] === 'natal')
        (function(){
            var canvas = document.getElementById('neve-canvas');
            if(!canvas) return;
            var ctx = canvas.getContext('2d');
            var W, H, flakes = [];

            function resize(){
                W = canvas.width  = window.innerWidth;
                H = canvas.height = window.innerHeight;
            }
            resize();
            window.addEventListener('resize', resize);

            // Cria flocos
            for(var i = 0; i < 160; i++){
                flakes.push({
                    x: Math.random() * W,
                    y: Math.random() * H,
                    r: Math.random() * 3.5 + 1,
                    speed: Math.random() * 1.2 + 0.4,
                    wind: Math.random() * 0.6 - 0.3,
                    opacity: Math.random() * 0.5 + 0.3,
                    wobble: Math.random() * Math.PI * 2,
                    wobbleSpeed: Math.random() * 0.02 + 0.005
                });
            }

            function draw(){
                ctx.clearRect(0, 0, W, H);
                flakes.forEach(function(f){
                    f.wobble += f.wobbleSpeed;
                    f.y += f.speed;
                    f.x += f.wind + Math.sin(f.wobble) * 0.4;
                    if(f.y > H + 10) { f.y = -10; f.x = Math.random() * W; }
                    if(f.x > W + 10) f.x = -10;
                    if(f.x < -10)    f.x = W + 10;

                    ctx.beginPath();
                    ctx.arc(f.x, f.y, f.r, 0, Math.PI * 2);
                    ctx.fillStyle = 'rgba(255,255,255,' + f.opacity + ')';
                    ctx.shadowColor = 'rgba(200,230,255,0.6)';
                    ctx.shadowBlur = 4;
                    ctx.fill();
                });
                requestAnimationFrame(draw);
            }
            draw();
        })();
        @endif
        @if($evento['key'] === 'ano_novo')
        (function(){
            var canvas = document.getElementById('fogos-canvas');
            if(!canvas) return;
            var ctx = canvas.getContext('2d');
            var W, H;

            function resize(){ W = canvas.width = window.innerWidth; H = canvas.height = window.innerHeight; }
            resize();
            window.addEventListener('resize', resize);

            var cores = ['#ff4444','#ff8800','#ffdd00','#44ff88','#44ddff','#aa44ff','#ff44cc','#ffffff','#ffaa00'];
            var fogos = [];
            var particulas = [];

            function novoFogo(){
                fogos.push({
                    x: Math.random() * W * 0.8 + W * 0.1,
                    y: H,
                    tx: Math.random() * W * 0.7 + W * 0.15,
                    ty: Math.random() * H * 0.45 + H * 0.05,
                    speed: Math.random() * 4 + 5,
                    cor: cores[Math.floor(Math.random() * cores.length)],
                    trail: []
                });
            }

            function explodir(f){
                var n = Math.floor(Math.random() * 60) + 80;
                for(var i = 0; i < n; i++){
                    var ang = (Math.PI * 2 / n) * i + Math.random() * 0.3;
                    var vel = Math.random() * 5 + 2;
                    particulas.push({
                        x: f.tx, y: f.ty,
                        vx: Math.cos(ang) * vel,
                        vy: Math.sin(ang) * vel,
                        alpha: 1,
                        cor: f.cor,
                        r: Math.random() * 2.5 + 1,
                        gravity: 0.08
                    });
                }
                for(var j = 0; j < 30; j++){
                    var a2 = Math.random() * Math.PI * 2;
                    var v2 = Math.random() * 3 + 1;
                    particulas.push({
                        x: f.tx, y: f.ty,
                        vx: Math.cos(a2) * v2,
                        vy: Math.sin(a2) * v2,
                        alpha: 0.8,
                        cor: '#ffffff',
                        r: Math.random() * 1.5 + 0.5,
                        gravity: 0.05
                    });
                }
            }

            var lastFogo = 0;
            function draw(ts){
                // limpa completamente — sem fundo preto
                ctx.clearRect(0, 0, W, H);

                if(ts - lastFogo > 900 + Math.random() * 700){
                    novoFogo();
                    lastFogo = ts;
                }

                fogos = fogos.filter(function(f){
                    var dx = f.tx - f.x, dy = f.ty - f.y;
                    var dist = Math.sqrt(dx*dx + dy*dy);
                    if(dist < f.speed){ explodir(f); return false; }
                    f.x += (dx/dist) * f.speed;
                    f.y += (dy/dist) * f.speed;
                    f.trail.push({x:f.x, y:f.y});
                    if(f.trail.length > 10) f.trail.shift();
                    for(var t = 0; t < f.trail.length; t++){
                        ctx.beginPath();
                        ctx.arc(f.trail[t].x, f.trail[t].y, 1.2, 0, Math.PI*2);
                        ctx.fillStyle = 'rgba(255,220,100,' + (t/f.trail.length*0.5) + ')';
                        ctx.fill();
                    }
                    ctx.beginPath();
                    ctx.arc(f.x, f.y, 2, 0, Math.PI*2);
                    ctx.fillStyle = '#fff';
                    ctx.shadowColor = f.cor;
                    ctx.shadowBlur = 6;
                    ctx.fill();
                    ctx.shadowBlur = 0;
                    return true;
                });

                particulas = particulas.filter(function(p){
                    p.x += p.vx; p.y += p.vy;
                    p.vy += p.gravity;
                    p.vx *= 0.98; p.vy *= 0.98;
                    p.alpha -= 0.016;
                    if(p.alpha <= 0) return false;
                    ctx.beginPath();
                    ctx.arc(p.x, p.y, p.r, 0, Math.PI*2);
                    ctx.fillStyle = p.cor;
                    ctx.globalAlpha = p.alpha;
                    ctx.shadowColor = p.cor;
                    ctx.shadowBlur = 5;
                    ctx.fill();
                    ctx.globalAlpha = 1;
                    ctx.shadowBlur = 0;
                    return true;
                });

                requestAnimationFrame(draw);
            }
            requestAnimationFrame(draw);
        })();
        @endif
        @endisset
    </script>
    @endsection