@extends('layouts.auth-app')
@section('content')
    <div class="card_login">
        <div class="logo-img">
            <img src="{{ asset('assets/images/logo-img.png') }}" alt="">
        </div>
        <div class="form-panel">
            <div class="inner-pannel">
                <div class="form-title">Continue to Login</div>
                <div class="form-subtitle">Please Login to your account</div>
                <form method="POST" action="{{ route('login') }}" id="loginForm">
                    @csrf
                    <div class="field">
                        <label for="email">Email Address/User ID</label>
                        <div class="input-box">
                            <input type="text" name="email" id="email" value="{{ old('email') }}"
                                placeholder="rahul.sharma@gmail.com" autocomplete="off" />
                        </div>
                        @error('email')
                            <label for="error" class="error">{{ $message }}</label>
                        @enderror
                    </div>

                    <div class="field">
                        <label for="password">Password</label>
                        <div class="input-wrap">
                            <input type="password" id="password" name="password" value="{{ old('password') }}"
                                placeholder="**********">

                            <button type="button" class="eye-btn" onclick="togglePwd(this)" aria-label="Toggle password">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                    fill="none">
                                    <path
                                        d="M14.53 9.46998L9.47004 14.53C8.82004 13.88 8.42004 12.99 8.42004 12C8.42004 10.02 10.02 8.41998 12 8.41998C12.99 8.41998 13.88 8.81998 14.53 9.46998Z"
                                        stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                    <path
                                        d="M17.82 5.76998C16.07 4.44998 14.07 3.72998 12 3.72998C8.46997 3.72998 5.17997 5.80998 2.88997 9.40998C1.98997 10.82 1.98997 13.19 2.88997 14.6C3.67997 15.84 4.59997 16.91 5.59997 17.77"
                                        stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                    <path
                                        d="M8.42004 19.53C9.56004 20.01 10.77 20.27 12 20.27C15.53 20.27 18.82 18.19 21.11 14.59C22.01 13.18 22.01 10.81 21.11 9.39999C20.78 8.87999 20.42 8.38999 20.05 7.92999"
                                        stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M15.5099 12.7C15.2499 14.11 14.0999 15.26 12.6899 15.52" stroke="white"
                                        stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M9.47 14.53L2 22" stroke="white" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                    <path d="M22 2L14.53 9.47" stroke="white" stroke-width="1.5" stroke-linecap="round"
                                        stroke-linejoin="round" />
                                </svg>
                            </button>
                        </div>
                        @error('password')
                            <label for="error" class="error">{{ $message }}</label>
                        @enderror
                    </div>

                    <div class="row-inline">
                        <label class="remember">
                            <input type="checkbox"> Remember me
                        </label>
                        <a href="{{ route('password.request') }}" class="forgot">Forgot Password?</a>
                    </div>

                    <button type="submit" class="btn-signin" id="loginBtn">Login</button>
                </form>
                {{-- <div class="signup-row">
                    Don't have access? <a href="#">Contact Administrator</a>
                </div> --}}
            </div>
        </div>
    </div>
@endsection

@push('script')
    <script>
        function togglePwd(btn) {
            const input = btn.previousElementSibling;
            const isHidden = input.type === 'password';
            input.type = isHidden ? 'text' : 'password';
            btn.innerHTML = isHidden ?
                `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>` :
                `<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94"/><path d="M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19"/><line x1="1" y1="1" x2="23" y2="23"/></svg>`;
        }

        // Prevent double submission: a second click would carry a stale CSRF
        // token (the session regenerates on successful login) and trigger a
        // 419 "Page Expired". Disable the button after the first submit.
        (function () {
            const form = document.getElementById('loginForm');
            const btn = document.getElementById('loginBtn');
            if (!form || !btn) return;

            form.addEventListener('submit', function () {
                if (form.dataset.submitted === 'true') return;
                form.dataset.submitted = 'true';
                btn.disabled = true;
                btn.textContent = 'Logging in...';
            });
        })();
    </script>
@endpush

{{-- <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ICL — Login</title>
    <style>
        /* ---------- Reset & Base ---------- */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }

        html,
        body {
            height: 100%;
        }

        body {
            font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background-color: #000000;
            color: #ffffff;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        /* ---------- Logo Section ---------- */
        .logo-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-bottom: 36px;
        }

        .logo-shield {
            width: 100%;
            height: 100%;
            position: relative;
        }

        .logo-shield img {
            width: 100%;
            height: 100%;
            display: block;
        }

        /* ---------- Login Card ---------- */
        .card {
            width: 100%;
            max-width: 380px;
            background: #1c1c1e;
            border-radius: 14px;
            padding: 32px 28px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

        .card h1 {
            font-size: 22px;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 6px;
        }

        .card .subtitle {
            color: #8a8a8e;
            font-size: 13px;
            margin-bottom: 22px;
        }

        /* ---------- Form ---------- */
        .form-group {
            margin-bottom: 18px;
        }

        .form-group label {
            display: block;
            font-size: 13px;
            color: #c7c7cc;
            margin-bottom: 8px;
        }

        .input-box {
            position: relative;
        }

        .input-box input {
            width: 100%;
            background-color: #0e0e10;
            border: 1px solid transparent;
            border-radius: 30px;
            padding: 14px 18px;
            color: #ffffff;
            font-size: 14px;
            outline: none;
            transition: border-color 0.25s ease, background-color 0.25s ease;
        }

        .input-box input::placeholder {
            color: #6e6e73;
        }

        .input-box input:focus {
            border-color: #8b5cf6;
            background-color: #131316;
        }

        /* Eye toggle */
        .toggle-eye {
            position: absolute;
            right: 18px;
            top: 50%;
            transform: translateY(-50%);
            background: none;
            border: none;
            cursor: pointer;
            color: #8a8a8e;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 4px;
        }

        .toggle-eye svg {
            width: 18px;
            height: 18px;
        }

        /* ---------- Row: Remember + Forgot ---------- */
        .row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 18px 0 22px;
            flex-wrap: wrap;
            gap: 10px;
        }

        .remember {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            user-select: none;
        }

        .remember input[type="checkbox"] {
            appearance: none;
            -webkit-appearance: none;
            width: 16px;
            height: 16px;
            border: 1.5px solid #5a5a5e;
            border-radius: 3px;
            cursor: pointer;
            background-color: transparent;
            position: relative;
            transition: all 0.2s ease;
        }

        .remember input[type="checkbox"]:checked {
            background-color: #8b5cf6;
            border-color: #8b5cf6;
        }

        .remember input[type="checkbox"]:checked::after {
            content: "";
            position: absolute;
            left: 4px;
            top: 1px;
            width: 4px;
            height: 8px;
            border: solid #fff;
            border-width: 0 2px 2px 0;
            transform: rotate(45deg);
        }

        .remember span {
            color: #c7c7cc;
            font-size: 13px;
        }

        .forgot {
            color: #4ade80;
            font-size: 13px;
            text-decoration: none;
            font-weight: 500;
            transition: opacity 0.2s ease;
        }

        .forgot:hover {
            opacity: 0.8;
        }

        /* ---------- Button ---------- */
        .btn-login {
            width: 100%;
            background-color: #8b5cf6;
            color: #ffffff;
            border: none;
            border-radius: 30px;
            padding: 14px;
            font-size: 15px;
            font-weight: 600;
            cursor: pointer;
            transition: background-color 0.2s ease, transform 0.1s ease;
        }

        .btn-login:hover {
            background-color: #7c3aed;
        }

        .btn-login:active {
            transform: scale(0.99);
        }

        /* ---------- Footer Text ---------- */
        .footer-text {
            text-align: center;
            color: #8a8a8e;
            font-size: 13px;
            margin-top: 18px;
        }

        .footer-text a {
            color: #4ade80;
            text-decoration: none;
            font-weight: 500;
        }

        .footer-text a:hover {
            opacity: 0.8;
        }

        /* ---------- Responsive ---------- */
        @media (max-width: 420px) {
            .card {
                padding: 26px 20px;
                border-radius: 12px;
            }

            .card h1 {
                font-size: 20px;
            }

            .logo-shield {
                width: 100%;
                height: 100%;
            }
        }

        @media (max-width: 340px) {
            .input-box input {
                padding: 12px 16px;
                font-size: 13px;
            }
        }

        .error { 
            color: #ff0000 !important;
        }
    </style>
</head>

<body>

    <!-- ===== LOGO ===== -->
    <div class="logo-wrap">
        <div class="logo-shield">
            <img src="{{ asset('assets/logo.png') }}" alt="logo">
        </div>
    </div>

    <!-- ===== LOGIN CARD ===== -->
    <div class="card">
        <h1>Continue to Login</h1>
        <p class="subtitle">Please Login to your account</p>

        <form method="POST" action="{{ route('login') }}">
            @csrf
            <!-- Email -->
            <div class="form-group">
                <label for="email">Email Address <span class="error">*</span></label>
                <div class="input-box">
                    <input type="text" name="email" id="email" value="{{ old('email') }}" placeholder="rahul.sharma@gmail.com" autocomplete="off" />
                </div>
                @error('email')
                    <label for="error" class="error">{{ $message }}</label>
                @enderror
            </div>

            <!-- Password -->
            <div class="form-group">
                <label for="password">Password <span class="error">*</span></label>
                <div class="input-box">
                    <input type="password" name="password" id="password" placeholder="********" />
                    <button type="button" class="toggle-eye" onclick="togglePassword()">
                        <svg id="eyeIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
                            <line x1="1" y1="1" x2="23" y2="23" />
                        </svg>
                    </button>
                </div>
                @error('password')
                    <label for="error" class="error">{{ $message }}</label>
                @enderror
            </div>

            <!-- Remember + Forgot -->
            <div class="row">
                <label class="remember">
                    <input type="checkbox" />
                    <span>Remember me</span>
                </label>
                <a href="#" class="forgot">Forgot Password?</a>
            </div>

            <!-- Login Button -->
            <button type="submit" class="btn-login">Login</button>

            <!-- Footer -->
            <p class="footer-text">Don't have access? <a href="#">Contact Administrator</a></p>
        </form>
    </div>

    <script>
        // Minimal JS only for the password eye toggle (visual interactivity)
        function togglePassword() {
            const input = document.getElementById('password');
            const icon = document.getElementById('eyeIcon');
            if (input.type === 'password') {
                input.type = 'text';
                icon.innerHTML = `
        <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
        <circle cx="12" cy="12" r="3"/>
      `;
            } else {
                input.type = 'password';
                icon.innerHTML = `
        <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>
        <line x1="1" y1="1" x2="23" y2="23"/>
      `;
            }
        }
    </script>

    <script>
        window.addEventListener('load', () => {
  document.querySelectorAll('input:-webkit-autofill').forEach(el => {
    el.style.transition = 'background-color 9999999s ease-in-out 0s';
  });
});
    </script>

</body>

</html> --}}