@extends('layouts.master')

@section('content')
<style>
    body {
        background: linear-gradient(145deg, #e0eafc, #cfdef3);
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    .login-card {
        width: 100%;
        max-width: 420px;
        padding: 2.5rem 2rem;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0 20px 30px rgba(0, 0, 0, 0.08);
    }

    .login-card .logo {
        max-width: 100px;
        margin-bottom: 1rem;
    }

    .login-card h4 {
        font-weight: 700;
        margin-bottom: 0.75rem;
    }

    .form-control {
        border-radius: 8px;
    }

    .btn-primary {
        border-radius: 8px;
        font-weight: 600;
        padding: 0.6rem;
    }

    .toggle-password {
        cursor: pointer;
    }

    .text-small {
        font-size: 0.85rem;
    }
</style>

<div class="login-card">
    <div class="text-center">
        <a href="{{ url('/') }}">
            @if ($setting && $setting->feature_image)
                <img src="{{ $setting->feature_image->getPath() }}" class="logo" alt="{{ $setting->title }}" />
            @else
                <x-form.table_image url="{{ asset('front_assets/img/logo.png') }}" />
            @endif
        </a>
    </div>

    <h4 class="text-center">Welcome Back</h4>
    <p class="text-center text-muted text-small">Login to your admin account</p>

    <form method="POST" action="#" id="formAuthentication">
        @csrf
        <div class="mb-3">
            <label for="email" class="form-label">Email Address</label>
            <input type="text"
                   name="email"
                   class="form-control @error('email') is-invalid @enderror"
                   value="{{ old('email') }}"
                   placeholder="you@example.com"
                   id="email" />
            @error('email')
                <span class="invalid-feedback d-block">{{ $message }}</span>
            @enderror
        </div>

        <div class="mb-3">
            <label for="password" class="form-label d-flex justify-content-between">
                <span>Password</span>
                {{-- <a href="{{ route('password.request') }}" class="text-small text-decoration-underline">Forgot?</a> --}}
            </label>
            <div class="input-group input-group-merge">
                <input type="password"
                       id="password"
                       name="password"
                       class="form-control @error('password') is-invalid @enderror"
                       placeholder="••••••••••••">
                <span class="input-group-text toggle-password"><i class="bx bx-hide"></i></span>
            </div>
            @error('password')
                <span class="invalid-feedback d-block">{{ $message }}</span>
            @enderror
        </div>

        <div class="mb-3 d-grid">
            <button type="submit" class="btn btn-primary w-100">
                <i class="bx bx-log-in-circle me-1"></i> Login
            </button>
        </div>

        {{-- <div class="text-center mt-2">
            <a href="{{ url('login/google') }}" class="btn btn-outline-danger w-100 mb-2">Login with Google</a>
            <a href="{{ url('login/facebook') }}" class="btn btn-outline-primary w-100">Login with Facebook</a>
        </div> --}}
    </form>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const togglePassword = document.querySelector('.toggle-password');
        const passwordInput = document.getElementById('password');

        togglePassword.addEventListener('click', function () {
            const icon = this.querySelector('i');
            const show = passwordInput.type === 'password';
            passwordInput.type = show ? 'text' : 'password';
            icon.classList.toggle('bx-hide', !show);
            icon.classList.toggle('bx-show', show);
        });
    });
</script>
@endsection