@extends('layouts.public')

@section('title', 'Sign In - BANKING')

@section('content')

<div class="auth-page">
    <div class="auth-split">

        {{-- Left Panel: Branding --}}
        <div class="auth-left">
            <div class="auth-left-content">
                <a href="{{ route('home') }}" class="auth-left-logo">
                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
                        <rect width="48" height="48" rx="12" fill="rgba(255,255,255,0.15)"/>
                        <rect x="2" y="2" width="44" height="44" rx="10" stroke="rgba(255,255,255,0.2)" stroke-width="1"/>
                        <path d="M12 18h24v3H12zm0 6h18v3H12zm0 6h12v3H12z" fill="white"/>
                        <rect x="33" y="24" width="9" height="9" rx="2" fill="rgba(255,255,255,0.3)"/>
                    </svg>
                    <span>BANKING</span>
                </a>

                <h1 class="auth-left-title">Secure<br>Digital Banking</h1>
                <p class="auth-left-subtitle">Access your accounts, make transfers, and manage your finances with bank-grade security.</p>

                <div class="auth-left-badges">
                    <div class="auth-badge">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10 2l7 3v4c0 3.5-3 6.5-7 8-4-1.5-7-4.5-7-8V5l7-3z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M7 10l2 2 4-4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <span>256-bit Encryption</span>
                    </div>
                    <div class="auth-badge">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="1.5"/><path d="M7 10l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <span>FDIC Insured</span>
                    </div>
                    <div class="auth-badge">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10 2a8 8 0 100 16 8 8 0 000-16z" stroke="currentColor" stroke-width="1.5"/><path d="M10 6v4l2.5 1.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <span>24/7 Support</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Right Panel: Login Form --}}
        <div class="auth-right">
            <div class="auth-card">

                {{-- Mobile Logo --}}
                <div class="auth-mobile-header">
                    <a href="{{ route('home') }}" class="auth-mobile-logo">
                        <svg width="36" height="36" viewBox="0 0 48 48" fill="none">
                            <rect width="48" height="48" rx="12" fill="#0D6B58"/>
                            <path d="M12 18h24v3H12zm0 6h18v3H12zm0 6h12v3H12z" fill="white"/>
                            <rect x="33" y="24" width="9" height="9" rx="2" fill="#138A6E"/>
                        </svg>
                        <span>BANKING</span>
                    </a>
                </div>

                <div class="auth-card-body">
                    <div class="auth-card-header">
                        <h2 class="auth-card-title">Welcome Back</h2>
                        <p class="auth-card-subtitle">Sign in to your account</p>
                    </div>

                    {{-- Success Message --}}
                    @if(session('success'))
                    <div class="auth-alert auth-alert-success">
                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="8" stroke="currentColor" stroke-width="1.5"/><path d="M6 9l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        {{ session('success') }}
                    </div>
                    @endif

                    {{-- Validation Errors --}}
                    @if($errors->any())
                    <div class="auth-alert auth-alert-error">
                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="8" stroke="currentColor" stroke-width="1.5"/><path d="M9 5.5v4M9 12h.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                        <div>
                            @foreach($errors->all() as $error)
                            <div>{{ $error }}</div>
                            @endforeach
                        </div>
                    </div>
                    @endif

                    <form method="POST" action="{{ route('login') }}" class="auth-form" id="loginForm">
                        @csrf

                        <div class="auth-field">
                            <label class="auth-label" for="account">Account Number / Email / Username</label>
                            <div class="auth-input-wrap">
                                <svg class="auth-input-icon" width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="6" r="3" stroke="currentColor" stroke-width="1.5"/><path d="M3 16c0-2.7 2.7-5 6-5s6 2.3 6 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                                <input
                                    type="text"
                                    id="account"
                                    name="account"
                                    class="auth-input @error('account') is-error @enderror"
                                    value="{{ old('account') }}"
                                    placeholder="Enter account number, email or username"
                                    required
                                    autofocus
                                    autocomplete="username"
                                >
                            </div>
                            @error('account')
                            <span class="auth-field-error">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="auth-login-methods">
                            <button type="button" class="auth-login-method active" data-method="pin">6-Digit PIN</button>
                            <button type="button" class="auth-login-method" data-method="password">Password</button>
                        </div>
                        <input type="hidden" name="method" id="login_method" value="{{ old('method', 'pin') }}">

                        <div class="auth-field" id="pinField">
                            <label class="auth-label" for="pin">6-Digit PIN</label>
                            <div class="auth-input-wrap">
                                <svg class="auth-input-icon" width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="4" y="8" width="10" height="8" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M6 8V6a3 3 0 116 0v2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="9" cy="12.5" r="1" fill="currentColor"/></svg>
                                <input
                                    type="password"
                                    id="pin"
                                    name="pin"
                                    class="auth-input @error('pin') is-error @enderror"
                                    placeholder="Enter your 6-digit PIN"
                                    maxlength="6"
                                    inputmode="numeric"
                                    pattern="[0-9]*"
                                    autocomplete="current-password"
                                >
                                <button type="button" class="auth-input-toggle" onclick="togglePinVisibility('pin')" aria-label="Toggle PIN visibility">
                                    <svg class="eye-open" width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M1.5 9s3-5.5 7.5-5.5S16.5 9 16.5 9s-3 5.5-7.5 5.5S1.5 9 1.5 9z" stroke="currentColor" stroke-width="1.5"/><circle cx="9" cy="9" r="2.5" stroke="currentColor" stroke-width="1.5"/></svg>
                                    <svg class="eye-closed" width="18" height="18" viewBox="0 0 18 18" fill="none" style="display:none"><path d="M2 2l14 14M7.3 7.3a2.5 2.5 0 003.4 3.4M1.5 9s3-5.5 7.5-5.5c1.3 0 2.5.4 3.5 1M16.5 9s-1 2-3 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                                </button>
                            </div>
                            @error('pin')
                            <span class="auth-field-error">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="auth-field" id="passwordField" style="display:none;">
                            <label class="auth-label" for="password">Password</label>
                            <div class="auth-input-wrap">
                                <svg class="auth-input-icon" width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="4" y="8" width="10" height="8" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M6 8V6a3 3 0 116 0v2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="9" cy="12.5" r="1" fill="currentColor"/></svg>
                                <input
                                    type="password"
                                    id="password"
                                    name="password"
                                    class="auth-input @error('password') is-error @enderror"
                                    placeholder="Enter your password"
                                    autocomplete="current-password"
                                >
                                <button type="button" class="auth-input-toggle" onclick="togglePinVisibility('password')" aria-label="Toggle password visibility">
                                    <svg class="eye-open" width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M1.5 9s3-5.5 7.5-5.5S16.5 9 16.5 9s-3 5.5-7.5 5.5S1.5 9 1.5 9z" stroke="currentColor" stroke-width="1.5"/><circle cx="9" cy="9" r="2.5" stroke="currentColor" stroke-width="1.5"/></svg>
                                    <svg class="eye-closed" width="18" height="18" viewBox="0 0 18 18" fill="none" style="display:none"><path d="M2 2l14 14M7.3 7.3a2.5 2.5 0 003.4 3.4M1.5 9s3-5.5 7.5-5.5c1.3 0 2.5.4 3.5 1M16.5 9s-1 2-3 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                                </button>
                            </div>
                            @error('password')
                            <span class="auth-field-error">{{ $message }}</span>
                            @enderror
                        </div>

                        <div class="auth-row">
                            <label class="auth-checkbox">
                                <input type="checkbox" name="remember" {{ old('remember') ? 'checked' : '' }}>
                                <span class="auth-checkbox-mark"></span>
                                <span class="auth-checkbox-text">Remember me</span>
                            </label>
                            <a href="{{ route('password.request') }}" class="auth-link">Forgot PIN?</a>
                        </div>

                        <button type="submit" class="auth-submit" id="loginBtn">
                            <span class="auth-submit-text">Sign In</span>
                            <span class="auth-submit-spinner" style="display:none">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="7" stroke="currentColor" stroke-width="2" stroke-opacity="0.3"/><path d="M9 2a7 7 0 017 7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
                            </span>
                        </button>
                    </form>

                    <div class="auth-footer">
                        <p>Don't have an account? <a href="{{ route('register') }}" class="auth-link-bold">Register</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.auth-page {
    min-height: calc(100vh - 70px);
    background: #f8fafb;
}
.auth-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - 70px);
}

/* Left Panel */
.auth-left {
    background: linear-gradient(135deg, #0D6B58 0%, #094E41 50%, #073D33 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    position: relative;
    overflow: hidden;
}
.auth-left::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(255,255,255,0.03);
}
.auth-left::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255,255,255,0.02);
}
.auth-left-content {
    max-width: 420px;
    position: relative;
    z-index: 1;
    color: white;
}
.auth-left-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: white;
    margin-bottom: 48px;
}
.auth-left-logo span {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.auth-left-title {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 20px;
    letter-spacing: -0.02em;
}
.auth-left-subtitle {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255,255,255,0.75);
    margin: 0 0 48px;
}
.auth-left-badges {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.auth-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    backdrop-filter: blur(10px);
}

/* Right Panel */
.auth-right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}
.auth-card {
    width: 100%;
    max-width: 440px;
}
.auth-mobile-header {
    display: none;
}
.auth-card-body {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    border: 1px solid #e8ecf0;
}
.auth-card-header {
    margin-bottom: 32px;
}
.auth-card-title {
    font-size: 26px;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 6px;
}
.auth-card-subtitle {
    font-size: 15px;
    color: #64748b;
    margin: 0;
}

/* Alerts */
.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 24px;
}
.auth-alert-success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}
.auth-alert-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
.auth-alert svg {
    flex-shrink: 0;
    margin-top: 1px;
}

/* Form */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.auth-label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}
.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.auth-input-icon {
    position: absolute;
    left: 14px;
    color: #94a3b8;
    pointer-events: none;
    z-index: 1;
}
.auth-input {
    width: 100%;
    padding: 12px 14px 12px 42px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    color: #1a1a2e;
    background: #f8fafb;
    transition: all 0.2s ease;
    outline: none;
}
.auth-input:focus {
    border-color: #0D6B58;
    background: white;
    box-shadow: 0 0 0 3px rgba(13,107,88,0.1);
}
.auth-input.is-error {
    border-color: #dc2626;
}
.auth-input.is-error:focus {
    box-shadow: 0 0 0 3px rgba(220,38,38,0.1);
}
.auth-input::placeholder {
    color: #94a3b8;
}
.auth-input-toggle {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 4px;
    display: flex;
    transition: color 0.2s;
}
.auth-input-toggle:hover {
    color: #0D6B58;
}
.auth-field-error {
    font-size: 12px;
    color: #dc2626;
    margin-top: 2px;
}

/* Login method toggle */
.auth-login-methods {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 4px;
    background: #f1f5f9;
    border-radius: 12px;
}
.auth-login-method {
    padding: 9px 12px;
    border: none;
    background: transparent;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}
.auth-login-method.active {
    background: white;
    color: #0D6B58;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

/* Row (remember + forgot) */
.auth-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.auth-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #64748b;
}
.auth-checkbox input {
    display: none;
}
.auth-checkbox-mark {
    width: 18px;
    height: 18px;
    border: 1.5px solid #d1d5db;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.auth-checkbox input:checked + .auth-checkbox-mark {
    background: #0D6B58;
    border-color: #0D6B58;
}
.auth-checkbox input:checked + .auth-checkbox-mark::after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-1px);
}
.auth-link {
    font-size: 13px;
    color: #0D6B58;
    text-decoration: none;
    font-weight: 500;
}
.auth-link:hover {
    text-decoration: underline;
}

/* Submit Button */
.auth-submit {
    width: 100%;
    padding: 13px 24px;
    background: #0D6B58;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.auth-submit:hover {
    background: #094E41;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(13,107,88,0.3);
}
.auth-submit:active {
    transform: translateY(0);
}
.auth-submit-spinner svg {
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    100% { transform: rotate(360deg); }
}

/* Footer */
.auth-footer {
    text-align: center;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #f1f5f9;
}
.auth-footer p {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}
.auth-link-bold {
    color: #0D6B58;
    font-weight: 600;
    text-decoration: none;
}
.auth-link-bold:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 1024px) {
    .auth-left {
        display: none;
    }
    .auth-split {
        grid-template-columns: 1fr;
    }
    .auth-right {
        min-height: calc(100vh - 70px);
    }
    .auth-mobile-header {
        display: block;
        text-align: center;
        margin-bottom: 24px;
    }
    .auth-mobile-logo {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: #1a1a2e;
        font-size: 20px;
        font-weight: 800;
    }
}

@media (max-width: 480px) {
    .auth-right {
        padding: 24px 16px;
    }
    .auth-card-body {
        padding: 28px 20px;
    }
    .auth-card-title {
        font-size: 22px;
    }
}
</style>

@push('scripts')
<script>
function togglePinVisibility(id) {
    var field = document.getElementById(id);
    var wrap = field.closest('.auth-input-wrap');
    var eyeOpen = wrap.querySelector('.eye-open');
    var eyeClosed = wrap.querySelector('.eye-closed');
    if (field.type === 'password') {
        field.type = 'text';
        eyeOpen.style.display = 'none';
        eyeClosed.style.display = 'block';
    } else {
        field.type = 'password';
        eyeOpen.style.display = 'block';
        eyeClosed.style.display = 'none';
    }
}

function switchMethod(method) {
    var pin = document.getElementById('pinField');
    var pass = document.getElementById('passwordField');
    document.getElementById('login_method').value = method;
    document.querySelectorAll('.auth-login-method').forEach(function(btn) {
        btn.classList.toggle('active', btn.dataset.method === method);
    });
    if (method === 'password') {
        pin.style.display = 'none';
        pass.style.display = 'flex';
        document.getElementById('password').focus();
        document.getElementById('pin').required = false;
        document.getElementById('password').required = true;
    } else {
        pass.style.display = 'none';
        pin.style.display = 'flex';
        document.getElementById('pin').focus();
        document.getElementById('password').required = false;
        document.getElementById('pin').required = true;
    }
}

document.querySelectorAll('.auth-login-method').forEach(function(btn) {
    btn.addEventListener('click', function() { switchMethod(this.dataset.method); });
});

switchMethod(document.getElementById('login_method').value);

document.getElementById('loginForm').addEventListener('submit', function() {
    var btn = document.getElementById('loginBtn');
    btn.querySelector('.auth-submit-text').style.display = 'none';
    btn.querySelector('.auth-submit-spinner').style.display = 'inline-flex';
    btn.disabled = true;
});
</script>
@endpush

@endsection